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でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails

no image

kaminari + Twitter Bootstrap2テーマでFirst,Prev,Next,Lastだけおかしい場合

前につくったTwitter Bootstrap2用のkaminariテーマをコピーして使おうとしたら表題の通り、First,Prev,Next,Lastがおかしい あと…も表示されない G …

Railsでチェックボックスで複数選択するとき〜check_box_tag

By: Luca Masters – CC BY 2.0 目次1 問題2 アンサー3 情報 問題 チェックボックスで複数選択可のフォームでうまくparamsにはいらない 例1 [crayo …

no image

Carrierwaveでpdfのサムネイルを作成する