Gemfile


gem 'therubyracer' # javascript runtime。lessをコンパイルするために必要
gem 'less-rails' # Railsでlessを使えるようにする。Bootstrapがlessで書かれているため
gem 'twitter-bootstrap-rails' # Bootstrapの本体

ターミナル

$ bundle install
$ rails g bootstrap:install
      insert  app/assets/javascripts/application.js
      create  app/assets/javascripts/bootstrap.js.coffee
      create  app/assets/stylesheets/bootstrap_and_overrides.css.less
      create  config/locales/en.bootstrap.yml
        gsub  app/assets/stylesheets/application.css
        gsub  app/assets/stylesheets/application.css

03 #4 Gridシステムを使ってみよう

Gridシステムとは
横幅を12に分割したレイアウトを作る
(作り方)
例)(左)3 (中央)6 (右)3

rowクラス(div)を作る
1の配下にcol-sm-3クラス(div)を作る
1の配下にcol-sm-6クラス(div)を作る
1の配下にcol-sm-3クラス(div)を作る
(左右に余白を付け中央揃えにしたい場合)
1の親要素にcontainerクラス(div)を作る
(参照)sm: small(ブラウザの幅が狭い場合)(>768px)
　　 xm: extra small(ブラウザの幅がさらに狭い場合)(<768px)
　　 md: medium(ブラウザの幅が普通の場合)(>=992px)
　　 lg: large(ブラウザの幅が広い場合)(>=1200px)
(狭いブラウザでは非表示にしたい場合)
hidden-xsクラスを追加
(狭いブラウザのみ表示にしたい場合)
visible-xsクラスを追加

05 tableのスタイリングをしよう

(テーブルのデザイン)

tableクラスをつける(tableタグ)
(奇数と偶数で色分けする)
table-stripedクラスをつける(tableタグ)
(枠線をつける)
table-borderedクラスをつける(tableタグ)
(カーソルにあわせて色が変わる)
table-hoverクラスをつける(tableタグ)
(データフィールドを小さくする)
table-condensedクラスをつける(tableタグ)
(特定のテーブルだけ別の色にする)
warningクラスをつける(trタグ)

06 #07 formのスタイリングをしよう

formタグ配下にform-groupクラス(div)を作る
control-labelクラスのlabelタグを作る
form-controlクラスのinputタグを作る
submit用のフィールドを作る為formタグ配下にform-groupクラス(div)を作る(1とは別に)
input type="submit"を作りボタン用のbtn btn-primaryクラスをつける
(入力ミスを入力の下に表示させる場合)
を作る
(エラーがあった場合赤く表示)
1にhas-errorクラスをつける
(入力フィールドの横にsubmitボタンを置く)
formタグにform-inlineクラスをつける
(ラベルを音声だけ読み上げて表示しない)
labelタグにsr-onlyクラスをつける
(ラベルと入力フォームだけ横並びにしsubmitボタンを下にする 10〜13)
フォームのクラスをform-horizontalにする
labelタグにcol-sm-2をつける
inputの親要素にcol-sm-4クラスを作る(div)
submitのinputタグの親要素にcol-sm-offset-2クラス(余白の為)とcol-sm-4クラスを作る(div)

08 Glyphiconsとボタンを使おう

(Bootstrapのアイコンを使う)
http://getbootstrap.com/components/
から探す

09 dropdownメニューを使おう

(ボタンにドロップダウン機能をつける)

buttonタグにdropdown-toggleクラスをつける
buttonタグにdata-toggle="dropdown"をつける
プルダウンしたいタグ(例: ul要素)にdropdown-menuクラスをつける
(メニューを分割する)
deviderクラスをもつliタグを作る

10 breadcrumb､pagin...

パンくずリスト

breadcrumbクラス(ulタグ)を作る
(現在のページをアクティブにする)
liタグにactiveクラスをつける
ページング
paginationクラス(ulタグ)を作る
(クリックできなくする)
liタグにdisabledクラスをつける
次へ前へをつくる
pagerクラス(ulタグ)を作る
(前へ)liタグにpreviousクラスをつける
(次へ)liタグにnextクラスをつける

11 Navbarを使ってみよう

ナビゲーションバーを作成(HTML5からの新機能)
ウェブサイト内の他のページへのリンクや、ページ内リンクなど
主要なナビゲーションとなるセクションを示す事に適している

navタグ(navberクラス navber-defaultクラス)を作成
(タイトルとなる部分)
navタグの配下にnavbar-headerクラス(divタグ)を作る
タイトル本体のタグ(例: aタグ)にnavbar-brandクラスをつける
(メニュー部分)
navタグの配下にnavbar-navクラス(ulタグ)を作る
(リンクの一部を右にとばす)
navタグの配下にnavbar-navクラスとnavber-right(ulタグ)を作る
(現在のルートをアクティブにする)
liタグにactiveクラスをつける
(ナビゲーションバーのスタイルを変更)
1のnavbar-defaultを変更(例: navbar-inverse)
(ナビゲーションバーを常に上に表示)
navタグにnavbar-fixed-topをつける

12 Navbarをスマホ対応にしよう

navbar-headerクラス(divタグ)の配下にbuttonタグを作る
1の属性をclass="navbar-toggle" data-toggle="collapse" data-target=".target"とする
buttonタグの配下に(横線)を入れる
navbar-navクラスの親要素に
をつくる
13 label､badge､alert､panelを使おう

お知らせ機能
(ラベル作成)
1. labelクラス(spanタグ)を作る
  (バッチ作成)
2. badgeクラス(spanタグ)を作る
  (アラート作成)
3. alart alart-infoクラス(divタグ)を作る
4. 3の配下に×を作成
15 Modalウィンドウを使ってみよ...

16 Tabメニューを使ってみよう

17 tooltip､popoverを...

フォームの作り方
(1)form_forの上に

を入れ、
を<% end %>の下につける
(2)各項目（名前など）を
で囲む
(3)labelには、カンマのあとに:class => "col-sm-3 control-label"を付け加え、
inputには、まず
で囲み、<%= %>のなかにclass="form-control"を付け加える。
(参照)https://sites.google.com/site/rubyonrailsapps/view_tips/railsnoformwobootstrapde-shi-zhuangsurutoki

(リンクからのみ)サブミットボタンが使えなくなった場合

assets/layouts/application.htmlから
'data-turbolinks-track' => true を消去

<枠の角を丸める>
・標準

wellのサンプル、角丸、影付き

・大きいサイズ

wellのサンプル、角丸、影付き

・小さいサイズ

wellのサンプル、角丸、影付き

CSSの定義

.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.well-lg {
padding: 24px;
border-radius: 6px;
}

.well-sm {
padding: 9px;
border-radius: 3px;
}

<ナビゲーションバーにフォームを配置>
(参照)http://codezine.jp/article/detail/8182

要素をセンタリング