Bootstrap4 基本チュートリアル

Bootstrap4 テキストレイアウト Bootstrap4 インストールと使用

Bootstrap4 グリッドシステム

Bootstrapのグリッドシステムは、レスポンシブウェブページレイアウトを作成する最も速くて簡単な方法です。

Bootstrapは、スクリーンまたはビューポート（viewport）のサイズが増えるに従って、自動的に最大 12 カラム。

また、必要に応じて、カラム数を定義することもできます：

1	1	1	1	1	1	1	1	1	1	1	1
4				4				4
4				8
6						6
12

Bootstrap 4 のグリッドシステムはレスポンシブで、列はスクリーンサイズに応じて自動的に再配置されます。

グリッドクラス

Bootstrap 4予め定義されたグリッドクラスを含み、異なるタイプのデバイス（例えばスマートフォン、タブレット、ラップトップ、デスクトップなど）用にグリッドレイアウトを素早く作成できます。例えば、これらの.col-*クラスは縦向きの超小型デバイスでグリッド列を作成します。同様に、これらの.col-sm-*クラスは小規模なデバイス（例えば横向きのモバイル電話）、.col-md-*中型スクリーンのデバイス（例えばタブレット）、.col-lg-*大規模なデバイス（例えばデスクトップ）と.col-xl-*超大画面のデスクトップのクラスでグリッド列を作成します。

Bootstrap 4 グリッドシステムには以下の 5 クラス:

.col- すべてのデバイス用
.col-sm- 超小規模デバイス　- スクリーン幅がまたはそれ以上 576デスクトップディスプレイ
.col-md- タブレット　- スクリーン幅がまたはそれ以上 768px)
.col-lg- デスクトップ　- スクリーン幅がまたはそれ以上 992px)
.col-xl- px - スクリーン幅がまたはそれ以上 1200px)

グリッドシステムのルール

Bootstrap4 グリッドシステムのルール:

グリッドの各行は、.container（固定幅）または.container-fluid（フルスクリーン幅）クラスのコンテナ内に配置すると、自動的に外側マージンと内側マージンが設定されます。
行を使用して水平な列グループを作成します。
コンテンツは列に配置され、行の直接子ノードとしてのみ列が存在できます。
予め定義されたクラス、例えば.rowと.colを使用します。-sm-4 グリッドレイアウトを素早く作成するために使用できます。
列は、隙間を埋めるためにフィルルドを使用して作成されます。この隙間は、.rowsクラスのネガティブマージンで最初の行と最後の列のオフセットが設定されます。
グリッド列は指定された列を越えて作成されます。 12 列を使用して作成します。。例えば、3つの等しい列を設定するには、3つの.colを使用する必要があります。-sm-4 を設定するところにあります。
Bootstrap 3 とBootstrapで 4 最大の違いはBootstrapで 4 今やflexbox（エラストボックス）を使用して、フロートではなく。　 Flexboxの大きな利点は、指定されていない幅のグリッド列が自動的に設定されることです。等宽与等高列 等幅と等高列

。CSS Flexboxに関する詳細情報を知りたい場合は、私たちのCSS Flexboxチュートリアルを読んでください。

	以下の表は、Bootstrapグリッドシステムが異なるデバイス上でどのように動作するかをまとめています： <576デスクトップディスプレイ	超小規模デバイス大規模なデスクトップディスプレイ576デスクトップディスプレイ	タブレット大規模なデスクトップディスプレイ768デスクトップディスプレイ	デスクトップ大規模なデスクトップディスプレイ992デスクトップディスプレイ	px 大規模なデスクトップディスプレイ12≥
00px	コンテナの最大幅	54ギャップ幅	72ギャップ幅	96ギャップ幅	114ギャップ幅
None (auto)	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
クラス接頭辞	12
列の数と	3ギャップ幅 0px 15（各列の各側にそれぞれ
px）	列の並び替え
ネスト可能	列の並び替え

Yes

