ブートストラップ

ブートストラップの位置は？

これらのヘルパーを使用して要素の位置をすばやく設定します.

インストール

マニュアルインストール( 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>

カスタマイズ

基本的な例

固定トップ
ビューポートの上部にある要素を、エッジからエッジに配置します.あなたのプロジェクトの固定位置の結果を理解してください追加のCSSを追加する必要があります.

HTML

<div class="fixed-top">...</div>

固定底
ビューポートの下部にある要素を、エッジからエッジに配置します.あなたのプロジェクトの固定位置の結果を理解してください追加のCSSを追加する必要があります.

<div class="fixed-bottom">...</div>

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

重要資源

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

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

プロジェクトを最大限に活用するには、位置に関連する他のユーティリティオプションを知らせる必要があります.それらのリストを見つけるために、下記のセクションを見てください.

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

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

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

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

API

Borders

Clearfix

Close button

Embeds

Interactions

Overflow

Screen readers

Sizing

Spacing

Stretched link

Text

Text truncation

Visibility

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

追加リソース

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