レイアウト用ユーティリティ
レベル一覧
Bootstrap標準の余白ユーティリティに、レベル6とレベル7を追加しています。利用できるレベルの一覧は以下です。
| レベル | 値 | MTテーマでのカスタマイズ | 使用例 |
|---|---|---|---|
| auto | auto |
Bootstrap標準 | .mt-auto |
| 0 | 0 |
Bootstrap標準 | .mt-0 |
| 1 | 0.25rem |
Bootstrap標準 | .mt-1 |
| 2 | 0.5rem |
Bootstrap標準 | .mt-2 |
| 3 | 1rem |
Bootstrap標準 | .mt-3 |
| 4 | 1.5rem |
Bootstrap標準 | .mt-4 |
| 5 | 3rem |
Bootstrap標準 | .mt-5 |
| 6 | 5rem |
テーマで追加 | .mt-6 |
| 7 | 8rem |
テーマで追加 | .mt-7 |
クラス名のルール
クラスは、{property}{sides}-{size}という形式で表現されます。
propertyは以下のいずれかです。
m-marginを設定するクラスの場合p-paddingを設定するクラス用
sidesは以下のいずれかです。
t-margin-topまたはpadding-topを設定します。b-margin-bottomまたはpadding-bottomを設定します。s- (start)LTRでmargin-leftまたはpadding-leftを、RTLでmargin-rightまたはpadding-rightを設定します。e- (end)LTRでmargin-rightまたはpadding-right、RTLでmargin-leftまたはpadding-leftを設定します。x-*-leftと*-rightの両方を設定します。y-*-topと*-bottomの両方を設定します。- blank - 要素の四辺に
marginまたはpaddingを設定します。
sizeは以下のいずれかです。
auto-marginをautoに設定します。0-marginまたはpaddingを0に設定することで削除します。1- (デフォルトでは)marginまたはpaddingを$spacer * .25を設定します。2- (デフォルトでは)marginまたはpaddingを$spacer * .5を設定します。3- (デフォルトでは)marginまたはpaddingを$spacerを設定します。4- (デフォルトでは)marginまたはpaddingを$spacer * 1.5を設定します。5- (デフォルトでは)marginまたはpaddingを$spacer * 3を設定します。
| クラス | 具体的なスタイル | 備考 |
|---|---|---|
.mt-auto |
margin-top: auto |
上のマージン |
.mb-0 |
margin-bottom: 0 |
下のマージン |
.ms-1 |
margin-left: 0.25rem |
左のマージン。スタートのs。 |
.me-2 |
margin-right: 0.5rem |
右のマージン。エンドのe。 |
.px-3 |
padding-left: 1rempadding-right: 1rem
|
左右のパディング |
.py-4 |
padding-top: 1.5rempadding-bottom: 1.5rem
|
上下のパディング |
.p-5 |
padding: 3rem
|
上下左右のパディング |