Bootstrap 4 以下のクラスは組み合わせて使用することで、より柔軟なページレイアウトを作成できます。

グリッドの基本構造 4 以下のコードはBootstrapの

Bootstrap4 　グリッドの基本構造:

><--　グリッドの基本構造　-->
<div　class="row">
　　<div　class="col-*-*第1つの例：列の幅と異なるデバイス上での表示方法を制御します/div>
</div>
<div　class="row">
　　<div　class="col-*-*第1つの例：列の幅と異なるデバイス上での表示方法を制御します/div>
　　<div　class="col-*-*第1つの例：列の幅と異なるデバイス上での表示方法を制御します/div>
　　<div　class="col-*-*第1つの例：列の幅と異なるデバイス上での表示方法を制御します/div>
</div>
　
><--　<!　-->
<div　class="row">
　　第2つの例：Bootstrapが自動的にレイアウトを処理するようにします/div>
　　第2つの例：Bootstrapが自動的にレイアウトを処理するようにします/div>
　　第2つの例：Bootstrapが自動的にレイアウトを処理するようにします/div>
</div>

<div　class="col"><第1つの例：一行を作成します( <divclass="row">.col-*-* )をクラスに設定します)。まず、必要な列を追加します(*) )を表し、対応するデバイスを示します: sm、md、lgまたはxl、次の星号(*)は数字を表し、同じ行の数字の合計が 12。

第2つの例：class="row"のdivに直接 col に数字を追加し、bootstrapが自動的にレイアウトを処理します。同じ行の各列の幅が等しくなります：2つの "col" それぞれが 50%の幅。3つの　"col"それぞれが 33.33%の幅、4つの　"col"それぞれが 25%の幅、そのようにして。同様に、 .col-sm|md|lg|xl 列のレスポンスルールを設定します。

次に、例を見てみましょう。

等幅の列を作成し、Bootstrapが自動レイアウトを行います

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container-fluid">
　　<h1>Hello　World!</h1>
　　<p>3つの等幅の列を作成します！class="row"のdivに新しいclass="col"のdivを追加すると、4つの等幅の列が表示されます。</p>
　　<div　class="row">
　　　　<div　class="col"　style="background-color:lavender;">.col</div>
　　　　<div　class="col"　style="background-color:orange;">.col</div>
　　　　<div　class="col"　style="background-color:lavender;">.col</div>
　　</div>
</div>
</body>
</html>

テストをしてみる‹/›

等幅レスポンシブ列

以下の例では、タブレットおよびより大きなスクリーン上で等幅のレスポンシブ列を作成する方法を示しています。 モバイル端末上では、スクリーン幅が 576px 時に、4つの列は上下に重ね合わせて配置されます。:

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container-fluid">
　　<h1>Hello　World!</h1>
　　<p>调整浏览器大小查看效果。</p>
　　<p>モバイル端末上では、スクリーン幅が　576px　时，四个列将会上下堆叠排版。</p>
　　<div　class="row">
　　　　<div　class="col-sm-3"　style="background-color:lavender;">.col-sm-3</div>
　　　　<div　class="col-sm-3"　style="background-color:lavenderblush;">.col-sm-3</div>
　　　　<div　class="col-sm-3"　style="background-color:lavender;">.col-sm-3</div>
　　　　<div　class="col-sm-3"　style="background-color:lavenderblush;">.col-sm-3</div>
　　</div>
</div>
</body>
</html>

テストをしてみる‹/›

不等幅レスポンシブ列

以下の例では、タブレットおよびより大きなスクリーン上で不等幅のレスポンシブ列を作成する方法を示しています。 モバイル端末上では、スクリーン幅が 576px 時に、2つの列は上下に重ね合わせて配置されます。:

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container-fluid">
　　<h1>Hello　World!</h1>
　　<p>调整浏览器大小查看效果。</p>
　　<p>在移动设备上，即屏幕宽度小于　576px　时，四个列将会上下堆叠排版。</p>
　　<div　class="row">
　　　　<div　class="col-sm-4"　style="background-color:lavender;">.col-sm-4</div>
　　　　<div　class="col-sm-8"　style="background-color:lavenderblush;">.col-sm-8</div>
　　</div>
</div>
</body>
</html>

