Bootstrap - 卡與容器

我是新手引導，我遇到了使用卡和容器來包含其他元素的例子。有人可以解釋不同之處以及何時使用它們？Bootstrap - 卡與容器

2017-07-13 Maddy

兩個截然不同的東西來自每個方面。

1）集裝箱，我主要是指頁面的「容器」，所以當你開始創建任何頁面定義是這樣的

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

2），而卡：好的組件，曾經有一些預定義的佈局/結構，主要用於在作爲圖像縮略圖，手風琴，標籤，通知，信息框，畫廊和我也可以說爲箱

<html> 
<head></head> 
<body> 
<div class="container"> 
<div class="cards"> 
<!-- card header --> 
<!-- card body --> 
</div> 
</div> 
</body> 
</html>

來源

2017-07-13 08:46:24

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>

檢查Here獲取更多信息。

雖然至於集裝箱，Bootstrap需要一個包含元素來包裝網站內容和容納我們的網格系統。您可以選擇兩個容器中的一個用於您的項目。請注意，由於填充等原因，兩個容器都不能嵌套。使用.container作爲響應固定寬度的容器。

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

使用.container-fluid爲全寬容器，跨越視口的整個寬度。

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

檢查here瞭解更多信息。希望這有幫助

來源

2017-07-13 08:41:54 Ahmad

我的答案會解釋卡和容器之間的區別。

集裝箱

容器是最根本的和基本的引導組件之一。您可以使用具有對應行的容器來在網格中創建基本或複雜的內容方向。容器用於網站佈局。 Documentation。

<div class='container'>

卡

卡，加入引導V4，定義顯示內容的方式。嘗試將容器可視化爲內容對齊和卡作爲內容結構和設計。 Documentation。

<div class='card'>

雖然卡在技術上是容器在他們的核心，多一點風格，但都有完全不同的意圖。

來源

2017-07-13 09:06:52

Bootstrap - 卡與容器

回答

相關問題