Bootstrap列表組的詳細介紹

本章我們將講解列表組。列表元件用於以列表形式呈現複雜的和自訂的內容。建立一個基本的清單群組的步驟如下：

向元素 ff6d136ddc5fdfeffaf53ff6ee95f185 新增 class .list-group。

向 25edfb22a4f469ecb59f1190150159c6 新增 class .list-group-item。

下面的實例示範了這一點：

#實例

<ul class="list-group">
    <li class="list-group-item">免费域名注册</li>
    <li class="list-group-item">免费 Window 空间托管</li>
    <li class="list-group-item">图像的数量</li>
    <li class="list-group-item">24*7 支持</li>
    <li class="list-group-item">每年更新成本</li></ul>

基礎清單群組

　　基礎列表組，看起來就是去掉了列表符號的列表項，並且配上一些特定的樣式。在Bootstrap框架中的基礎列表組主要包括兩個部分： 

#　　☑  list-group：列表組容器，常用的是ul元素，當然也可以是ol或div元素

】 list-group-item：列表項，常用的是li元素，當然也可以是div元素

　　對於基礎列表組並沒有做過多的樣式設置，主要設置了其間距，邊框和圓角等等

.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;
}

86ba7a910db1f851ade673353645313df496da2c0df4bc6d16ea49188db2a380HTMLbed06894275b65c1ab86501b08a632eb
f496da2c0df4bc6d16ea49188db2a380CSSbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a380javascriptbed06894275b65c1ab86501b08a632eb
f496da2c0df4bc6d16ea49188db2a380bootstrapbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a380jquerybed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689

徽章

#　　帶徽章的列表組其實就是將Bootstrap框架中的徽章元件和基礎列表組結合在一起的一個效果。具體做法很簡單，只需要在「list-group-item」中加入徽章元件「badge」

　　原理非常簡單，就是給徽章設定了一個右浮動，當然如果有兩個徽章同時在一個當清單項目中出現時，也設定了他們之間的距離

.list-group-item > .badge {
  float: right;
}.list-group-item > .badge + .badge {
  margin-right: 5px;
}

86ba7a910db1f851ade673353645313df496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d7023354bdf357c58b8a65c66d7c19c8e4d114HTMLbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d7026054bdf357c58b8a65c66d7c19c8e4d114CSSbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d70219254bdf357c58b8a65c66d7c19c8e4d114javascriptbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d7022054bdf357c58b8a65c66d7c19c8e4d114bootstrapbed06894275b65c1ab86501b08a632ebf496da2c0df4bc6d16ea49188db2a38065a095448675e8d3ad55aa894fd9d7022654bdf357c58b8a65c66d7c19c8e4d114jquerybed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689

## 

##連結

　　用 

3499910bf9dac5ae3c52d5ede7383485

 標籤取代 25edfb22a4f469ecb59f1190150159c6 標籤可以組成一個全部是連結的清單群組（也要注意的是，需要將 ff6d136ddc5fdfeffaf53ff6ee95f185 標籤替換為 dc6dce4a544fdca2df29d5ac0ea9906b 標籤）。沒必要為列表組中的每個元素加上一個父元素

a.list-group-item {
  color: #555;
}a.list-group-item .list-group-item-heading {
  color: #333;
}a.list-group-item:hover,
a.list-group-item:focus {
  color: #555;
  text-decoration: none;
  background-color: #f5f5f5;
}

1f2e350fb86f4fbcf304a3170516954f
  c6c9c9b8b3173ba91b723c08e0d6be97HTML5db79b134e9f6b82c0b36e0489ee08ed
  a16100a6f9717ef0222dddbefdffc896CSS5db79b134e9f6b82c0b36e0489ee08ed
  a16100a6f9717ef0222dddbefdffc896javascript5db79b134e9f6b82c0b36e0489ee08ed
  10520cbff229fcc96105ca9518f38965bootstrap5db79b134e9f6b82c0b36e0489ee08ed
  a16100a6f9717ef0222dddbefdffc896jquery5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68

 

按鈕

　　列表組中的元素也可以直接就是按鈕（也同時意味著父元素必須是 

dc6dce4a544fdca2df29d5ac0ea9906b

 而不能用 #ff6d136ddc5fdfeffaf53ff6ee95f185 了），並且無需為每個按鈕單獨包裹一個父元素。 注意不要使用標準的 .btn 類別

1f2e350fb86f4fbcf304a3170516954f
  6b50b67c135ab2e62492341b13f29373HTML65281c5ac262bf6d81768915a4a77ac0
  d68a9ee5ca1160520ed600ec9e3a7af9CSS65281c5ac262bf6d81768915a4a77ac0
  d68a9ee5ca1160520ed600ec9e3a7af9javascript65281c5ac262bf6d81768915a4a77ac0
  d68a9ee5ca1160520ed600ec9e3a7af9bootstrap65281c5ac262bf6d81768915a4a77ac0
  d68a9ee5ca1160520ed600ec9e3a7af9jquery65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68

 

#自訂內容

　　Bootstrap框加在連結清單群組的基礎上新增了兩個樣式：

　　☑  list-group-item-heading：用來定義清單項目頭部樣式

　　☑  list-group-item-text：用來定義清單項目主要內容

　　這兩個樣式最大的作用就是用來幫助開發者可以自訂清單項目裡的內容

