Bootstrap的列表组相关知识

这篇具有很好参考价值的文章主要介绍了Bootstrap的列表组相关知识。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

01-列表组的相关基础知识

Bootstrap的list-group是一个用于创建列表组件的CSS类,通常用于显示一个项目列表,如导航菜单或其他相关信息的列表。它通常与<ul><ol>元素结合使用,创建一个垂直的项目列表,每个项目都可以包含文本、链接、按钮或其他内容。以下是一些常用的list-group类和用法:

  1. list-group:这是主要的list-group类,用于创建基本的列表组件。通常与<ul><ol>元素一起使用。
<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>
  1. list-group-item:这是用于每个列表项的类。它可以包含文本和其他元素。
<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>
  1. list-group-item-action:这是用于将列表项转化为可交互的动作元素的类,通常用于制作可点击的链接或按钮,比如下面的代码中,如果没有加上属性 list-group-item-action 那么鼠标放到相应的区域上无变化,而加上的话,鼠标放到相应的区域这个区域会有变化。
<ul class="list-group">
  <li class="list-group-item list-group-item-action">Clickable Item 1</li>
  <li class="list-group-item list-group-item-action">Clickable Item 2</li>
  <li class="list-group-item list-group-item-action">Clickable Item 3</li>
</ul>
  1. list-group-item-primary, list-group-item-secondary, list-group-item-success, 等:这些是用于指定列表项的颜色主题的类。您可以根据需要选择不同的颜色主题。
<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Primary Item</li>
  <li class="list-group-item list-group-item-success">Success Item</li>
  <li class="list-group-item list-group-item-danger">Danger Item</li>
</ul>
  1. list-group-item-heading:这是用于添加每个列表项的标题的类。
<ul class="list-group">
  <li class="list-group-item">
    <h5 class="list-group-item-heading">Item Title</h5>
    Item description goes here.
  </li>
</ul>

以上是一些Bootstrap中list-group的常见类和用法,它们可以帮助您创建各种列表组件,用于导航、显示信息或其他目的。您可以根据自己的需求组合和自定义这些类,以满足特定的设计和功能要求。

02-一个简单的列表组示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>列表组</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">列表组</h3>
<ul class="list-group">
    <li class="list-group-item list-group-item-action">江南行 张潮〔唐代〕</li>
    <li class="list-group-item list-group-item-action">1. 茨菰叶烂别西湾</li>
    <li class="list-group-item list-group-item-action">2. 莲子花开犹未还</li>
    <li class="list-group-item list-group-item-action">3. 妾梦不离江水上</li>
    <li class="list-group-item list-group-item-action">4. 人传郎在凤凰山</li>
</ul>
</body>
</html>

运行效果如下:
Bootstrap的列表组相关知识,Bootstrap,bootstrap,前端,html
由于添加到类list-group-item-action,所以当鼠标放到对应的区域上,效果如下:
Bootstrap的列表组相关知识,Bootstrap,bootstrap,前端,html
如果相应的行我没有添加类list-group-item-action,那么效果如下:
Bootstrap的列表组相关知识,Bootstrap,bootstrap,前端,html

03-激活或禁用列表组的一行或多行

示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>激活和禁用状态</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">激活和禁用状态</h3>
<ul class="list-group">
    <li class="list-group-item">江南行 张潮〔唐代〕</li>
    <li class="list-group-item active">1. 茨菰叶烂别西湾(激活状态)</li>
    <li class="list-group-item active">2. 莲子花开犹未还(激活状态)</li>
    <li class="list-group-item disabled">3. 妾梦不离江水上(禁用状态)</li>
    <li class="list-group-item disabled">4. 人传郎在凤凰山(禁用状态)</li>
</ul>
</body>
</html>

运行效果如下:
Bootstrap的列表组相关知识,Bootstrap,bootstrap,前端,html

04-设置列表项的颜色

示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置列表项的颜色</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">列表项的背景和文字颜色</h3>
<ul class="list-group">
    <li class="list-group-item list-group-item-primary">西湖南北烟波阔</li>
    <li class="list-group-item list-group-item-secondary">风里丝簧声韵咽</li>
    <li class="list-group-item list-group-item-success">舞余裙带绿双垂</li>
    <li class="list-group-item list-group-item-danger">酒入香腮红一抹</li>
    <li class="list-group-item list-group-item-warning">杯深不觉琉璃滑</li>
    <li class="list-group-item list-group-item-info">贪看六幺花十八</li>
    <li class="list-group-item list-group-item-light">明朝车马各西东</li>
    <li class="list-group-item list-group-item-dark">惆怅画桥风与月</li>
</ul>
</body>
</html>

运行效果如下:
Bootstrap的列表组相关知识,Bootstrap,bootstrap,前端,html

