TwitterBootstrapWithRails の履歴(No.4)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• TwitterBootstrapWithRails へ行く。
  • 1 (2012-02-21 (火) 11:30:44)
  • 2 (2012-02-21 (火) 11:50:50)
  • 3 (2012-02-23 (木) 18:11:27)
  • 4 (2012-02-29 (水) 11:54:41)
  • 5 (2013-04-12 (金) 14:52:39)
  • 6 (2013-05-01 (水) 16:12:26)
  • 7 (2013-05-10 (金) 22:11:36)
  • 8 (2013-06-07 (金) 16:49:03)
  • 9 (2013-09-06 (金) 07:37:57)

&tag(TwitterBootstrapWithRails);

目次†[edit]

参考情報†[edit]

• seyhunak/twitter-bootstrap-rails - GitHub…公式サイト
• twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。 - ppworks blog

サンプル†[edit]

• 参考情報に従ってサンプルを作ってみる

前提†[edit]

• 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)。その場合、つぎのようにインストールするとよいらしい。

  rvm install ruby-1.9.3 --with-openssl-dir=/opt/local --with-iconv-dir=/opt/local

gemsetを作る†[edit]

• @の後に指定された部分が、gemsetの名前(この場合tbrsample)

  rvm --create 1.9.3-p125@tbrsample

• それを選択

  rvm gemset use tbrsample

railsのインストール†[edit]

• gemでrailsインストール

  gem install rails --no-ri --no-rdoc

railsアプリを生成†[edit]

アプリのひな形を作る†[edit]

• アプリ生成

  rails new tbrsample

• Gemfileを編集し以下を追加

  gem "twitter-bootstrap-rails"

• bundle installで必要なファイルをセットアップ。withoutを指定すればそこは除外される。

  bundle install --without=production

Bootstrapを生成する†[edit]

• raisl gでファイルを生成する

  rails g bootstrap:install

• 次のファイルが作られる

  app/assets/javascripts/bootstrap.jp.coffee
  app/assets/stylesheets/bootstrap.css.less
  

残り†[edit]

• レイアウトを変更。

  rails g bootstrap:layout application fixed( or fluid)

• コントローラーを生成する。

  rails g controller pages index

• app/views/pages/index.html.erbを編集。

  <div class="hero-unit">
    <h1>Hello, よろしくな</h1>
  </div>
  

サーバー起動†[edit]

• サーバーを起動する

  rails s 

• http://localhost:3000/pages/index にアクセス

トラブルシューティング†[edit]

kaminariでpaginateするとずれる†[edit]

• Rails3 で twtter bootstrap と ページネイトの kaminari を使うと表示が崩れる件 - 牌語備忘録 - pygoを参考にして修正する。
• application.cssを修正する

  /*
   *= 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を編集。

  ja:
    views:
      pagination:
        first: "« 最初"
        last: "最後»"
        previous: "‹ 前"
        next: "次 ›"
        truncate: "..."