ブートストラップ4-クイックガイド
Bootstrap 4とは何ですか？
Bootstrap 4は、Web上でレスポンシブモバイルファーストサイトを構築するための強力で人気のあるモバイルファーストフロントエンドフレームワークです。これは、HTML、CSS、およびJavaScriptを使用するBootstrapの最新バージョンです。
歴史
Bootstrap v3.3.7の最後の安定したリリースは、2016年7月で、2017年8月にBootstrap4.0.0ベータバージョンがリリースされました。
なぜBootstrapを使用するのですか？
個別のファイルで使用するのではなく、ライブラリ全体でモバイルファーストスタイルが含まれています。
HTMLとCSSの知識だけで、誰でもBootstrapを使い始めることができます。また、Bootstrapの公式サイトには優れたドキュメントがあります。
すべての一般的なブラウザでサポートされており、レスポンシブCSSはデスクトップ、タブレット、モバイルに適応します。
開発者向けのインターフェースを構築するためのクリーンで統一されたソリューションを提供します。
カスタマイズが簡単な美しく機能的な組み込みコンポーネントが含まれています。
これはオープンソースであり、Webベースのカスタマイズを提供します。
ブートストラップ3v / sブートストラップ4
Bootstrap4はBootstrap3の最新バージョンであり、ソースCSSファイルはSCSSに変換されます。グリッドシステムにフレックスモーダルを使用し、最新のすべてのブラウザをサポートします。ただし、Internet Explorer9以降およびiOS7以降をサポートし、IE 8以下のバージョン、iOS6以下のバージョンのサポートを終了しました。Bootstrap3とBootstrap4の違いの詳細については、この章を確認してください。
CDN（コンテンツ配信ネットワーク）からブートストラップ4を含めるか、getbootstrap.comからダウンロードすることにより、Webサイトでブートストラップ4の使用を開始できます。
CDNの使用
Bootstrap 4は、コンテンツ配信ネットワークから含めることでWebサイトで使用できます。
以下にコンパイルされたBootstrapのCSSとJSのCDNをプロジェクトで使用します。
<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet"
href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin = "anonymous">
</script>
<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin = "anonymous">
</script>
<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin = "anonymous">
</script>コンパイルされたバージョンのJavaScriptを使用している場合は、縮小されたBootstrap JavaScriptの前にCDNバージョンのjQueryとPopper.jsを含めます（Bootstrap 4はjQueryとPopper.jsを使用してモーダル、ツールチップ、ポップオーバーなどのJavaScriptコンポーネントを利用します）。
以下は、jQueryを必要とするいくつかのコンポーネントです-
クローズ可能なアラートに使用されます
ボタンとチェックボックス/ラジオボタンを使用して状態を切り替え、コンテンツを切り替えるには折りたたむ
スライド、コントロール、インジケーター用のカルーセル
ドロップダウン（完璧な配置のためにPopper.jsを使用）
モーダルを開閉します
ナビゲーションバーを折りたたむため
ツールチップとポップオーバー（完璧な配置のためにPopper.jsを使用）
Bootstrap4のダウンロード
Bootstrap4はからダウンロードできます https://getbootstrap.com/docs/4.1/getting-started/download/。このリンクをクリックすると、以下のような画面が表示されます-
ここに2つのボタンがあります-
Download−これをクリックすると、BootstrapのCSSおよびJavaScriptのプリコンパイル済みおよび縮小版をダウンロードできます。ドキュメントやオリジナルのソースコードファイルは含まれていません。
Download Source −これをクリックすると、最新のBootstrap SCSS、JavaScriptソースコード、およびドキュメントファイルを入手できます。
理解を深め、使いやすくするために、チュートリアル全体でプリコンパイルされたバージョンのBootstrapを使用します。ファイルはコンパイルおよび縮小されるため、個々の機能用に個別のファイルを含めるたびに煩わされる必要はありません。
ファイル構造
プリコンパイルされたブートストラップ4
コンパイルされたバージョンのBootstrap4がダウンロードされたら、ZIPファイルを抽出すると、次のファイル/ディレクトリ構造が表示されます。
ご覧のとおり、コンパイルされたCSSとJS（bootstrap。*）のほか、コンパイルされて縮小されたCSSとJS（bootstrap.min。*）があります。
ブートストラップ4ソースコード
Bootstrap 4ソースコードをダウンロードした場合、ファイル構造は次のようになります。
js /およびscss /の下のファイルは、BootstrapCSSおよびJavaScriptのソースコードです。
DIST /フォルダには、上記のコンパイル済みのダウンロードセクションに記載されているすべてのものが含まれます。
ドキュメント/例/ブートストラップドキュメントとブートストラップの使用の例については、ソースコードを含みます。
Bootstrap4を使用した最初のWebページの作成
以下の例は、Bootstrap4の簡単なWebページを指定しています。
例
<html lang = "en">
<head>
<!-- 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>Bootstrap 4 Example</title>
</head>
<body>
<h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
<!-- 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>次の結果が得られます-
出力
Bootstrap 4は、コンテナクラスを使用してページのコンテンツをラップします。2つのコンテナクラスが含まれています-
.container −固定幅のコンテナを表します。
.container-fluid −全幅のコンテナを表します。
コンテナ
.containerのクラスを使用して容易に中央に配置することができる一定の幅およびコンテンツのページのコンテンツをラップするために使用される.containerの下図のようにクラスを。
<div class = "container">
...
</div>例
以下の例は、固定幅のコンテナーを持つ単純なWebページを指定しています-
<html lang = "en">
<head>
<!-- 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>Bootstrap 4 Example</title>
<style>
.container {
background: #a52c644a;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div class = "container">
<h2>Fixed Width Container</h2>
This is a simple web page with fixed width container by using
<code>.container</code> class.
</div>
<!-- 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>次の結果が得られます-
出力
流体コンテナ
以下に示すように、.container-fluidクラスを使用して、全幅のコンテナを作成できます。
<div class = "container-fluid">
...
</div>以下の例は、全幅コンテナを使用した単純なWebページを指定しています-
例
<html lang = "en">
<head>
<!-- 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>Bootstrap 4 Example</title>
<style>
.container-fluid {
background: #a52c644a;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<div class = "container-fluid">
<h2>Full Width Container</h2>
This is a simple web page with full width container by using
<code>.container-fluid</code> class.
</div>
<!-- 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>次の結果が得られます-
出力
説明
完全に応答性が高く、ページ全体に行と列を含むレイアウトを作成することで最大12列（デバイスのサイズに応じて）に拡張できるflexboxで構築されたBootstrap4グリッドシステム。デバイスまたはビューポートのサイズが大きくなると列をスケーリングする、応答性の高いモバイルファースト流体グリッドシステムを提供します。
グリッドシステムの動作
適切な配置とパディングを行うには、行を.containerクラス内に配置する必要があります。
レスポンシブ幅の場合は.containerクラスを使用し、すべてのビューポートで固定幅の場合は.container-fluidクラスを使用します。
行を使用して、列の水平グループを作成します。
コンテンツは列内に配置する必要があり、列のみが行の直接の子になることができます。
列には、列間のスペースを制御するためのパディングが含まれています。
1行に12を超える列を配置すると、列は新しい行に配置されます。
列は、パディングを介して列の内容の間にギャップを作成します。したがって、行に.no-guttersクラスを使用すると、行からマージンを削除し、列からパディングを削除できます。
極小、小、中、大、特大などの5つのグリッドブレークポイントを使用して、グリッドシステムをレスポンシブにすることができます。
.col-4のような事前定義されたグリッドクラスは、グリッドレイアウトをすばやく作成するために使用できます。LESSミックスインは、よりセマンティックなレイアウトにも使用できます。
グリッドオプション
次の表は、Bootstrap4グリッドシステムが複数のデバイス間でどのように機能するかをまとめたものです。
| 極小デバイス（<576px） | 小型デバイス（≥576px） | 中型デバイス（≥768px） | 大型デバイス（992px以上） | 特大デバイス（≥1200px） | |
|---|---|---|---|---|---|
| グリッドの動作 | 常に水平 | ブレークポイントの上の水平方向に折りたたまれて開始 | ブレークポイントの上の水平方向に折りたたまれて開始 | ブレークポイントの上の水平方向に折りたたまれて開始 | ブレークポイントの上の水平方向に折りたたまれて開始 |
| コンテナの最大幅 | なし（自動） | 540px | 720px | 960px | 1140px |
| クラスクラス | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| 列数 | 12 | 12 | 12 | 12 | 12 |
| 側溝幅 | 30px （列の両側に15px） |
30px （列の両側に15px） |
30px （列の両側に15px） |
30px （列の両側に15px） |
30px （列の両側に15px） |
| 必要な | はい | はい | はい | はい | はい |
| 列の順序 | はい | はい | はい | はい | はい |
基本的なグリッド構造
以下は、Bootstrap4グリッドの基本構造です。
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>グリッドシステムの例
以下は、Bootstrap4グリッドシステムの例です-
例
<html lang = "en">
<head>
<!-- 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>Bootstrap 4 Example</title>
</style>
.grid_system div[class^="col"] {
border: 1px solid white;
background: #e4dcdc;
text-align: center;
padding-top: 5px;
padding-bottom: 5px
}
</style>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
<div class = "col-sm-1">.col-sm-1</div>
</div>
<div class = "row">
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
</div>
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
</div>
<div class = "row">
<div class =" col-sm-3">.col-sm-3</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-5">.col-sm-5</div>
<div class = "col-sm-7">.col-sm-7</div>
</div>
<div class = "row">
<div class = "col-sm-6">.col-sm-6</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-12">.col-sm-12</div>
</div>
</div>
<!-- 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>次の結果が得られます-
出力
2列レイアウトの作成
次の例では、小、中、大のデバイス用に2つの列レイアウトを作成する方法について説明します。携帯電話などの小型デバイスでは、列はデフォルトで自動的に水平になります。
例
<html lang = "en">
<head>
<!-- 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>Bootstrap 4 Example</title>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-6">.col-sm-6</div>
<div class = "col-sm-6">.col-sm-6</div>
</div>
<div class = "row">
<div class = "col-sm-7">.col-sm-7</div>
<div class = "col-sm-5">.col-sm-5</div>
</div>
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-8">.col-sm-8</div>
</div>
<div class = "row">
<div class = "col-sm-9">.col-sm-9</div>
<div class = "col-sm-3">.col-sm-3</div>
</div>
</div>
<!-- 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>次の結果が得られます-
出力
3列のレイアウトの作成
次の例では、中規模および大規模デバイス用の3列レイアウトの作成について説明します。画面の解像度が992ピクセル以上の場合、タブレットでは横向きモードで表示され、通常どおり、縦向きモードで表示されます。
例
<html lang = "en">
<head>
<!-- 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>Bootstrap 4 Example</title>
</head>
<body>
<div class = "grid_system">
<div class = "row">
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-4">.col-sm-4</div>
</div>
<div class = "row">
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-4">.col-sm-4</div>
<div class = "col-sm-5">.col-sm-5</div>
</div>
<div class = "row">
<div class = "col-sm-2">.col-sm-2</div>
<div class = "col-sm-8">.col-sm-8</div>
<div class = "col-sm-2">.col-sm-2</div>
</div>
<div class = "row">
<div class = "col-sm-2">.col-sm-2</div>
<div class = "col-sm-3">.col-sm-3</div>
<div class = "col-sm-7">.col-sm-7</div>
</div>
</div>
<!-- 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>次の結果が得られます-
出力
説明
Bootstrap 4は、コンテンツメソッドのコレクションを使用して、テキスト、コードブロック、レスポンシブイメージ、データを表形式でWebページに表示します。
次の表に、Bootstrap4を操作するために使用できるコンテンツメソッドを示します。
| S.No. | 方法と説明 |
|---|---|
| 1 | タイポグラフィ タイポグラフィ機能は、見出し、段落、リスト、およびその他のインライン要素を作成します。 |
| 2 | コード これは、ドキュメント内のコードのインラインブロックと複数行ブロックを表示するために使用されます。 |
| 3 | 画像 Bootstrap 4は、<img>タグを使用してイメージをサポートします。 |
| 4 | テーブル 表は、データを表形式で表示するために使用されます。 |
| 5 | 数字 figure要素は、オプションのキャプション付きの関連画像とともにコンテンツを指定します。 |
説明
Bootstrap 4は、コンテンツメソッドのコレクションを使用して、テキスト、コードブロック、レスポンシブイメージ、データを表形式でWebページに表示します。
次の表に、Bootstrap4を操作するために使用できるコンテンツメソッドを示します。
| S.No. | 方法と説明 |
|---|---|
| 1 | アラート アラートコンポーネントは、ユーザーアクションの事前定義されたメッセージを指定します。 |
| 2 | バッジ バッジは、コンテンツへの追加情報を強調するために使用されます。 |
| 3 | パンくず これは、サイトの階層ベースの情報を表示するために使用されます。 |
| 4 | ボタン Bootstrapは、テキストや画像などのコンテンツを配置するためのクリック可能なボタンを提供します。 |
| 5 | ボタングループ ボタングループを使用すると、複数のボタンを1行に積み重ねることができます。 |
| 6 | カード カードは、周囲にパディングが付いた境界ボックスを表示するコンテンツコンテナです。 |
| 7 | カルーセル カルーセルは、サイトにスライダーを追加するための柔軟で応答性の高い方法です。 |
| 8 | 崩壊 コンテンツを表示または非表示にするために使用されます。 |
| 9 | ドロップダウン ドロップダウンメニューを使用して、リンクをリスト形式で表示できます。 |
| 10 | フォーム form要素は、ユーザーからの入力を収集するために使用されます。 |
| 11 | 入力グループ 入力グループを使用すると、テキストまたはボタンをテキストベースの入力に簡単に追加および追加できます。 |
| 12 | ジャンボトロン 見出しのサイズが大きくなり、ランディングページのコンテンツに多くのマージンが追加されます。 |
| 13 | モーダル モーダルは、親ウィンドウの上に階層化された子ウィンドウです。 |
| 14 | ナビゲーション Bootstrapは、水平メニューでサイトのナビゲーション項目を提供します。 |
| 15 | ナビゲーションバー Navbarは、アプリケーションまたはサイトのナビゲーションヘッダーを提供します。 |
| 16 | ページネーション ページネーションは、関連するコンテンツを複数のページに分割するために使用されます。 |
| 17 | ポップオーバー ポップオーバーはツールチップに似ており、見出し付きの拡張ビューを提供します。 |
| 18 | 進捗 プログレスバーは、積み重ねられたバー、アニメーション化された背景、およびテキストラベルを使用してプロセスの進行状況を示します。 |
| 19 | Scrollspy Scrollspyは、スクロール位置に基づいてメニュー内の現在アクティブなリンクを示すために使用されます。 |
| 20 | ツールチップ リンクを説明する必要がある場合は、ツールチップが役立ちます。 |
説明
Bootstrap 4は、Webページに境界線、テキストの色、埋め込みビデオなどを表示するためのユーティリティのコレクションを使用します。
次の表に、Bootstrap4を操作するために使用できるユーティリティタイプを示します。
| S.No. | 方法と説明 |
|---|---|
| 1 | ボーダーズ 境界線ユーティリティは、要素の境界線のスタイル、色、および半径を提供します。 |
| 2 | Clearfixと閉じるアイコン Clearfixは、フロートされたコンテンツをクリアし、コンテンツを閉じるためのアイコンを閉じるために使用されます。 |
| 3 | 色 コンテキストクラスを使用して、要素のテキストの色、リンク、および背景色を変更します。 |
| 4 | 埋め込む <iframe>要素を使用してページにビデオを埋め込むために使用されます。 |
| 5 | 浮く 要素を左側または右側にフロートさせるために使用されます。 |
| 6 | 影と間隔 シャドウユーティリティは要素にシャドウを追加し、スペーシングユーティリティは要素にマージンまたはパディング値を提供します。 |
| 7 | サイジング widthおよびheightユーティリティを使用して、要素のサイズを幅または高さにすることができます。 |
| 8 | テキスト Bootstrapは、テキストの配置、変換、太さなどを制御するためのテキストユーティリティを提供します。 |
| 9 | フレックス Flexユーティリティを使用して、ページのレイアウト、配置、グリッド列、ナビゲーション、およびその他のコンポーネントを管理できます。 |
説明
Bootstrapは、HTML、CSS、およびJSフレームワークを使用して、Web上にレスポンシブモバイルファーストサイトを構築するための強力で人気のあるモバイルファーストフロントエンドフレームワークです。
次の表は、Bootstrap3とBootstrap4の違いを示しています。
| S.No. | 成分 | ブートストラップ3 | ブートストラップ4 |
|---|---|---|---|
| 1 | CSSソースファイル | もっと少なく | SCSS |
| 2 | グリッドシステム | 4層グリッドシステム（xs、sm、md、lg） | 5層グリッドシステム（xs、sm、md、lg、xl） |
| 3 | CSSユニット | px | レム |
| 4 | フォントサイズ | 14px | 16px |
| 5 | ドロップダウン構造 | <ul>と<li>で作成 | <ul>または<div>で作成 |
| 6 | オフセット列 | col-md-offset-4 | オフセット-md-4 |
| 7 | 画像 | .img-レスポンシブクラス | .img-流体クラス |
| 8 | テーブル | 親の<div>要素に.table-responseクラスを追加します | .table-responseクラスを<table>要素に追加します |
| 9 | グリフィコン | サポートされています | サポートされていません |
| 10 | メディアオブジェクト | .media、.media-body、.media-object、.media-heading、.media-right、.media-left、.media-list、.media-bodyなどのメディアオブジェクトのクラスを使用します | メディアオブジェクトには.mediaクラスのみを使用します。 |
| 11 | ダーク/インバーステーブル | サポートされていません | .table-darkクラスを使用して、ダーク/インバーステーブルを作成します |
| 12 | チェックボックスとラジオボタン | .radio、.radio-inline、.checkbox、または.checkbox-inlineクラスを使用して、チェックボックスとラジオボタンを表示します。 | .form-check、.form-check-label、.form-check-input、または.form-check-inlineクラスを使用して、チェックボックスとラジオボタンを表示します。 |
| 13 | フォームコントロールサイズ | .input-lgクラスと.input-smクラスを使用して、入力コントロールのサイズを増減します。 | .form-control-lgクラスと.form-control-smクラスを使用して、入力コントロールのサイズを増減します。 |
| 14 | ヘルプテキスト | .help-blockクラスを使用してヘルプテキストを表示します | .form-textクラスを使用してヘルプテキストを表示する |
| 15 | スタイル | 使用.btnデフォルトと.btnインフォボタンのクラスを | 使用.btn-二、.btn光と.btn、ダークボタンで授業をして落とし.btnデフォルトのクラスを。 |
| 16 | アウトラインボタン | サポートされていません | .btn-outline- *クラスを使用して、ボタンをアウトラインカラーでスタイル設定します |
| 17 | ボタンのサイズ | .btn-XSクラスが提供されています | 利用可能な唯一の.btn-SMと.btn-LGクラスとドロップ.btn-XSクラスを |
| 18 | メニューヘッダー | liタグに.dropdown-headerクラスを使用します | 使用.dropdown・ヘッダにクラスH1 - H2タグ |
| 19 | 仕切り | li要素で.dividerクラスを使用します | div要素で.dropdown-dividerクラスを使用します |
| 20 | Navbarを修正しました | .navbar-fixed-topクラスと.navbar-fixed-bottomクラスを使用して、ナビゲーションバーを上または下に修正します | .fixed-topクラスと.fixed-bottomクラスを使用して、ナビゲーションバーを上または下に修正します |
| 21 | ポケットベル | .previousクラスと.nextクラスを使用してページを揃えます | サポートされていません |
| 22 | ジャンボトロン全幅 | 全幅ジャンボトロンで.jumbotron-fluidクラスを使用しません | 全幅ジャンボトロンには.jumbotron-fluidクラスを使用します |
| 23 | カルーセルアイテム | カルーセルアイテムに.itemクラスを使用します。 | カルーセルアイテムに.carousel-itemクラスを使用します。 |
| 24 | ウェル、パネル、サムネイル | サポートされています | サポートされていません。代わりにカードを使用してください |
| 25 | インラインナビゲーション | .nav-inlineクラスは含まれていません | .nav-inlineクラスを使用して、ナビゲーションをインラインとして表示します |