Bootstrap从入门到实战---列表组

最新推荐文章于 2023-03-18 10:30:00 发布
最新推荐文章于 2023-03-18 10:30:00 发布
阅读量199 收藏
点赞数
分类专栏： HTML/CSS/JS/Bootstrap 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46629123/article/details/118558397
版权

Bootstrap从入门到实战—列表组
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>20_列表组</title>
    <!-- 移动设备优先 --> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
      body{
        padding: 20px;
      }

    </style>
</head>
<body>
    <ul class="list-group">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Cras justo odio</li>
    </ul>

    <ul class="list-group m-3">
      <li class="list-group-item active">Cras justo odio</li>
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
    </ul>

    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
      <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
      <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
      <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
    </div>

    <div class="list-group">
      <button type="button" class="list-group-item list-group-item-action active">Cras justo odio</button>
      <button type="button" class="list-group-item list-group-item-action">Cras justo odio</button>
      <button type="button" class="list-group-item list-group-item-action">Cras justo odio</button>
      <button type="button" class="list-group-item list-group-item-action">Cras justo odio</button>
      <button type="button" class="list-group-item list-group-item-action active" disabled>Cras justo odio</button>
    </div>

    <div class="list-group list-group-flush">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Cras justo odio</li>
    </div>

    <div class="list-group list-group-horizontal">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Cras justo odio</li>
    </div>

    <ul class="list-group">
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-primary">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-secondary">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-danger">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-warning">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-info">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-light">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-dark">Dapibus ac facilisis in</li>
    </ul>

    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Dapibus ac facilisis in</a>
    </div>

    <br>

    <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between align-items-center">
        Cras justo odio
        <span class="badge badge-primary badge-pill">14</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
        Dapibus ac facilisis in
        <span class="badge badge-primary badge-pill">8</span>
      </li>
      <li class="list-group-item d-flex justify-content-between align-items-center">
        Morbi leo risus
        <span class="badge badge-primary badge-pill">5</span>
      </li>
    </ul>


    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action active">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">List group item heading</h5>
          <small>3 days ago</small>
        </div>
        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        <small>Donec id elit non mi porta.</small>
      </a>
      <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">List group item heading</h5>
          <small>3 days ago</small>
        </div>
        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        <small>Donec id elit non mi porta.</small>
      </a>
      <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">List group item heading</h5>
          <small>3 days ago</small>
        </div>
        <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
        <small>Donec id elit non mi porta.</small>
      </a>
    </div>


    <div class="row m-3 border">
      <div class="col-4">
        <div class="list-group" id="list-tab" role="tablist">
          <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
          <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
          <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
          <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
        </div>
      </div>
      <div class="col-8">
        <div class="tab-content m-3" id="nav-tabContent">
          <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
            Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.
          </div>
          <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
            Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
          </div>
          <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">
            Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
          </div>
          <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">
            Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.
          </div>
        </div>
      </div>
    </div>

    <br>

    



    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>
</html>

在这里插入图片描述

