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サイトを構築3 日本にあわせる~spree

  前提 RailsでECサイト構築~spree RailsでECサイト構築2 注文してみる~spree 目次1 テンプレートをダウンロード2 テンプレートを改造する3 デフォルトの国を変更 …

no image

Private_pubでのJSON通信の方法

  前回 Rails3.2でBackbone.jsとPrivate_pubでToDoアプリをリアルタイム化(できた!)   Gemfileへの追加とbundleの実行 privat …

Rails3でajaxでD&Dでまとめてファイルアップロード2~jQueryFileUpload for Rails

  前提 Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails Ruby on Rails 3.2でファイルアップロード …

Rails5.1でnpmライブラリを使おう〜webpacker

By: mrenner34 – CC BY 2.0 目次1 webpacker2 インストール3 コマンドライン4 hello webpacker5 yarn6 CoffeeScript7 …

ActiveRecord使い方まとめ

By: North Carolina National Guard – CC BY 2.0 ActiveRecord入門|ドットインストールをみて個人的まとめ ActiveRecord4の …