<!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. Java中的类型擦除与桥方法

    类型擦除 Java在语法中虽然存在泛型的概念,但是在虚拟机中却没有泛型的概念,虚拟机中所有的类型都是普通类.无论何时定义一个泛型类型,编译后类型会被都被自动转换成一个相应的原始类型. 比如这个类 pu ...

  2. ESLint可共享配置发布，团队自定义ESLint规则新鲜出炉

    ESLint于2013年6月份推出,至今4个年头,最新版本v4.8.0.它是目前主流的用于Javascript和JSX代码规范检查的利器,很多大公司比如Airbnb和Google均有一套自己的Java ...

  3. ASP.NET没有魔法——目录

    ASP.NET没有魔法——开篇-用VS创建一个ASP.NET Web程序 ASP.NET没有魔法——为什么使用ASP.NET ASP.NET没有魔法——第一个ASP.NET应用<MyBlog&g ...

  4. 运行Vue在ASP.NET Core应用程序并部署在IIS上

    前言 项目一直用的ASP.NET Core,但是呢我对ASP.NET Core一些原理也还未开始研究,仅限于会用,不过园子中已有大量文章存在,借着有点空余时间,我们来讲讲如何利用ASP.NET Cor ...

  5. ZOJ1315

    代码先寄放这里 #include<cstdio> #include<cstdlib> #include<iostream> #include<cstring& ...

  6. Linux上的文件搜索

    locate 基础了解 在centos7上默认没有locate命令,需要先手动安装.安装步骤:http://www.cnblogs.com/feanmy/p/7676717.html locate命令 ...

  7. C# 动态加载卸载 DLL

    我最近做的软件,需要检测dll或exe是否混淆,需要反射获得类名,这时发现,C#可以加载DLL,但不能卸载DLL.于是在网上找到一个方法,可以动态加载DLL,不使用时可以卸载. 我在写一个WPF 程序 ...

  8. python 基础大纲

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

  9. 南天PR2、PR2E驱动下载，xp，win7，win8，win8.1，win10 32位64位驱动下载安装教程

    家里开淘宝店,有个针式打印机驱动.电脑各种换系统,为了装这个驱动可是废了不小的劲.不敢独享,所以现在把各种驱动以及安装教程分享出来. 注意: 打印机在开机状态下,电脑在开机状态下,不要插拔连接线!!! ...

  10. [译]ASP.NET Core 2.0 带初始参数的中间件

    问题 如何在ASP.NET Core 2.0向中间件传入初始参数? 答案 在一个空项目中,创建一个POCO(Plain Old CLR Object)来保存中间件所需的参数: public class ...