Source

序章

レスポンシブなモバイル ファーストのサイトを構築するための世界で最も人気のあるフレームワークである Bootstrap を jsDelivr とテンプレート スターター ページで使い始めましょう。

クイックスタート

Bootstrap をプロジェクトにすばやく追加したいとお考えですか? jsDelivr のスタッフが無料で提供している jsDelivr を使用します。パッケージ マネージャーを使用していますか、それともソース ファイルをダウンロードする必要がありますか? ダウンロードページに移動します。

CSS

<link>スタイルシートを他のすべてのスタイルシートの前にコピーして貼り付け、<head>CSS を読み込みます。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

コンポーネントの多くは、機能するために JavaScript を使用する必要があります。具体的には、jQueryPopper.js、および独自の JavaScript プラグインが必要です。次<script>の をページの最後近く、終了タグの直前に配置</body>して有効にします。jQuery が最初に来て、次に Popper.js、そして JavaScript プラグインが続きます。

jQueryのスリムビルドを使用していますが、フルバージョンもサポートしています。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

jQuery、JS、Popper.js を明示的に必要とするコンポーネントに興味がありますか? 下の [show components] リンクをクリックします。一般的なページ構造がまったくわからない場合は、ページ テンプレートの例を読み続けてください。

JavaScript が必要なコンポーネントを表示する
  • 却下のアラート
  • 状態とチェックボックス/ラジオ機能を切り替えるためのボタン
  • すべてのスライド動作、コントロール、およびインジケーターのカルーセル
  • 折りたたんでコンテンツの表示を切り替える
  • 表示と配置のためのドロップダウン ( Popper.jsも必要)
  • 表示、配置、およびスクロール動作のモーダル
  • Collapse プラグインを拡張してレスポンシブ動作を実装するための Navbar
  • 表示と配置のためのツールチップとポップオーバー ( Popper.jsも必要)
  • スクロール動作とナビゲーションの更新のための Scrollspy

スターター テンプレート

ページが最新のデザインおよび開発基準で設定されていることを確認してください。つまり、HTML5 doctype を使用し、適切なレスポンシブ動作のためにビューポート メタ タグを含めることを意味します。すべてをまとめると、ページは次のようになります。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

ページ全体の要件に必要なのはこれだけです。サイトのコンテンツとコンポーネントのレイアウトを開始するには、レイアウト ドキュメントまたは公式の例にアクセスしてください。

重要なグローバル

Bootstrap は、それを使用する際に注意する必要があるいくつかの重要なグローバル スタイルと設定を採用しています。これらはすべて、クロス ブラウザー スタイルの正規化にほぼ専念しています。飛び込みましょう。

HTML5 文書型

Bootstrap では、HTML5 doctype を使用する必要があります。それがないと、ファンキーで不完全なスタイリングが表示されますが、それを含めても大きな問題は発生しません。

<!doctype html>
<html lang="en">
  ...
</html>

レスポンシブ メタ タグ

Bootstrap はモバイル ファーストで開発されています。これは、最初にモバイル デバイス向けにコードを最適化し、次に必要に応じて CSS メディア クエリを使用してコンポーネントをスケールアップするという戦略です。すべてのデバイスで適切なレンダリングとタッチ ズームを確実に行うには、レスポンシブ ビューポート メタ タグ<head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

この例は、スターター テンプレートで実際に確認できます。

ボックスサイジング

CSS でより簡単なサイズ設定を行うために、グローバルbox-sizing値を からcontent-boxに切り替えborder-boxます。これによりpadding、最終的に計算された要素の幅には影響しませんが、Google マップや Google カスタム検索エンジンなどの一部のサードパーティ ソフトウェアで問題が発生する可能性があります。

まれにオーバーライドする必要がある場合は、次のようなものを使用します。

.selector-for-some-widget {
  box-sizing: content-box;
}

上記のスニペットでは、ネストされた要素 (::beforeおよびを介して生成されたコンテンツを含む) はすべて、その に指定された を::after継承します。box-sizing.selector-for-some-widget

ボックス モデルとサイズ設定については、CSS トリック を参照してください。

リブート

クロスブラウザー レンダリングを改善するために、Rebootを使用してブラウザーとデバイス間の不一致を修正し、一般的な HTML 要素にもう少し独自のリセットを提供します。

コミュニティ

Bootstrap の開発に関する最新情報を入手し、これらの役立つリソースを使用してコミュニティに連絡してください。

  • Twitter で @getbootstrap をフォローしてください。
  • The Official Bootstrap Blogを読み、購読してください。
  • IRC で仲間の Bootstrappers とチャットします。irc.freenode.netサーバー上、チャネル##bootstrap内。
  • 実装のヘルプは、スタック オーバーフロー (タグ付きbootstrap-4) にあります。
  • 開発者は、npmまたは同様の配信メカニズムをbootstrap介して配布するときに Bootstrap の機能を変更または追加するパッケージでキーワードを使用して、最大限の検出可能性を実現する必要があります。

Twitter で @getbootstrap をフォローして、最新のゴシップやすばらしいミュージック ビデオを入手することもできます。