ブートストラップ

ブートストラップの間隔は何ですか？

MDBには、短縮性応答マージンとパディングユーティリティクラスの広い範囲が含まれており、要素の外観を変更できます.

インストール

マニュアルインストール( zipパッケージ)

ブートストラップイメージコンポーネントを利用し、プロジェクトでそれらを使用するには、まずMDB 5 Free package

MDB CLI

腕時計Quick Start Tutorial MDB 5とMDB CLIの完全な可能性を発見し、使用するには

国立天文台

必要条件
プロジェクトを開始する前にNode LTS (12.x.x recommended) .

インストール
MDB UIキットをプロジェクトにインストールするには、次のコマンドを端末に入力します.

npm i mdb-ui-kit 

モジュールのインポート
ライブラリ全体または個々のモジュールをインポートできます.

import * as mdb from 'mdb-ui-kit'; // lib
import { Input } from 'mdb-ui-kit'; // module 

CSSファイルのインポート
MDBスタイルシートをインポートするには、次の構文を使用してください

@import '~mdb-ui-kit/css/mdb.min.css'; 

SSSモジュールのインポート
また、個々のSCSSモジュールをインポートすることができます.適切にするために、私たちは、あなたのプロジェクトとインポートにCookieファイルと同じ方法で直接NodeThoneモジュール/MDB UIキット/src/scssの場所からそれらをコピーすることをお勧めします.

Webpackの統合
Webpackに基づいて新しいプロジェクトを作成するプロセスを大幅にスピードアップすることができますStarter .

CDN

CDN経由のインストールは、MDB UIキットをプロジェクトと統合する最も簡単な方法の一つです.ちょうど最新のコンパイルされたJSスクリプトのタグとCSSのリンクタグからcdnjs を適用します.
必要に応じてフォント素晴らしいフォントフォントを追加することを忘れないでください.以下にコード例を示します:

CSS

<!-- Font Awesome -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
  rel="stylesheet"
/>
<!-- Google Fonts -->
<link
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
  rel="stylesheet"
/>
<!-- MDB -->
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.css"
  rel="stylesheet"
/>

js

<!-- MDB -->
<script
  type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.3.0/mdb.min.js"
></script>

動作方法

応答フレンドリーmargin or padding 要素またはその辺の部分集合を短縮クラスで指定します.個々のプロパティ、すべてのプロパティ、および垂直および水平プロパティのサポートが含まれます.クラスは、デフォルトのSASSから.25rem to 3rem .

表記

すべてのブレークポイントに適用されるスペーシングユーティリティは、XSからXXLまで、ブレークポイントの省略はありません.これは、それらのクラスがmin-width: 0 そして、したがって、メディア質問によって縛られません.ただし、残りのブレークポイントにはブレークポイントの省略形が含まれます.
クラスをフォーマットで指定する{property}{sides}-{size} for x と{property}{sides}-{breakpoint}-{size} for sm , md , lg , xl , and xxl .
プロパティは以下のいずれかです.

m - 設定するクラスmargin

p - 設定するクラスpadding

側面は一つです.

t - 設定するクラスmargin-top or padding-top

b - 設定するクラスmargin-bottom or padding-bottom

s - クラスの設定margin-left or padding-left

e - クラスの設定margin-right or padding-right

x - 両方を設定するクラス*-left 右側の

y - 両方を設定するクラス*-top アンド・ボトム

空白- Aを設定するクラスmargin or padding 要素の四辺に

サイズは以下の通りです:

0 - を排除するクラスmargin or padding 設定することで0

1 - (デフォルトでは)margin or padding to $spacer * .25

2 - (デフォルトでは)margin or padding to $spacer * .5

3 - (デフォルトでは)margin or padding to $spacer

4 - (デフォルトでは)margin or padding to $spacer * 1.5

5 - (デフォルトでは)margin or padding to $spacer * 3

auto - を設定するクラスmargin オート
のエントリを追加することで、より多くのサイズを追加することができます$spacers sass map変数).

カスタマイズ

例
以下にこれらのクラスの代表的な例を示します:

SCSS

.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

あなたは、より多くのカスタマイズ例を見ることができます📄 間隔ドキュメントページ

重要資源

以下は、このコンポーネントを使用して作業するための準備用のリソースです.

読める📄 Spacing documentation page <-- ここからスタート

プロジェクトを最大限に活用するには、スペーシングに関連する他のユーティリティオプションと知り合いましょう.それらのリストを見つけるために、下記のセクションを見てください.

ユーティリティを使用できます📥 Starter Bootstrap 5 templates

テンプレートは📦 Free UI Kit for Bootstrap 5

プロジェクトを終了した後、CLIでそれを公開することができます💽 Free hosting (beta)

関連ユーティリティのオプションと機能

API

Borders

Clearfix

Close button

Embeds

Interactions

Overflow

Position

Screen readers

Sizing

Stretched link

Text

Text truncation

Visibility

1.5インチでブートストラップ5を学んでください

追加リソース

我々の学習ロードマップでウェブ開発を学んでください:
🎓 Start Learning
我々のメーリングリストに加わってください
🎁 Get gifts
インスピレーションとコミュニティ経験のために我々の個人的なFBグループに加わってください
👨‍👩‍👧‍👦 Ask to join
Githubの上でスターによるオープンソースパッケージのサポート作成