bootstrap.min.css
適当な所に bootstrap.min.css を設置し、head 内でリンクする
<link rel="stylesheet" href="css/bootstrap.min.css" />
グリッド
コンテナの中に行、行の中に列
<div class="container"> <div class="row"> <div class="col">
コンテナの幅指定
<div class="container" style="max-width: 600px">
列幅の指定
列幅は12等分単位で指定できる (指定しなければ列数で等分)
<div class="row"> <div class="col-3">幅 3/12</div> <div class="col-6">幅 6/12</div> <div class="col-3">幅 3/12</div> </div>
行内の列を中央に寄せる (列幅が合計12未満のとき)
<div class="row justify-content-center">
マージンの設定
<div class="row m-2">
マージンの指定は 0 ～ 5。
m はマージン、p はパディング。
mt, mb, ms, me で上下左右を指定。
mx, my で 左右および上下を指定。
テキストの中央寄せ
<div class="col text-center">
ボタン
<button id="btn_hoge" class="btn btn-primary rounded-pill">ほげ</button>
ボタンの種類とデフォルトの色
- btn btn-primary : 青
- btn btn-secondary : グレー
- btn btn-success : 緑
- btn btn-danger : 赤
- btn btn-warning : 黄色
- btn btn-info : 水色
- btn btn-light : 明るいグレー
- btn btn-dark : 黒
- btn btn-link : (リンク形式)
ボタンの見た目
- btn-outline-* : 輪郭線のボタン ( btn-outline-primary のように指定)
- rounded-pill : 角丸ボタン
- rounded-circle : 丸いボタン
btn-block : 横幅いっぱいのボタン← Bootstrap4
幅いっぱいのボタン
<div class="col"> <div class="d-grid gap-2"> <button id="btn_hoge" class="btn btn-primary">ほげ</button> </div> </div>
gap は子要素のマージンを指定。
フォーム
テキストボックス
form-control クラスを指定。
<input type="text" id="text_hoge" class="form-control">
スライダ
form-range クラスを指定。
<input type="range" min="0" max="255" step = "1" class="form-range" id="slider_hoge" value="0" />
ブロック要素のスタイル
<div id="div_hoge" class="rounded-pill" style="height: 2em; background-color: #ff0000;">ほげ</div>
- rounded-pill : 角丸 (ボタンと同様)
表示/非表示の切り替え
<div id="hoge" style="display:none">
hoge.style.display = "none"; // 非表示 hoge.style.display = "block"; // 表示
