レスポンシブデザインのサイトを制作する際にはとても便利なフレームワークであるBootstrapですが、要素にクラス名を指定するだけで簡単にスタイリングできてしまいます。今回はBootstrapに用意されているたくさんのスタイルのうちよく使うスタイルのクラスをまとめてみました。  

グリットシステム

.container	固定幅のグリッドシステムのコンテナ要素を定義
.container-fluid	可変全幅のグリッドシステムのコンテナ要素を定義
.row	行を定義（コンテナ要素に内包される）
.col-{prefix}-{columns}	列を定義（rowに内包される）
.col-{prefix}-offset-{columns}	スペース用の列（左余白分オフセット）を定義しcolumnsの数値分むかって左側に余白をつける
.col-{prefix}-push-{columns}	列の右方向への入れ替え、columnsの数値分右側にシフトさせる
.col-{prefix}-pull-{columns}	列の左方向への入れ替え、columnsの数値分左側にシフトさせる
.clearfix	floatの解除

  Bootstrapのグリッドシステムはカラムを12分割にしてレイアウトを組んでいくという考え方です。画面サイズと連動しカラム数を指定していきます。   画面サイズを指定するprefixについて

lg	デスクトップのスクリーンサイズ
md	ラップトップのスクリーンサイズ
sm	タブレットのスクリーンサイズ
xs	モバイルのスクリーンサイズ

  12分割されたカラム数を指定するcolumnsについて 12分割されたものを1として各カラムの数量分の幅を設定  

アライメント

.text-left	インライン要素を左揃えにします
.text-center	インライン要素を中央揃えにします
.text-right	インライン要素を右揃えにします
.text-justify	インライン要素を均等割付にします
.text-nowrap	インライン要素を改行禁止にします
.center-block	ブロック要素を中央揃えにします

 

イメージ

.img-responsive	外枠に合わせた可変サイズのレスポンシブ対応になります
.img-rounded	イメージ画像の角を丸くします
.img-circle	イメージ画像を円形にトリミングされます
.img-thumbnaill	イメージ画像に枠線が設定されます

 

テーブル

.table-stripped	ストライプのように1行おきに背景色が設定されます
.table-bordered	格子状に罫線が入ります
.table-hover	マウスホバー時に背景色が変わるようになります
.table-responsive	コンテンツ幅を超える部分はスクロールできるようになります

 

リスト・フォーム

.dl-horizontal	定義リストを項目ごとにインラインで表示させます
.form-group	ラベルとフォーム部品をグルーピングさせます
.form-control	グルーピングされた中のフォーム入力部品を定義
.form-inline	フォーム部品全てをインラインで表示されます（form要素に指定します）
.form-horizontal	フォーム部品を項目ごとにインラインで表示されます（form要素に指定します）

 

ボタン

.btn	ボタンを定義
.btn-default	汎用的なボタンを定義
.btn-primary	決定、進むなどの肯定的な意味を持つボタンを定義
.btn-danger	キャンセル、戻るなどの否定的な意味を持つボタンを定義

 

表示・非表示

.visible-{prefix}	ブロックレベルもしくはインライン要素として表示させます
.hidden-{prefix}	要素を非表示にします

※prefixにはグリッドシステムと同じく画面サイズを示すプレフィックスが入ります     上記は個人的によく使うものですが、このほかにもたくさんのスタイルが用意されています。グリッドシステムや表示・非表示の切り替え、レスポンシブ対応イメージなどはかなり便利な機能ですね。