我对Bootstrap不熟悉,发现了使用卡片和容器来包含其他元素的示例。请问有人可以解释一下它们的区别以及何时使用它们吗?
我对Bootstrap不熟悉,发现了使用卡片和容器来包含其他元素的示例。请问有人可以解释一下它们的区别以及何时使用它们吗?
<html>
<head></head>
<body>
<div class="container"></div>
</body>
</html>
2) 而Cards:是一个不错的组件,常用于预定义的布局/结构,主要用于图像缩略图、手风琴、选项卡、通知、信息框、画廊,我还可以说它适用于盒子。
<html>
<head></head>
<body>
<div class="container">
<div class="cards">
<!-- card header -->
<!-- card body -->
</div>
</div>
</body>
</html>
卡片是一个灵活且可扩展的内容容器。它包含标题和页脚选项、各种各样的内容、上下文背景颜色以及强大的显示选项。 例如:
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
请点击这里获取更多信息。
至于容器,Bootstrap需要一个包含元素来包裹网站内容并容纳我们的网格系统。您可以选择两个容器之一用于您的项目。请注意,由于填充等原因,两个容器都不能嵌套。
使用.container
来创建一个响应式固定宽度容器。
<div class="container">
...
</div>
.container-fluid
来创建一个全宽度容器,跨越整个视口的宽度。<div class="container-fluid">
...
</div>
请点击这里获取更多信息。 希望这对您有所帮助。