Html 引导-卡与容器_Html_Css_Twitter Bootstrap

Html 引导-卡与容器

html css twitter-bootstrap

Html 引导-卡与容器,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我是bootstrap新手，我遇到了使用卡片和容器来包含其他元素的示例。有人能解释一下区别以及什么时候使用吗？A卡是一种灵活的可扩展内容容器。它包括页眉和页脚选项、各种内容、上下文背景颜色和强大的显示选项。例如： <div class="card" style="width: 20rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-block"&

我是bootstrap新手，我遇到了使用卡片和容器来包含其他元素的示例。有人能解释一下区别以及什么时候使用吗？

A卡是一种灵活的可扩展内容容器。它包括页眉和页脚选项、各种内容、上下文背景颜色和强大的显示选项。例如：

<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>
使用
.container fluid
作为全宽容器，覆盖视口的整个宽度

<div class="container-fluid"> ... </div>

...
查看更多信息。
希望这是有帮助的
从各个方面来看，这是两件截然不同的事情。

1）容器，我主要指的是页面的“容器”，因此当您开始创建任何页面时，您可以定义如下内容

<html> <head></head> <body> <div class="container"></div> </body> </html>

2）而卡片：不错的组件，过去有一些预定义的布局/结构，主要用作图像缩略图、手风琴、标签、通知、信息框、图库，我也可以说是用于框

<html> <head></head> <body> <div class="container"> <div class="cards">   </div> </div> </body> </html>

我的回答将解释卡片和容器之间的区别
容器
容器是最基本的引导组件之一。可以使用容器及其对应行在网格中创建基本或复杂的内容方向。容器用于网站布局

卡片
在Bootstrap v4中添加的卡定义了一种显示内容的方式。尝试将容器视为内容对齐，将卡片视为内容结构和设计

虽然从技术上讲，卡片的核心是容器，样式稍微多一些，但两者的意图完全不同

<html> <head></head> <body> <div class="container"> <div class="cards">   </div> </div> </body> </html>

<div class='container'>

<div class='card'>