<!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. E2195 cannot evaluate function call

    E2195 cannot evaluate function call :e2195无法评估函数的调用     :问题的根源在于,对组件创建了不合理的触发事件导致的.    :OK

  2. 分享基于分布式Http长连接框架--代码模型

    好的代码应该是方便客户端使用,代码能够自描述,规范化,大众标准化. 而且我相信代码也是有生命的,需要不断的维护它,你以什么样的态度对待它,它就会以同样的态度回敬你,所以在写代码前,先摆好自己的态度(一 ...

  3. WinForm事件中的Object sender和EventArgs e参数

    Windows程序有一个事件机制.用于处理用户事件. 在WinForm中我们经常需要给控件添加事件.例如给一个Button按钮添加一个Click点击事件.给TextBox文本框添加一个KeyPress ...

  4. 悟透JavaScript(二)

    初看原型 prototype源自法语,软件界的标准翻译为“原型”,代表事物的初始形态,也含有模型和样板的意义.JavaScript中的prototype概念恰如其分地反映了这个词的内含,我们不能将其理 ...

  5. ionic构建APP--简单操作实现APP制作

    ionic--基于AngularJS的app框架 1安装ionic .HBuilder创建APP项目,导入ionic的css,js(fonts)文件. .导入ionic.css和ionic.bundl ...

  6. Ricequant-米筐金工-估值因子

    Ricequant米筐金工--因子分析 作者:戴宇.小湖 上一篇介绍了单因子检验是因子分析前重要的一个步骤,是构建因子库.建立因子模型的基础,这篇报告首先对常见估值因子进行初步的检验. 第一篇．估值因 ...

  7. win10 uwp 获取指定的文件 AQS

    很多时候不需要获取整个文件夹的文件,是需要获取文件夹里指定的文件. 那么 UWP 如何对文件夹里的文件进行过滤,只拿出自己需要的文件? 本文:如何使用通配符或文件匹配方式在uwp获取文件夹中指定的文件 ...

  8. （转）十分钟入门pandas

    本文是对pandas官方网站上<10 Minutes to pandas>的一个简单的翻译,原文在这里.这篇文章是对pandas的一个简单的介绍,详细的介绍请参考:Cookbook . 习 ...

  9. python 基础大纲

    机器语言: 特点:计算机能够看懂的0和1去写程序 优点:程序运行速度快 缺点:开发效率低 汇编语言: 特点:用一些英文标签代替一串而精致数字去写程序 优点:比机器语言好一点,操作系统内大量使用汇编语言 ...

  10. Java常用类（一）之Object类详解

    大家都知道Object是所有类的父类,任何类都默认继承Object 理论上Object类是所有类的父类,即直接或间接的继承java.lang.Object类.由于所有的类都继承在Object类,因此省 ...