BootstrapとはTwitterが開発したCSSフレームワークで、CSSフレームワークの中では1番ポピュラーな存在です。この記事では、Bootstrapの使い方をサンプルを交えて解説します。この記事自体もBootstrapを使っています。

目次

Bootstrapの使い方

BootstrapのCSSフレームワークは、CSSとJavaScriptから構成されている。

Bootstrapのコンポーネント
コンポーネント 説明
bootstrap.min.css サイズを縮小化したBootstrapのCSS
bootstrap.min.js サイズを縮小化したBootstrapのJavaScript

最低限必要なのはCSSだけである。動きのある視覚効果も使いたい場合は、JavaScriptも必要である。

自サイトからBootstrapをインポートする

自分のサイトにBootstrapのCSSとJavaScriptを配置してインポートするには、次のようにする。

<html>
  <head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://itref.fc2web.com/css/bootstrap.min.css">
  </head>
  <body>
    <!-- コンテンツ -->

    <!-- jQuery -->
    <script src="https://itref.fc2web.com/js/jquery-3.3.1.slim.min.js"></script>
    <script src="https://itref.fc2web.com/js/popper.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://itref.fc2web.com/js/bootstrap.min.js"></script>
  </body>
</html>

bootstrap.jsなどのJavaScriptをインポートする箇所はどこでもよいが、Webブラウザの初期レンダリングを遅延させないために、body要素の最後でインポートするのが望ましい。

jQueryを使う場合は、popper.jsやbootstrap.jsより先にインポートする。

CDNからBootstrapをインポートする

自分のウェブサイトのローカルパスではなく、CDN (Contents Delivery Network)からBootstrapのCSSやJavaScriptを読み込むこともできる。

CDNからBootstrapをインポートするには、次のようにする。

<html>
  <head>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>
  <body>
    <!-- コンテンツ -->

    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

グリッド CSS

Bootstrapでは水平方向に12分割したグリッドシステムを採用している。これにより、2カラムや3カラム、4カラム、6カラムのレイアウトが容易に行える。

Extra small Small Medium Large Extra large
接頭辞 xs sm md lg el
画面幅 1px 〜 543px 544px 〜 767px 768px 〜 991px 992px 〜 1119px 1120px 〜
用途 スマートフォン タブレット PC PC PC

Bootstrapのグリッド使用例

リストグループ CSS

Bootstrapでリストグループを作成するには、次のクラスを指定する。

リストグループに指定するBootstrapのクラス
クラス 説明
list-group リストグループ
list-group-item リストグループの各項目
active アクティブな項目
disabled 無効な項目

Bootstrapを使ったリストグループのHTMLを次に示す。

<ul class="list-group">
  <li class="list-group-item">リスト項目</li>
  <li class="list-group-item active">アクティブなリスト項目</li>
  <li class="list-group-item disabled">無効なリスト項目</li>
  <a href="#" class="list-group-item list-group-item-action">クリックできるリスト項目</a>
  <li class="list-group-item list-group-item-primary">Primary</li>
  <li class="list-group-item list-group-item-secondary">Secondary</li>
  <li class="list-group-item list-group-item-success">Success</li>
  <li class="list-group-item list-group-item-danger">Danger</li>
  <li class="list-group-item list-group-item-warning">Warning</li>
  <li class="list-group-item list-group-item-info">Info</li>
  <li class="list-group-item list-group-item-light">Light</li>
  <li class="list-group-item list-group-item-dark">Dark</li>
</ul>

クリックできるリスト項目は、LI要素ではなくA要素を使う。

上記のリストグループは次のように表示される。

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="/">SE学院</a>
    </li>
    <li class="breadcrumb-item">
      <a href="/css/">CSS</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">Bootstrap</li>
  </ol>
</nav>

関連記事

このエントリーをはてなブックマークに追加