站长资源网络编程

Bootstrap基本组件学习笔记之列表组(11)

整理:jimmy2026/8/2浏览2
简介列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个列表组,只需要完成以下两步:(1)向元素
    添加 class .list-group;(2)向
  • 添加 class .list-group-item。看下面的例子:

    列表组件用于以列表形式呈现复杂的和自定义的内容。

    创建一个列表组,只需要完成以下两步:

    (1)向元素 <ul> 添加 class .list-group;
    (2)向 <li> 添加 class .list-group-item。

    看下面的例子:

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="../../css/bootstrap.min.css" rel="stylesheet">
     <script src="/UploadFiles/2021-04-02/jquery.min.js">
    
    

    效果如下:

    Bootstrap基本组件学习笔记之列表组(11)

    最后说明下,上面的例子的“排行榜”中,向列表项添加徽章组件。只需要在<li>元素中添加<span class="badge">即可。

    如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

    Bootstrap学习教程

    Bootstrap实战教程

    Bootstrap插件使用教程

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。