TwitterBootstrapWithRails/古い情報

Tag: TwitterBootstrapWithRails/古い情報

目次†

参考情報†

サンプル†

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

前提†

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

Contents

メニュー

• about
• blog
• blog(はてな)

配布物

• FaEdit
  • ヘルプ
  • BugTrack
• WikiHelpMaker
  • ヘルプ
  • BugTrack

ゲーム

• 時のオカリナ3DS
• ドラゴンズドグマ
• スプラトゥーン2
• DQB2
• ジョイコン

ショートカット

• 用語集A-Z
• 用語集ア-ワ

今日の20件

最新の20件