Boostrapに定義されているクラスを自分メモ用にまとめておきます。
随時追加していきます。
メディアクエリーブレークポイント（BreakPoint）の指定
Bootstrapでの画面サイズによるメディアクエリーのブレークポイント（BreakPoint）クラス。
ブレークポイント（BreakPoint）
- xl ・・・画面幅1200px以上のデスクトップ PC などの大画面モニタ
- lg ・・・画面幅992px以上のノート PC などの省サイズモニタ
- md ・・・画面幅768px以上のタブレット端末など
- sm ・・・画面幅576px以上のスマートフォン（横持ち）など
- なし・・・画面幅576px未満のスマートフォン（縦持ち）、IoT 端末など
Bootstrap4のグリッドシステムおさらい
Bootstrap4では画面の横幅を12分割して管理する「グリッドシステム」を採用しています。「グリッドシステム」を利用すれば、簡単にスマホなどに対応したレスポンシブデザインの表を作成することができます。
lightgauge.net
2019.11.11
幅（width）の指定
Bootstrapでの幅（width）の指定クラス。
幅（width）
- w-25・・・width:25% !important
- w-50・・・width:50% !important
- w-75・・・width:75% !important
- w-100・・・width:100% !important
- w-auto・・・width:auto !important
- mw-100・・・max-width:100% !important
Boostrapで横幅と高さを指定する方法
Boostrapでの横幅と高さの指定は既定のクラスが設定されているので、そのクラスを利用すると簡単に横幅と高さが設定できます。
lightgauge.net
2019.11.11
高さ（height）の指定
Bootstrapでの高さ（height）の指定クラス。
高さ（height）
- h-25・・・height:25% !important
- h-50・・・height:50% !important
- h-75・・・height:75% !important
- h-100・・・height:100% !important
- h-auto・・・height:auto !important
- hw-100・・・height-width:100% !important
Boostrapで横幅と高さを指定する方法
Boostrapでの横幅と高さの指定は既定のクラスが設定されているので、そのクラスを利用すると簡単に横幅と高さが設定できます。
lightgauge.net
2019.11.11
マージン（margin）の指定
Bootstrapでのマージン（margin）の指定クラス。
マージン（margin）
- mt・・・上マージン
- mb・・・下マージン
- ml・・・左マージン
- mr・・・右マージン
- mx・・・左右マージン
- my・・・上下マージン
- m・・・上下左右マージン
Boostrapでマージン（margin)とパディング（Paddning）を指定する方法
Boostrapでのマージン（margin)とパディング（Paddning）の指定は既定のクラスが設定されているので、そのクラスを利用するとマージン（margin)とパディング（Paddning）が設定できます。
lightgauge.net
2019.11.11
パディング（paddning）の指定
Bootstrapでのパディング（paddning）の指定クラス。
パディング（paddning）
- pt・・・上パディング
- pb・・・下パディング
- pl・・・左パディング
- pr・・・右パディング
- px・・・左右パディング
- py・・・上下パディング
- p・・・上下左右パディング
Boostrapでマージン（margin)とパディング（Paddning）を指定する方法
Boostrapでのマージン（margin)とパディング（Paddning）の指定は既定のクラスが設定されているので、そのクラスを利用するとマージン（margin)とパディング（Paddning）が設定できます。
lightgauge.net
2019.11.11
マージン（margin）、パディング（paddning）のサイズ指定
Bootstrapでのマージン（margin）、パディング（paddning）のサイズの指定クラス。
パディング（paddning）
- 0・・・サイズ「0」
- 1・・・サイズ「0.25rem」
- 2・・・サイズ「0.5rem」
- 3・・・サイズ「1rem」
- 4・・・サイズ「1.5rem」
- 5・・・サイズ「3rem」
- auto・・・サイズ「auto」
Boostrapでマージン（margin)とパディング（Paddning）を指定する方法
Boostrapでのマージン（margin)とパディング（Paddning）の指定は既定のクラスが設定されているので、そのクラスを利用するとマージン（margin)とパディング（Paddning）が設定できます。
lightgauge.net
2019.11.11
テキストの左寄せ、中央寄せ、右寄せの指定
Bootstrapでのテキストの左寄せ、中央寄せ、右寄せ（align）のクラス。
左寄せ、中央寄せ、右寄せ（align）
- text-left ・・・テキストを左寄せにする
- text-center ・・・テキストを中央寄せにする
- text-right ・・・テキストを右寄せにする
Bootstrapでtext-left、text-center、text-rightを使って左寄せ・中央・右寄せを行う方法
Bootstrapではキストの左寄せ・中央・右寄せをtext-left、text-center、text-rightクラスを利用して行います。その具体的な使用方法と表示サンプルを示します。
lightgauge.net
2019.11.11
行揃えの指定
Bootstrapでのテキストの行揃えのクラス。
行揃え
- text-justify・・・両端揃えにする
- text-nowrap・・・改行しないようにする
文字色の指定
Bootstrapでのテキストの文字色指定のクラス。
文字色
- text-primary・・・青系統の色
- text-success・・・緑系統の色
- text-info・・・薄い青系統の色
- text-warning・・・黄系統の色
- text-danger・・・薄い赤系統の色
- text-muted・・・灰色
背景色の指定
Bootstrapでの背景色指定のクラス。
背景色
- bg-primary・・・青系統の色
- bg-success・・・緑系統の色
- bg-info・・・薄い青系統の色
- bg-warning・・・黄系統の色
- bg-danger・・・薄い赤系統の色
見出しの指定
Bootstrapでの見出し指定のクラス。
見出し
- h1・・・文字にh1要素と同じ書式を指定
- h2・・・文字にh2要素と同じ書式を指定
- h3・・・文字にh3要素と同じ書式を指定
- h4・・・文字にh4要素と同じ書式を指定
- h5・・・文字にh5要素と同じ書式を指定
- h6・・・文字にh6要素と同じ書式を指定
ジャンボトロン
Bootstrapでのジャンボトロン作成のクラス。
ジャンボトロン
- jumbotron・・・ジャンボトロンの作成
親要素いっぱいに広がるジャンボトロンを使う方法
親要素いっぱいに広がるエリアを設定するジャンボトロン。ジャンボトロンは背景画像などをうまく使えれば、いろいろな表現ができるのでぜひ使い方をマスタしましょう。
lightgauge.net
2019.11.11
リスト（ol、ul）への書式を設定する
Bootstrapでのリスト（ol、ul）への書式を設定するクラス。
リスト（ol、ul）への書式設定
- list-unstyled・・・マーカーを削除して左の余白を0に指定する
- list-inline・・・各項目を横に並べる（マーカーなし）
定義リスト（dl,dt,dd）への書式を設定する
Bootstrapでの定義リスト（dl,dt,dd）への書式を設定するクラス。
定義リスト（dl,dt,dd）への書式設定
- dl-horizontal・・・「用語」と「意味」を横に並べて配置する
画像の表示サイズを設定する
Bootstrapでの画像の表示サイズを設定するクラス。
画像の表示サイズ
- img-responsive・・・画像を親要素の幅に縮小して表示する
- img-rounded・・・画像の四隅を角丸で表示する
- img-circle・・・画像の楕円形で表示する
- img-thumbnail・・・画像の周囲を角丸の枠線で囲んで表示する
Bootstrapで画像を丸く表示するrounded-circleの使い方
Bootstrap4では「rounded-circle」を使えば簡単に四角い画像を丸く切り取って表示することができます。Bootstrap3で使えた「img-circle」が動作しないのは少し残念です。
lightgauge.net
2019.11.11
