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. django编辑框实现

    一些常用的: CKEditor UEEditor TinyEditor KindEditor 下载: http://kindeditor.net/down.php 使用方法: <textarea ...

  2. HTTPS和HTTP的区别，http协议的特征

    http协议传输的数据都是没有经过加密的,也就是明文,所以http用于传输数据并不安全.而https是是使用了ssl(secure socket layer)协议+http协议构成的可加密传输,身份认 ...

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

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

  4. js工厂函数创建对象与对象构造函数的理解

    工厂函数,顾名思义,就是通过一个＂工厂的加工＂ 来创建一个对象的函数 //工厂函数 function createPerson(name,sex){ sex = sex == '男' ? '女' : ...

  5. Mysql批量更新的一个坑-&allowMultiQueries=true允许批量更新

    前言        实际上,我们经常会遇到这样的需求,那就是利用Mybatis批量更新或者批量插入,但是,实际上即使Mybatis完美支持你的sql,你也得看看你说操作的数据库是否支持,而阿福,最近就 ...

  6. C#批量将数据插入SQLServer数据库

    Database db = CreateDatabase();                var varConnnection = db.CreateConnection();     //获取连 ...

  7. maven项目pom.xml报错： Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.7.1 from

    转自:https://blog.csdn.net/wolf1213hao/article/details/53413093

  8. Springboot 打jar包项目无法访问jsp问题解决方案

    maven编译插件,请选择1.4.2.RELEASE版本,1.5.x的版本已经不再支持 pom.xml重要部分如下: <build> <resources> <resou ...

  9. .net 正则表达式

    string RegStr = @"^[0-9]*[1-9][0-9]*$"; if (Regex.IsMatch("待验证的字符串", RegStr)) { ...

  10. Laplace's equation

    链接:https://en.wikipedia.org/wiki/Laplace%27s_equation