14Bootstrap5列表组

最新推荐文章于 2022-10-09 14:09:16 发布
最新推荐文章于 2022-10-09 14:09:16 发布
阅读量152 收藏 1
点赞数
分类专栏： Bootstrap5 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46452300/article/details/121847016
版权

14Bootstrap5列表组

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>菜鸟教程Bootstrap5列表组</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!--
要创建列表组，可以在 <ul> 元素上添加 .list-group 类,
 在 <li> 元素上添加 .list-group-item 类:
-->
<div class="container mt-3">
    <h1>基础列表组</h1>
    <ul class="list-group">
        <li class="list-group-item">第一项</li>
        <li class="list-group-item">第二项</li>
        <li class="list-group-item">第三项</li>
    </ul>
</div>
<!--
激活状态的列表项
通过添加 .active 类来设置激活状态的列表项：
-->
<div class="container mt-3">
    <h2>激活状态的列表项</h2>
    <ul class="list-group">
        <li class="list-group-item active">激活列表项</li>
        <li class="list-group-item">第二项</li>
        <li class="list-group-item">第三项</li>
    </ul>
</div>
<!--
禁用的列表项
.disabled 类用于设置禁用的列表项:
-->
<div class="container mt-3">
    <h2>禁用的列表项</h2>
    <ul class="list-group">
        <li class="list-group-item disabled">禁用项</li>
        <li class="list-group-item">第二项</li>
        <li class="list-group-item">第三项</li>
    </ul>
</div>
<!--
链接列表项
要创建一个链接的列表项，可以将 <ul> 替换为 <div> ， <a> 替换 <li>。
如果你想鼠标悬停显示灰色背景就添加.list-group-item-action 类:
-->
<div class="container mt-3">
    <h2>链接列表项</h2>
    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">第一项</a>
        <a href="#" class="list-group-item list-group-item-action">第二项</a>
        <a href="#" class="list-group-item list-group-item-action">第三项</a>
    </div>
</div>
<!--
移除列表边框
使用 .list-group-flush 类来删除列表的边框和圆角：
-->
<div class="container mt-3">
    <h2>移除列表边框</h2>
    <p>使用 .list-group-flush 类来删除列表的边框和圆角：</p>
</div>
<div class="container">
    <ul class="list-group list-group-flush">
        <li class="list-group-item">第一项</li>
        <li class="list-group-item">第二项</li>
        <li class="list-group-item">第三项</li>
        <li class="list-group-item">第四项</li>
    </ul>
</div>
<!--
水平列表组
我们可以将 .list-group-horizontal 类添加到
 .list-group 类后面来创建水平列表组：
-->
<div class="container mt-3">
    <h2>水平列表组</h2>
    <p>可以将 .list-group-horizontal 类添加到 .list-group 类后面来创建水平列表组：</p>
    <ul class="list-group list-group-horizontal">
        <li class="list-group-item">第一项</li>
        <li class="list-group-item">第二项</li>
        <li class="list-group-item">第三项</li>
        <li class="list-group-item">第四项</li>
    </ul>
</div>
<!--
多种颜色列表项
列表项目的颜色可以通过以下列来设置：
.list-group-item-success, list-group-item-secondary,
 list-group-item-info, list-group-item-warning,
 .list-group-item-danger, list-group-item-dark 和 list-group-item-light:
-->
<div class="container mt-3">
    <h2>多种颜色列表项</h2>
    <ul class="list-group">
        <li class="list-group-item list-group-item-success">成功列表项</li>
        <li class="list-group-item list-group-item-secondary">次要列表项</li>
        <li class="list-group-item list-group-item-info">信息列表项</li>
        <li class="list-group-item list-group-item-warning">警告列表项</li>
        <li class="list-group-item list-group-item-danger">危险列表项</li>
        <li class="list-group-item list-group-item-primary">主要列表项</li>
        <li class="list-group-item list-group-item-dark">深灰色列表项</li>
        <li class="list-group-item list-group-item-light">浅色列表项</li>
    </ul>
</div>
<!--
链接的多种颜色列表项
-->
<div class="container mt-3">
    <h2>多种颜色列表项</h2>
    <div class="list-group">
        <a href="#" class="list-group-item list-group-item-action">激活列表项</a>
        <a href="#" class="list-group-item list-group-item-success">成功列表项</a>
        <a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
        <a href="#" class="list-group-item list-group-item-info">信息列表项</a>
        <a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
        <a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
        <a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
        <a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
        <a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
    </div>
</div>
<!--
还有更多应用
-->
</body>
</html>

在这里插入图片描述

