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

執筆者:

関連記事

no image

Rails3でTwitter Bootstrapのサーチフォームを実装する~form_tag

目次1 git & gitolite2 仕組みを考える3 フィーチャの作成4 Viewの作成5 Controllerの作成6 Modelの作成7 テストが通らない!8 mergeして終わり g …

Rails3.2でhtml5で取得した位置情報をAjaxで住所表示する~geocoder

    HTML5ではブラウザからユーザーのPCの位置情報を取得することができるGeoLocation APIというものがある (もちろんデフォルトではユーザーに確認をする設定にな …

状況に応じてRailsのフォームの種類を変える

By: Heidi De Vries – CC BY 2.0 目次1 前提2 仕様の決定3 正規表現の変更4 メタプログラミング第一歩5 helper6 view7 できた8 できてない9 …

Rails3.2でコードのお作法を指摘してもらう~Rails Best Practices

コードのお作法を自動でチェックしてくれるrails_best_practiceを導入した

あとは、Railsのルートで[crayon- …

Rails4でのJSONテンプレート~jbuilder+rabl+ruby

By: Wonderlane – CC BY 2.0[/caption] Rails4からJSONも標準でjbuilderを使ってテンプレートから出力できるようになった けど、しっくり来な …