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

執筆者:

関連記事

FullCalendarのagendaViewでselectの場所がずれる問題

  By: Ben Piddington 前回 Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails   gemは最新の1 …

RedcarpetでTOC表示

By: epSos .de – CC BY 2.0 目次1 Redcarpet2 Redcarpetの使い方3 TOCを表示する4 できた5 Bootstrapのaffixとscrolls …

no image

Private_pubでのJSON通信の方法

  前回 Rails3.2でBackbone.jsとPrivate_pubでToDoアプリをリアルタイム化(できた!)   Gemfileへの追加とbundleの実行 privat …

Deviseのユーザーと既存のMongoidモデルを関連づける

前提 Rails3.2でHTML5で取得した位置情報をMongoDBに保存してGoogleMapsでみる~mongoid、gmaps4rails Rails3.2+Mongoidでログイン機能~dev …

Rails3.2でFacebook風インターフェイスでタグづけ〜acts-as-taggable-on+jquery.tokenInput

By: Mauquoy Token Company – CC BY 2.0 railscasts.com/episodes/258-token-fields?language=ja&#03