【Bootstrap4】Bootstrap 4 ~ 入門編 ~

■ はじめに

2018/08/04追記
 * 記事が、Bootstrap3で古くなったので、徐々に書き直していく

■ 特徴

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

動画

 * 以下が参考になる
* Bootstrap 4入門 (全22回)
https://dotinstall.com/lessons/basic_twitter_bootstrap_v5

■ 用語整理

グリッドシステム

 * 以下の関連記事を参照のこと
https://blogs.yahoo.co.jp/dk521123/36093995.html
 * Bootstrapでは、横幅を12分割のグリッドシステムが採用

バッジ

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

ジャンボトロン

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

コンテナ (container)

 * 左右に余白を設けてページ中央に配置
 * コンテナ要素は、固定幅(.container)と全幅(.container-fluid)の2種類用意されている
.container
 * ウィンドウ幅に関わらず内部の幅を固定しておく場合に使用
.container-fluid
 * ウィンドウ幅に連動させて内部の幅を変化させる


■ 設置方法

 * 色々な方法がある。

方法: 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://blogs.yahoo.co.jp/dk521123/37655508.html

■ テンプレート

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/


関連記事

Bootstrap

Bootstrap 4 ~ 基本編 / グリッドシステム ~
https://blogs.yahoo.co.jp/dk521123/36093995.html
Bootstrap 4 ~ ボタン / アイコン 編 ~
https://blogs.yahoo.co.jp/dk521123/36125142.html
Bootstrap 4 ~ テーブル編 ~
https://blogs.yahoo.co.jp/dk521123/36101217.html
Bootstrap 4 ~ Form編 ~
https://blogs.yahoo.co.jp/dk521123/36103698.html
Bootstrap 4 ~ モーダルダイアログ編 ~
https://blogs.yahoo.co.jp/dk521123/36099100.html
Bootstrap 4 ~ Tooltip / Popovers 編 ~
https://blogs.yahoo.co.jp/dk521123/37698071.html
Bootstrap 4 におけるトラブルシュート
https://blogs.yahoo.co.jp/dk521123/37655508.html

バリデーションチェック

クライアントサイドの検証処理/バリデーション ~ Bootstrap4編 ~
https://blogs.yahoo.co.jp/dk521123/37666873.html
クライアントサイドの検証処理/バリデーション ~ Parsley編 ~
https://blogs.yahoo.co.jp/dk521123/37669958.html

アイコン

アイコン を 表示する ~ Font Awesome
https://blogs.yahoo.co.jp/dk521123/35506135.html

Material Design

Material Design for Bootstrap 4 ~ 入門編 ~
https://blogs.yahoo.co.jp/dk521123/37632575.html