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. Paper Reading_Computer Architecture

    最近(以及预感接下来的一年)会读很多很多的paper......不如开个帖子记录一下读paper心得 Computer Architecture Last level cache (llc) perf ...

  2. C++ constexpr

    1.constexpr 1.const与constexpr: const: 承若不改变这个值,主要用于说明接口,这样在把变量传入函数时就不必担心变量会在函数内被改变了,编译器负责确认并执行const的 ...

  3. vue中项目如何引入sass （vue-cli项目）

    1.进入项目目录 2.安装sass的依赖 npm install --save-dev sass-loader npm install --save-dev node-sass 3.在build文件夹 ...

  4. Java JPA设置默认值、Timestamp设置、自动获取时间

    设置默认值 @Column(name="state",columnDefinition="tinyint default 0") private Integer ...

  5. nodejs 操作 mysql

    1.安装插件 npm install mysql 2.调用代码 var mysql = require('mysql') var connection = mysql.createConnection ...

  6. 在浏览器输入URL发生了什么

    在我们输入google.com之后,浏览器上很快就会呈现出谷歌的页面,本文简单介绍一下从URL的输入到浏览器页面的展示,这中间发生了些什么. URL是什么URL全名叫统一资源定位符,uniform r ...

  7. Centos7.5 源码编译安装PHP

    安装依赖 yum -y install epel-release yum -y install  gcc gcc-c++ make pcre pcre-devel zlib zlib-devel op ...

  8. python学习相关软件安装

    爬虫初学者必装的软件!! 一.安装python step1:安装包下载 1.1.官网下载地址:https://www.python.org/ 根据自己电脑系统选择,我选择windowns 有不同版本可 ...

  9. win10 64 位安装 MySQL(mysql-5.7.17-winx64)

    版权声明:本文为搜集借鉴各类文章的原创文章,转载请注明出处:http://www.cnblogs.com/2186009311CFF/p/6517470.html. win10 64 位安装 MySQ ...

  10. 关于vs2019

    一.vs2019中的MFC 在想创建一个基于对话的应用时找不着模版了,这下可慌了,试遍了已有的各个模版都没要,要么就是缺少头文件,我在想是不是少安装了什么选项.重装了相关模块,最后又核对了一遍,都对. ...