TwitterBootstrapWithRails の履歴(No.4)

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

Tag: TwitterBootstrapWithRails

目次†

参考情報†

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

サンプル†

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

前提†

• 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を作る†

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

  rvm --create 1.9.3-p125@tbrsample

• それを選択

  rvm gemset use tbrsample

railsのインストール†

• gemでrailsインストール

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

railsアプリを生成†

アプリのひな形を作る†

• アプリ生成

  rails new tbrsample

• Gemfileを編集し以下を追加

  gem "twitter-bootstrap-rails"

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

  bundle install --without=production

Bootstrapを生成する†

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

  rails g bootstrap:install

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

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

残り†

• レイアウトを変更。

  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>
  

サーバー起動†

• サーバーを起動する

  rails s 

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

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

kaminariでpaginateするとずれる†

• 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: "..."