Bootstrap 基础教程

Bootstrap 插件

Bootstrap 網格システムの例：中間と大きなデバイス Bootstrap CSS コーディング規範

Bootstrap 网格系统实例：堆叠的水平

让我们来看一个带有简单布局的网格示例：包含两个列，每个列包含两个段落。（在这里，为每个列分别定义了样式，您可以避免这么做。）

在线示例

示例

!DOCTYPE　html>
<html>
<head>
　　　<meta　charset="utf-8">
　　　<title>Bootstrap　示例　-　堆叠的水平</title>
　　　<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　　　<script　src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<h1>Hello, world!</h1>
	<div class="row">
		<div class="col-md-6" style="background-color: #dedef8; box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>;
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do　
			eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut　
			enim ad minim veniam, quis nostrud exercitation ullamco laboris　
			nisi ut aliquip ex ea commodo consequat.　
			</p>
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
			accusantium doloremque laudantium, totam rem aperiam, eaque ipsa　
			quae ab illo inventore veritatis et quasi architecto beatae vitae　
			dicta sunt explicabo.　
			</p>
		</div>
		<div class="col-md-6" style="background-color: #dedef8; box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>;
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
			accusantium doloremque laudantium.
			</p>
			<p>Neque porro quisquam est, qui dolorem ipsum quo dolor sit amet,　
			consectetur, adipisci velit, sed quia non numquam eius modi　
			tempora incidunt ut labore et dolore magnam aliquam quaerat　
			voluptatem.　
			</p>
		</div>
	</div>
</div>
</body>
</html>

テストを見てみましょう ‹/›

以下の結果が示されています：

詳細

<div>...</div>/div> 要素が追加され、中央寄せと最大幅を確保してください。
コンテナが追加されたら、次に行単位で考慮する必要があります。 <div>...</div>/div>、行内に列を追加して <div></div>。
グリッドの各行は 12 ユニットで構成されています、これらのユニットを使用して列のサイズを定義できます。私たちの例では、2つの列があり、各列は 6 ユニットで構成されています、つまり 6+6=12。

他の多くのオプションを試してみることもできます、例えば <div></div> および <div></div> または <div></div> および <div></div>。

あなたは試してみることができますが、合計が常に 12。

Bootstrap 網格システムの例：中間と大きなデバイス Bootstrap CSS コーディング規範