補講2.BootStrapで今風のデザインを実現する　コンポーネント編

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First</th>
            <th>Last</th>
            <th>Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th>2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th>3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

<table class="table">
    <!-- ① -->
    <thead>
        <!-- ② thead要素はテーブルのヘッダー行グループを示します。-->
        <tr>
            <!-- ③ tr要素はテーブルの行を示します。 -->
            <th scope="col">#</th><!-- ④ th要素はテーブルのヘッダーセルを示します。
            scope="col"はこのヘッダーセルが列のヘッダーであることを示します。 -->
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <!-- ⑤ tbody要素はテーブルのボディ行グループを示します。 -->
        <tr>
            <th scope="row">1</th>
            <!-- ⑥ th要素はテーブルのヘッダーセルを示します。
            今回はscope="row"が付与されていて、このヘッダーセルが行のヘッダーであることを示します。 -->
            <td>Mark</td><!-- ⑦ td要素はテーブルのデータセルを示します。 -->
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <!-- ③ tr要素はテーブルの行を示します。 -->
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <!-- ③ tr要素はテーブルの行を示します。 -->
            <th scope="row">3</th>
            <!-- ⑧ td要素にcolspan="2"が付与されています。
            これはこのデータセルが2列に跨ることを示します。 -->
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
    <!-- Bootstrapのnavbarクラスを用いてナビゲーションバーを作成します。
　　navbar-expand-lgは画面がlgサイズより大きい時にナビゲーションバーを展開します。
　　navbar-darkとbg-darkはナビゲーションバーのテーマ色を暗く設定します。
　　mb-4はマージンボトムを設定します。-->

    <div class="container-fluid">
        <!-- container-fluidは、Bootstrapのクラスで、全画面幅を利用するコンテナを作成します。 -->

        <a class="navbar-brand" href="#">Kaeru</a>
        <!-- ①navbar-brandクラスを使用してブランドロゴを作成します。"Kaeru"がブランド名です。 -->

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
            aria-expanded="false" aria-label="Toggle navigation">
            <!-- ②navbar-togglerクラスを使用して、画面サイズが小さい場合に表示されるハンバーガーメニューの
　　　　　　　　　　トグルボタンを作成します。
　　　　　　　　　　このボタンは、クリックすると"navbarSupportedContent"というIDのdiv要素の表示を切り替えます。 -->

            <span class="navbar-toggler-icon"></span>
            <!-- このspan要素は、トグルボタンのアイコン（通常はハンバーガーアイコン）を表示します。 -->
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <!-- このdiv要素は、navbar-togglerボタンによって表示の切り替えが行われる領域を示しています。 -->

            <ul class="navbar-nav d-flex justify-content-between mb-2 mb-lg-0">
                <!-- このul要素は、ナビゲーションバーの各項目をリストとして格納します。
　　　　　　　　　d-flexクラスを使用してフレックスボックスを作成し、justify-content-betweenでアイテムを均等に配置します。 -->

                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">新車</a>
                    <!-- ③これは"新車"というリンクを含むナビゲーションバーの項目です。
　　　　　　　　　　　　activeクラスが追加されているため、現在このページが選択されていることを示しています。 -->
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">中古車</a>
                    <!-- ④これは"中古車"というリンクを含むナビゲーションバーの項目です。 -->
                </li>

                <li class="nav-item dropdown">
                    <!-- ⑤このli要素は、"サービス"というドロップダウンメニューを含むナビゲーションバーの項目です。 -->

                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        サービス
                    </a>
                    <!-- このリンクをクリックすると、ドロップダウンメニューが展開します。 -->

                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <!-- ⑥これが上記の"サービス"リンクをクリックした際に表示されるドロップダウンメニューです。 -->

                        <li><a class="dropdown-item" href="#">車検</a></li>
                        <li><a class="dropdown-item" href="#">点検</a></li>

                        <li>
                            <hr class="dropdown-divider">
                            <!-- ⑦dropdown-dividerクラスを持つ水平線（hr要素）で、ド