i see the future
关注
专栏目录
Bootstrap从入门到精通（全）
码农研究僧的博客
11-22 6万+
目录前言1. 下载安装2. 布局容器和栅格网格系统2.1 布局容器2.2 栅格网格系统3. 常用样式 前言 在了解这篇文章的时候 需要提前知道这些知识点 可看我之前的文章 html从入门到精通（全） css属性从入门到精通（全） JavaScript从入门到精通（全） 这篇文章的学习主要通过 2021最新完整版Bootstrap教程（最给力的前端框架）bootstrap框架讲解-快速上手,最适合后端开发人员的bootstrap保姆级使用教程 关于Bootstrap的主要作用 是⼀套现成的 CSS 样
响应式布局-BootStrap从基础到项目实战 （高级篇）
12-11
响应式布局-BootStrap从基础到项目实战 - 第二季（高级篇）
Bootstrap从入门到项目实战.zip
01-13
Bootstrap从入门到项目实战所有章节的案例代码，包括所有的章节，每一个都是完整的案例。是最新的4.0版本
bootstrap 实现吸顶效果_BootStrap从基础到项目实战_第1季_03章_03_全局CSS之排版
weixin_39920403的博客
11-29 115
2.1、标题Html中的所有标题标签，从到均可使用。另外还提供了.h1到.h6的class,为的是给inline属性的文本赋予标题的样式。示例代码：标题h1.响应式布局-BootStrap从基础到项目实战h2.响应式布局-BootStrap从基础到项目实战h3.响应式布局-BootStrap从基础到项目实战h4.响应式布局-BootStrap从基础到项目实战h5.响应式布局-BootStrap从基...
Bootstrap 项目实战（入门版）
09-24
Bootstrap 针对刚入门的朋友整理的一套案例代码，包含了所想到的常用的案例，每一个都是可以完整运行的，本套代码是基于Bootstrap 4.0所开发
Bootstrap列表组
weixin_33801856的博客
07-05 137
前面的话 　　列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件。本文将详细介绍Bootstrap列表组   基础列表组 　　基础列表组，看上去就是去掉了列表符号的列表项，并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分：  　　☑  list-group：列表组容器，常用的是ul元素，...
Bootstrap从入门到项目实战学习笔记
11-10
通过一个月的学习，整理了这份bootstrap4 class索引和笔记，以及一些参考网站资料信息都做了记录，只需此份，就可精通bs4，先分享给大家，喜欢就给个好评。（笔记最后面章节有你懂的福利，千万不要错过）
bootstrap从入门到精通
12-17
本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将...教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。
Bootstrap入门到实战
最新发布
QDCXYXZ_的博客
03-18 1523
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
【Bootstrap】入门Bootstrap框架，满满案例实战“开箱即用”直接cv~
go
05-28 794
前言 Bootstrap 是一个全球比较流行好用的Web前端开发框架之一，它的强大之处在于它将常见的CSS布局小组件和JavaScript插件进行完整且完善的封装，即使没有经验的前端工程师和写页面样式灰常头疼的后端工程师，也能迅速掌握使用，大大的提高了开发效率。如果你不会Vue，使用Element-UI可能是有点蒙蒙的，这时候Bootstrap可能是你的另外一个选择。简单，方便，接下来，直接运用吧。 安装 首先，任何框架要使用它就必须得先安装它，安装有几种方式·： 通过 CDN 引入 <!-- 新
响应式布局-BootStrap从基础到项目实战 - 第二季（高级篇）.zip
08-03
bootstrap响应式布局！
bootstrap基础代码实践
07-03
bootstrap基础代码实践源代码。bootstrap是web前端自适应布局非常常用的框架
Bootstrap从入门到实战
Season CSDN博客
06-23 130
bootstrap列表组实现
我笔记
03-29 697
我的笔记 &lt;ul class="list-group"&gt;   &lt;li class="list-group-item"&gt;      1&lt;span class="badge" style="color:green;background:orange;"&gt;2&lt;/span&gt;   &lt;/li&gt;   &
零基础Bootstrap入门教程(22)--列表组
程序员大阳
03-07 1248
本文目录1. 概述2. 普通列表组3. 将普通链接转换为列表组4. 调整列表项的样式5. 带徽章的列表组6. 添加标题和内容7. 小结 1. 概述 列表组用来显示一组关联的显示元素，Bootstrap提供了可以灵活使用的列表组组件list-group，本篇就来具体演示下。 2. 普通列表组 用list-group类修饰ul元素，使用list-group-item类修饰li元素，即可创建列表组，代码如下： 普通列表组： <ul class="list-group"
Bootstrap从入门到实战---导航和选项卡
Season CSDN博客
07-07 269
Bootstrap从入门到实战—导航和选项卡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>21_导航和选项卡</title> <!-- 移动设备优先 --> <meta name="viewport" content="width=device-width, initial-scale=1
简单列表的实现（基于数组）
thinking的专栏
02-26 1015
基于数组，实现一个简单的列表，支持如下功能： 下标末尾添加，中间插入末尾删除，中间删除空间不够时自动扩容清空所有元素简单的错误检测 下面是代码： #ifndef _ARRAYLIST_ #define _ARRAYLIST_ #include #include using namespace std; template class ArrayList { public:
数组列表的简单实现
dopplerzxy的博客
04-06 618
实现了一个简单的ArrayList 这么看来，java.util.ArrayList 是对对象数组的封装，加上了一些方法，可以进行更多的操作。 但是要注意，经常要做插入、删除的操作，数组并不理想，开销比较昂贵。 数组的本质就是抽象数据类型—表(list)的一种实现方式 MyArrayList.javapackage doppler.List; public class MyArrayList<Typ
列表类的实现
The One Who's at the Front
02-16 328
第3章——列表类的实现 首先定义一个List类,在构造函数constructor体内设置2个变量dataStore和 listSize分别用来初始化一个空数组保存列表元素和列表元素个数，之后是一些方法的实现：???????????? class List { constructor() { this.dataStore = []; //初始化一个空数组保存列表元素 this.list...
徐涛深度解析Bootstrap：从入门到实战指南
2. **新手入门**：章节1从基础开始，介绍了Bootstrap的文件结构和HTML标准模板，让读者了解如何在项目中整合Bootstrap。此外，还涵盖了CSS的基本语法，如选择器、伪类、display属性和媒体查询，以及JavaScript的基础...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值