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
-,

執筆者:

関連記事

no image

Rails3.2でTwitter Bootstrap2対応のkaminariテーマを自作する〜というよりcucumber

環境 Rails3.2でページネーションをTwitter Bootstrapに対応させる~kaminariの続き すでにテーマがあるので適当に作っていたら、ページネーションをクリックしても昇順・降順の …

Rails4.0でもajaxなデータテーブルを使う~ajax-datatables

Railsでajaxなテーブルを使う~datatables Rails4でのJSONテンプレート~jbuilder+rabl+ruby 目次1 index.json.jbuilder2 tasks.j …

RailsでECサイト構築7 デプロイ~spree+apache2+passenger

  前提 Rails3.2のアプリをデプロイ~apache+passenger+postgresql Rails3.2+Apache2+Passenger環境でSSLを使ってみる &nbsp …

状況に応じてRailsのフォームの種類を変える

By: Heidi De Vries – CC BY 2.0 目次1 前提2 仕様の決定3 正規表現の変更4 メタプログラミング第一歩5 helper6 view7 できた8 できてない9 …

no image

Rails3.2.8で自動テスト環境を整える〜cucumber+spork+guard

環境 ruby 1.9.3 & rails 3.2.8 参考 cucumber + spork + guard + factory_girl あってもよいが[crayon-5c19273ad7 …