BootStrap列表组的用法

作者：平凡特产小店 | 来源：互联网 | 2023-05-31 08:55

列表组列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。***基本实例最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置

***基本实例

最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类。我们提供了一些预定义的样式，你可以根据自身的需求通过 CSS 自己定制。

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Copy

 class="list-group">
   class="list-group-item">Cras justo odio
   class="list-group-item">Dapibus ac facilisis in
   class="list-group-item">Morbi leo risus
   class="list-group-item">Porta ac consectetur ac
   class="list-group-item">Vestibulum at eros

徽章

给列表组加入徽章组件，它会自动被放在右边。

14Cras justo odio
2Dapibus ac facilisis in
1Morbi leo risus

Copy

 class="list-group">
   class="list-group-item">
     class="badge">14
    Cras justo odio

链接

用标签代替

标签可以组成一个全部是链接的列表组（还要注意的是，我们需要将

标签替换为

标签）。没必要给列表组中的每个元素都加一个父元素。

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Copy

 class="list-group">
   href="#" class="list-group-item active">
    Cras justo odio
  
   href="#" class="list-group-item">Dapibus ac facilisis in
   href="#" class="list-group-item">Morbi leo risus
   href="#" class="list-group-item">Porta ac consectetur ac
   href="#" class="list-group-item">Vestibulum at eros

被禁用的条目

为 .list-group-item 添加 .disabled 类可以让单个条目显示为灰色，表现出被禁用的效果。

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

Copy

 class="list-group">
   href="#" class="list-group-item disabled">
    Cras justo odio
  
   href="#" class="list-group-item">Dapibus ac facilisis in
   href="#" class="list-group-item">Morbi leo risus
   href="#" class="list-group-item">Porta ac consectetur ac
   href="#" class="list-group-item">Vestibulum at eros

***情境类

为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置 .active 状态。

Dapibus ac facilisis in
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum at eros

Dapibus ac facilisis in Cras sit amet nibh libero Porta ac consectetur ac Vestibulum at eros

 class="list-group">
   class="list-group-item list-group-item-success">Dapibus ac facilisis in
   class="list-group-item list-group-item-info">Cras sit amet nibh libero
   class="list-group-item list-group-item-warning">Porta ac consectetur ac
   class="list-group-item list-group-item-danger">Vestibulum at eros

 class="list-group">
   href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in
   href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero
   href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac
   href="#" class="list-group-item list-group-item-danger">Vestibulum at eros

推荐阅读

go
将两个内嵌块左右对齐放在同一行上 - Align two inline-blocks on same line, one to the left and one to the right

HowcanIaligntwoinline-blockssothatoneisleftandtheotherisrightonthesameline?Whyi ... [详细]

蜡笔小新 2023-10-14 08:37:52
list
Nginx使用（server参数配置）

本文介绍了Nginx的使用，重点讲解了server参数配置，包括端口号、主机名、根目录等内容。同时，还介绍了Nginx的反向代理功能。 ... [详细]

蜡笔小新 2023-12-14 17:08:34
object
Netty源代码分析服务器端启动ServerBootstrap初始化

本文主要分析了Netty源代码中服务器端启动的过程，包括ServerBootstrap的初始化和相关参数的设置。通过分析NioEventLoopGroup、NioServerSocketChannel、ChannelOption.SO_BACKLOG等关键组件和选项的作用，深入理解Netty服务器端的启动过程。同时，还介绍了LoggingHandler的作用和使用方法，帮助读者更好地理解Netty源代码。 ... [详细]

蜡笔小新 2023-12-10 15:42:28
object
PRML读书会第十四章 Combining Models（committees，Boosting，AdaBoost，决策树，条件混合模型）...

主讲人网神（新浪微博:豆角茄子麻酱凉面）网神(66707180)18:57:18大家好，今天我们讲一下第14章combiningmodel ... [详细]

蜡笔小新 2023-10-17 17:04:24
object
ipad可以开发python_这15个应用,程序员用iPad照样可以编程!

