Bootstrap4-quick-guide
ブートストラップ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/からダウンロードできます。 このリンクをクリックすると、次のような画面が表示されます-
ここでは、2つのボタンを見ることができます-
- ダウンロード-これをクリックすると、BootstrapのCSSおよびJavaScriptのプリコンパイルおよび縮小版をダウンロードできます。 ドキュメントまたは元のソースコードファイルは含まれていません。
- ソースのダウンロード-これをクリックすると、最新のBootstrap SCSS、JavaScriptソースコード、およびドキュメントファイルを取得できます。
理解を深めて使いやすくするために、チュートリアル全体でプリコンパイルされたバージョンのBootstrapを使用します。 ファイルはコンパイルおよび縮小されるため、個々の機能のために個別のファイルを含めるたびに気にする必要はありません。
ファイル構造
プリコンパイル済みブートストラップ4
コンパイルされたバージョンのBootstrap 4がダウンロードされたら、ZIPファイルを解凍すると、次のファイル/ディレクトリ構造が表示されます-
ご覧のとおり、コンパイルされたCSSとJS(bootstrap。)、およびコンパイルされ縮小されたCSSとJS(bootstrap.min。)があります。
ブートストラップ4ソースコード
あなたがBootstrap 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 |
タイポグラフィ機能は、見出し、段落、リスト、その他のインライン要素を作成します。 |
2 |
文書内のコードのインラインおよび複数行のブロックを表示するために使用されます。 |
3 |
ブートストラップ4は、<img>タグを使用して画像のサポートを提供します。 |
4 |
テーブルは、データを表形式で表示するために使用されます。 |
5 |
図要素は、オプションのキャプションで関連画像とともにコンテンツを指定します。 |
ブートストラップ4-コンポーネント
説明
ブートストラップ4は、コンテンツメソッドのコレクションを使用して、テキスト、コードブロック、レスポンシブイメージ、データを表形式などでWebページに表示します。
次の表は、Bootstrap 4を操作するために使用できるコンテンツメソッドの一覧です-
S.No. | Methods & Description |
---|---|
1 |
アラートコンポーネントは、ユーザーアクションの定義済みメッセージを指定します。 |
2 |
バッジは、コンテンツの追加情報を強調するために使用されます。 |
3 |
サイトの階層ベースの情報を表示するために使用されます。 |
4 |
ブートストラップは、テキストや画像などのコンテンツを配置するためのクリック可能なボタンを提供します。 |
5 |
ボタングループを使用すると、複数のボタンを1行に積み重ねることができます。 |
6 |
カードは、周囲にパディングのある枠付きボックスを表示するコンテンツコンテナーです。 |
7 |
カルーセルは、サイトにスライダーを追加するための柔軟で応答性の高い方法です。 |
8 |
コンテンツの表示または非表示に使用されます。 |
9 |
ドロップダウンメニューを使用して、リスト形式でリンクを表示できます。 |
10 |
フォーム要素は、ユーザーからの入力を収集するために使用されます。 |
11 |
入力グループを使用すると、テキストベースの入力にテキストまたはボタンを簡単に追加および追加できます。 |
12 |
見出しのサイズが大きくなり、ランディングページのコンテンツに多くのマージンが追加されます。 |
13 |
モーダルは、親ウィンドウの上に階層化された子ウィンドウです。 |
14 |
Bootstrapは、水平メニューでサイトのナビゲーションアイテムを提供します。 |
15 |
Navbarは、アプリケーションまたはサイトのナビゲーションヘッダーを提供します。 |
16 |
ページネーションは、関連するコンテンツを複数のページに分割するために使用されます。 |
17 |
Popoverはツールチップに似ており、見出し付きの拡張ビューを提供します。 |
18 |
進行状況バーは、積み重ねられたバー、アニメーション化された背景、およびテキストラベルでプロセスの進行状況を示します。 |
19 |
Scrollspyは、スクロール位置に基づいてメニュー内の現在アクティブなリンクを示すために使用されます。 |
20 |
ツールチップは、リンクを記述する必要がある場合に役立ちます。 |
ブートストラップ4-ユーティリティ
説明
Bootstrap 4は、Webページに境界線、テキストの色、埋め込みビデオなどを表示するためのユーティリティのコレクションを使用します。
次の表は、Bootstrap 4を操作するために使用できるユーティリティタイプの一覧です。
S.No. | Methods & Description |
---|---|
1 |
境界線ユーティリティは、要素の境界線のスタイル、色、および半径を提供します。 |
2 |
Clearfixは、フローティングされたコンテンツをクリアし、コンテンツを閉じるための閉じるアイコンを使用します。 |
3 |
コンテキストクラスを使用して、テキストの色、リンクの色、要素の背景色を変更します。 |
4 |
<iframe>要素を使用してページにビデオを埋め込むために使用されます。 |
5 |
要素を左または右にフロートするために使用されます。 |
6 |
シャドウユーティリティは要素にシャドウを追加し、スペーシングユーティリティは要素にマージンまたはパディング値を提供します。 |
7 |
widthおよびheightユーティリティを使用して、要素のサイズを幅または高さにできます。 |
8 |
Bootstrapは、テキストの配置、変換、重みなどを制御するテキストユーティリティを提供します。 |
9 |
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 |