【Bootstrap】Bootstrap ～ 入門編 ～

フロントエンドフレームワーク

■ はじめに

Bootstrap についてまとめる。

目次

【１】特徴
　１）動画
【２】用語整理
　１）グリッドシステム
　２）バッジ
　３）ジャンボトロン
　４）コンテナ (container)
【３】環境設定
　１）入手先
　２）設置方法
　３）テンプレート
【４】サンプル
　１）補足

【１】特徴

 * 最新ブラウザのみの対応
 * 文字コードは「UTF-8」(SJISだと文字化けした)

１）動画

* 以下が参考になる

Bootstrap入門
https://dotinstall.com/lessons/basic_bootstrap

【２】用語整理

１）グリッドシステム

* Bootstrapでは、横幅を12分割のグリッドシステムが採用

２）バッジ

* 主にリストグループの中で使用するパーツ
* サブカテゴリの件数を示す場合などに活用

３）ジャンボトロン

* 見出しデザイン
* Webサイトのタイトルなどに活用

４）コンテナ (container)

* 左右に余白を設けてページ中央に配置
* コンテナ要素は、固定幅（.container）と全幅（.container-fluid）
　の２種類用意されている

.container 

* ウィンドウ幅に関わらず内部の幅を固定しておく場合に使用

.container-fluid 

* ウィンドウ幅に連動させて内部の幅を変化させる

【３】環境設定

１）入手先

https://getbootstrap.com/

２）設置方法

* 色々な方法がある。

方法１：CDN / コードに以下をインポートする
https://getbootstrap.com/docs/4.1/getting-started/introduction/

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

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

* jQuery => Popper.js => bootstrap.js の順番で定義する

３）テンプレート

https://getbootstrap.com/docs/4.1/getting-started/introduction/

<!doctype html>
<html lang="jp">
  <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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 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.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>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

【４】サンプル

<!doctype html>
<html lang="en">
  <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.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <a class="close" href="#">×</a>
    <table class="table table-striped table-bordered table-condensed">
      <thead>
        <tr><th>#</th><th>Demo1</th><th>Demo2</th></tr>
      </thead>
      <tbody>
      <tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
      <tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
      <tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
      </tbody>
    </table>
    <a class="btn" href="#">Default</a>
    <a class="btn btn-primary" href="#">Primary</a>
    <a class="btn btn-info" href="#">Info</a>
    <a class="btn btn-success" href="#">Success</a>
    <a class="btn btn-warning" href="#">Warning</a>
    <a class="btn btn-danger" href="#">Danger</a>
    <h1>h1. ヘッダ1</h1>
    <h2>h2. ヘッダ2</h2>
    <h3>h3. ヘッダ3</h3>
    <h4>h4. ヘッダ4</h4>
    <h5>h5. ヘッダ5</h5>
    <h6>h6. ヘッダ6</h6>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <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>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

１）補足

* 下手に日本語サイトを探すよりも
　本家のサンプルで試しながら勉強する方が良さそう

https://getbootstrap.com/docs/4.1/examples/

参考文献

http://d.hatena.ne.jp/end0tknr/20111016/1318729659
http://transitive.info/2011/12/20/bootstrap-css/
http://blog.greative.jp/archives/94

関連記事

The State of CSS 2022
https://dk521123.hatenablog.com/entry/2023/01/01/220655
マテリアル デザイン フレームワーク の比較調査
https://dk521123.hatenablog.com/entry/2018/05/26/005948