夏至xz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap4 列表组
weixin_45116096的博客
07-10 237
大部分基础列表组都是无序的。 实例： <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https
bootstrap 下拉列表获取_Bootstrap框架下下拉菜单的实现（代码示例）
weixin_39962770的博客
12-22 1762
本篇文章给大家带来的内容是关于Bootstrap框架下下拉菜单的实现(代码示例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。网页交互的时候经常会需要上下文菜单或者隐藏/显示菜单项，Bootstrap默认提供了用于显示链接列表的可切换、有上下文的菜单。而且在各种交互状态下的菜单展示需要和javascript插件配合才能使用。本文将详细介绍Bootstrap下拉菜单(免费课程推荐：...
Bootstarp4 列表组
weixin_30276935的博客
07-30 194
1：创建列表组 要创建列表组，可以在 <ul> 元素上添加 .list-group 类, 在 <li> 元素上添加 .list-group-item 类: <div class="container"> <h2>基础列表组</h2> <ul class="list-group"> <...
Bootstrap4(十五)
shi199434的博客
12-18 273
Bootstrap4 列表组 大部分基础列表组都是无序的。 要创建列表组，可以在  元素上添加 .list-group 类, 在  元素上添加 .list-group-item 类: 实例 ul class="list-group"> li class="list-group-item">First itemli> li class="li
学习Bootstrap（四）——列表
cody_cat的博客
12-28 593
六. 列表来自慕课网 在HTML文档中，列表结构主要有三种：有序列表、无序列表和自定义列表。 Bootstrap根据平时的使用情形提供了六种形式的列表：☑ 普通列表☑ 有序列表☑ 去点列表☑ 内联列表☑ 描述列表☑ 水平描述列表6-1. 无序列表，有序列表及列表嵌套ul, ol { margin-top: 0; margin-bottom: 10px; } ul ul, ol
bootstrap-select-1.13.14
最新发布
06-05
以上就是关于 Bootstrap Select 1.13.14 版本的基本介绍，它为开发者提供了一个强大且易于使用的下拉选择解决方案，让网站和应用的界面更加专业和友好。通过深入学习和利用其丰富的功能，你可以创建出更加互动和吸引...
创意bootstrap列表布局代码
04-06
在这个"创意bootstrap列表布局代码"中，我们将探讨如何利用Bootstrap创建具有图标、文字组合的列表，以及用于展示新闻内容和快捷导航的UI列表布局。 Bootstrap的核心是其12列的栅格系统，通过这个系统，我们可以...
Bootstrap
qhbgyu5664的博客
08-24 279
1. Bootstrap 4 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目 1.使用 Bootstrap 4 CDN 1.1 移动设备优先设置–head标记中引入 <meta name=“viewport” content=“width=device-width, initial-scale=1, shrink-to-fit=no”> 1.2 引入Bootstrap依赖的css和js文件 1.3 设置容器元素【div/body…】 给指定的
bootstrap-selectv1.12.4.zip
04-22
至于压缩包子文件的文件名称列表 "bootstrap-selectv1.12.4"，通常这会包括如下文件： 1. `bootstrap-select.css`: 主要的 CSS 样式文件，定义了 Bootstrap Select 的视觉样式。 2. `bootstrap-select.min.css`: ...
bootstrap下拉列表美化
02-24
bootstrap下拉列表美化
bootstrap4列表组用法
weixin_48791208的博客
09-18 568
使用bootstrap4列表组的一些理解: 最基本的列表组就是一个无序列表、带有几个列表项以及适当的样式定义类。在此基础上可以使用下列选项，或根据你自己的需要调整CSS。 添加 .active 到 .list-group-item 下的其中一行或多行，以指示当前有效的选择状态。 Basic example 列表组 .list-group .list-group-item Cras justo odio Dapibus ac facilisis in Morbi leo risu
Bootstrap（四）列表组和附加导航
mysunniess的博客
07-20 1673
列表组 普通列表组 Ul添加类.list-group 每一项li添加.list-group-item 利用list-group-item-*给列表项设置预定义样式风格 可以给列表项添加任何HTML内容 列表项内容标题设置.list-group-item-heading 列表项内容部分设置.list-group-item-text 附加导航 页面左侧或右侧的固定导航 1.实现方法...
bootstrap基础知识（五）－－列表组
qq_39555936的博客
07-05 1098
列表组1）基础列表包括两个部分：ul中list－group以及li中list－group－item例如：&lt;ul class="list-group"&gt;    &lt;li class="list-group-item"&gt;揭开CSS3的面纱&lt;/li&gt;    &lt;li class="list-group-item"&gt;CSS3选择器&lt;/l
Bootstrap_排版
weixin_30684743的博客
01-22 270
Bootstrap排版 Bootstrap 使用 Helvetica Neue、 Helvetica、 Arial 和 sans-serif 作为其默认的字体栈。 使用 Bootstrap 的排版特性，您可以创建标题、段落、列表及其他内联元素。 标题 Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。请看下面的实例： <!DOCTYPE ht...
bootstrap引用头文件,横向显示列表
qq_26495107的博客
05-03 1535
<!--让IE渲染更好的效果--> <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="./
Bootstrap提供了六种列表效果
weixin_30312563的博客
12-08 264
列表--简介 在HTML文档中，列表结构主要有三种：有序列表、无序列表和定义列表。具体使用的标签说明如下： 无序列表 <ul> <li>…</li> </ul> 有序列表 <ol> <li>…</li> </ol> 定义列表 <dl> ...
Bootstrap列表组禁用和活动状态
歪脖先生的博客
05-23 847
禁用和活动状态 Bootstrap3中，使用 .active 类表示活动的状态，使用 .disabled 类表示禁用的状态。可以为某个列表项添加 .active 类，让它显示为白色文本和浅蓝色背景，表现出活动的状态；或者添加 .disabled 类让它显示为灰色背景，表现出被禁用的状态。如： <ulclass="list-group"> <liclass="list...
Bootstrap——列表（无序列表、有序列表、定义列表）、代码（code、pre、kbd、samp、var）、图片（响应式图片、图片缩略图、图片对齐方式）
m0_69034993的博客
10-09 2597
除了CSS3提供的border-radius属性可以实现，在Bootstrap中定义了.img-thumbnail类可以使图片具有圆角且1px边界的边框样式。也可以通过设置max-width：100%，height：auto样式，来实现图片响应式效果。Bootstrap定义了.list-unstyled类样式，使用它可以移除默认的.list-style样式，并且设置左侧填充为0。（2）使用文本类.text-left、.text-center、.text-right，分别实现水平居中、居中和居右对齐。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏至xz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值