Skip to main content Skip to docs navigation
View on GitHub

Bootstrapをはじめる Get started with Bootstrap

Bootstrapは、強力で機能満載のフロントエンドツールキットです。プロトタイプから本番環境まで、数分で何でも構築できます。

On this page

クイックスタート

ビルドステップを必要とせず、CDN経由でBootstrapの本番環境対応のCSSとJavaScriptを含めることで開始できます。このBootstrap CodePenデモで実際に確認してください。


  1. プロジェクトルートに新しいindex.htmlファイルを作成します。 モバイルデバイスでの適切なレスポンシブ動作のために、<meta name="viewport">タグも含めてください。

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. BootstrapのCSSとJSを含めます。 CSSの<link>タグを<head>に配置し、JavaScriptバンドル（ドロップダウン、ポップオーバー、ツールチップの配置のためのPopperを含む）の<script>タグを閉じる</body>の前に配置します。CDNリンクの詳細をご覧ください。

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-64UC4BEhTGwk3eGpak4nO2jqtl7liTS+juXkSJ2gPAQPmlClQO7s5UgCeR6US48g" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-jdSIJTK9l6XwXj3RixpVDXtMcA2bFd9O81RlLAwhpr2oXRqvQP88rr16IeFXTgFE" crossorigin="anonymous"></script>
  </body>
</html>

    PopperとJSを個別に含めることもできます。ドロップダウン、ポップオーバー、またはツールチップを使用する予定がない場合は、Popperを含めないことで数キロバイトを節約できます。

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" integrity="sha384-L0XZBFD+a5R/Q+jXRJXW+YY6nKl+MBLAye9ktyaUBtVGzgUqd6RLzfYvnkfwyaJV" crossorigin="anonymous"></script>

  3. Hello, world! お好みのブラウザでページを開いて、Bootstrapページを確認します。これで、独自のレイアウトを作成し、数十のコンポーネントを追加し、公式の例を活用して、Bootstrapでの構築を開始できます。

CDNリンク

参考として、主要なCDNリンクは次のとおりです。

説明URL
CSShttps://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css
JShttps://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js

CDNを使用して、Contentsページにリストされている追加のビルドのいずれかを取得することもできます。

CDNリンクを使用する場合は、正しいファイルとバージョンを確認するためにintegrity属性を使用してください。これらのハッシュは、Bootstrapの各ファイルとバージョンに固有のものなので、新しいバージョンに更新する場合は、integrity属性も更新してください。

また、CORSエラーを防ぐために、crossorigin="anonymous"属性も含めています。

次のステップ

JSコンポーネント

どのコンポーネントがJavaScriptとPopperを明示的に必要とするか知りたいですか？一般的なページ構造について少しでも不安がある場合は、ページテンプレートの例を読み続けてください。

  • Collapseプラグインを拡張するためのAccordions
  • 閉じるためのAlerts
  • 状態の切り替えとチェックボックス/ラジオ機能のためのButtons
  • すべてのスライド動作、コントロール、インジケーターのためのCarousel
  • コンテンツの表示/非表示を切り替えるためのCollapse
  • 表示と配置のためのDropdowns（Popperも必要）
  • 表示、配置、スクロール動作のためのModals
  • レスポンシブ動作を実装するためにCollapseとOffcanvasプラグインを拡張するためのNavbar
  • コンテンツペインを切り替えるためのTabプラグインを使用したNavs
  • 表示、配置、スクロール動作のためのOffcanvases
  • スクロール動作とナビゲーション更新のためのScrollspy
  • 表示と閉じるためのToasts
  • 表示と配置のためのTooltipsとpopovers（Popperも必要）

重要なグローバル設定

Bootstrapは、いくつかの重要なグローバルスタイルと設定を採用しており、そのすべてはほぼ独占的にクロスブラウザスタイルの正規化に向けられています。詳しく見ていきましょう。

HTML5 doctype

BootstrapはHTML5 doctypeの使用を必要とします。これがないと、奇妙で不完全なスタイリングが表示されます。

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

Viewport meta

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

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

これの実際の動作はクイックスタートで確認できます。

Box-sizing

CSSでより簡単なサイジングを実現するために、グローバルbox-sizing値をcontent-boxからborder-boxに切り替えます。これにより、paddingが要素の最終的な計算幅に影響しないことが保証されますが、Google MapsやGoogle Custom Search Engineなどの一部のサードパーティソフトウェアで問題を引き起こす可能性があります。

まれにこれをオーバーライドする必要がある場合は、次のようなものを使用してください：

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

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

CSS Tricksのボックスモデルとサイジングについて詳しく学んでください。

Reboot

クロスブラウザレンダリングを改善するために、Rebootを使用してブラウザとデバイス間の不整合を修正しながら、一般的なHTML要素に少しより意見の強いリセットを提供します。

コミュニティ

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

  • 公式Bootstrapブログを読んで購読してください。
  • GitHub Discussionsで質問を投稿し、探索してください。
  • コミュニティDiscordまたはBootstrap subredditでディスカッション、質問などを行ってください。
  • IRCで仲間のBootstrapperとチャットしてください。irc.libera.chatサーバーの#bootstrapチャンネルで。
  • 実装のヘルプはStack Overflow（bootstrap-5タグ付き）で見つかる場合があります。
  • 開発者は、npmまたは類似の配信メカニズムを通じて配布する場合、Bootstrapの機能を変更または追加するパッケージでbootstrapキーワードを使用して、最大限の発見可能性を確保する必要があります。

最新のゴシップや素晴らしいミュージックビデオについては、@getbootstrap on Xをフォローすることもできます。