　　　　　　　　　　　　　　　　　　　ロップダウンメニューの項目を分割します。 -->
                        </li>

                        <li><a class="dropdown-item" href="#">自動車保険</a></li>
                        <!-- ドロップダウンメニューの一項目、"自動車保険"のリンクです。 -->
                    </ul>
                </li>

                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">ログイン</a>
                    <!-- ⑧これは"ログイン"というリンクを含むナビゲーションバーの項目ですが、
　　　　　　　　　　　　　　disabledクラスが付与されているため、現在使用できません。 -->
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- ナビゲーションバーの定義が終了 -->

<form>
    <div>
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" id="exampleInputEmail1" aria-describedby="emailHelp">
        <div id="emailHelp">We'll never share your email with anyone else.</div>
    </div>
    <div>
        <label for="exampleInputPassword1">Password</label>
        <input type="password" id="exampleInputPassword1">
    </div>
    <div>
        <input type="checkbox" id="exampleCheck1">
        <label for="exampleCheck1">Check me out</label>
    </div>
    <button type="submit">Submit</button>
</form>

<form>
	<!-- mb-3: 下向きのマージンを設定します。数値はマージンの大きさを表します。 -->
	<div class="mb-3">
		<!-- ①form-label: フォームのラベルにスタイリングを適用します。 -->
		<label for="exampleInputEmail1" class="form-label">Email address</label>
		<!-- ②form-control: フォーム要素にスタイリングを適用します。
　　　　　ここではテキスト入力ボックスにスタイリングを適用しています。 -->
		<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
		<!-- ③form-text: フォームのヘルプテキストにスタイリングを適用します。
　　　　　通常は、フォームフィールドの説明や指示に使用します。 -->
		<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
	</div>
	<div class="mb-3">
		<!-- form-label: フォームのラベルにスタイリングを適用します。 -->
		<label for="exampleInputPassword1" class="form-label">Password</label>
		<!-- form-control: フォーム要素にスタイリングを適用します。
　　　　　ここではパスワード入力ボックスにスタイリングを適用しています。 -->
		<input type="password" class="form-control" id="exampleInputPassword1">
	</div>
	<!-- ④mb-3: 上記と同様に下向きのマージンを設定します。
　　　　form-check: チェックボックスまたはラジオボタンとそのラベルに対するスタイリングを適用します。 -->
	<div class="mb-3 form-check">
		<input type="checkbox" class="form-check-input" id="exampleCheck1">
		<label class="form-check-label" for="exampleCheck1">Check me out</label>
	</div>
	<!-- ⑤btn: ボタンに対する基本的なスタイリングを適用します。
　　　　　btn-primary: ボタンにプライマリー（通常は青色）の背景色を適用します。 -->
	<button type="submit" class="btn btn-primary">Submit</button>
</form>

<button type="button" class="btn btn-primary">Primary</button><!-- ① -->
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button><!-- ② -->

<div class="col">
<!-- Bootstrapのグリッドシステムを利用してコンテンツを配置します。"col"クラスは、利用可能な空間を等しく分割します。 -->

	<div class="card">
	<!-- "card"クラスは、Bootstrapのカードコンポーネントを示しています。
　　カードは、様々な種類の情報を整理して表示するための柔軟なコンテナです。 -->

		<img src="img/sports.jpg" class="card-img-top" alt="car-name">
		<!-- "card-img-top"クラスを持つimg要素は、カードの上部に画像を配置します。-->

		<div class="card-body">
		<!-- "card-body"クラスは、カードの主要なコンテンツ領域を表します。 -->

			<h5 class="card-title">スーパーカー</h5>
			<!-- "card-title"クラスは、カードのタイトルを定義します。-->

			<p class="card-text">スピードと静寂、二つの世界が融合する</p>
			<!-- "card-text"クラスは、カードのテキストコンテンツを定義します。この例では、説明文が設定されています。 -->

			<button type="button" class="btn btn-primary">詳細</button>
			<!-- "btn"と"btn-primary"クラスを持つbutton要素は、プライマリーボタンを定義します。-->

		</div>
		<!-- "card-body"の終了タグです。 -->

	</div>
	<!-- "card"の終了タグです。 -->

</div>
<!-- "col"の終了タグです。このコンテナ内に配置された要素（この例ではカード）は、
　　　ブラウザの可視領域に応じて自動的にレスポンシブに配置されます。 -->