bootstrap4よく忘れるのでメモ。classに指定して使うんだからね！
導入方法は本家のこれ。htmlにちょっと記載するだけだから楽チン。
グリッド
bootstrapのキモ。詳細は本家
*の値は1-12で行の加算値で12を超えないようにする
col-* /* コンテナ最大幅なし（自動） */
col-sm-* /* コンテナ最大幅 540px */
col-md-* /* コンテナ最大幅 720px */
col-lg-* /* コンテナ最大幅 960px */
col-xl-* /* コンテナ最大幅 1140px */
基本はこう書く
<div class="container">
<!-- ここから1行目 -->
<div class="row">
<div class="col-4">
1列目ごにょごにょ
</div>
<div class="col-4">
2列目ごにょごにょ
</div>
<div class="col-4">
3列目ごにょごにょ
</div>
</div>
<!-- ここまで1行目 -->
<!-- ここから2行目 -->
<div class="row">
<div class="col">
1列目ごにょごにょ
</div>
</div>
<!-- ここまで2行目 -->
</div>文字色
text-primary /* 青 */
text-secondary /* 灰色 */
text-success /* 緑 */
text-info /* 淡い水色 */
text-warning /* 黄色 */
text-danger /* 赤 */
text-light /* 黒背景白字 */
text-muted /* 灰色 */背景色
bg-primary /* 青 */
bg-secondary /* 灰色 */
bg-success /* 緑 */
bg-info /* 淡い水色 */
bg-warning /* 黄色 */
bg-danger /* 赤 */
bg-dark /* 黒 */
bg-white /* 白 */線・ボーダー
border /* 上下左右に線 */
border-top /* 上に線 */
border-bottom /* 下に線 */
border-left /* 左に線 */
border-right /* 右に線 */線の色
border-primary /* 青 */
border-secondary /* 灰色 */
border-success /* 緑 */
border-info /* 淡い水色 */
border-warning /* 黄色 */
border-danger /* 赤 */
border-dark /* 黒 */
border-white /* 白 */テキストサイズ
h* /* 1-6 で指定 */
display-* /* 1-4 で指定 h1より大きい */テキスト装飾
mark /* ハイライト */テキスト左右配置
text-left /* 左寄せ */
text-center /* 中央揃え */
text-right /* 右寄せ */テキスト折り返し
text-wrap /* 折り返し */
text-nowrap /* 折り返さない */
text-truncate /* 長い文は...で省略される */
text-break /* 折り返し (4.3) */テキスト大文字・小文字
text-lowercase /* すべて小文字 */
text-uppercase /* すべて大文字 */
text-capitalize /* 頭文字が大文字 */テキストフォント・書体
font-weight-bold /* 太字 */
font-weight-bolder /* 設定値より太めに (4.2.1) */
font-weight-normal /* 通常 */
font-weight-light /* 細め */
font-weight-lighter /* 設定値より細めに (4.2.1) */
font-italic /* イタリック書体 */
text-monospace /* 等幅フォント */テキストリンクの装飾削除
text-decoration-none引用文
例)
<blockquote class="blockquote">
<p>引用文部分</p>
</blockquote>マージン（margin）
*に入るのは 0-5 と auto
m-* /* 上下左右 */
mt-* /* 上のみ */
mb-* /* 下のみ */
ml-* /* 左のみ */
mr-* /* 右のみ */
mx-* /* 左右 */
my-* /* 上下 */パディング（padding）
*に入るのは 0-5 と auto
p-* /* 上下左右 */
pt-* /* 上のみ */
pb-* /* 下のみ */
pl-* /* 左のみ */
pr-* /* 右のみ */
px-* /* 左右 */
py-* /* 上下 */要素の幅指定
w-25 /* 幅25% */
w-50 /* 幅50% */
w-75 /* 幅75% */
w-100 /* 幅100% */
w-auto /* 幅自動調整 */要素の高さ指定
h-25 /* 高さ25% */
h-50 /* 高さ50% */
h-75 /* 高さ75% */
h-100 /* 高さ100% */
h-auto /* 高さ自動調整 */要素の角丸（丸め）
rounded /* 全ての角丸め */
rounded-circle /* 円 */
rounded-pill /* 長丸 */要素配置（インライン・フロート）
float-left /* 要素左寄せ */
float-right /* 要素右寄せ */
float-none /* 要素詰めなし */
d-inline /* インライン表示 */
d-block /* ブロック表示 1要素で1行 */
d-inline-block /* ブロック表示 横並び */要素配置（Flex)
レスポンシブのキモっぽい。説明難しいので詳細は本家
d-flex /* 可変ブロック レスポンシブなやつ */
d-inline-flex /* 可変インラインブロック レスポンシブなやつ */
flex-row /* x軸 flex要素左寄せ */
flex-row-reverse /* x軸 flex要素右寄せ */
justify-content-start /* x軸 flex要素左寄せ */
justify-content-end /* x軸 flex要素右寄せ */
justify-content-center /* x軸 flex要素中央寄せ */
justify-content-between /* x軸 flex要素均等割り付け(開始が両端） */
justify-content-around /* x軸 flex要素均等割り付け */
align-items-start /* y軸 flex要素上寄せ */
align-items-end /* y軸 flex要素下寄せ */
align-items-center /* y軸 flex要素中央寄せ */
align-items-stretch /* y軸 flex要素幅いっぱいに伸ばす */
例)
<div class="d-flex flex-row">
<div class="p-1">要素1</div>
<div class="p-1">要素2</div>
<div class="p-1">要素3</div>
</div>リスト
list-unstyled /* スタイルなし ulのclassに指定 */
list-inline /* 横並びリスト ulのclassに指定 */
list-inline-item /* インラインの場合 liのclassに指定 */テーブル
table-striped /* 奇数・偶数で行の色が変わる tableのclassに指定 */
table-bordered /* 線あり tableのclassに指定 */
table-borderless /* 線なし tableのclassに指定 */
table-hover /* カーソルを合わせると行の色が変わる tableのclassに指定 */
thead-dark /* 見出し暗め theadのclassに指定 */
thead-light /* 見出し明るめ theadのclassに指定 */テーブル（色）
table-active /* 薄い灰色 thかtdのclassに指定*/
table-primary /* 青 thかtdのclassに指定*/
table-secondary /* 灰色 thかtdのclassに指定*/
table-success /* 緑 thかtdのclassに指定*/
table-info /* 薄い水色 thかtdのclassに指定*/
table-warning /* 黄色 thかtdのclassに指定*/
table-danger /* 赤 thかtdのclassに指定*/
table-light /* 白 thかtdのclassに指定*/
table-dark /* 黒 thかtdのclassに指定*/画像
img-fluid /* これでレスポンシブになる */
img-thumbnail /* サムネイル表示用 */
コメント