Javascript Bootstrapのグリッドシステム、ナビゲーションバー、カルーセルの詳細な説明

ブートストラップと関連コンテンツの紹介

Bootstrap は、Web アプリケーションと Web サイトを迅速に開発するためのフロントエンドフレームワークです。引用するときは、いくつかの基本的なテンプレートが必要です。

    <メタ文字セット="utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1">
    <!-- 上記の 3 つのメタ タグは必ず最初に配置し、その他のコンテンツは必ずその後に配置します。 -->
    <title>Bootstrap 101 テンプレート</title>
    <!-- ブートストラップ -->
    <link rel="スタイルシート" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" 整合性="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" クロスオリジン="匿名">
    <!-- HTML5 shim と Respond.js は、IE8 が HTML5 要素とメディア クエリをサポートできるようにするためのものです -->
    <!-- 警告: Respond.js は、file:// プロトコル経由でページにアクセスする場合 (つまり、HTML ページをブラウザに直接ドラッグする場合) は機能しません -->
    <!--[IE 9の場合]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->

グリッドシステム

Bootstrap はページまたはコンテナを水平方向に 12 等分します。適切な配置とパディングを得るには、行を .container クラス内に配置する必要があります。 col-lg-("number") を使用して、水平方向に 12 等分します。

<div class="row">
    <div class="col-lg-3">1</div>
    <div class="col-lg-3">2</div>
    <div class="col-lg-3">3</div>
    <div class="col-lg-3">4</div>
</div>

ここに画像の説明を挿入

ネストされた列

<div class="コンテナ">
    <div class="row">
        <div class="col-md-6">
            <!-- col-md-6 はデフォルトで 2 つのボックスを水平に分割します。単純な div の場合は、垂直方向の分布として表示されます -->
            <div class="col-md-6">あ</div>
            <div class="col-md-6">b</div>
        </div>
    </div>
</div>

列オフセット

列を右にオフセットするには、.col-md-offset-* を使用します。

<div class="コンテナ">
    <div class="row">
            <div class="col-md-4">トイレ</div>
             <!-- 合計で 12 個の等しい部分があります。2 つのボックスは元々 8 列のみを占めており、4 列は使用されていませんでした。
            col-md-offset-4 なので、右側のボックスは 4 列右にシフトし続けます -->
            <div class="col-md-4 col-md-offset-4">右</div>
        </div>
    </div>
</div>

列の並べ替え

一般的にボックスの順序を変更するために使用されます

 <div class="コンテナ">
    <div class="row">
        <!-- 左と右のボックスの両方にプッシュ要素とプル要素を使用して、ボックスが押し下げられないようにします -->
            <div class="col-md-4 col-md-push-8">トイレ</div>
            <div class="col-md-8 col-md-pull-4">右</div>
        </div>
    </div>
</div>

ここに画像の説明を挿入

ナビゲーションバー

<nav>タグにclass .navbar 、 navbar-defaultを追加します。
上記の要素にrole="navigation"を追加すると、アクセシビリティが向上します。
<div> 要素はclass .navbar-headerを追加し、 class navbar-brandの <a> 要素を含みます。これにより、テキストが大きく表示されます。
ナビゲーションバーにリンクを追加するには、 class .nav 、 .navbar-navを使用して順序なしリストを追加するだけです。

デモンストレーションは次のとおりです。

<!doctypehtml>
<html lang="ja">
<ヘッド>
    <メタ文字セット="utf-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1">
    <!-- 上記の 3 つのメタ タグは必ず最初に配置し、その他のコンテンツは必ずその後に配置します。 -->
    <title>Bootstrap 101 テンプレート</title>
    <link rel="スタイルシート" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- 両方のスクリプトを記述する必要があります。そうしないと、ドロップダウン メニューが表示されません -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
    <!-- これはレスポンシブ レイアウトです。画面を最大化した場合と縮小した場合のレイアウトは異なります。 -->
<本文>
    <!-- role="navigation" はアクセシビリティの向上に役立ちます -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="コンテナ流体">
            <!-- classnav-brand を持つ <a> 要素を含む "navbar-header" は、テキストを大きく表示します -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                    データターゲット="#example-navbar-collapse">
                    <!-- data-toggle はボタンで何を行うかを JavaScript に指示するために使用され、icon-target は切り替える要素を示し、3 つのアイコンはいわゆるハンバーガー ボタンを表します -->
                    <span class="sr-only">ナビゲーションを切り替える</span>
                    <span class="アイコンバー"></span>
                    <span class="アイコンバー"></span>
                    <span class="アイコンバー"></span>
                </ボタン>
                <a class="navbar-brand" href="#">初心者向けチュートリアル</a>
            </div>
            <div class="collapse navbar-collapse" id="example-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">iOS</a></li>
                    <li><a href="#">SVN</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            ジャワ
                            <b class="caret"></b>
                        </a>
                        <ul class="ドロップダウンメニュー">
                            <li><a href="#">Jメーター</a></li>
                            <li><a href="#">EJB</a></li>
                            <li><a href="#">ジャスパーレポート</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分離されたリンク</a></li>
                            <li class="divider"></li>
                            <li><a href="#">別の独立したリンク</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

グローバルインターフェース

ここに画像の説明を挿入

小さなウィンドウインターフェース

ここに画像の説明を挿入

カルーセル

Bootstrap Carousel プラグインは、サイトにスライダーを追加するための柔軟でレスポンシブな方法です。それに加えて、コンテンツも十分に柔軟であり、画像、iframe、ビデオ、または配置したいその他のタイプのコンテンツにすることができます。

デモ例:

 <本文>
	<div id="myCarousel" class="カルーセルスライド">
		<!-- カルーセル インジケーター -->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol>
		<!-- カルーセル プロジェクト -->
		<div class="carousel-inner">
			<div class="item アクティブ">
		<!-- 画像は絶対パスを参照しているため、相対パスは間違っています -->
				<img src="1.jpg" alt="最初のスライド" style="width: 100%;height: 200px;">
			</div>
			<div class="item">
				<img src="2.jpg" alt="2番目のスライド" style="width: 100%;height: 200px;">
			</div>
			<div class="item">
				<img src="3.jpg" alt="3番目のスライド" style="width: 100%;height: 200px;">
			</div>
		</div>
		<!-- 上下ジャンプ コントロール、ジャンプ コントロールは前方、前方、後方に移動できます -->
		<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">前へ</span>
		</a>
		<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">次へ</span>
		</a>
	</div>
</本文>

ここに画像の説明を挿入