Skip to main content Skip to docs navigation
View on GitHub

はじめに

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

On this page

はじめる

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

CSS

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

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

JS

いくつかのコンポーネントで Popper.js と JavaScript プラグインが必要です。<script> を </body> の直前に入れてください。Popper.js を先頭に入れてから JavaScript プラグインを追加してください。

Bundle

bootstrap.bundle.js と bootstrap.bundle.min.js には Tooltip と Popover 用に Popper が含まれています。詳細は contents を参照してください。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Separate

個別にスクリプトを使う場合は、最初に Popoer.js を読み込み、次in JavaScript プラグインを読み込んで下さい。

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

もし <script type="module"> を使っている場合は モジュールとして Bootstrap を使う を参照してください。

どのコンポーネントが JavaScript と Popper.js を必要としているかは、以下を参照してください。ページの構造などで不明な点がある場合は、サンプルページを参照してください。

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)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Toasts for displaying and dismissing
  • Tooltips and popovers for displaying and positioning (also requires Popper)
  • Scrollspy for scroll behavior and navigation updates

スターターテンプレート

HTML5 で viewport を使った次のようなコードをおすすめします。

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

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>私は仕事が大好きです。</title>
  </head>
  <body>
    <h1>私は仕事が大好きです。</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

ページに必要なものはこれだけです。サイトのコンテンツやコンポーネントのレイアウトに関しては、レイアウトやサンプルを参照してください。

重要なグローバル設

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

HTML5 doctype

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

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

レスポンシブ用メタタグ

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

Box-sizing

サイズ指定を簡単にするために、グローバルな Box-sizing を 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 をフォローすれば最新 Bootstrap 情報や素晴らしい音楽ビデオ情報を入手できます。