logo标签列表

Bootstrap - 卡片 vs 容器

htmlcsstwitter-bootstrap
3

我对Bootstrap不熟悉，发现了使用卡片和容器来包含其他元素的示例。请问有人可以解释一下它们的区别以及何时使用它们吗？

3个回答
2

我的回答将解释卡片和容器之间的区别。

容器

容器是最基本的Bootstrap组件之一。您可以使用容器及其对应的行来在网格中创建基本或复杂的内容方向。容器用于网站布局。文档。

<div class='container'>

卡片

卡片是在Bootstrap v4中添加的，用于定义内容的显示方式。可以将容器视为内容对齐，将卡片视为内容结构和设计。文档.

<div class='card'>

虽然卡片在本质上是容器，但是通过一些样式的改变，它们有着完全不同的意图。
1
两件完全不同的事情，从各个方面来看。

1）容器，我大多数时候是指页面的"容器"，因此在创建任何页面时，您需要定义类似于以下内容：
<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>
0

卡片是一个灵活且可扩展的内容容器。它包含标题和页脚选项、各种各样的内容、上下文背景颜色以及强大的显示选项。 例如：

<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>

请点击这里获取更多信息。 希望这对您有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接