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

執筆者:

関連記事

WindowsのRubyでExcelを操作~WIN32OLE

By: Môsieur J. version 9.1 – CC BY 2.0 目次1 WIN32OLE2 hello world3 Excelオブジェクトモデル4 絶対パスを取得するメソッ …

no image

Rails4とPostreSQL9.3で全文検索〜pg_bigm

目次1 準備2 migration3  使い方 準備 エクステンションを導入しておく Ubuntu Server12.04でPostgreSQL9.3をつかう〜pg_bigmで全文検索 migrati …

no image

Ubuntu Server 12.04で動画のサムネイルを作成~avconv ffmpeg

  目次1 インストール2 動画の情報3 使えるフォーマットの一覧4 サムネイル画像の作成 インストール

総合的な動画の変換 …

MIddlemanでrails-assets.orgをつかってbowerのコンポーネントをつかう

By: Simon Cunningham – CC BY 2.0 middlemanは静的なサイトのジェネレータ rails-assets.orgは「the frictionless pr …

Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails

目次1  fullcalendar-rails2 Hello fullcalendar3 オプション  fullcalendar-rails 2種類あるけど上の方を使った github.com/bok