bootstrap列表

引入bootstrap标签

原本的效果

水平显示

bootstrap列表

列表组合框

在组合框后面加备注

突出显示

a标签列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bootstrap布局</title>
    <!--网页源数据跨平台兼容做一些说明-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--跨屏自适应说明-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>bootstrap列表</h1>

<!--原本的效果-->
<ul>
    <li>首页</li>
    <li>
        产品中心
        <ul>
            <li>手机</li>
            <li>电脑</li>
        </ul>
    </li>
    <li>关于我们</li>
    <li>联系我们</li>
</ul>

<!--水平显示-->
<ul class="list-inline">
    <li>首页</li>
    <li>产品中心</li>
    <li>关于我们</li>
    <li>联系我们</li>
</ul>

<!--bootstrap-->
<!--列表组合框-->
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <ul class="list-group">
                <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>
    </div>
</div>

<!--列表组合框加内容-->
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <ul class="list-group">
                <li class="list-group-item">手机<span class="badge">12</span></li>
                <li class="list-group-item">电脑<span class="badge">23</span></li>
                <li class="list-group-item">冰箱<span class="badge">134</span></li>
                <li class="list-group-item">电视机<span class="badge">34</span></li>
            </ul>
        </div>
    </div>
</div>

<!--突出显示-->
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <ul class="list-group">
                <li class="list-group-item">手机<span class="badge">12</span></li>
                <li class="list-group-item active">电脑<span class="badge">23</span></li>
                <li class="list-group-item">冰箱<span class="badge">134</span></li>
                <li class="list-group-item">电视机<span class="badge">34</span></li>
            </ul>
        </div>
    </div>
</div>

<!--a标签列表-->
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <ul class="list-group">
                <a href="#" class="list-group-item">
                    <h4 class="list-group-heading">第一个a标签</h4>
                    <p class="list-group-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam animi aperiam aspernatur
                        atque consectetur corporis cum deleniti dicta est, inventore magnam natus necessitatibus nihil
                        officia qui quod vero voluptatum.</p>
                </a>
               <!--语义标签-->
                <a href="#" class="list-group-item list-group-item-success">
                    <h4 class="list-group-heading">第一个a标签</h4>
                    <p class="list-group-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam animi aperiam aspernatur
                        atque consectetur corporis cum deleniti dicta est, inventore magnam natus necessitatibus nihil
                        officia qui quod vero voluptatum.</p>
                </a>
                 <!--突出强调-->
                <a href="#" class="list-group-item active">
                    <h4 class="list-group-heading">第一个a标签</h4>
                    <p class="list-group-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquam animi aperiam aspernatur
                        atque consectetur corporis cum deleniti dicta est, inventore magnam natus necessitatibus nihil
                        officia qui quod vero voluptatum.</p>
                </a>
            </ul>
        </div>
    </div>
</div>

</body>
</html>

测开之路一百零九：bootstrap列表的更多相关文章

  1. 测开之路一百零七：bootstrap排版

    引入bootstrap和jquery 标题 对齐 正文强调 引言 <!DOCTYPE html><html lang="en"><head> & ...

  2. 测开之路一百零六：bootstrap布局

    可以在html的head里面加一些说明 <meta http-equiv="X-UA-Compatible" content="IE=edge">& ...

  3. 测开之路一百零五：bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

  4. 测开之路一百零四：jquery操作样式

    jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...

  5. 测开之路一百零三：jquery元素和标签的插入与删除

    标签内插入 标签外插入 给标签加标签 !DOCTYPE html><html lang="en"><head> <meta charset=&q ...

  6. 测开之路一百零二：jquery元素操作

    jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...

  7. 测开之路一百零一：jquery文字特效、动画、方法链

    文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> ...

  8. 测开之路一百三十九：会话管理之cookie写入、读取、和更新

    机制:服务器端发送的小段文本信息存储在客户端硬盘 功能:记录用户偏好,请求.页面.站点间共享信息 特点:易丢失.安全隐患 添加cookie,需要用到make_respons.set_cookie @a ...

  9. 测开之路一百二十九：jinja2模板语法

    flask用的是jinja2模板,有自己特定的语法 形参: 在html里面留占位参数: {{ 参数名 }},后端传值时,参数名=参数值 <!DOCTYPE html><html la ...

随机推荐

  1. winform 窗体间传值

    WinForm 两窗体之间传值实例 2010-12-27 22:10:11|  分类: 学业|举报|字号 订阅     下载LOFTER我的照片书  |     窗体Form1和Form2 Form2 ...

  2. 使用PHPWord生成word文档

    有时我们需要把网页内容保存为Word文档格式,以供其他人员查看和编辑.PHPWord是一个用纯PHP编写的库,使用PHPWord可以轻松处理word文档内容,生成你想要的word文档. 下载源码 安装 ...

  3. 神经网络之：S型神经元

    1.S 型神经元和感知器类似,但是被修改为权重和偏置的微小改动只引起输出的微小变化 2.S型神经元结构: S型函数: 带有x1,x2,........,权重w1,w2.....,和偏置b的S型神经元的 ...

  4. IO同步阻塞与同步非阻塞

    BIO.NIO.AIO IO(BIO)和NIO区别:其本质就是阻塞和非阻塞的区别 阻塞概念:应用程序在获取网络数据的时候,如果网络传输数据很慢,就会一直等待,直到传输完毕为止. 非阻塞概念:应用程序直 ...

  5. 关于express 连接 mongodb数据库报错

    关于express 连接 mongodb数据库报错 nodejs DeprecationWarning: current URL string parser is deprecated, and wi ...

  6. SPSS Statistics 26.0 下载安装和激活

    目录 1. 其他版本 2. IBM SPSS Statistics 26 新增功能 3. 安装步骤 4. 下载地址 1. 其他版本 参考:https://www.cnblogs.com/coco56/ ...

  7. 《Java核心技术卷I》——第5章 继承

    在C++中,没有提供用于表示抽象类的特殊关键字.只要有一个纯虚函数,这个类就是抽象类. hashCode()方法是定义在Object类中,因此每个对象都有一个默认的散列码,其值为对象的存储地址. 绝大 ...

  8. 团队项目作业-Beta版本发布

    团队成员: 学号 姓名 201731062234 薛磊 201731062230 李林 201731062231 燕泓达 201731062232 陈东 201731062229 沈瑞琦 201731 ...

  9. python笔记（2）--字符串

    一.创建字符串 使用 '' , "" , ''' 和 """ 来创建字符串 var1 = 'hello, world' var2 = "ja ...

  10. AGC015做题记录

    C 树的性质是点-边=1 森林联通块计数都可以这么做所以直接维护前缀和再把边界处理一下就好了 //Love and Freedom. #include<algorithm> #includ ...