Bootstrapは、Webアプリケーションを作成する際には、とても便利なフレームワークです。
利用されている方々も多いと思います。
今回は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の解除 |
画面サイズのprefix
| lg | デスクトップのスクリーンサイズ |
|---|---|
| md | ラップトップのスクリーンサイズ |
| sm | タブレットのスクリーンサイズ |
| xs | モバイルのスクリーンサイズ |
アライメント
| .text-left | インライン要素を左揃えにします |
|---|---|
| .text-center | インライン要素を中央揃えにします |
| .text-right | インライン要素を右揃えにします |
| .text-justify | インライン要素を均等割付にします |
| .text-nowrap | インライン要素を改行禁止にします |
| .center-block | ブロック要素を中央揃えにします |
テーブル
| .table-stripped | ストライプのように1行おきに背景色が設定されます |
|---|---|
| .table-bordered | 格子状に罫線が入ります |
| .table-hover | マウスホバー時に背景色が変わるようになります |
| .table-responsive | コンテンツ幅を超える部分はスクロールできるようになります |
イメージ
| .img-responsive | 外枠に合わせた可変サイズのレスポンシブ対応になります |
|---|---|
| .img-rounded | イメージ画像の角を丸くします |
| .img-circle | イメージ画像を円形にトリミングされます |
| .img-thumbnaill | イメージ画像に枠線が設定されます |
ボタン
| .btn | ボタンを定義 |
|---|---|
| .btn-primary | 決定、進むなどの肯定的な意味を持つボタンを定義 |
| .btn-danger | キャンセル、戻るなどの否定的な意味を持つボタンを定義 |
公式サイト
Bootstrap
パワフルで拡張性の高い、機能満載のフロントエンドツールキットです。Sassでビルドしてカスタマイズし、あらかじめ用意されたグリッドシステムとコンポーネントを利用し、強力なJavaScriptプラグインでプロジェクトに命を吹き込むことができま...
getbootstrap.jp
