Bootstrap列表组
来源:互联网 发布:ubuntu 查看dns 编辑:程序博客网 时间:2024/06/03 15:34
基本结构:
<ul class="list-group"> <li class="list-group-item">免费域名注册</li> <li class="list-group-item">24*7 支持</li> <li class="list-group-item">每年更新成本</li></ul>
<div class="list-group"> <a href="#" class="list-group-item">24*7 支持</a> <a href="#" class="list-group-item">免费 Window 空间托管</a> <a href="#" class="list-group-item">图像的数量</a></div>
<div class="list-group"> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 免费域名注册 </h4> <p class="list-group-item-text"> 您将通过网页进行免费域名注册。 </p> </a></div>
创建一个基本的列表组:
(1)向元素 <ul>
添加 .list-group
(2)向 <li>
添加 .list-group-item
向列表组添加徽章:
在 <li>
元素中添加 <span class="badge">
即可。它会自动定位到右边。
<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"> <span class="badge">新</span> 24*7 支持 </li> <li class="list-group-item">每年更新成本</li></ul>
向列表组添加链接
通过使用锚标签代替列表项,我们可以向列表组添加链接。需要使用 <div>
代替 <ul>
元素。
<div class="list-group"> <a href="#" class="list-group-item active"> 免费域名注册 </a> <a href="#" class="list-group-item">24*7 支持</a> <a href="#" class="list-group-item">免费 Window 空间托管</a> <a href="#" class="list-group-item">图像的数量</a> <a href="#" class="list-group-item">每年更新成本</a></div>
向列表组添加自定义内容
<div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading"> 入门网站包 </h4> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 免费域名注册 </h4> <p class="list-group-item-text"> 您将通过网页进行免费域名注册。 </p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading"> 24*7 支持 </h4> <p class="list-group-item-text"> 我们提供 24*7 支持。 </p> </a></div>
0 0
- BootStrap列表组
- Bootstrap学习:列表组
- bootstrap列表组listgroup
- Bootstrap 进度条 列表组
- Bootstrap列表组
- bootstrap-列表组
- Bootstrap列表组
- Bootstrap 列表组
- Bootstrap 列表组
- bootstrap列表组组件
- Bootstrap组件之列表组
- BootStrap列表组的用法
- bootstrap学习25---列表组
- bootstrap列表
- Bootstrap 列表
- Bootstrap<列表>
- Bootstrap-列表
- bootstrap列表
- ajax在什么情况下会走success和error
- 多协议无线开发板FRDM-KW40Z
- eclipse 的快捷键 ctrl + shift + O 还挺好使
- 链表头结点存在的意义
- python os模块 文件操作
- Bootstrap列表组
- Floodlight控制器创建一个模块的简单过程
- iOS时间比较
- Java listFiles查找指定类型的文件简单做法
- 微信支付和支付宝支付
- crash处理core文件
- Android原生项目接入React Native
- 使用PL/SQL执行计划进行sql调优
- Java NIO (二)--Buffer