Tutoriel de base Bootstrap

Plugins Bootstrap

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

Exemple de système de grille Bootstrap : empilé horizontalement

Laissez-nous voir un exemple de grille avec une mise en page simple : deux colonnes, chaque colonne contient deux paragraphes. (Ici, des styles sont définis pour chaque colonne, ce que vous pouvez éviter de faire.)

Exemple en ligne

Exemple

<!DOCTYPE　html>
<html>
<head>
　　　<meta　charset="utf-8">
　　　<title>Exemple Bootstrap　-　empilé horizontalement</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-couleur: #dedef8; boîte-ombre: 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-couleur: #dedef8; boîte-ombre: 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>

Voyons un test voir ‹/›

Les résultats sont affichés comme suit :

Détails

<div>...</div>/div> L'élément est ajouté, assurez-vous qu'il est centré et qu'il a la largeur maximale.
Une fois que le conteneur a été ajouté, vous devez ensuite considérer les lignes comme unité. Ajouter <div>...</div>/div>，并在行内添加列 <div></div>。
每一行网格是由 12 单元个组成的，您可以使用这些单元定义列的尺寸。在我们的示例中，有两个列，每个列由 6 单元个组成，即 6+6=12。

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

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