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でajaxなフォルダツリーを導入する4~dynatree-rails & Drag’n’Drop

wwwendt.de/tech/dynatree/doc/dynatree-doc.html wwwendt.de/tech/dynatree/doc/samples.html 今日はドラッグアンドド …

Ubuntu Server 12.04.1にいま流行のDiscourseをインストールしてみた

By: Wonderlane – CC BY 2.0 目次1 はじめに2 環境3 インストール4 情報 はじめに すでにGitHubのトレンドRepoでスター数がTwitterのFligh …

RubyでWikiをはじめる〜gollum

目次1 環境2 インストール3  ハロー Gollum4 Powでつかう5 情報 環境 Ruby 2.1.0 Mac OSX Mavericks インストール 自分の環境ではこれをいれとかないとインス …

RailsでこんにちはBackbone.Marionette

By: palindrome6996 – CC BY 2.0 自分の中でmarionette熱がだんだんと高まりつつあり、特徴的なItemView、CollectionView、Compo …

RedcarpetでTOC表示

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