RailsでTwitterBootstrap Railsで使えるGem

RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails

投稿日:

環境 ruby 1.9.3  & rails 3.2.8

適当なscaffoldを作っておく

 

github.com/seyhunak/twitter-bootstrap-rails

有料ですが月額$9.00で見放題なのでお得です 今後は隔週で動画が追加されるようです

Gemfile & bundle

Gemfileのassetsグループにgemを加えて、 bundle

次のスクリプトが追加される

インストール

installスクリプトを実行すると次のファイルが追加される

レイアウトテンプレートを追加

bootstrap:layoutスクリプトを実行するとブートストラップ用のapplication.html.erbを書き換える

強制書換をするときは-f オプションをつける

 

 

Viewテンプレートを追加

bootstrap:themed + 対象でブートストラップ用のviewを追加する

パーシャル用のテンプレート

2種類のパーシャル用のテンプレート

 

フラッシュメッセージを表示する

参考 More on Twitter Bootstrap @Railscasts

LESSを使う

参考 CSS3対応の為のLESSスニペットメモ

application.cssにrequire bootstrap_and_overridesを追加

 

面倒くさいブラウザ対応もまとめて書ける

page-headerクラスに角丸、グラデーション、影をつけるのは次のような感じでlessファイルに

 

 

* SASSを使うなら

Rails3.2でTwitterBootstrap導入のあれこれ

-RailsでTwitterBootstrap, Railsで使えるGem
-,

執筆者:

関連記事

Rails4でのJSONテンプレート~jbuilder+rabl+ruby

By: Wonderlane – CC BY 2.0[/caption] Rails4からJSONも標準でjbuilderを使ってテンプレートから出力できるようになった けど、しっくり来な …

Rails3.2とBackbone.jsでサーバーサイドのフィルタリング

By: Haldane Martin – CC BY 2.0   テーブルに表示されているデータをサーチバーに入力した語で絞り込みたい こういうテーブルフィルタリングを実現する仕 …

WindowsのRubyでExcelを操作~WIN32OLE

By: Môsieur J. version 9.1 – CC BY 2.0 目次1 WIN32OLE2 hello world3 Excelオブジェクトモデル4 絶対パスを取得するメソッ …

SASS/SCSSでButtonをカスタマイズするならSassy Buttonsが簡単

By: Meike Schönhütte – CC BY 2.0[/caption]   jaredhardy.com/sassy-buttons/ 目次1 Railsでのインス …

Rails3.2でTwitterBootstrap導入のあれこれ

  目次1 sass-rails-bootstrap導入2 Layout関係3 Notification4 confirmをmodalにする5 SimpleForm導入6 kaminari導 …