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/
から探す
- iタグに使いたいアイコンのクラスをつける
(Bootstrapのボタンを使う)
http://getbootstrap.com/css/#buttons
から探す - buttonタグに使いたいアイコンのクラスをつける
(ボタンのグループ化) - buttonタグの親要素にbtn-groupクラス(div)を作る
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を使おう
お知らせ機能
(ラベル作成)- labelクラス(spanタグ)を作る
(バッチ作成) - badgeクラス(spanタグ)を作る
(アラート作成) - alart alart-infoクラス(divタグ)を作る
- 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要素をセンタリング
- labelクラス(spanタグ)を作る