Bootstrap の例

❮ 前章へ 次章へ ❯

Bootstrap はじめに

コンテナ
流動コンテナ

例の説明


Bootstrap グリッドの基本

3 つの等幅カラム
2 つの幅の異なるカラム

例の説明


Bootstrap タイポグラフィ

見出し <h1> ~ <h6>
<small>要素
<mark>要素
<abbr>要素
<blockquote>要素
反転した blockquote
<dl>要素
<code>要素
<kbd>要素
<pre>要素
コンテキスト・テキスト・カラー
コンテキスト背景色

例の説明


Bootstrap テーブル

基本的なテーブル
ストライブ付き行
ボーダー付きテーブル
ホバー効果付き行
圧縮テーブル
コンテキスト・クラス
レスポンシブ・テーブル

例の説明


Bootstrap 画像

角丸画像
円形の画像
サムネイル画像
レスポンシブ画像s
イメージギャラリー
レスポンシブ埋め込み

例の説明


Bootstrap Jumbotron

コンテナ内の Jumbotron
コンテナ外の Jumbotron
ページ見出しの作成

例の説明


Bootstrap Wells

基本的な well
Well のサイズ

例の説明


Bootstrap アラート

アラート
閉じられるアラート
アニメ付きアラート

例の説明


Bootstrap ボタン

ボタンのスタイル
ボタンのタグ
ボタンのサイズ
ブロックレベルのボタン
有効/無効なボタン

例の説明


Bootstrap ボタン・グループ

ボタン・グループ
ボタン・グループのサイズ
縦型のボタン・グループ
両端揃えのボタン・グループ
両端揃えのボタン・グループ 2
ボタン・グループのネストとドロップダウン・メニュー
ボタンの分割

例の説明


Bootstrap グリフ・アイコン

グリフ・アイコン

例の説明


Bootstrap バッジとラベル

バッジ
ボタン内のバッジ
ラベル
コンテキスト・ラベル

例の説明


Bootstrap プログレス・バー

プログレス・バー
ラベル付きプログレス・バー
色付きプログレス・バー
ストライプ付きプログレス・バー
アニメ付きプログレス・バー
積上げプログレス・バー

例の説明


Bootstrap ページネーション

ページネーション
有効なページネーション・リンク
無効なページネーション・リンク
ページネーションのサイズ
パン屑リスト

例の説明


Bootstrap ページャ

ページャ
ボタンの配置

例の説明


Bootstrap リスト・グループ

リスト・グループ
バッジ付きリスト・グループ
リンク付きリスト・グループ
有効なリスト項目
無効なリスト項目
コンテキスト・クラス
Custom content

例の説明


Bootstrap パネル

パネル
パネルのヘッダ
パネルのフッタ
パネル・グループ
コンテキスト・パネル・クラス

例の説明


Bootstrap ドロップダウン

ドロップダウン
ドロップダウンの分割線
ドロップダウン・ヘッダ
無効なドロップダウン項目
右揃えドロップダウン・メニュー
ドロップアップ
ドロップダウンのアクセスビリティ

例の説明


Bootstrap 折畳み

折畳みボタン
折畳みリンク
折畳み "in" (デフォルトで表示)
折畳みパネル
折畳みリスト・グループ
アコーディオン

例の説明


Bootstrap タブとピル

インライン・リスト
タブ
ドロップダウンメニュー付きタブ
ピル
縦型のピル
行内の縦型ピル
ドロップダウンメニュー付きピル
中央揃えのタブとピル
Toggleable/dynamic タブ
Toggleable/dynamic ピル

例の説明


Bootstrap ナビゲーションバー

ナビゲーションバー
反転ナビゲーションバー
上部固定のナビゲーションバー
下部固定のナビゲーションバー
ドロップダウン付きナビゲーションバー
右揃えナビゲーションバー
折畳みナビゲーションバー

例の説明


Bootstrap フォーム

縦型フォーム
インライン・フォーム
ラベルなしインライン・フォーム
横型フォーム

例の説明


Bootstrap 入力

入力
テキストエリア
チェックボックス
インライン・チェックボックス
ラジオボタン
インライン・ラジオボタン
Select メニュー

例の説明


Bootstrap 入力 2

静的なコントロール
コントロールの状態
インラインフォーム:コントロールの状態

例の説明


Bootstrap 入力のサイジング

入力のサイジング
横向きラベルの入力サイジング
入力の幅 (カラム)
入力ヘルプ・テキスト

例の説明


Bootstrap カルーセル

カルーセル
キャプション・スライダー

例の説明


Bootstrap モーダル

モーダル
小さなモーダル
大きなモーダル

例の説明


Bootstrap ツールチップ

ツールチップ
ツールチップの位置設定

例の説明


Bootstrap ポップオーバー

ポップオーバー
ポップオーバーの位置設定
閉じることができるポップオーバー
ホバーで表示するポップオーバー

例の説明


Bootstrap Scrollspy

横型の scrollspy
縦型の scrollspy

例の説明


Bootstrap Affix

横型の affix
縦型の affix
Scrollspy と affix (横型)
Scrollspy と affix (縦型)

例の説明


Bootstrap グリッド:Stacked to Horizontal

Stacked to horizontal グリッド
流動コンテナを使用する Stacked to horizontal グリッド

例の説明


Bootstrap グリッド:小型機器

小型グリッド
小型グリッド 2

例の説明


Bootstrap グリッド:中型機器

中型グリッド
中型グリッド 2

例の説明


Bootstrap グリッド:大型機器

大型グリッド
大型グリッド 2

例の説明


Bootstrap グリッドの例

3 つの等しいカラム
3 つの異なるカラム
2 つの異なるカラム
2 つのネストした 2 つのカラム
ミックスカラム:モバイルとデスクトップ
ミックスカラム:モバイル、タブレットとデスクトップ
フロートのクリア
オフセット・カラム
Push と Pull - カラム順序の変更

例の説明



❮ 前章へ 次章へ ❯