[英]Which bootstrap 3 class should I use to create vertical list of items / “cards” (Rails 3.2, bootstrap3)
我正在構建一個日常交易應用程序來學習Ruby on Rails。
我現在正在構建主頁視圖。 我希望它只是一個“卡片”的垂直列表(參見https://www.intercom.com/blog/why-cards-are-the-future-of-the-web/ ),或者更簡單地說,一個垂直的元素列表,每個元素都是一個帶有灰色邊框的水平矩形。
我是Bootstrap的新手,有很多課程可供選擇。 有沒有我可以使用這些“卡”,即使我之后必須覆蓋一點CSS?
這是我想要的那種“簡單的垂直矩形列表”的例子。
也許類“ list-group-item ”但是我的矩形都是如你在圖片中看到的那樣分開(即它們沒有相互接觸)並且我需要在每個矩形上方有一個紅色標題(即標題在矩形/項目之外)所以我不確定這是正確的選擇。
對於我想要做的事情,Bootstrap 3中的類是否有更好的匹配?
最重要的是你吐出無序列表ul
> list-group-item
> div
> more div
> text
我舉了一個例子。 在這里結帳https://jsfiddle.net/kuntau/X5Wvn/
HTML
<div class="container" >
<ul class="list-group">
<li>
<div class="panel panel-default">
<div class="panel-body">
<div class="panel-info">
<p><strong>Tel: 011-345-898</strong></p>
<p>9182 Lorem Ipsum<br />
consectetur adipiscing elit.<br />
Nullam vel lacus felis.</p>
</div>
<div class="panel-rating">
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star"></span>
<p>Rate Yourself!</p>
</div>
<div class="panel-more1">
<img src="http://lorempixel.com/100/100" />
<br /><span>Caption</span>
</div>
<div class="panel-more1">
<img src="http://lorempixel.com/100/100" />
<br /><span>Caption</span>
</div>
<div class="panel-more1">
<img src="http://lorempixel.com/100/100" />
<br /><span>Caption</span>
</div>
</div>
</div>
</li>
</ul>
</div>
CSS
.list-group li {
list-style: none;
}
.panel-info, .panel-rating, .panel-more1 {
float: left;
margin: 0 10px;
}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Item title</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-3">first column</div>
<div class="col-sm-3">secondcolumn</div>
<div class="col-sm-2">3rd column</div>
<div class="col-sm-2">4th column</div>
<div class="col-sm-2">5th column</div>
</div>
只需要一點CSS來渲染垂直邊框:
div.row > div:first-child {
border-right: 1px solid #ccc;
}
div.row > div:nth-child(5) {
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
檢查這個小提琴: https : //jsfiddle.net/bostaf/eqn93g6j/ 。 調整視口大小以查看操作中的響應性。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.