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：表示禁用状态

.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-info：信息，背景色蓝色

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

　　☑  list-group-item-danger：错误，背景色为红色

　　如果想给列表项添加什么背景色，只需要在“list-group-item”基础上增加对应的类名

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

以上是Bootstrap列表组的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章！