本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下:
向元素 添加 class .list-group。
向
下面的实例演示了这点:
实例
<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; }
<ul class="list-group"><li class="list-group-item">HTML</li> <li class="list-group-item">CSS</li><li class="list-group-item">javascript</li> <li class="list-group-item">bootstrap</li><li class="list-group-item">jquery</li> </ul>
带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单,只需要在“list-group-item”中添加徽章组件“badge”
原理非常简单,就是给徽章设置了一个右浮动,当然如果有两个徽章同时在一个列表项中出现时,还设置了他们之间的距离
.list-group-item > .badge { float: right; }.list-group-item > .badge + .badge { margin-right: 5px; }
<ul class="list-group"><li class="list-group-item"><span class="badge">33</span>HTML</li><li class="list-group-item"><span class="badge">60</span>CSS</li><li class="list-group-item"><span class="badge">192</span>javascript</li><li class="list-group-item"><span class="badge">20</span>bootstrap</li><li class="list-group-item"><span class="badge">26</span>jquery</li></ul>
以上就是Bootstrap列表组的详细介绍的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号