twitter bootstrap railsを使ったら職が見つかり彼女も出来て背も3センチ伸びました。

twitter bootstrapを更に便利に使うgemがtwitter bootstrap railsです。

railsアプリを作りましょう。

rvmでgem set作ります。

rvm --create 1.9.3-p125@tbrsample

railsアプリ生成します。

gem install rails --no-ri --no-rdoc
rails new tbrsample

gemを指定しましょう。

Gemfileのgroup :assetsに追加します。

cd tbrsample
vim Gemfile

gem "twitter-bootstrap-rails"

どん

bundle install --without=production

bootstrapをgenerateしましょう。

必要なjsやcssをapp/assets配下に配置します。

rails g bootstrap:install

以下にjsとcssが配置されます。

app/assets/javascripts/bootstrap.jp.coffee
app/assets/stylesheets/bootstrap.css.less

app/assets/javascripts/bootstrap.jp.coffeeの中身を見てましょう。

cat app/assets/javascripts/bootstrap.jp.coffee

jQuery ->  $(".alert-message").alert()
  $(".tabs").button()
  $(".carousel").carousel()
  $(".collapse").collapse()
  $(".dropdown-toggle").dropdown()
  $(".modal").modal()
  $("a[rel=popover]").popover()
  $(".navbar").scrollspy()
  $(".tab").tab "show"
  $(".tooltip").tooltip()
  $(".typeahead").typeahead()
  $("a[rel=tooltip]").tooltip()

なるほどなるほど、ここの処理によって、Javascript for Bootstrap > jQuery pluginsの機能がclassやdata-*を指定するだけで使えるようになるわけですね。

ついでにcssもみてます。

cat app/assets/stylesheets/bootstrap.css.less

@import "twitter/bootstrap";

// import responsive layout
@import "twitter/bootstrap/responsive";

// Your custom stylesheets goes here (override Less here)

Your custom stylesheets goes hereって書いてありますね。ここでカスタマイズできそうだなっと。のちほどカスタマイズ方法を記載します。なので、一旦置いておいて

レイアウトファイルを作成しよう。

app/views/layouts/application.html.erbにひな形のレイアウトを作りましょう。ここでは、スマートフォン対応もしたいなーと思うので、可変レイアウトにしようと思います。

rails g bootstrap:layout application ﬂuid

画面を見てみよう。

ここまででtwitter bootstrapの準備はokなので実際に画面を見てみましょう。というわけで、とりあえず適当にページを作ります。

rails g controller pages index
vim app/views/pages/index.html.erb

<div class="hero-unit">
  <h1>Hello, よろしくな</h1>
</div>

vim config/routes.rb

root :to => 'pages#index'

rm -f public/index.html

という感じで、次はサーバー起動

rails s

http://localhost:3000 にアクセスするとこんな感じの画面が出てくるかと思います。

f:id:naoto5959:20120219025426p:plain

幅を狭めるとこんな感じ。スマートフォン対応って感じですね。

f:id:naoto5959:20120219025432p:plain

カスタマイズしよう

どうも幅を狭めない状態だとヘッダーとコンテンツの間が窮屈ですよね。というわけで先程のcssを編集します。

vim app/assets/stylesheets/bootstrap.css.less

@media (min-width: 980px) {
  body {
    padding-top: 60px;
  }
}

すると、幅を広めてもいい感じですね。と、ここまでだといつものtwitter bootstrapですね。

配色を変えてみよう

配色を変えるには何をどうしたらいいのかというと、Using LESS with Bootstrapに書いてあるようにtwitter bootstrapのLESSで定義されている変数を変えてあげればいいわけですね。

というわけで、また先ほどのcssの登場です。

vim app/assets/stylesheets/bootstrap.css.less

@black: #020101;
@grayDarker:            lighten(@black, 16%);
@grayDark:              lighten(@black, 32%);
@gray:                  lighten(@black, 48%);
@grayLight:             lighten(@black, 64%);
@grayLighter:           lighten(@black, 80%);
@white:                 lighten(@black, 96%);

こんな感じで色を指定してやると

f:id:naoto5959:20120219025614p:plain

あ、赤くなったよー！

てな具合に、@blackの指定を色々変えてみると、色見を変更出来ますね。#010107とか#010701とかやってみるといいですね。

更に

ただ、まだグレーの部分が残っていたりしますね。それは、https://github.com/twitter/bootstrap/tree/master/lessからhttps://github.com/twitter/bootstrap/blob/master/less/hero-unit.lessを見たりすると分かるんですが、色指定がベタなんですね。では、こんな感じで色々上書きしてみると更に色味を統一出来るかと思います。

vim app/assets/stylesheets/bootstrap.css.less

.hero-unit {
  background-color: lighten(@black, 90%);
  margin-top: 19px;
  >h1 {
    font-size: 24px;
  }
}

.well {
  background-color: lighten(@black, 90%);
  border: 1px solid @grayLighter;
  border: 1px solid rgba(5, 5, 10,.05);
  .box-shadow(inset 01px1px rgba(5, 5, 10,.05));
  blockquote {
    border-color: #ddd;
    border-color: rgba(0,0,0,.15);
  }
}

.table-striped {
  tbody {
    tr:nth-child(odd) td,
    tr:nth-child(odd) th {
      background-color: lighten(@black, 93%);
    }
  }
}

.table {
  tbody tr:hover td,
  tbody tr:hover th {
    background-color: lighten(@black, 90%);
  }
}

.form-actions {
  background-color: lighten(@black, 90%);
  border-top: 1px solid lighten(@black, 93%);
}

他にもベタ書きの色は色々あるので(色だけに？)探してみると良いでしょう。

f:id:naoto5959:20120219025445p:plain