bootstrap列表

引入bootstrap标签

原本的效果

水平显示

bootstrap列表

列表组合框

在组合框后面加备注

突出显示

a标签列表

  1. <!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">
  2.  
  3.     <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>
  4.  
  5. <!--原本的效果-->
    <ul>
        <li>首页</li>
        <li>
            产品中心
            <ul>
                <li>手机</li>
                <li>电脑</li>
            </ul>
        </li>
        <li>关于我们</li>
        <li>联系我们</li>
    </ul>
  6.  
  7. <!--水平显示-->
    <ul class="list-inline">
        <li>首页</li>
        <li>产品中心</li>
        <li>关于我们</li>
        <li>联系我们</li>
    </ul>
  8.  
  9. <!--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>
  10.  
  11. <!--列表组合框加内容-->
    <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>
  12.  
  13. <!--突出显示-->
    <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>
  14.  
  15. <!--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>
  16.  
  17. </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. Git 使用疑问

    1)  fatal: remote origin already exists. 解决办法 ..$ git remote add origin git@git.*.com:tang/comment_s ...

  2. vue.js table组件封装

    table组件 和 分页组件来自iview,在这里我根据公司业务再次做了一次封装,使用slot进行内容分发,可以随意放置input输入框和button按钮 ,再使用props向子组件传递参数,使用em ...

  3. Python 项目转化为so文件

    思路是先将py转换为c代码,然后编译c为so文件,所以要安装以下内容: python 安装:cython pip install cython linux 安装:python-devel,gcc yu ...

  4. 内存缓存的使用Demo

    使用缓存的目的是为了使用的应用程序能更快速的响应用户输入,是程序高效的运行.有时候我们需要将远程web服务器获取的数据缓存起来,减少对同一个url多次请求. 内存缓存我们可以使用sdk中的NSURLC ...

  5. 执行rpm -ivh 时报错：error rpmdb BDB0113 Threadprocess 11690140458095421504 failed

    执行rpm -ivh 时报错:error rpmdb BDB0113 Threadprocess 11690140458095421504 failed 1.具体报错如下: [root@heyong ...

  6. hdu 1059 Dividing bitset 多重背包

    bitset做法 #include <bits/stdc++.h> #define PI acos(-1.0) #define mem(a,b) memset((a),b,sizeof(a ...

  7. DDD领域驱动设计初探（七）：Web层的搭建

    前言:好久没更新博客了,每天被该死的业务缠身,今天正好一个模块完成了,继续来完善我们的代码.之前的六篇完成了领域层.应用层.以及基础结构层的部分代码,这篇打算搭建下UI层的代码. DDD领域驱动设计初 ...

  8. Django【第10篇】：Django之分页初级版本

    分页和中间件 一.分页 Django的分页器(paginator) view.py from django.shortcuts import render,HttpResponse # Create ...

  9. Array 和 ArrayList 、 List 以及 LinkedList 的区别

    下面列出了Array(数组)和ArrayList(集合)的不同点: Array可以包含基本类型和对象类型,ArrayList只能包含对象类型. Array大小是固定的,ArrayList的大小是动态变 ...

  10. PKUSC2019颓废记

    Day -x \(THU\):"想过初审?gck" 我:"你说gck,那就gck⑧" 于是就来\(PKU\)碰碰运气了 Day 0 为了赶高铁起的很早. 颓了一 ...