ブートストラップ4-概要

Bootstrap 4とは何ですか？

Bootstrap 4は、Web上でレスポンシブモバイルファーストサイトを構築するための強力で人気のあるモバイルファーストフロントエンドフレームワークです。これはlink：/bootstrap/bootstrap_overview [Bootstrap]の最新バージョンであり、HTML、CSS、JavaScriptを使用しています。

歴史

Bootstrap v3.3.7の最後の安定リリースは2016年7月で、2017年8月にはBootstrap 4.0.0ベータ版がリリースされました。

Bootstrapを使用する理由

個別のファイルで使用する代わりに、ライブラリ全体にモバイルファーストスタイルが含まれています。
HTMLとCSSの知識があれば、誰でもBootstrapを始めることができます。また、Bootstrapの公式サイトには優れたドキュメントがあります。
すべての一般的なブラウザでサポートされており、レスポンシブCSSはデスクトップ、タブレット、モバイルに対応しています。
開発者向けのインターフェースを構築するためのクリーンで統一されたソリューションを提供します。
カスタマイズが容易な美しく機能的な組み込みコンポーネントが含まれています。
これはオープンソースであり、Webベースのカスタマイズを提供します。

ブートストラップ3 v/sブートストラップ4

Bootstrap 4はBootstrap 3の最新バージョンであり、Bootstrap 3のソースCSSファイルはSCSSに変換されます。グリッドシステムのフレックスモーダルを使用し、すべての最新のブラウザーをサポートします。ただし、Internet Explorer 9以降およびiOS 7以降をサポートし、IE 8以降のバージョン、iOS 6以降のバージョンのサポートを終了しました。 Bootstrap 3とBootstrap 4の違いの詳細については、次のリンクを確認してください：/bootstrap4/bootstrap4_differences_between_bootstrap_3_and_4 [chapter]。

ブートストラップ4-環境設定

Bootstrap 4をWebサイトで使用するには、CDN（Content Delivery Network）から含めるか、_getbootstrap.com_からダウンロードします。

CDNを使用する

Bootstrap 4は、https://en.wikipedia.org/wiki/Content_delivery_network [Content Delivery Network]から追加することにより、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を使用している場合は、minified Bootstrap JavaScript_の前に、CDNバージョンの_jQuery_および_Popper.js（Bootstrap 4はjQueryおよびPopper.jsを使用して、モーダル、ツールチップ、ポップオーバーなどのJavaScriptコンポーネントを使用します）を含めます。

以下はjQueryを必要とするいくつかのコンポーネントです-

クローズ可能なアラートに使用
ボタンとチェックボックス/ラジオボタンを使用して状態を切り替え、コンテンツを切り替えるために折りたたみます
スライド、コントロール、インジケーターのカルーセル
ドロップダウン（完璧な配置のために_Popper.js_を使用）
モーダルの開閉
Navbarを折りたたみます
ツールチップとポップオーバー（_Popper.js_を使用して完璧な位置に配置します）

Bootstrap 4のダウンロード

Bootstrap 4はhttps://getbootstrap.com/docs/4.1/getting-started/download/からダウンロードできます。このリンクをクリックすると、次のような画面が表示されます-

ブートストラップ4ダウンロード画面

ここでは、2つのボタンを見ることができます-

ダウンロード-これをクリックすると、BootstrapのCSSおよびJavaScriptのプリコンパイルおよび縮小版をダウンロードできます。ドキュメントまたは元のソースコードファイルは含まれていません。
ソースのダウンロード-これをクリックすると、最新のBootstrap SCSS、JavaScriptソースコード、およびドキュメントファイルを取得できます。

理解を深めて使いやすくするために、チュートリアル全体でプリコンパイルされたバージョンのBootstrapを使用します。ファイルはコンパイルおよび縮小されるため、個々の機能のために個別のファイルを含めるたびに気にする必要はありません。

ファイル構造

プリコンパイル済みブートストラップ4

コンパイルされたバージョンのBootstrap 4がダウンロードされたら、ZIPファイルを解凍すると、次のファイル/ディレクトリ構造が表示されます-

