⑿bootstrap组件 缩略图 警告框 进度条 基础案例
<!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">×</button>
<p>这里是提示信息</p>
</div>
<hr />
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</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组件 缩略图 警告框 进度条 基础案例的更多相关文章
- ⑾bootstrap组件 徽章 大屏 页头 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bootstrap 警告、进度条、列表组、面板
摘要:该部分包括警告.进度条.列表组.面板等部分. 1.警告(alert) 1.1 基本的警告(.alert) 警告的基类是 .alert .和其他样式类一块使用.例如: .alert-success ...
- vue-music 关于Player （播放器组件）--播放和进度条
迷你播放器 1.播放器组件会在各个页面的情况下会打开. 首先在vuex state.js 中定义全局的播放器状态 import {playMode} from 'common/js/config.js ...
- 关于小程序 scroll-view中设置scroll-top无效 和小说图书阅读进度条小案例
在最近的项目有做到关于小说阅读的进度条功能,其中用到scroll-view和slider组件,发现scroll-view中的scroll-top在设置值后无效,出现这种情况大概是以下几种问题: 1.s ...
- SeekBar进度条简单案例
SeekBar是进度条.我们使用进度条时,可以使用系统默认的进度条:也可以自定义进度条的图片和滑块图片等 向右拉进度条让图片显示出来 向右拉五角星加载有色进度条 baseSeekBar package ...
- Bootstrap 缩略图 警告框
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...
- Bootstrap组件之响应式导航条
响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...
- ASP.NET MVC使用Bootstrap系列（3）——使用Bootstrap 组件
阅读目录 Bootstrap 导航条 列表组 徽章 媒体对象 页头 路径导航 分页 输入框组 按钮式下拉菜单 警告框 进度条 小结 Bootstrap为我们提供了十几种的可复用组件,包括字体图标.下拉 ...
- python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)
一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...
随机推荐
- 分享ES6中比较常用又强大的新特性
前言 es6有很多新东西,但是感觉常用的并不是很多,这里学习记录了一些我自己认为非常常用又强大的新特性. scoping 实用的块级作用域,let x ＝ xxx 可以声明一个块级作用域的局部变量,简 ...
- Windows+Apache2.4.10+PHP7.0+MySQL5.6.21安装
一.安装包下载 apache2.4.10 http://www.apachelounge.com/download/win64/ PHP7.0.7 http://windows.php.net/dow ...
- Windows下Apache添加SSL模块
参考资料:http://www.yuansir-web.com/2011/05/12/hello-world/测试环境:windows2003 32位 + Apache2.4 + PHP5.4 一.准 ...
- zoj 1081 Points Within （判断点是否在多边形内）
http://blog.csdn.net/zxy_snow/article/details/6339621先保存,搞懂了再来写
- jquery定时刷新数据
$(function () { setInterval("startRequest()", 3000); }); function startRequest() { $(" ...
- 第九章 MySQL中LIMIT和NOT IN案例
第九章 MySQL中LIMIT和NOT IN案例 一.案例的项目 1.创建数据库语句: #创建数据库 CREATE DATABASE `schoolDB`; USE `schoolDB`; #创建学生 ...
- [#1] YCbCr与RGB的转换公式
1 YCbCr简介 YCbCr颜色空间是将RGB颜色空间进行坐标转换后得到的,常用于数字电视系统.Y取值范围:16~235 Cb.Cr的取值范围:16~240 YCbCr经常和YUV混淆.两者的主要差 ...
- GPUImage库的使用
GPUImage开源项目地址:https://github.com/BradLarson/GPUImage GPUImage使用说明:https://github.com/BradLarson/GPU ...
- Django实现用户密码重置
使用Django内置的认证视图实现简单的通过邮箱重置密码的功能版本:django 1.11 在django.contrib.auth.views中提供了四个类视图用于密码重置 class Passwo ...
- 原生js反转字符串
//直接操作 var str='nama';var rts=str.split('').reverse().join(''); //String上拓展方法String.prototype.revers ...