bootstrap4 早見表

bootstrap4

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>

▲TOP

文字色

text-primary   /* 青 */
text-secondary /* 灰色 */
text-success   /* 緑 */
text-info      /* 淡い水色 */
text-warning   /* 黄色 */
text-danger    /* 赤 */
text-light     /* 黒背景白字 */
text-muted     /* 灰色 */

▲TOP

背景色

bg-primary   /* 青 */
bg-secondary /* 灰色 */
bg-success   /* 緑 */
bg-info      /* 淡い水色 */
bg-warning   /* 黄色 */
bg-danger    /* 赤 */
bg-dark      /* 黒 */
bg-white     /* 白 */

▲TOP

線・ボーダー

border        /* 上下左右に線 */
border-top    /* 上に線 */
border-bottom /* 下に線 */
border-left   /* 左に線 */
border-right  /* 右に線 */

▲TOP

線の色

border-primary   /* 青 */
border-secondary /* 灰色 */
border-success   /* 緑 */
border-info      /* 淡い水色 */
border-warning   /* 黄色 */
border-danger    /* 赤 */
border-dark      /* 黒 */
border-white     /* 白 */

▲TOP

テキストサイズ

h* /* 1-6 で指定 */
display-* /* 1-4 で指定 h1より大きい */

▲TOP

テキスト装飾

mark /* ハイライト */

▲TOP

テキスト左右配置

text-left   /* 左寄せ */
text-center /* 中央揃え */
text-right  /* 右寄せ */

▲TOP

テキスト折り返し

text-wrap     /* 折り返し */
text-nowrap   /* 折り返さない */
text-truncate /* 長い文は...で省略される */
text-break    /* 折り返し (4.3) */

▲TOP

テキスト大文字・小文字

text-lowercase  /* すべて小文字 */
text-uppercase  /* すべて大文字 */
text-capitalize /* 頭文字が大文字 */

▲TOP

テキストフォント・書体

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      /* 等幅フォント */

▲TOP

テキストリンクの装飾削除

text-decoration-none

▲TOP

引用文

例)
<blockquote class="blockquote">
  <p>引用文部分</p>
</blockquote>

▲TOP

マージン(margin)

*に入るのは 0-5 と auto
m-*  /* 上下左右 */
mt-* /* 上のみ */
mb-* /* 下のみ */
ml-* /* 左のみ */
mr-* /* 右のみ */
mx-* /* 左右 */
my-* /* 上下 */

▲TOP

パディング(padding)

*に入るのは 0-5 と auto
p-*  /* 上下左右 */
pt-* /* 上のみ */
pb-* /* 下のみ */
pl-* /* 左のみ */
pr-* /* 右のみ */
px-* /* 左右 */
py-* /* 上下 */

▲TOP

要素の幅指定

w-25   /* 幅25% */
w-50   /* 幅50% */
w-75   /* 幅75% */
w-100  /* 幅100% */
w-auto /* 幅自動調整 */

▲TOP

要素の高さ指定

h-25   /* 高さ25% */
h-50   /* 高さ50% */
h-75   /* 高さ75% */
h-100  /* 高さ100% */
h-auto /* 高さ自動調整 */

▲TOP

要素の角丸(丸め)

rounded        /* 全ての角丸め */
rounded-circle /* 円 */
rounded-pill   /* 長丸 */

▲TOP

要素配置(インライン・フロート)

float-left     /* 要素左寄せ */
float-right    /* 要素右寄せ */
float-none     /* 要素詰めなし */


d-inline       /* インライン表示 */
d-block        /* ブロック表示 1要素で1行 */
d-inline-block /* ブロック表示 横並び */

▲TOP

要素配置(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>

▲TOP

リスト

list-unstyled /* スタイルなし ulのclassに指定 */
list-inline   /* 横並びリスト ulのclassに指定 */
list-inline-item /* インラインの場合 liのclassに指定 */

▲TOP

テーブル

table-striped    /* 奇数・偶数で行の色が変わる tableのclassに指定 */
table-bordered   /* 線あり tableのclassに指定 */
table-borderless /* 線なし tableのclassに指定 */
table-hover      /* カーソルを合わせると行の色が変わる tableのclassに指定 */
thead-dark       /* 見出し暗め theadのclassに指定 */
thead-light      /* 見出し明るめ theadのclassに指定 */

▲TOP

テーブル(色)

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に指定*/

▲TOP

画像

img-fluid     /* これでレスポンシブになる */
img-thumbnail /* サムネイル表示用 */

▲TOP

コメント

タイトルとURLをコピーしました