Bootstrap 列表组 本章我们将讲解列表组。列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group。 向 <li> 添加 class .list-group-item。 下面的实例演示了这点: 实例 [mycode3 typ
但在Bootstrap框架中,还是采用了另一种实现方式。就是将ul.list-group使用div.list-group来替换,而li.list-group-item直接用a.list-group-item来替换。这样就可以达到需要的效果: + View Code 运行效果如下: 原理实现: 如果使用a.list-group-item时,在样式需要做一定的处理,比如说去文本下划线,增加悬浮效果等:...
这样做有个不足之处,就是链接的点击区域只在文本上有效;但很多时候都希望在列表项的任何区域都具备可点击,这是就需要在链接标签上增加额外的样式:display:block;但在bootstrap框架中,还是采用了另一种实现方式,就是将ul.list-group用div.list-group来替换,li.list-group-item用a.list-group-item来替换,这样就...
list-group-item-heading:用来定义列表项头部样式 list-group-item-text:用来定义列表项主要内容 这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容,如下面的示例: 图解CSS3 ... Sass中国 ... 运行效果如下: 原理实现: ‘这两个样式主要控制不同状态下的文本颜色: /*bootstrap...
item list-group-item-danger">危险列表项 主要列表项 深灰色列表项 浅色列表项 尝试一下 »Bootstrap4 分页 Bootstrap4 卡片 点我分享笔记分类导航 HTML / CSS JavaScript 服务端 数据库 移动端 XML 教程 ASP.NET Web Service 开发工具 网站建设反馈/建议 反馈/建议 在线实例 ·HTML 实例 ·CSS 实...
使用或来创建具有hover、禁用、悬停和活动状态的列表组.list-group-item-action,我们分离这些Class样式,以确保由非交互元素组成的列表群组(如或)不提供可点击或触击(即可以用一个父代替-译者注)。 请务必不要在这里使用.btn标准样式。 Cras justo odioDapibus ac facilisis...
链接的点击区域只在文本上有效;但很多时候都希望在列表项的任何区域都具备可点击,这是就需要在链接标签上增加额外的样式:display:block;但在bootstrap框架中,还是采用了另一种实现方式,就是将ul.list-group用div.list-group来替换,li.list-group-item用a.list-group-item来替换,这样就可以达到需要的效果。
使用或通过添加来创建具有悬停、禁用和活动状态的可操作.list-group-item-action列表组项 添加.list-group-flush以删除一些边框和圆角以在父容器(例如卡片)中边对边呈现列表组项目 添加.list-group-horizontal以跨所有断点将列表组项的布局从垂直更改为水平 使用上下文类来...
列表组用来显示一组关联的显示元素,Bootstrap提供了可以灵活使用的列表组组件list-group,本篇就来具体演示下。 2. 普通列表组 用list-group类修饰ul元素,使用list-group-item类修饰li元素,即可创建列表组,代码如下: 普通列表组:第1节第2节第3节第4节 效果如下: 3. 将普通链接转换为列表组 不仅可以针对ul、...
向li添加.list-group-item类 向列表组添加徽章 在元素中添加即可。 链接形式的列表组 直接将改变为标签即可,要注意也要替换成 禁用 为.list-group-item添加.disabled类可以让单个条目显示为灰色,表现出被禁用的效果; 当前状态行则是添加.active。 情境类 .list-group-...