05-给列表项添加徽章

示例代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加徽章</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">添加徽章</h3>
<h5>各个训练营报名的人数:</h5>
<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
        网络安全训练营
        <span class="badge badge-primary badge-pill">260</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        网站开发训练营
        <span class="badge badge-primary badge-pill">160</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
        人工智能开发训练营
        <span class="badge badge-primary badge-pill">220</span>
    </li>
</ul>
</body>
</html>

运行效果如下:
Bootstrap的列表组相关知识,Bootstrap,bootstrap,前端,html文章来源地址https://www.toymoban.com/news/detail-722457.html

到了这里,关于Bootstrap的列表组相关知识的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于Bootstrap的登录&注册模板(html+css)

    基于Bootstrap的登录注册模板(html+css),适合django等框架,可直接修改对接后端 登录、注册、输入信息错误提醒、记住密码、自动登录等等 GitHub:基于Bootstrap的登录注册模板【下载麻烦客官点颗Star】 CSDN资源:基于Bootstrap的登录注册模板(html+css)

    2024年02月12日
    浏览(46)
  • BootStrap-前端框架

    资料:https://v3.bootcss.com/components/ BootStrap的概念(Web框架) Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML 、 CSS 、 JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个 CSS/HTML 框架。Bootstrap提供了优

    2024年02月07日
    浏览(38)
  • 【前端2】jquary,bootstrap,vue

    如下星际和反恐是love爱好。 如下是上面的简洁标准模板: 如下是两种布局容器,上下对应。 如下全是栅格系统,1行12列(每个div跨3列,最后一个div改为4了),如下数字4每个横跨4列。 如下先看右边浏览器大小即屏幕大小为984小于992为sm屏幕,所以选择sm横跨6列,所以显示

    2024年02月11日
    浏览(106)
  • 【一、bootstrap框架前端注册登录页面】

    一、使用bootstrap框架写一个简易的前端登录页面。 先上截图 下面开始记录本人使用bootstrap框架写这个登录页面的过程 1、bootstrap需要的配置文件  2、如何修改背景图片 3、如何写一个图标与输入框附合的表单 例如这样 

    2024年02月11日
    浏览(41)
  • Web大学生网页作业成品 bootstrap响应式网站开发 基于HTML+CSS+JS+Bootstrap制作火锅美食网站(4页)

    🎀 精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作

    2024年02月08日
    浏览(56)
  • 01_前端框架之Bootstrap的应用

    本课目标 能够完成 Bootstrap 环境搭建 能够理解 Bootstrap 的栅格布局 能够根据 Bootstrap 相关文档使用Bootstrap组件 能够根据 Bootstrap 重构主页和表单页 第1章 bootstrap简介 1.1 什么是bootstrap Bootstrap 是全球最受欢迎的前端组件库,用于开发响应式布局、移动设备优先的 WEB 项目。 Bo

    2024年01月23日
    浏览(52)
  • django bootstrap html实现左右布局,带折叠按钮,左侧可折叠隐藏

         在django项目中,需要使用bootstrap 实现一个左右分布的布局,左侧区域可以折叠隐藏起来,使得右侧的显示区域变大。(为了区分区域,左右加了配色,不好看的修改颜色即可)  点击折叠按钮,左侧区域隐藏,右侧区域铺满:          1、使用col-md属性,让左右两个区

    2024年02月14日
    浏览(57)
  • 【前端布局篇】响应式布局 Bootstrap 移动端布局

    1. 布局介绍 布局:layout 对事物的全面规划和安排 页面布局:对页面的文字、图形或表格进行格式设置。包括字体、字号、颜色纸张大小和方向以及页边距等。 网页布局:利用html搭建结构与内容,使用CSS添加装饰 HTML5+CSS3系列课程 携程网首页-移动端 响应式布局实战之微加建

    2024年02月10日
    浏览(41)
  • 【前端素材】bootstrap5实现美食餐饮网站RegFood

    一、需求分析 美食餐饮网站是指专门提供关于美食和餐饮的信息、服务和资源的在线平台。这类网站通常提供以下功能: 餐厅搜索和预订:用户可以在网站上搜索附近的餐厅,并预订桌位。网站会提供餐厅的详细信息,包括菜单、地址、电话号码和用户评价等。 菜谱和食谱

    2024年02月03日
    浏览(44)
  • 用前端框架Bootstrap和Django实现用户注册页面

    命令如下: 执行下面条命令依次创建需要的应用: 名叫users的应用创建好后,还需要在全局配置文件中对应在用进行注册,具体方法如下: 打开““E:Python_projectP_001myshop-testmall_backendmall_backendsettings.py””文件,找到名叫“INSTALLED_APPS”的列表(list),在其中加入应用名,

    2024年02月06日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包