心はいつもAirPucci (空元気でもいいから)

毎日がPucciを着ているような気分

RailsTutorial4.0を高速で復習する。5.1.2章。

   


5.1.2BootstrapとカスタムCSS、です。

今までdivについていたイケてないtagはBootstrupのものだそうです。こんなムダなタグつけるんだったらcss書けばいいのに、、と私も思いましたが、だんだん面倒に、、、ああ、いけない。

Bootstrapを追加

RailsはBootstrapもGemで追加するってとこにびっくり。gemは最初にフルセット導入したので、もうbootstrup入っています。

gem ‘bootstrap-sass’, ‘2.3.2.0’

ですね。
ちなみに今はbootstrup3があるそうですがタグ構造が違うっぽく、バージョン指定必要です。

bootstrap-sassがAsset Pipelineと互換性を持つように
リスト5.4 Asset Pipeline互換の行を追加する。
config/application.rb

require File.expand_path('../boot', __FILE__)
途中略
module Twili
  class Application < Rails::Application
    config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
  end
end

bootstrup変更用のcssファイルを作る

app/assets/stylesheets/custom.css.scss というファイルを作っておきます。ここにデフォのbootstrupにはないcssを書いて行きます。正しくはsassで書いて行きます。

ファイルの中身に
@import “bootstrap”;
を書きます。

これでbootstrapを上書きしていくイメージになりますね。

ちなみに、ここで
http://localhost:3000/static_pages/home にアクセスすると、
スクリーンショット 2014-01-21 20.46.56
bootstrapが適用されています。おおー

bootstrap適用おわったところで、いったんコミットしておきます。

まだ
5.1.2BootstrapとカスタムCSS、
の途中です。次は
リスト5.6 すべてのページに適用される共通のスタイルをCSSに追加する。
からです。

 - テクニカル ,

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
Macで.htaccessを表示する設定

MacBook Air2代目。以前は行っていた.(ドット)がついたファイルをMa …

no image
RailsTutorial4.0を高速で復習する。5.4章。

5.4ユーザー登録: 最初のステップ、です。ようやく開発っぽくなってきます。 5 …

実機なしでRetina 3.5インチのスクリーンショットを撮る

iPhoneアプリ公開時に2種類の画像登録が必要です。 1つ目はアイコン。アプリ …

iPadのiBooksで自炊とかしたPDFの電子書籍を読む

手順覚えないのでブログに書きます。 Bookscan使用して手持ちPDF電子書籍 …

no image
RailsTutorial4.0を高速で復習する。9.2.3章。

9.2.3フレンドリーフォワーディング、です。 ログオンしていないユーザーが編集 …

no image
RailsTutorial4.0を高速で復習する。5.6章。演習1問目。

5.6演習です。 一問目。 リスト5.28の静的ページのテストコードは簡潔ですが …

MacBookAirの容量が足りない

当ブログairpucciで人気なのがMacBookAirに関するエントリ。ありが …

Ruby on Railsを4.1.0にバージョンアップする

真央ロス真央廃を超えた腐まお状態な1ヶ月1週間、まるで娘が嫁に行った父親のごとし …

no image
Everyday Rails頑張る。3章モデルスペック

テスト書いてからコードの決意。 今のような環境がない時代のプログラマでしたが、自 …

パーフェクトRuby 1章Rubyの概要

メタプログラミングRubyもいいのですが、余計な物語仕立てがどうも性に合わず、消 …