- 追加された行はこの色です。
- 削除された行はこの色です。
&tag(TwitterBootstrapWithRails);
*目次 [#z420c285]
#contents
*参考情報 [#j95158de]
-[[Rails]]
-[[Rails3]]
-[[TwitterBootstrap]]
-[[seyhunak/twitter-bootstrap-rails - GitHub:https://github.com/seyhunak/twitter-bootstrap-rails]]…公式サイト
-[[twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。 - ppworks blog:http://ppworks.hatenablog.jp/entry/2012/02/19/033644]]
-[[Bootstrap：基本的な事:http://greenapple-room.com/conc/user/TwitterBootstrap/bootstrap_02.html]]
-[[Twitter Bootstrapのグリッド機能で段組を作成 [ホームページ作成] All About:http://allabout.co.jp/gm/gc/394128/]]
-[[モダンなデザインが簡単に使える Twitter Bootstrap [ホームページ作成] All About:http://allabout.co.jp/gm/gc/393078/]]
-[[ツイッター・ブートストラップ使用例:http://guide.withabout.net/guide/gp332/393078/bootstrap-sample.html]]
-[[./古い情報]]
*サンプル [#dc4cbf5a]
-参考情報に従ってサンプルを作ってみる
*Bootstrap3を使うには [#b39deb5a]
-https://github.com/seyhunak/twitter-bootstrap-rails/tree/bootstrap3 にある明示的に別のブランチを使わないとだめ。
**前提 [#g82cc92a]
-rvmをインストールしておく。
-ruby-1.9.3-p125をあらかじめインストールしておく。
$ rvm install ruby-1.9.3-p125
-MacPortsを使っている場合http.rbでSegmentation faultが発生するかもしれない([[Fixing a segmentation fault in Ruby 1.9.3:http://blog-jekyll.55minutes.com/2012/01/10/fixing-a-segmentation-fault-in-ruby-193/]])。その場合、つぎのようにインストールするとよいらしい。
rvm install ruby-1.9.3 --with-openssl-dir=/opt/local --with-iconv-dir=/opt/local
**gemsetを作る [#e95bfd46]
-@の後に指定された部分が、gemsetの名前(この場合tbrsample)
rvm --create 1.9.3-p125@tbrsample
-それを選択
rvm gemset use tbrsample
**railsのインストール [#r03705f9]
-gemでrailsインストール
gem install rails --no-ri --no-rdoc
**railsアプリを生成 [#g6cc4acc]
***アプリのひな形を作る [#l28d44f3]
-アプリ生成
rails new tbrsample
-Gemfileを編集し以下を追加
gem "twitter-bootstrap-rails"
-bundle installで必要なファイルをセットアップ。withoutを指定すればそこは除外される。
bundle install --without=production
***Bootstrapを生成する [#j19c2be7]
-raisl gでファイルを生成する
rails g bootstrap:install
-次のファイルが作られる
*twitter-bootstrap-rails 2.2.6 [#z2eaae88]
**概要 [#p34014c0]
-css版とless版のインストール方法がことなる。
-less版をいれたほうがカスタマイズが容易っぽい。
**インストール [#zc47872d]
-Gemfileの編集し以下の3行を追加
#pre{{
app/assets/javascripts/bootstrap.jp.coffee
app/assets/stylesheets/bootstrap.css.less
gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem 'twitter-bootstrap-rails'
}}
***残り [#jcdc4ac7]
-レイアウトを変更。
rails g bootstrap:layout application fixed( or fluid)
-コントローラーを生成する。
rails g controller pages index
-app/views/pages/index.html.erbを編集。
-bundle installの実行
bundle install --path vendor/bundle
-cssなどの生成
bundle exec rails generate bootstrap:install
-layoutの生成(固定レイアウトの例)
bundle exec rails g bootstrap:layout application fixed
**修正 [#m0a25b06]
-そのままだとヘッダー部分が本文と重なっており萎える。bootstrap_and_overrides.css.lessに以下を追加。
#pre{{
<div class="hero-unit">
<h1>Hello, よろしくな</h1>
</div>
}}
**サーバー起動 [#ead7492b]
-サーバーを起動する
rails s
-http://localhost:3000/pages/index にアクセス
*トラブルシューティング [#k53c172a]
** kaminariでpaginateするとずれる [#x6fb5f00]
-[[Rails3 で twtter bootstrap と ページネイトの kaminari を使うと表示が崩れる件 - 牌語備忘録 - pygo:http://d.hatena.ne.jp/CortYuming/20120201/p1]]を参考にして修正する。
-application.cssを修正する
#pre{{
/*
*= require twitter/bootstrap
*/
.pagination span.page.current,
.pagination span.page.gap {
float: left;
padding: 0 14px;
line-height: 34px;
border-right: 1px solid #DDD;
text-decoration: none;
body {
padding-top: 60px;
}
.pagination span.first a {
border-left: 1px solid #DDD;
}
.pagination span.page.current {
border-top: 1px solid #DDD;
border-bottom: 1px solid #DDD;
background-color: #C7EEFE;
}
}}
-日本語に対応するには、Gemfileに以下を追加
gem 'i18n_generators'
-ファイルを生成
bundle
rails g i18n ja
-/config/locales/translation_ja.ymlを編集。
#pre{{
ja:
views:
pagination:
first: "« 最初"
last: "最後»"
previous: "‹ 前"
next: "次 ›"
truncate: "..."
}}
**$(window).loadとか$(window).readyが動かない [#qcedf733]
-作成したapplication.html.erbの一番下でjavascriptをincludeしているのが原因っぽい。headタグ内部にもっていくと解決する。
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
