補講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>

		<div class="m-2">
			<button type="button" class="btn btn-primary">btn-primary：主要なアクションに使用されます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-secondary">btn-secondary：主要なアクション以外のものに使用します。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-success">btn-success：成功または肯定的なアクションに対して使われます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-danger">btn-danger：危険や否定的なアクションに対して使われます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-warning">btn-warning：警告や注意が必要なアクションに対して使われます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-info">btn-info：情報提供のためのアクションに対して使われます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-light">btn-light：明るいテーマのデザインに使われます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-dark">btn-dark：暗いテーマのデザインに使われます。</button>
		</div>
		<div class="m-2">
			<button type="button" class="btn btn-link">btn-link：リンクも一種のボタンとして指定可能です。</button>
		</div>
	</div>

     <div class="row row-cols-md-2 row-cols-1 g-4 mb-4">
            <div class="col">
                <div class="card">
                    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image 1">
                    <div class="card-body">
                        <h5 class="card-title">カードのタイトル 1</h5>
                        <p class="card-text">これはカードの本文の例です。</p>
                    </div>
                </div>
            </div>
　　　　　　//（カードを４枚省略）
            <div class="col">
                <div class="card">
                    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image 4">
                    <div class="card-body">
                        <h5 class="card-title">カードのタイトル 6</h5>
                        <p class="card-text">これはカードの本文の例です。</p>
                    </div>
                </div>
            </div>
        </div>