テストをしてみる‹/›

平板和桌面端

以下示例演示了在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%，在移动手机等小型设备上会堆叠显示。

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container-fluid">
　　<h1>平板与桌面的网格布局</h1>
　　<p>以下示例演示了在桌面设备的显示器上两个列的宽度各占　50%，如果在平板端则左边的宽度为　25%，右边的宽度为　75%，在移动手机等小型设备上会堆叠显示。
</p>
　　<p>调整浏览器窗口大小，查看效果。</p>
　　<div　class="container-fluid">
　　　　<div　class="row">
　　　　　　<div　class="col-sm-3　col-md-6　bg-success">
　　　　　　　　w3codebox
　　　　　　</div>
　　　　　　<div　class="col-sm-9　col-md-6　bg-warning">
　　　　　　　　基础教程网
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

テストをしてみる‹/›

平板、桌面、大桌面显示器、超大桌面显示器

以下示例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%，在移动手机等小型设备上会堆叠显示。

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container-fluid">
　　<h1>平板、桌面、大桌面显示器、超大桌面显示器</h1>
　　<p>以下示例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%，在移动手机等小型设备上会堆叠显示。</p>
　　<p>调整浏览器窗口大小，查看效果。</p>
　　<div　class="container-fluid">
　　　　<div　class="row">
　　　　　　<div　class="col-sm-3　col-md-6　col-lg-4　col-xl-2　bg-success">
　　　　　　　　w3codebox
　　　　　　</div>
　　　　　　<div　class="col-sm-9　col-md-6　col-lg-8　col-xl-10　bg-warning">
　　　　　　　　基础教程网
　　　　　　</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

テストをしてみる‹/›

偏移列

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会将一个列的左外边距(margin)增加 * 列，其中 * 范围是从 1 到 11。

例如：.offset-md-4 これは.col-md-4 向右移动了四列。

示例

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container-fluid">
　　<h1>オフセット列</h1>
　　<p>.offset-md-4　これは.col-md-4　右に4列分移動しました。</p>
　　<div　class="container-fluid">
　　　　<div　class="row">
　　　　　　<div　class="col-md-4　bg-success">.col-md-4</div>
　　　　　　<div　class="col-md-4　offset-md-4　bg-warning">.col-md-4　.offset-md-4</div>
　　　　</div>
　　　　<div　class="row">
　　　　　　<div　class="col-md-3　offset-md-3　bg-success">.col-md-3　.offset-md-3</div>
　　　　　　<div　class="col-md-3　offset-md-3　bg-warning">.col-md-3　.offset-md-3</div>
　　　　</div>
　　　　<div　class="row">
　　　　　　<div　class="col-md-6　offset-md-3　bg-success">.col-md-6　.offset-md-3</div>
　　　　</div>
　　</div>
</div>
</body>
</html>

テストをしてみる‹/›

新しいBootstrapについて既に理解していることを願っています 4グリッドシステムの基礎知識。次の数章で、このflexboxグリッドシステムを使用して基本的なウェブレイアウトを作成する方法を学びます。

Bootstrap4 テキストレイアウト Bootstrap4 インストールと使用

Bootstrap4 基本チュートリアル

Bootstrap4 グリッドシステム

グリッドクラス

グリッドシステムのルール

Bootstrap 4 以下のクラスは組み合わせて使用することで、より柔軟なページレイアウトを作成できます。

Bootstrap4 グリッドの基本構造:

等幅の列を作成し、Bootstrapが自動レイアウトを行います

等幅レスポンシブ列

不等幅レスポンシブ列

平板和桌面端

平板、桌面、大桌面显示器、超大桌面显示器

偏移列

Bootstrap4 　グリッドの基本構造: