以前投稿したCSSフレームワーク Bootstrapの簡単な使い方ではbootstrapのグリッドレイアウトやレスポンシブレイアウトの作り方について書きました。今回はBaseCSSの部分をまとめておこうと思います。
webデザイナーならずともbootstrapなどのcssフレームワークにはホントにお世話になっていると思いますが、使い方をしっかりマスターするのは結構大変。しかしその苦難を乗り越えてこそ本当の利用価値にたどり着けるのです！ではさっそくいきましょう。
この記事は古いバージョンのものです。Bootstrap3に関する記事はこちら。
BootstrapのTypographyとListをマスターする
Typographyはテキストのスタイルを決めるもの。とくに難しいところはなく単純にHTMLタグを入れるだけ。text-leftなど左右に寄せるものは覚えておくと便利。
<
h2>BootstrapのTableをマスターする
こちらもclassの指定を変更するだけで線で囲まれたものやマウスオーバーで色が変わるなどの機能を持たせることが可能。テンプレートからいくつか紹介する。
BootstrapのFormをマスターする
次はbootstrapを使ったフォームの作り方。まずは基本のレイアウトから。
BootstrapのButtonsをマスター
ボタンもclassの指定だけで簡単に作成可能。aタグとbuttonタグでボタンを作ることが出来る。bootstrapでは色とサイズ、選択不可を作成できる。
BootstrapのImagesをマスターする
次は画像の処理。イメージの表示はシンプルに枠をつけたり、円形に切り抜いたり、角丸にすることができる。
BootstrapのIconsをマスターする
アイコンの使い方はiタグにclassを指定する。classに入れるクラス名は公式サイトなどをチェックする。
NEXT…
ここで紹介したもののほかにもjavascriptを使用したさらにインタラクティブなコンポーネントがあるので、また機会があればまとめていきます。もうすぐ3.0も出そうで気になるところ。これからもbootstrapには期待。
