Skip to main content Skip to docs navigation Bootstrap 4 (安定版) はこちらです

はじめに

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

目次

はじめる

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

CSS

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

JS

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

<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/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

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

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

bootstrap.bundle.jsbootstrap.bundle.min.js には Popper が含まれています。詳細については、コンテンツを参照してください。

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">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- Popper.js first, then Bootstrap JS -->
    <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/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" 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">

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

ボックスサイズ

サイズ指定を簡単にするために、グローバルなボックスサイズを 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 開発について最新の情報を入手しコミュニティに参加することができます。

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