テーマの実例
これは、Bootstrapに含まれているオプションのテーマスタイルシートを示すテンプレート。それを構築したり変更したりすることで、よりユニークなものを作成するための出発点として使用可能。
※このテーマの設定方法についてはこちらに記載。
ボタン
●大きめのボタン：button.btn.btn-lg
●標準サイズのボタン：button.btn
●小さめのボタン：button.btn.btn-sm
●極小サイズのボタン：button.btn.btn-xs
テーブル
●基本のテーブル：table.table
| # | 見出し | 見出し | 見出し |
|---|---|---|---|
| 1 | テーブルのセル | テーブルのセル | テーブルのセル |
| 2 | テーブルのセル | テーブルのセル | テーブルのセル |
| 3 | テーブルのセル | テーブルのセル | テーブルのセル |
●交互に行の色が変わるテーブル：table.table.table-striped
| # | 見出し | 見出し | 見出し |
|---|---|---|---|
| 1 | テーブルのセル | テーブルのセル | テーブルのセル |
| 2 | テーブルのセル | テーブルのセル | テーブルのセル |
| 3 | テーブルのセル | テーブルのセル | テーブルのセル |
●縦線が入ったテーブル：table.table.table-bordered
| # | 見出し | 見出し | 見出し |
|---|---|---|---|
| 1 | テーブルのセル | テーブルのセル | テーブルのセル |
| テーブルのセル | テーブルのセル | テーブルのセル | |
| 2 | テーブルのセル | テーブルのセル | テーブルのセル |
| 3 | テーブルのセル | テーブルのセル | |
●行間が狭いテーブル：table.table.table-condensed
| # | 見出し | 見出し | 見出し |
|---|---|---|---|
| 1 | テーブルのセル | テーブルのセル | テーブルのセル |
| テーブルのセル | テーブルのセル | テーブルのセル | |
| 2 | テーブルのセル | テーブルのセル | テーブルのセル |
| 3 | テーブルのセル | テーブルのセル | |
サムネイル
●枠付：.img-thumbnail
ラベル
●<h1> > span.label
Default Primary Success Info Warning Danger
●<h2> > span.label
Default Primary Success Info Warning Danger
●<h3> > span.label
Default Primary Success Info Warning Danger
●<h4> > span.label
Default Primary Success Info Warning Danger
●<h5> > span.label
Default Primary Success Info Warning Danger
●<h6> > span.label
Default Primary Success Info Warning Danger
●<p> > span.label
Default Primary Success Info Warning Danger
バッジ
●アンカーリンクでの設定：<a> > span.badge
●ピルナビゲーションでの設定：ul.nav.nav-pills > <li> > span.badge
ドロップダウンメニュー
ナビゲーション
●タブナビゲーション：ul.nav.nav-tabs
●ピルナビゲーション：ul.nav.nav-pills
ナビゲーションバー
●標準のナビゲーションバー：nav.navbar.navbar-default
●黒色ナビゲーションバー：nav.navbar.navbar-inverse
アラート
●Success：.alert.alert-success
●Info：.alert.alert-info
●Warning：.alert.alert-warning
●Danger：.alert.alert-danger
プログレスバー
●Default：.progress-bar
●Success：.progress-bar.progress-bar-success
●Info：.progress-bar.progress-bar-info
●Warning：.progress-bar.progress-bar-warning
●Danger：.progress-bar.progress-bar-danger
●ストライププログレスバー：.progress-bar.progress-bar-striped
●積み重ねプログレスバー
リストグループ
●基本のリストグループ：ul.list-group > li.list-group-item
- リスト1
- リスト2
- リスト3
- リスト4
- リスト5
●ヘッダありリンクつきリストグループ：a.list-group-item > h4.list-group-item-heading
パネル
●Default：.panel.panel-default
パネルのタイトル
●Primary：.panel.panel-primary
パネルのタイトル
●Success：.panel.panel-success
パネルのタイトル
●Info：.panel.panel-info
パネルのタイトル
●Warning：.panel.panel-warning
パネルのタイトル
●Danger：.panel.panel-danger
パネルのタイトル
囲み枠
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。