<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--移动设备优先-->
    <title>bootstrap</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3d85fbc3942f07085f052d06d11fdfa4/5fdf8db1cb134954b37001e85c4e9258d0094ad4.jpg" alt="pic">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3d85fbc3942f07085f052d06d11fdfa4/5fdf8db1cb134954b37001e85c4e9258d0094ad4.jpg" alt="pic">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3d85fbc3942f07085f052d06d11fdfa4/5fdf8db1cb134954b37001e85c4e9258d0094ad4.jpg" alt="pic">
            </a>
        </div>
        <div class="col-xs-6 col-md-3">
            <a href="#" class="thumbnail">
                <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3d85fbc3942f07085f052d06d11fdfa4/5fdf8db1cb134954b37001e85c4e9258d0094ad4.jpg" alt="pic">
            </a>
        </div>

    </div>

    <hr/>

    <div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3d85fbc3942f07085f052d06d11fdfa4/5fdf8db1cb134954b37001e85c4e9258d0094ad4.jpg" alt="pic">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Thumbnail labelThumbnail labelThumbnail labelThumbnail labelThumbnail label</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3d85fbc3942f07085f052d06d11fdfa4/5fdf8db1cb134954b37001e85c4e9258d0094ad4.jpg" alt="pic">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Thumbnail labelThumbnail labelThumbnail labelThumbnail labelThumbnail label</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3d85fbc3942f07085f052d06d11fdfa4/5fdf8db1cb134954b37001e85c4e9258d0094ad4.jpg" alt="pic">
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Thumbnail labelThumbnail labelThumbnail labelThumbnail labelThumbnail label</p>
                    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="container">
    <div class="alert alert-info">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <p>这里是提示信息</p>
    </div>
    <hr />

    <div class="alert alert-info alert-dismissable">
        <button type="button" class="close" data-dismiss="alert">&times;</button>
        <p>这里是提示信息<a href="#" class="alert-link">百度</a></p>
    </div>

</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--移动设备优先-->
    <title>bootstrap</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
        img{width: 100px;height: 100px;}
    </style>
</head>
<body>
<!--进度条-->
<div class="container">
    <div class="progress">
        <div class="progress-bar" style="width: 30%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger" style="width: 30%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" style="width: 30%;"></div>
    </div>

    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width: 30%;"></div>
    </div>
    <div class="progress progress-striped">
        <div class="progress-bar progress-bar-danger" style="width: 30%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning active progress-bar-striped" style="width: 30%;"></div>
    </div>
    <h1>堆叠</h1>
    <div class="progress">
        <div class="progress-bar  progress-bar-striped active progress-bar-danger" style="width: 10%;"></div>
        <div class="progress-bar  progress-bar-striped active progress-bar-info" style="width: 20%;"></div>
        <div class="progress-bar  progress-bar-striped active progress-bar-warning" style="width: 30%;"></div>
    </div>
</div>
<!--媒体对象-->
<div class="media">
    <div class="media-left media-middle">
        <a href="#">
            <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3d85fbc3942f07085f052d06d11fdfa4/5fdf8db1cb134954b37001e85c4e9258d0094ad4.jpg" alt="pic">
        </a>
    </div>
    <div class="media-body">
        <h2 class="media-heading">这里是标题</h2>
        <p>这里是内容这里是内容这里是内容这里是内容这里是内容
            这里是内容这里是内容这里是内容这里是内容这里是内容</br>
            这里是内容这里是内容这里是内容这里是内容这里是内容</br>
            这里是内容这里是内容这里是内容这里是内容这里是内容</p>
    </div>
</div>
<!--媒体列表-->
<ul class="media-list">
    <li class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3d85fbc3942f07085f052d06d11fdfa4/5fdf8db1cb134954b37001e85c4e9258d0094ad4.jpg" alt="pic">
            </a>
        </div>
        <div class="media-body">
            <h2 class="media-heading">这里是标题</h2>
            <p>这里是内容这里是内容这里是内容这里是内容这里是内容
                这里是内容这里是内容这里是内容这里是内容这里是内容</br>
                这里是内容这里是内容这里是内容这里是内容这里是内容</br>
                这里是内容这里是内容这里是内容这里是内容这里是内容</p>
        </div>
    </li>
    <li class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3d85fbc3942f07085f052d06d11fdfa4/5fdf8db1cb134954b37001e85c4e9258d0094ad4.jpg" alt="pic">
            </a>
        </div>
        <div class="media-body">
            <h2 class="media-heading">这里是标题</h2>
            <p>这里是内容这里是内容这里是内容这里是内容这里是内容
                这里是内容这里是内容这里是内容这里是内容这里是内容</br>
                这里是内容这里是内容这里是内容这里是内容这里是内容</br>
                这里是内容这里是内容这里是内容这里是内容这里是内容</p>
        </div>
    </li>
    <li class="media">
        <div class="media-left media-middle">
            <a href="#">
                <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=3d85fbc3942f07085f052d06d11fdfa4/5fdf8db1cb134954b37001e85c4e9258d0094ad4.jpg" alt="pic">
            </a>
        </div>
        <div class="media-body">
            <h2 class="media-heading">这里是标题</h2>
            <p>这里是内容这里是内容这里是内容这里是内容这里是内容
                这里是内容这里是内容这里是内容这里是内容这里是内容</br>
                这里是内容这里是内容这里是内容这里是内容这里是内容</br>
                这里是内容这里是内容这里是内容这里是内容这里是内容</p>
        </div>
    </li>
