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. Chrome开发者工具详解（四）之Elements、Console、Sources面板

    Elements面板 实时编辑DOM节点和CSS样式 双击DOM树视图里面的节点,可以实时编辑标签属性,修改的效果会立刻反应在浏览器里 点击右侧Style面板,可以实时修改CSS的属性值,这里面的所有 ...

  3. C++实现简单的日志记录

    C++实现简单的日志记录 //dlogger.h #ifndef DLOGGER_H #define DLOGGER_H #include <iostream> #include < ...

  4. scala学习笔记(9)

    一.高阶函数 --------------------------------------------------- 1.作为值的函数:在Scala中,函数是头等公民,就和数字一样. import s ...

  5. js中的Math对象

    绝对值Math.abs()     console.log(Math.abs(-25));     console.log(Math.abs('-25'));//存在隐式转换可以求绝对值     co ...

  6. 表单提交 multipart/form-data 和 x-www-form-urlencoded的区别

    表单提交表单有两种提交方式,POST和GET.通常我们会使用POST方式,一是因为形式上的安全 :二是可以上传文件. 我之前经常忽略掉表单的编码类型,觉得它特别长比较难记,而且不设置也似乎不影响什么. ...

  7. Nginx 详细介绍

    Nginx 和 Apache 一样是 http 服务器软件.它们的区别是 Apache 的处理速度慢,占用内存资源, nginx 恰恰相反.在功能上 Apache 的所有模块都支持动和静态编译,而 n ...

  8. ise和quartus共用仿真软件

    modelsim仿真ISE工程时出现# ** Error: (vlog-19) Failed to access library 'rtl_work' at "rtl_work" ...

  9. HBase（三）——搭建Fully-distributed

    HBase搭建--Fully-distributed 1.搭建方式说明 By default, HBase runs in standalone mode. Both standalone mode ...

  10. 牛客练习赛49 E 筱玛爱游戏 （线性基+博弈）

    链接:https://ac.nowcoder.com/acm/contest/946/E 来源:牛客网 筱玛爱游戏 时间限制:C/C++ 1秒,其他语言2秒 空间限制:C/C++ 524288K,其他 ...