RailsでTwitterBootstrap Railsで使えるGem

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

投稿日:

 

sass-rails-bootstrap導入

乱立しすぎ・・・

  1. bootstrap-sass
  2. bootstrap-sass-rails
  3. sass-rails-bootstrap
  4. sass-twitter-bootstrap-rails

今回はこのうち3をつかった

とくに比較はしていない

* いつのまにか消失してました orz

以下、人気の高い1で書き直しました

* compassを使ったバージョン

vwall / compass-twitter-bootstrap

Gemfile

 

bundle

stylesheet

base.css.sassをつくる

scaffolds.css.scssは削除した

application.js

Layout関係

TwitterBootstrapでは全体をdiv.containerでくくる(流動的な場合はcontainer-fruid)

Glidシステムを使うには.row>.span9+.span3とか

 

Notification

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

railscasts.com/episodes/329-more-on-twitter-bootstrap?language=ja&view=asciicast

 

confirmをmodalにする

base.js.coffeeをつくる

lesseverything.com/blog/archives/2012/07/18/customizing-confirmation-dialog-in-rails/

destroyとか試してみる

SimpleForm導入

github.com/plataformatec/simple_form

Gemfile

bundle

generate

simple_form_for

  1.  inputで適切なフォームを用意してくれる
  2. フォームの形式を指定する場合はas:
  3. text_areaのrowsは調整できる
  4. class:でクラスを指定できる

基本horizontal-formに

github.com/plataformatec/simple_form/wiki/Twitter-Bootstrap-v2-and-simple_form-v2

config/initializers/simple_form_bootstrap.rb

つぎの2行を追加する

いい感じに

validationもおk

Buttonもラッピングする

ただ、buttonだけがうまくラッピングできてない(一番左にボタンがある)

lib/extras/simple_form_extensions.rbをつくる

autoloadに指定

config/application.rb

requireを指定

config/initializers/simple_form_bootstrap.rbの最初に追加

そしてviewのbuttonでこれをつかう

kaminari導入

Gemfile

bundle

bootstrap用のテーマをgenerate

controller

 view

 

 jQuery dataTablesの導入

Gemfile

bundle

view

tableにidかclassをつけて、theadとtbodyをつける

 issues.js.coffee

tableにclassをつける

一部のsortingを無効にする

ajax化はRailsでajaxなテーブルを使う~datatablesを参照のこと

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

執筆者:

関連記事

Ruby+guardでSass+Compass+CoffeeScriptの自動コンパイル環境を整える

    Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript すでにCoffeeScriptを自動Mak …

no image

Rubyからdocxを生成する

    前提 Rubyでdocxをいろいろ分析してみた 変数の仕様~正規表現 いろいろなパターンで試してみた 例えば、こんな文 [crayon-5b4c6f548226860222 …

no image

Rails3.2でリアルタイムメッセージングサービスをherokuにデプロイしたよ〜private_pub,Faye

参考 Rails3.2でリアルタイムメッセージング~Private_pub、Faye さっそくherokuにあげてみた ブラウザを2つ起動して並べてみれば投稿した内容が即時にほかのブラウザに反映するの …

Rails3.2+Mongoidでログイン機能~devise

  目次1 Gemfile2 generate3 model4 試す5 Login/Logout6 アクセス制限7 メニュー構成を整える8 翻訳 I18n9 見た目を整える Gemfile …

no image

Ubuntu ServerのGuardからネットワーク経由でWindowsのブラウザをリロードする~guard-livereload

Ubuntu12.04.1でCoffeeScriptの自動makeとブラウザの自動リロード~guard-coffeescript   Ubuntu ServerのGuardからGrowl f …