⑿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 组件包含插件 面 ...
随机推荐
- springmvc入门程序
学习java有好几个月了,今天才想起每天学习的东西还是会忘记,所以准备开始每天把头一天学习的东西写在博客上,首先也不会写博客,文笔比较差劲,但是为了学习和巩固,也方便以后可以查看.温习. 昨天看了下s ...
- Vue状态管理vuex
前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue提供了vuex.本文将详细介绍Vue状态管理vuex 引入 当访问数据对象时,一个 V ...
- PHP和JS判断变量是否定义
PHP中: 通过isset(变量名)来判断,定义返回true/未定义返回false JS中: 通过typeof来判断.
- sql sever 基础知识及详细笔记
第六章:程序数据集散地:数据库 6.1:当今最常用的数据库 sql server:是微软公司的产品 oracle:是甲骨文公司的产品 DB2:数据核心又称DB2通用服务器 Mysql:是一种开发源代 ...
- Python系列之文件操作、冒泡算法、装饰器、及递归
文件处理 python对文件进行读写操作的方法与具体步骤,包括打开文件.读取内容.写入文件.文件中的内容定位.及关闭文件释放资源等 open().file(),这个两函数提供了初始化输入\输出(I\O ...
- SqlServer2008 导入导出txt或Execl数据
--右键user表所在的数据库,然后任务--导出数据,然后根据提示设置就行 --从txt中导入 EXEC master..xp_cmdshell 'bcp Northwind.dbo.sysusers ...
- AmCharts 对数据排序后展示
在官网看到的例子 给chart添加一个排序功能的handler AmCharts.addInitHandler( function(chart){ if (chart.orderByField === ...
- iOS之浅谈纯代码控制UIViewController视图控制器跳转界面的几种方法
.最普通的视图控制器UIViewContoller 一个普通的视图控制器一般只有模态跳转的功能(ipad我不了解除外,这里只说iPhone),这个方法是所有视图控制器对象都可以用的,而实现这种功能,有 ...
- Android Annotations Eclipse 配置 (3)
Android Annotations 本来我想写个 Java 版本的<RESTful客户端库:RestClient>用于 Android 应用开发,结果发现不太好写,虽然用了 Dynam ...
- WPF checkbox文字下掉
WPF checkbox文字下掉 可以使用 <Style TargetType="CheckBox"> <Setter Property="Margin ...