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

執筆者:

関連記事

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

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

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

no image

Rails3.2でユーザー権限を細かく設定~Devise + cancan

      参考 cancan でモテカワ♥愛され権限管理 How To: Integrate with CanCan for roles management &nbs …

Rails3.2とBackbone.jsでサーバーサイドのソーティング

By: Haldane Martin – CC BY 2.0   Rails3.2とBackbone.jsでサーバーサイドのフィルタリング 次はソートを実装したい 目次1 サーバ …

RailsでECサイト構築2 注文してみる~spree

  前提 RailsでECサイト構築~spree さっきは日本に発送できなかったので、最小限の設定をして注文から入金・発送までの一連の流れをみてみる 目次1 設定2 注文してみる3 入金・発 …