Bootstrap-Basis-Tutorial

Bootstrap-Plugins

Bootstrap 网格系统实例：中型和大型设备 Bootstrap CSS编码规范

Bootstrap-Grid-System-Beispiel: stapelweise waagerecht

Lassen Sie uns einen Beispiel-Grid mit einfacher Struktur betrachten: Er enthält zwei Spalten, jede Spalte enthält zwei Absätze. (Hier wurden für jede Spalte separate Stile definiert, das ist nicht erforderlich.)

Online-Beispiel

Beispiel

<!DOCTYPE　html>
<html>
<head>
　　　<meta　charset="utf-8">-8">
　　　<title>Bootstrap　Beispiel　-　stapelweise waagerecht</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 quia 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>

Testen Sie es heraus, um zu sehen, ‹/›

Das Ergebnis ist wie folgt dargestellt:

Details

<div>...</div>/div> Stellen Sie sicher, dass der Elemente zentriert und die maximale Breite sind.
Sobald ein Behälter hinzugefügt wurde, müssen Sie als nächstes überlegen, was Zeilen als Einheit zu berücksichtigen. Hinzufügen <div>...</div>/div>，并在行内添加列 <div></div>。
网格中的每一行是由 12 个单元组成的，您可以使用这些单元定义列的尺寸。在我们的示例中，有两个列，每个列由 6 个单元组成，即 6+6=12。

您可以尝试其他更多的选项，比如 <div></div> 和 <div></div> 或 <div></div> 和 <div></div>。

您可以尝试一下，但要确保总和总是 12。