心はいつも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

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

  関連記事

パーフェクトRuby 2章Rubyの基礎 2-6 モジュール

p57 2-6 モジュール 2-6-1モジュールの定義式 モジュールはインスタン …

Macにコマンドラインツールをインストールする

Mac miniのメモリが16Mになったので、気分も新たに、Ruby on Ra …

Railsを立ち上げる

RubyのアップデートとRailsのインストールが無事終わったので、いよいよRa …

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

5.2SassとAsset Pipeline、です。 ここは読み物系です。読んで …

詳解 Objective-C 2.0 第3版

Rubyの言語仕様を勉強する傍ら、Objective-Cも言語仕様ベースで勉強し …

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

10.3.4マイクロポストを削除する、です。 仕様 マイクロポスト個別に削除でき …

コンビニで切れないiPhone充電ケーブル買った

iPhone充電に使うライトニングケーブルって高いのに切れ易く涙目。 こんな感じ …

詳解 Objective-C 2.0 第3版 CHAPTER4 オブジェクトの型と動的結合

CHAPTER4は「オブジェクトの型と動的結合」なんだけど、 動的結合ってなに? …

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

3.3.3埋め込みRubyです。viewにrubyコードを埋め込んでtitleを …

民●党批判したら検索順位が落ちたのか?

このブログ、airpucciのドメインも元のwww.airpucci.comに戻 …