「Bootstrap4」テーブル(.table)のクラスを使うサンプル
書式
table class=”table”
使用例
「Bootstrap 4入門」カルーセル(carousel)のサンプル
説明
.carousel-indicators インジケータを表示
.carousel-control-{prev|next}, .carousel-control-{prev|next}-icon
左右の矢印 ...
「Bootstrap4入門」.card-header-tabsでビゲーションタブを実装するサンプル
使用例
<head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" con ...「Bootstrap4入門」.collapseで折りたたみを実装する
使用例
<div class="container"> <h2>折りたたみのサンプル</h2> <p>2hhhhh</p> <button type="butto ...「Bootstrap 4入門」チェックボックスとラジオボタンのサンプル
書式
.input-group-text 前方・後方部品にテキストを用いる
使用例
「Bootstrap 4入門」input-group-sm，input-group-lgでサイズ変更する
書式
.input-group-sm 小さいインプットグループ
.input-group-lg 大きなインプットグループ
使用例
「Bootstrap 4入門」input-groupでインプットグループを表示する方法
書式
.input-group インプットグループを構成
.input-group-prepend 前方部品
.input-group-append 後方部品
使用例
「Bootstrap 4入門」モーダルダイアログを使うサンプル
書式
.modal, .modal-dialog：モーダルダイアログ構成
.modal-content コンテンツ
.modal-header ヘッダ
.modal-body ボディ
.mod ...
「Bootstrap4」col-{breakpoint}-{n} でスマートフォン画面を等分にする
構文
<div class=”row”>
<div class=”col-sm-3″ >xxx</div>
</div& ...
「Bootstrap4入門」等幅グリッドを使うサンプル
構文
<div class=”row”>
<div class=”col”>xxx</div>
</div> ...
「Bootstrap4入門」幅グリッドを設定するサンプル
使用例1
列の幅とさまざまなデバイスでの表示方法を制御します
「Bootstrap 4入門」 .progress-barでプログレスを設定するサンプル
説明
.progress, .progress-bar プログレスバーを表示
使用例
「Bootstrap 4入門」.breadcrumb, .breadcrumb-itemでパンくずリストを表示する方法
書式
.breadcrumb, .breadcrumb-item :パンくずリストを表示
.active:現在のページを表示
使用例
「Bootstrap4入門」ブロックレベルボタンを設定する方法
説明
.btn-block:横幅いっぱいのブロックレベルボタンを表示
使用例
「Bootstrap4入門」ボタンのアクティブ状態，無効状態のサンプル
書式
.active アクティブ状態
disabled 無効化状態
使用例
「Bootstrap4入門」.btn-groupでボタングループを表示するサンプル
書式
div class=”btn-group” role=”group” aria-label=”xxxx”
使用例
「Bootstrap4入門」ボタングループの大きさを設定する方法
説明
.btn-group-lg：大きなボタングループ
.btn-group-sm ：小さなボタングループ
使用例
「Bootstrap4入門」.btn-group-verticalで縦並びボタングループを表示する
書式
.btn-group-vertical 縦に並ぶボタンを表示
使用例