テーマの実例

これは、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

A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

<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

インボックス 42

●ピルナビゲーションでの設定: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

60% Complete

●Success:.progress-bar.progress-bar-success

40% Complete (success)

●Info:.progress-bar.progress-bar-info

20% Complete

●Warning:.progress-bar.progress-bar-warning

60% Complete (warning)

●Danger:.progress-bar.progress-bar-danger

80% Complete (danger)

●ストライププログレスバー:.progress-bar.progress-bar-striped

60% Complete

●積み重ねプログレスバー

35% Complete (success)
20% Complete (warning)
10% Complete (danger)

●基本のリストグループ:ul.list-group > li.list-group-item

  • リスト1
  • リスト2
  • リスト3
  • リスト4
  • リスト5

●リンクつきリストグループ:div.list-group > a.list-group-item

●Default:.panel.panel-default

パネルのタイトル

パネルのコンテンツ

●Primary:.panel.panel-primary

パネルのタイトル

パネルのコンテンツ

●Success:.panel.panel-success

パネルのタイトル

パネルのコンテンツ

●Info:.panel.panel-info

パネルのタイトル

パネルのコンテンツ

●Warning:.panel.panel-warning

パネルのタイトル

パネルのコンテンツ

●Danger:.panel.panel-danger

パネルのタイトル

パネルのコンテンツ

この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。


閉じる