BS3 List-group
簡介
BS3 中的 .list-group 及 .list-group-item 這兩個 CSS 容器類別搭配其它標記，例如：<ul>, <li>, <button> 等可以產生清單式 (list) 的排版佈局。清單項目的內容可以是很簡單的純文字內容，或是一段很複雜的 HTML 程式碼，甚至包含其它的介面元件。在預設的情況下，清單會佔據父容器的全部寬度。.list-group-item 下，又有兩個 CSS 容器類別，分別是 .list-group-item-heading 及 .list-group-item-text 用以區分清單項目中的標題和內文。
狀態有 .active 及 .disabled 兩種類別可供使用。
清單項目的預設底色為白色，用以改變清單項目底色的 CSS 修飾類別有：
- .list-group-item-success
- .list-group-item-info
- .list-group-item-warning
- .list-group-item-danger
狀態則有 .active 及 .disabled 兩種。
以下為部份 BS3 v3.3.6 中 bootstrap.css 樣式表中有關 .list-group 及 .list-group-item 的樣式定義：
.list-group {
padding-left: 0;
margin-bottom: 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
.list-group-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
a.list-group-item,
button.list-group-item {
color: #555;
}
a.list-group-item .list-group-item-heading,
button.list-group-item .list-group-item-heading {
color: #333;
}
.list-group-item-heading {
margin-top: 0;
margin-bottom: 5px;
}
.list-group-item-text {
margin-bottom: 0;
line-height: 1.3;
}
範例
範例中展示了三份清單，第一份清單使用 <ul> 及 <li> 標記，具有 badge 元件。第二份清單使用 <div> 及 <button> 標記，且清單項目具有不同的底色。第三份清單只列了一個項目，具有底色、標題及內文。
CSS
<style>
html {
width:100%;
height:100%;
}
body {
margin: 0 auto;
max-width:1000px;
padding:20px;
}
</style>
沒有特別的 CSS 樣式需要定義。
HTML
<body>
- item_110
- item_211
- item_312
- item_413
- item_514
-
Title
Put content here.
第 22 行，用 <h4> 標記的 CSS 定義改變標題字體的大小。
沒有留言:
張貼留言