Bootstrap4

書式
table class=”table”
使用例

<!DOCTYPE html><html lang="en"><head> <title&g ...

Bootstrap4

説明
.carousel-indicators インジケータを表示
.carousel-control-{prev|next}, .carousel-control-{prev|next}-icon
左右の矢印 ...

Bootstrap4

使用例

<head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" con ...

Bootstrap4

使用例

<div class="container"> <h2>折りたたみのサンプル</h2> <p>2hhhhh</p> <button type="butto ...

Bootstrap4

書式
.input-group-text 前方・後方部品にテキストを用いる
使用例

<head> <meta charset="utf-8"> <meta name="viewpor ...

Bootstrap4

書式
.input-group-sm  小さいインプットグループ
.input-group-lg  大きなインプットグループ
使用例

<head> <title>Bootstrap ...

Bootstrap4

書式
.input-group  インプットグループを構成
.input-group-prepend 前方部品
.input-group-append 後方部品
使用例

<head> ...

Bootstrap4

書式
.modal, .modal-dialog:モーダルダイアログ構成
.modal-content コンテンツ
.modal-header ヘッダ
.modal-body  ボディ
.mod ...

Bootstrap4

構文
<div class=”row”>
<div class=”col-sm-3″ >xxx</div>
</div& ...

Bootstrap4

構文
<div class=”row”>
<div class=”col”>xxx</div>
</div> ...

Bootstrap4

使用例1
列の幅とさまざまなデバイスでの表示方法を制御します

<div class="row"> <div class="col-*-*"></div></div>< ...

Bootstrap4

説明
.progress, .progress-bar プログレスバーを表示
使用例

<head> <title>Bootstrapのサンプル</title> <meta ...

Bootstrap4

書式
.breadcrumb, .breadcrumb-item :パンくずリストを表示
.active:現在のページを表示
使用例

<head> <title>Bootstrap ...

Bootstrap4

説明
.btn-block:横幅いっぱいのブロックレベルボタンを表示
使用例

<head> <title>Bootstrapのサンプル</title> <meta cha ...

Bootstrap4

書式
.active アクティブ状態
disabled 無効化状態
使用例

<head> <title>Bootstrapのサンプル</title> <meta ...

Bootstrap4

書式
div class=”btn-group” role=”group” aria-label=”xxxx”
使用例

<head&g ...

Bootstrap4

説明
.btn-group-lg:大きなボタングループ
.btn-group-sm :小さなボタングループ
使用例

<div class="container"> <h2>ボタング ...

Bootstrap4

書式
.btn-group-vertical 縦に並ぶボタンを表示
使用例

<div class="container"> <h2>縦並びボタングループ</h2> <p& ...