はじめに

世界で最も人気のあるフレームワーク Bootstrap で始めましょう。CDN とテンプレートを使ってモバイルファーストなサイトを構築できます。

はじめる

CDN, パッケージマネージャ, ダウンロードなど様々な方法でプロジェクトをすぐに始めることができます。

CSS

<link> を <head> 内側に他のスタイルシートよりも先に入れてください。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

JS

いくつかのコンポーネントで jQuery, Popper.js などの JavaScript プラグインが必要です。<script> を </ body> の直前に順番通りに入れてください。

jQuery はスリム版を使っていますが, フル版でも構いません。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

jQuery, Popper.js などが必要なコンポーネントを知りたければ, 以下の「コンポーネントを表示」リンクをクリックしてください。 ページの構造などで不明な点がある場合は, サンプルページを参照してください。

bootstrap.bundle.js と bootstrap.bundle.min.js には Popper.js が含まれていますが jQuery は含まれていません。 Bootstrap に含まれている詳細は, コンテンツのセクションを参照してください。

JavaScript を必要とするコンポーネントを表示
  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel for all slide behaviors, controls, and indicators
  • Collapse for toggling visibility of content
  • Dropdowns for displaying and positioning (also requires Popper.js)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Tooltips and popovers for displaying and positioning (also requires Popper.js)
  • Scrollspy for scroll behavior and navigation updates

スターターテンプレート

最新のデザインと仕様を確認してください。HTML5 で viewport を使った次のようなコードをおすすめします。

<!doctype html>
<html lang="ja">
  <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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" 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.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

ページに必要なのはこれだけです。 詳しくは レイアウト または サンプル を参照してください。

重要なグローバル設定

Bootstrap はグローバル設定を使用しています。これらはクロスブラウザスタイルのリセットと正規化に必要です。

HTML5 doctype

Bootstrap は HTML5 doctype を使用する必要があります。 使用しないと, 不完全にスタイリングされ大きな問題を引き起こすかもしれません。

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

レスポンシブ用メタタグ

Bootstrap はモバイルファーストで作られています。まずモバイル用にコードを最適化し, 必要に応じて CSS メディアクエリを使ってコンポーネントのスケールアップを実現しています。 適切なレンダリングとすべてのデバイスのズームのタッチを確実にするには viewport 用メタタグを <head> に追加します。

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

スターターテンプレートで実際に動作します。

ボックスサイズ

サイズ指定を簡単にするために, グローバルなボックスサイズを content-box から border-box に変更します。 これにより, 要素のレイアウト計算に影響することはありませんが Google マップや Google カスタム検索エンジンなどのサードパーティ製ソフトウェアで問題が発生する可能性があります。

上書きする必要がある場合は。次を使用してください：

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

上記のスニペットでは, ::before と ::after で生成されたコンテンツを含むネストされた要素は, .selector-for-some-widget に対して指定されたボックスサイズを継承します。

ボックスモデルとサイジングの詳細については CSS Tricks をご覧ください。

リセット

ブラウザやデバイス間のレンダリング差異を吸収するため Reboot を使用して一般的な HTML 要素のリセットを行います。

コミュニティ

Bootstrap 開発について最新の情報を入手しコミュニティに参加することができます。

  • Twitter アカウント @getbootstrap をフォロー
  • The Official Bootstrap Blog を読む/登録
  • the official Slack room に参加
  • IRC なら irc.freenode.net サーバの ##bootstrap チャンネルで Bootstrap 仲間とチャット
  • Stack Overflow (bootstrap-4 タグ) は開発の手助けになるでしょう。
  • 開発者は npm や類似の仕組みを使って配布する際に bootstrap というキーワードを使って, パッケージが容易に検出されるようにしましょう。

あなたは最新の情報を @getbootstrap より得ることができます。

v4.5