</ul>
</body>
</html>

⑿bootstrap组件 缩略图 警告框 进度条 基础案例的更多相关文章

  1. ⑾bootstrap组件 徽章 大屏 页头 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Bootstrap 警告、进度条、列表组、面板

    摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...

  3. vue-music 关于Player （播放器组件）--播放和进度条

    迷你播放器 1.播放器组件会在各个页面的情况下会打开. 首先在vuex state.js 中定义全局的播放器状态 import {playMode} from 'common/js/config.js ...

  4. 关于小程序 scroll-view中设置scroll-top无效 和小说图书阅读进度条小案例

    在最近的项目有做到关于小说阅读的进度条功能,其中用到scroll-view和slider组件,发现scroll-view中的scroll-top在设置值后无效,出现这种情况大概是以下几种问题: 1.s ...

  5. SeekBar进度条简单案例

    SeekBar是进度条.我们使用进度条时,可以使用系统默认的进度条:也可以自定义进度条的图片和滑块图片等 向右拉进度条让图片显示出来 向右拉五角星加载有色进度条 baseSeekBar package ...

  6. Bootstrap 缩略图 警告框

    @{    Layout = null;}<!DOCTYPE html><html><head>    <meta name="viewport&q ...

  7. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  8. ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件

    阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...

  9. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. ThinkPHP中：使用递归写node_merge()函数

    需求描述: 现有一个节点集合 可以视为一个二维数组 array(5) { [0] => array(4) { ["id"] => string(1) "1&q ...

  2. Android开发更新UI的几种方式

    1.runOnUiThread 2.handler post 3.handler sendmessage 4.view post xml布局文件: <RelativeLayout xmlns:a ...

  3. 手动添加 Git bash 到鼠标右键

    由于不知原因,右键没有了Git Bash Here,没有这个右键菜单导致获取Git仓库中的代码很不方便,所以决定通过注册表的方式将这个菜单加出来. 1.win + R,输入"regedit& ...

  4. Python自学笔记-lambda函数（来自廖雪峰的官网Python3）

    感觉廖雪峰的官网http://www.liaoxuefeng.com/里面的教程不错,所以学习一下,把需要复习的摘抄一下. 以下内容主要为了自己复习用,详细内容请登录廖雪峰的官网查看. 匿名函数 通过 ...

  5. 【小程序】调用wx.request接口时需要注意的问题

    写在前面 之前写了一篇<微信小程序实现各种特效实例>,上次的小程序的项目我负责大部分前端后台接口的对接,然后学长帮我改了一些问题.总的来说,收获了不少吧! 现在项目已经完成,还是要陆陆续续 ...

  6. ASP.NET没有魔法——ASP.NET MVC 与数据库大集合

    ASP.NET没有魔法——ASP.NET与数据库 ASP.NET没有魔法——ASP.NET MVC 与数据库之MySQL ASP.NET没有魔法——ASP.NET MVC 与数据库之ORM ASP.N ...

  7. Vue实现商城里面多个商品计算，全选，删除

    <!--包含 全选/不全选 批量删除 全部金额计算 数量加减--> 简陋的CSS代码 .main{ width: 100%;}.title{ width: 100%; height: 40 ...

  8. django使用xlwt导出excel文件

    这里只是mark一下导出的方法,并没有做什么REST处理和异常处理. 维护统一的style样式,可以使导出的数据更加美观. def export_excel(request): # 设置HttpRes ...

  9. windowsxp_电脑桌面显示不出来。

    问题:在工作的时候遇到电脑桌面显示不出来 解决方案: 1.结束explorer.exe进程 2.新建一个explorer.exe进程

  10. CoreData和SQLite多线程访问时的线程安全问题

    数据库读取操作一般都是多线程访问的.在对数据进行读取时,我们要保证其当前状态不能被修改,即读取时加锁,否则就会出现数据错误混乱.IOS中常用的两种数据持久化存储方式:CoreData和SQLite,两 ...