1、DashAPI文档Dash是一个API文档浏览器，使用户可以使用离线功能即时搜索无数API。程序员使用Dash可访问iOS，MacOS， ... [详细]

蜡笔小新 2023-10-17 10:15:42
object
cisco路由器的寄存器值（忘记密码时要进机器时候用的）

本文摘要配置目的：寄存器配置用于更改路由器启动过程。配置目的：寄存器配置用于更改路由器启动过程。启动位由4位16进制寄存器组成格式：0xA ... [详细]

蜡笔小新 2023-10-16 19:59:28
list
视图分区_组复制常规操作网络分区amp;混合使用IPV6与IPV4 | 全方位认识 MySQL 8.0 Group Replication...

网络分区对于常规事务而言，每当组内有事务数据需要被复制时，组内的成员需要达成共识(要么都提交，要么都回滚)。对于组成员资格的变更也和保持组 ... [详细]

蜡笔小新 2023-10-16 18:09:11
go
入门Java需熟练掌握哪些技术呢？

Java工程师无疑是当下令人艳羡的工作之一，因此，每年都有大批大批的朋友想要报名Java工程师学习Java也就不奇怪了。那么入门Java掌握哪些技术能力 ... [详细]

蜡笔小新 2023-10-16 15:56:51
function
PHP 图片处理种

后端开发|php教程this,gt,mask,src,img后端开发-php教程PHP图片处理类bootstrap源码模板,ubuntu编译内核命令,tomcat启动要十分钟,20 ... [详细]

蜡笔小新 2023-10-15 19:55:27
list
使用Html5开发Android和iOS应用：HBuilder、Html5Plus、MUI

活动主题：五一巨献，问答有礼，105QB送给IT互联网界的劳动人民活动时间：4月30日晚上10点~5月2日晚上10点网址：http:ask.jiutianniao.com ... [详细]

蜡笔小新 2023-10-14 12:08:45
list
React图片输入框移动端网页_018

React-图片输入框-移动端网页gitHub地址觉得有参考价值，点个赞https:github.comxiaopingzh…目录结构.├──README.md├──dist│├─ ... [详细]

蜡笔小新 2023-10-13 18:11:44
express
伊振华作品 | 沈阳市智慧城市运行管理中心的设计与建设

本文介绍了设计师伊振华受邀参与沈阳市智慧城市运行管理中心项目的整体设计，并以数字赋能和创新驱动高质量发展的理念，建设了集成、智慧、高效的一体化城市综合管理平台，促进了城市的数字化转型。该中心被称为当代城市的智能心脏，为沈阳市的智慧城市建设做出了重要贡献。 ... [详细]

蜡笔小新 2023-12-14 16:35:39
byte
C++字符字符串处理及字符集编码方案

本文介绍了C++中字符字符串处理的问题，并详细解释了字符集编码方案，包括UNICODE、Windows apps采用的UTF-16编码、ASCII、SBCS和DBCS编码方案。同时说明了ANSI C标准和Windows中的字符/字符串数据类型实现。文章还提到了在编译时需要定义UNICODE宏以支持unicode编码，否则将使用windows code page编译。最后，给出了相关的头文件和数据类型定义。 ... [详细]

蜡笔小新 2023-12-13 04:59:58
byte
TPadmin即基于ThinkPHP5拿来即用高性能背景治理体系

新版本在线体验地点已上线，迎接体验?—2017-01-14喜好就Star，不只是Fork；想要分享的结果才是驱动力，而手艺仅仅是一种要领。TP-adminTP-admin即基于Th ... [详细]

蜡笔小新 2023-10-10 18:52:17
byte
前端视频播放初探总结，video标签-视频插件jwplayer

1.HTML5原生支持<video>简单使用：<videosrc..TestRestest.mp4autoplaycontrols><vide ... [详细]

蜡笔小新 2023-10-10 08:32:16

BootStrap列表组的用法

列表组 列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。

***基本实例

徽章

链接

被禁用的条目

***情境类

列表组
列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。