プリコンパイル済みブートストラップ4

ご覧のとおり、コンパイルされたCSSとJS（bootstrap。）、およびコンパイルされ縮小されたCSSとJS（bootstrap.min。）があります。

ブートストラップ4ソースコード

あなたがBootstrap 4のソースコードをダウンロードしている場合、ファイル構造は次のようになります-

ブートストラップ4ソースコード

_js/_および_scss/_の下のファイルは、Bootstrap CSSおよびJavaScriptのソースコードです。
_dist/_フォルダーには、上記のプリコンパイル済みダウンロードセクションにリストされているすべてのものが含まれます。
_docs/examples/_には、BootstrapドキュメントのソースコードとBootstrapの使用例が含まれています。

Bootstrap 4で最初のWebページを作成する

以下の例では、Bootstrap 4の単純な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 finddevguides...</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>

それは次の結果を生成します-

出力

ブートストラップ4-レイアウト

ブートストラップ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>

それは次の結果を生成します-

出力

ブートストラップ4-グリッドシステム

説明

flexboxで構築されたブートストラップ4グリッドシステムは、完全に応答し、最大12列（デバイスのサイズに応じて）に拡大します。ページ全体に行と列を持つレイアウトを作成します。デバイスまたはビューポートのサイズの増加に応じて列をスケーリングする、応答性の高いモバイルの最初の流体グリッドシステムを提供します。

グリッドシステムの動作

適切な配置とパディングを行うには、行を_.container_クラス内に配置する必要があります。
レスポンシブ幅の場合は_.container_クラスを使用し、すべてのビューポートで固定幅の場合は_.container-fluid_クラスを使用します。
行を使用して、列の水平グループを作成します。
コンテンツは列内に配置する必要があり、列のみが行の直接の子になります。
列には、列間のスペースを制御するためのパディングが含まれています。
行に12を超える列を配置すると、列は新しい行に配置されます。
列は、パディングを介して列コンテンツ間にギャップを作成します。したがって、行のマージンを削除し、行の_.no-gutters_クラスを使用して列のパディングを削除できます。
極小、小、中、大、特大などの5つのグリッドブレークポイントを使用して、グリッドシステムを応答可能にすることができます。
.col-4などの事前定義されたグリッドクラスは、グリッドレイアウトをすばやく作成するために使用できます。 LESSミックスインは、よりセマンティックなレイアウトにも使用できます。

グリッドオプション

