但在Bootstrap框架中,还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换,而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果: + View Code 运行效果如下: 原理实现: 如果使用a.list-group-item时,在样式需要做一定的处理,比如说去文本下划线,增加悬浮效果等:...
Bootstrap 列表组 本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group。 向 <li> 添加 class .list-group-item。 下面的实例演示了这点: 实例 [mycode3 typ
}.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...
list-group-item-heading:用来定义列表项头部样式 list-group-item-text:用来定义列表项主要内容 这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容,如下面的示例: 图解CSS3 ... Sass中国 ... 运行效果如下: 原理实现: ‘这两个样式主要控制不同状态下的文本颜色: /*bootstrap...
使用或通过添加来创建具有悬停、禁用和活动状态的可操作.list-group-item-action列表组项 添加.list-group-flush以删除一些边框和圆角以在父容器(例如卡片)中边对边呈现列表组项目 添加.list-group-horizontal以跨所有断点将列表组项的布局从垂直更改为水平 使用上下文类来...
为.list-group-item添加.disabled类可以让单个条目显示为灰色,表现出被禁用的效果; 当前状态行则是添加.active。 情境类 .list-group-item-success .list-group-item-info .list-group-item-waining .list-group-item-danger 情境 实践 <!DOCTYPE html>组件-列表组...
这是一个列表52 这是一个列表52 这是一个列表52 这是一个列表52 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 效果如下:
--按钮列表组--><!--被禁用的列表项-->Cras justo odioDapibus ac facilisis inMorbi leo risusPorta ac consectetur acVestibulum at eros 1. 2. 3. 4. 5. 6. 7. 8. 9. 6、情境类列表组 为列表中的条目添加情境类,默认样式或链接列表都可以。还可以为列表中的条目设置.active...
Third item Try it Yourself » Disabled ItemThe .disabled class adds a lighter text color to the disabled item. And when used on links, it will remove the hover effect:Disabled item Disabled item Third item Example Disabled item Disabled item Third...
Add .active to a .list-group-item to indicate the current active selection.An active item A second item A third item A fourth item And a fifth oneCopy An active item A second item A third item A fourth item And a fifth one Disabled itemsAdd .disabled to a .list-group-item to mak...