#

1f2e350fb86f4fbcf304a3170516954f1c6fe066df748bd658464a725be6fb6408a61dbdfb70aa5a89a93f2eeab2c3a6HTML0f6dfd1e3624ce5465eb402e300e01ae5dbe51645de9f2b73a7c61b3ea42b899HTML被认为是前端知识体系里面最简单的知识，几年前，很多人都推荐在W3C上学习个几天就能够基本掌握。但随着HTML5和移动端的强势发展，HTML的技能点也越来越难。世上无难事，好学好总结...94b3e26ee717c64999d7867364b1b4a35db79b134e9f6b82c0b36e0489ee08ed1c6fe066df748bd658464a725be6fb6408a61dbdfb70aa5a89a93f2eeab2c3a6CSS0f6dfd1e3624ce5465eb402e300e01ae5dbe51645de9f2b73a7c61b3ea42b899CSS是前端工程师的基本功，但好多执迷于学习javascript的人的基本功并不扎实。可能一些人从w3school网站匆匆过了一遍，只是对CSS常用概念有一些表面上的理解，就一头扎进javascript的深坑里跳不出来。实际上，javascript中比较复杂的逻辑很有可能使用CSS几行样式就能解决问题，而且性能还好。CSS之所以能成为一门优雅的语言，以及有其对应的重构工程师的岗位，是因为这本语言本身就有很强的存在价值，且真正要理解它并不容易。从CSS禅意花园开始，写CSS成为一种艺术。从CSS2.1到3再到4，CSS所涵盖的内容及可实现的功能得到了极大的丰富，使得CSS的学习成本也越来越高。再多的知识，一个知识点一个知识点去学，总能学明白...94b3e26ee717c64999d7867364b1b4a35db79b134e9f6b82c0b36e0489ee08ed1c6fe066df748bd658464a725be6fb6408a61dbdfb70aa5a89a93f2eeab2c3a6javascript0f6dfd1e3624ce5465eb402e300e01ae5dbe51645de9f2b73a7c61b3ea42b899javascript就如同魔法一样，它是一门充满活力、简单易用的语言，又是一门具有许多复杂微妙技术的语言。即使是经验丰富的javascript开发者，如果没有认真学习的话，也无法真正理解它们，这就是javascript的矛盾之处。由于javascript不必理解就可以使用，因此通常来说很难真正理解语言本身，这就是我们面临的挑战。不满足于只是让代码正常工作，而是想要弄清楚为什么，勇于挑战这条崎岖颠簸的少有人走的路，拥抱整个javascript...94b3e26ee717c64999d7867364b1b4a35db79b134e9f6b82c0b36e0489ee08ed    16b28748ea4df4d9c2150843fecfba68

 

狀態設定

　　Bootstrap框架為組合清單項目提供了狀態效果，特別是連結清單群組。例如常見狀態和禁用狀態等。實作方法和前面介紹的元件類似，在清單群組中只需要在對應的清單項目中新增類別名稱：

　　☑  active：表示目前狀態

　　☑  disabled：表示目前狀態

　　☑  disabled：表示停用狀態

.list-group-item.disabled,
.list-group-item.disabled:hover,
.list-group-item.disabled:focus {
  color: #777;
  background-color: #eee;
}.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  z-index: 2;
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}

1f2e350fb86f4fbcf304a3170516954f
  c6c9c9b8b3173ba91b723c08e0d6be97HTML5db79b134e9f6b82c0b36e0489ee08ed
  a16100a6f9717ef0222dddbefdffc896CSS5db79b134e9f6b82c0b36e0489ee08ed
  a16100a6f9717ef0222dddbefdffc896javascript5db79b134e9f6b82c0b36e0489ee08ed
  10520cbff229fcc96105ca9518f38965bootstrap5db79b134e9f6b82c0b36e0489ee08ed
  240d28e046b15bac6aa66060d9749335jquery5db79b134e9f6b82c0b36e0489ee08ed16b28748ea4df4d9c2150843fecfba68

# 

多彩清單群組

　　清單群組元件和警告元件一樣，Bootstrap為不同的狀態提供了不同的背景顏色和文字色，可以使用這幾個類別名稱定義不同背景色的列表項目

　　☑  list-group-item-success：成功，背景色綠色

　　☑  list-group-item-warning：警告，背景色藍色

　　☑  list-group-item-warning：警告，背景色為黃色

】㠀☑ -group-item-danger：錯誤，背景色為紅色

　　如果想為清單項目添加什麼背景色，只需要在「list-group-item」基礎上增加對應的類別名稱

1f2e350fb86f4fbcf304a3170516954f
1c6fe066df748bd658464a725be6fb64默认5db79b134e9f6b82c0b36e0489ee08ed
564697e6951cbe44a8c1e129362f7453成功5db79b134e9f6b82c0b36e0489ee08ed
e9c1f721ffe69308cd05e752fe40ea9b信息5db79b134e9f6b82c0b36e0489ee08ed
b35bfd6cac3e90ee9e8d9ce873ad6b28警告5db79b134e9f6b82c0b36e0489ee08ed
b650cad83cd8011e65e52f0c389d58a7错误5db79b134e9f6b82c0b36e0489ee08ed
16b28748ea4df4d9c2150843fecfba68

以上是Bootstrap列表組的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！