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. 【源码解读】cycleGAN（二) ：训练

    源码地址:https://github.com/aitorzip/PyTorch-CycleGAN 训练的代码见于train.py,首先定义好网络,两个生成器A2B, B2A和两个判别器A, B,以及 ...

  2. markdown编辑器学习

    markdown是一块文本编辑器,属于纯文本文件,可以使用任何编辑器打开.对于写作来说是一个好帮手,它的好处有很多,比如可以直接转成html,制作电子书等.今天开始学习一下这个神奇的编辑器.从今天起把 ...

  3. ELK-全文检索技术-elasticsearch集群及sde_restful

    1       搭建ES集群 集群的说明 我们计划集群名称为:leyou-elastic,部署3个elasticsearch节点,分别是: node-01:http端口9201,TCP端口9301 n ...

  4. axios 文件流下载

    this.axios .post(this.baseUrl+"/exportUser", { admin: "",keys: "",keyw ...

  5. 高版本chrome不再支持window.showmodaldialog 的临时替换方案【用window.open】

    接管别人的项目,因开发时用了showmodaldialog 导致最近很多用户chrome升级到最新之后 就无法弹窗了.原因是新版chrome[37+]不再支持showmodaldialog. show ...

  6. Java的volatile

    1.同步 同synchronized相比(synchronized通常称为重量级锁),volatile更轻量级 如图,如果变量没有volatile关键字,那么A线程对该变量的改变存储在内存A,B变量不 ...

  7. IOS绘图详解(http://blog.163.com/wkyuyang_001/blog/static/10802122820133190545227/)

    14.1 Quartz概述 Quartz是Mac OS X的Darwin核心之上的绘图层,有时候也认为是CoreGraphics.共有两种部分组成Quartz: Quartz Compositor,合 ...

  8. 计算机编号、硬盘序列号和Mac地址查询方法

    (1)计算机编号: SN也就是Serial Number的缩写,中文也就是产品序列号,而电脑的后面一般也有一个这样的SN序列号,那么怎么查看电脑的S/N序列号呢? 方法一: 将笔记本电脑翻过来,然后在 ...

  9. Java Annotation 刷课笔记（一）

    1.什么是注解? 1.1.Annotation是从JDK5.0引入的新技术 1.2.Annotation的作用: 不是程序本身,可以对程序作出解释(这一点,和注释没什么区别) 可以被其他程序(比如编译 ...

  10. ASP.NET Core 基础知识（三） Program.cs类

    ASP.NET Framework应用程序是严重依赖于IIS的,System.Web 中有很多方法都是直接调用的 IIS API,并且它还是驻留在IIS进程中的.而 ASP.NET Core 的运行则 ...