次の表は、Bootstrap 4グリッドシステムが複数のデバイス間でどのように機能するかの側面をまとめたものです-

	Extra small devices (<576px)	Small devices (≥576px)	Medium devices (≥768px)	Large devices (≥992px)	Extra Large devices (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints
Max container width	None (auto)	540px	720px	960px	1140px
Class classes	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
# of columns	12	12	12	12	12
Gutter width	30px （列の両側に15ピクセル） a	30px （列の両側に15ピクセル） a	30px （列の両側に15ピクセル） a	30px （列の両側に15ピクセル） a	30px （列の両側に15ピクセル）
Nestable	Yes	Yes	Yes	Yes	Yes
Column ordering	Yes	Yes	Yes	Yes	Yes

基本的なグリッド構造

以下は、Bootstrap 4グリッドの基本構造です-

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

グリッドシステムの例

以下は、Bootstrap 4グリッドシステムの例です-

例

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

それは次の結果を生成します-

出力

ブートストラップ4-コンテンツ

説明

ブートストラップ4は、コンテンツメソッドのコレクションを使用して、テキスト、コードブロック、レスポンシブイメージ、データを表形式などでWebページに表示します。

次の表は、Bootstrap 4を操作するために使用できるコンテンツメソッドの一覧です-

S.No.	Methods & Description
1	Typography タイポグラフィ機能は、見出し、段落、リスト、その他のインライン要素を作成します。
2	Code 文書内のコードのインラインおよび複数行のブロックを表示するために使用されます。
3	Images ブートストラップ4は、<img>タグを使用して画像のサポートを提供します。
4	Tables テーブルは、データを表形式で表示するために使用されます。
5	Figures 図要素は、オプションのキャプションで関連画像とともにコンテンツを指定します。

ブートストラップ4-コンポーネント

説明

ブートストラップ4は、コンテンツメソッドのコレクションを使用して、テキスト、コードブロック、レスポンシブイメージ、データを表形式などでWebページに表示します。

次の表は、Bootstrap 4を操作するために使用できるコンテンツメソッドの一覧です-

S.No.	Methods & Description
1	Alerts アラートコンポーネントは、ユーザーアクションの定義済みメッセージを指定します。
2	Badges バッジは、コンテンツの追加情報を強調するために使用されます。
3	Breadcrumb サイトの階層ベースの情報を表示するために使用されます。
4	Buttons ブートストラップは、テキストや画像などのコンテンツを配置するためのクリック可能なボタンを提供します。
5	Button group ボタングループを使用すると、複数のボタンを1行に積み重ねることができます。
6	Cards カードは、周囲にパディングのある枠付きボックスを表示するコンテンツコンテナーです。
7	Carousel カルーセルは、サイトにスライダーを追加するための柔軟で応答性の高い方法です。
8	Collapse コンテンツの表示または非表示に使用されます。
9	Dropdowns ドロップダウンメニューを使用して、リスト形式でリンクを表示できます。
10	Forms フォーム要素は、ユーザーからの入力を収集するために使用されます。
11	Input group 入力グループを使用すると、テキストベースの入力にテキストまたはボタンを簡単に追加および追加できます。
12	Jumbotron 見出しのサイズが大きくなり、ランディングページのコンテンツに多くのマージンが追加されます。
13	Modal モーダルは、親ウィンドウの上に階層化された子ウィンドウです。
14	Navs Bootstrapは、水平メニューでサイトのナビゲーションアイテムを提供します。
15	Navbar Navbarは、アプリケーションまたはサイトのナビゲーションヘッダーを提供します。
16	Pagination ページネーションは、関連するコンテンツを複数のページに分割するために使用されます。
17	Popovers Popoverはツールチップに似ており、見出し付きの拡張ビューを提供します。
18	Progress 進行状況バーは、積み重ねられたバー、アニメーション化された背景、およびテキストラベルでプロセスの進行状況を示します。
19	Scrollspy Scrollspyは、スクロール位置に基づいてメニュー内の現在アクティブなリンクを示すために使用されます。
20	Tooltips ツールチップは、リンクを記述する必要がある場合に役立ちます。

ブートストラップ4-ユーティリティ

説明

Bootstrap 4は、Webページに境界線、テキストの色、埋め込みビデオなどを表示するためのユーティリティのコレクションを使用します。

次の表は、Bootstrap 4を操作するために使用できるユーティリティタイプの一覧です。

S.No.	Methods & Description
1	Borders 境界線ユーティリティは、要素の境界線のスタイル、色、および半径を提供します。
2	Clearfix and Close Icon Clearfixは、フローティングされたコンテンツをクリアし、コンテンツを閉じるための閉じるアイコンを使用します。
3	Colors コンテキストクラスを使用して、テキストの色、リンクの色、要素の背景色を変更します。
4	Embed <iframe>要素を使用してページにビデオを埋め込むために使用されます。
5	Float 要素を左または右にフロートするために使用されます。
6	Shadows and Spacing シャドウユーティリティは要素にシャドウを追加し、スペーシングユーティリティは要素にマージンまたはパディング値を提供します。
7	Sizing widthおよびheightユーティリティを使用して、要素のサイズを幅または高さにできます。
8	Text Bootstrapは、テキストの配置、変換、重みなどを制御するテキストユーティリティを提供します。
9	Flex Flexユーティリティを使用して、レイアウト、配置、グリッド列、ナビゲーション、およびページの他のコンポーネントを管理できます。

ブートストラップ3と4の違い

説明

Bootstrapは、HTML、CSS、JSフレームワークを使用してレスポンシブモバイルファーストサイトをWeb上に構築するための強力で人気のあるモバイルファーストフロントエンドフレームワークです。

次の表は、ブートストラップ3とブートストラップ4の違いを示しています-

S.No.	Component	Bootstrap 3	Bootstrap 4
1	CSS source files	LESS	SCSS
2	Grid System	4 tier grid system (xs, sm, md, lg)	5 tier grid system (xs, sm, md, lg, xl)
3	CSS Unit	px	rem
4	Font Size	14px	16px
5	Dropdown Structure	Created with <ul> and <li>	Created with <ul> or <div>
6	Offsetting Columns	col-md-offset-4	offset-md-4
7	Images	.img-responsive class	.img-fluid _class_
8	Tables	Add .table-responsive class to parent <div> element	Add .table-responsive class to <table> element
9	Glyphicons	Supported	Not Supported
10	Media Objects	Uses classes for media objects, such as .media, .media-body, .media-object, .media-heading, .media-right, .media-left, .media-list and .media-body	Uses just .media class for media objects.
11	Dark/inverse Tables	Not supported	Uses .table-dark class to make dark/inverse tables
12	Checkboxes and Radio Buttons	Displays the checkboxes and radio buttons by using .radio, .radio-inline, .checkbox, or .checkbox-inline classes	Displays the checkboxes and radio buttons by using .form-check, .form-check-label, .form-check-input, or .form-check-inline classes
13	Form Control Size	Increase or decrease size of an input control by using .input-lg and .input-sm classes	Increase or decrease size of an input control by using .form-control-lg and .form-control-sm classes
14	Help Text	Display the help text by using .help-block class	Display the help text by using .form-text class
15	Styles	Uses the .btn-default and .btn-info classes on buttons	Uses the .btn-secondary, .btn-light and .btn-dark classes on buttons and dropped the .btn-default class.
16	Outline Buttons	Not Supported	Style the buttons with outline color by using .btn-outline-* class
17	Button Sizes	The .btn-xs class is available	Available only .btn-sm and .btn-lg classes and dropped the .btn-xs class
18	Menu Headers	Use .dropdown-header class to the li tag	Use .dropdown-header class to h1 - h2 tags
19	Dividers	Use the .divider class in the li element	Use the .dropdown-divider class in the div element
20	Fixed Navbars	Fix the navbar to top or bottom by using .navbar-fixed-top and .navbar-fixed-bottom classes	Fix the navbar to top or bottom by using .fixed-top and .fixed-bottom classes
21	Pagers	Align the pages by using .previous and .next classes	Not supported
22	Jumbotron Full Width	It does not uses .jumbotron-fluid class on full-width jumbotrons	It uses .jumbotron-fluid class for full-width jumbotrons
23	Carousel Item	Uses .item class for carousel items.	Uses .carousel-item class for carousel items.
24	Wells, Panels and Thumbnails	Supported	Not supported. Use cards instead
25	Inline Navs	It doesn’t include .nav-inline class	Display the navs as inline by using the .nav-inline class

Bootstrap4-quick-guide

ブートストラップ4-概要

Bootstrap 4とは何ですか？

歴史

Bootstrapを使用する理由

ブートストラップ3 v/sブートストラップ4

ブートストラップ4-環境設定

CDNを使用する

Bootstrap 4のダウンロード

ファイル構造

プリコンパイル済みブートストラップ4

ブートストラップ4ソースコード

Bootstrap 4で最初のWebページを作成する

例

出力

ブートストラップ4-レイアウト

容器

例

出力

流体容器

例

出力

ブートストラップ4-グリッドシステム

説明

グリッドシステムの動作

グリッドオプション

基本的なグリッド構造

グリッドシステムの例

例

出力

2列のレイアウトの作成

例

出力

3列レイアウトの作成

例

出力

ブートストラップ4-コンテンツ

説明

ブートストラップ4-コンポーネント

説明

ブートストラップ4-ユーティリティ

説明

ブートストラップ3と4の違い

説明