&tag(TwitterBootstrapWithRails); *目次 [#z420c285] #contents *参考情報 [#j95158de] -[[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]] *サンプル [#dc4cbf5a] -参考情報に従ってサンプルを作ってみる **前提 [#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 -次のファイルが作られる #pre{{ app/assets/javascripts/bootstrap.jp.coffee app/assets/stylesheets/bootstrap.css.less }} ***残り [#jcdc4ac7] -レイアウトを変更。 rails g bootstrap:layout application fixed( or fluid) -コントローラーを生成する。 rails g controller pages index -app/views/pages/index.html.erbを編集。 #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; } .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: "..." }}