bootstrapの使い方


<Bootstrapをrailsで使う為のgem>

```ruby:Gemfile

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

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

#05 tableのスタイリングをしよう
(テーブルのデザイン)
1. tableクラスをつける(tableタグ)
(奇数と偶数で色分けする)
2. table-stripedクラスをつける(tableタグ)
(枠線をつける)
3. table-borderedクラスをつける(tableタグ)
(カーソルにあわせて色が変わる)
4. table-hoverクラスをつける(tableタグ)
(データフィールドを小さくする)
5. table-condensedクラスをつける(tableタグ)
(特定のテーブルだけ別の色にする)
6. warningクラスをつける(trタグ)

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

#08 Glyphiconsとボタンを使おう
(Bootstrapのアイコンを使う)
http://getbootstrap.com/components/
から探す
1. iタグに使いたいアイコンのクラスをつける
(Bootstrapのボタンを使う)
http://getbootstrap.com/css/#buttons
から探す
2. buttonタグに使いたいアイコンのクラスをつける
(ボタンのグループ化)
3. buttonタグの親要素にbtn-groupクラス(div)を作る

#09 dropdownメニューを使おう
(ボタンにドロップダウン機能をつける)
1. buttonタグにdropdown-toggleクラスをつける
2. buttonタグにdata-toggle="dropdown"をつける
3. プルダウンしたいタグ(例: ul要素)にdropdown-menuクラスをつける
(メニューを分割する)
4. deviderクラスをもつliタグを作る

#10 breadcrumb､pagin...
パンくずリスト
1. breadcrumbクラス(ulタグ)を作る
(現在のページをアクティブにする)
2. liタグにactiveクラスをつける
ページング
3. paginationクラス(ulタグ)を作る
(クリックできなくする)
4. liタグにdisabledクラスをつける
次へ前へをつくる
5. pagerクラス(ulタグ)を作る
6. (前へ)liタグにpreviousクラスをつける
7. (次へ)liタグにnextクラスをつける

#11 Navbarを使ってみよう
ナビゲーションバーを作成(HTML5からの新機能)
ウェブサイト内の他のページへのリンクや、ページ内リンクなど
主要なナビゲーションとなるセクションを示す事に適している
1. navタグ(navberクラス navber-defaultクラス)を作成
(タイトルとなる部分)
2. navタグの配下にnavbar-headerクラス(divタグ)を作る
3. タイトル本体のタグ(例: aタグ)にnavbar-brandクラスをつける
(メニュー部分)
4. navタグの配下にnavbar-navクラス(ulタグ)を作る
(リンクの一部を右にとばす)
5. navタグの配下にnavbar-navクラスとnavber-right(ulタグ)を作る
(現在のルートをアクティブにする)
6. liタグにactiveクラスをつける
(ナビゲーションバーのスタイルを変更)
7. 1のnavbar-defaultを変更(例: navbar-inverse)
(ナビゲーションバーを常に上に表示)
8. navタグにnavbar-fixed-topをつける

#12 Navbarをスマホ対応にしよう
1. navbar-headerクラス(divタグ)の配下にbuttonタグを作る
2. 1の属性をclass="navbar-toggle" data-toggle="collapse" data-target=".target"とする
3. buttonタグの配下に<span class="icon_bar"></span>(横線)を入れる
4. navbar-navクラスの親要素に<div class="collapse navbar-collapse target">をつくる

#13 label､badge､alert､panelを使おう
お知らせ機能
(ラベル作成)
1. labelクラス(spanタグ)を作る
(バッチ作成)
2. badgeクラス(spanタグ)を作る
(アラート作成)
3. alart alart-infoクラス(divタグ)を作る
4. 3の配下に<button class="close" data-dismiss="alart">&times;</button>を作成

#15 Modalウィンドウを使ってみよ...
#16 Tabメニューを使ってみよう
#17 tooltip､popoverを...





<railsのformをbootstrapで実装するとき>

フォームの作り方
(1)form_forの上に<div class="form-horizontal" role="form">を入れ、</div>を<% end %>の下につける
(2)各項目（名前など）を <div class="form-group"></div> で囲む
(3)labelには、カンマのあとに:class => "col-sm-3 control-label"を付け加え、
    inputには、 まず <div class="col-sm-7"></div> で囲み、<%=  %>のなかにclass="form-control"を付け加える。

(参照)https://sites.google.com/site/rubyonrailsapps/view_tips/railsnoformwobootstrapde-shi-zhuangsurutoki

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

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

<枠の角を丸める>
・標準
<div class="well">wellのサンプル、角丸、影付き</div>

・大きいサイズ
<div class="well well-lg">wellのサンプル、角丸、影付き</div>

・小さいサイズ
<div class="well well-sm">wellのサンプル、角丸、影付き</div>

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

要素をセンタリング
<div class="text-center"></div>