第二百四十一节，Bootstrap进度条媒体对象和 Well 组件
第二百四十一节，Bootstrap进度条媒体对象和 Well 组件
学习要点：
1.Well 组件
2.进度条组件
3.媒体对象组件
本节课我们主要学习一下 Bootstrap 的三个组件功能：Well 组件、进度条组件、媒体对 象组件。
一．Well 组件
这个组件可以实现简单的嵌入效果。
嵌入效果
well样式class类，写在<div>里，设置一个div区块嵌入效果(Bootstrap)
well-lg样式class类，写在<div>里，设置一个div区块嵌入效果大尺寸(Bootstrap)
well-sm样式class类，写在<div>里，设置一个div区块嵌入效果小尺寸(Bootstrap)
<div class="well">Bootstrap </div><div class="well well-lg">Bootstrap </div> <div class="well well-sm">Bootstrap </div>
二．进度条组件
进度条组件为当前工作流程或动作提供时时反馈。
基本进度条
progress样式class类，写在<div>里，声明一个进度条区域(Bootstrap)
progress-bar样式class类，写在<div>里，设置一个进度条默认样式(Bootstrap)
<div class="progress"><div class="progress-bar" style="width: 60%;">60%</div> </div>
最低值进度条
<div class="progress"><div class="progress-bar" style="min-width:20px; width: 0%;">0%</div> </div>
结合情景的进度条
progress-bar-success样式class类，写在<div>元素里，设置进度条绿色(Bootstrap)
progress-bar-info样式class类，写在<div>元素里，设置进度条蓝色(Bootstrap)
progress-bar-warning样式class类，写在<div>元素里，设置进度条橙色(Bootstrap)
progress-bar-danger样式class类，写在<div>元素里，设置进度条红色(Bootstrap)
<div class="progress"><div class="progress-bar progress-bar-success" style="min-width:20px;width:60%">60%</div> </div> <div class="progress"><div class="progress-bar progress-bar-info" style="min-width:20px;width:60%">60%</div> </div> <div class="progress"><div class="progress-bar progress-bar-warning" style="min-width:20px;width:60%">60%</div> </div> <div class="progress"><div class="progress-bar progress-bar-danger" style="min-width:20px;width:60%">60%</div> </div>
条纹状，IE10+支持，IE10以下不支持
progress-bar-striped样式class类，写在<div>元素里，设置条纹状进度条(Bootstrap)
<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped" style="min-width:20px;width:60%">60%</div> </div>
条纹状动画效果，必须将进度条设置条纹状
active样式class类，写在进度条<div>里，设置进度条，条纹状动画效果(Bootstrap)
<div class="progress"><div class="progress-bar progress-bar-success progress-bar-striped active" style="min-width:20px;width:60%">60%</div> </div>
进度条堆叠效果
<div class="progress"><div class="progress-bar progress-bar-success" style="min-width:20px;width:30%">30%</div><div class="progress-bar progress-bar-warning" style="min-width:20px;width:20%">20%</div><div class="progress-bar progress-bar-danger" style="min-width:20px;width:50%">50%</div> </div>
三．媒体对象组件，论坛常用
媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。
基本实例
media样式class类，写在<div>里，声明一个媒体对象div(Bootstrap)
media-left样式class类，写在<div>里，设置一个媒体对象里的媒体区域左边显示(Bootstrap)
media-object样式class类，写在<img>里，设置一个媒体样式(Bootstrap)
media-body样式class类，写在<div>里，声明一个媒体内容div(Bootstrap)
media-heading样式class类，写在<h1-h4>里，设置一个媒体内容标题样式(Bootstrap)
<div class="media"><div class="media-left"><img src="img/small.png" alt="" class="media-object"></div><div class="media-body"><h4 class="media-heading">标题</h4><p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p></div> </div>
媒体对象在右边
media-right样式class类，写在<div>里，设置一个媒体对象里的媒体区域右边显示(Bootstrap)
<div class="media"><div class="media-body"><h4 class="media-heading">标题</h4><p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有 17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p></div><div class="media-right"><img src="img/small.png" alt="" class="media-object"></div> </div>
媒体对象列表，也就是声明一个媒体对象列表然后嵌套媒体对象
media-list样式class类，写在<ul>里，声明一个媒体对象列表(Bootstrap)
<ul class="media-list"><li class="meida"><div class="media-left"><img src="img/small.png" alt="" class="media-object"></div><div class="media-body"><h4 class="meida-heading">内容标题</h4><p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p><div class="meida"><div class="media-left"><img src="img/small.png" alt="" class="media-object"></div><div class="media-body"><h4 class="meida-heading">内容标题</h4><p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p><div class="meida"><div class="media-left"><img src="img/small.png" alt="" class="media-object"></div><div class="media-body"><h4 class="meida-heading">内容标题</h4><p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p></div></div></div></div><div class="meida"><div class="media-left"><img src="img/small.png" alt="" class="media-object"></div><div class="media-body"><h4 class="meida-heading">内容标题</h4><p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p></div></div></div></li><li class="meida"><div class="media-left"><img src="img/small.png" alt="" class="media-object"></div><div class="media-body"><h4 class="meida-heading">内容标题</h4><p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。全世界的企鹅共有17种，大多数都分布在南半球。主要生活在南半球，属于企鹅目，企鹅科。特征为不能飞翔；脚生于身体最下部，故呈直立姿势；趾间有蹼；跖行性（其他鸟类以趾着地）；前肢成鳍状；羽毛短，以减少摩擦和湍流；羽毛间存留一层空气，用以保温。背部黑色，腹部白色。各个种的主要区别在于头部色型和个体大小。</p></div></li> </ul>
第二百四十一节，Bootstrap进度条媒体对象和 Well 组件相关推荐
- Bootstrap 进度条媒体对象和 Well 组件
一．Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...
- bootstrap进度条媒体对象和Well组件
学习笔记 一．Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 ...
- Bootstrap(10) 进度条媒体对象和 Well 组件
一．Well 组件 这个组件可以实现简单的嵌入效果. <!-- //嵌入效果 --><div class="well">Bootstrap</div& ...
- 第 11 章 进度条媒体对象和 Well 组件
本节课我们主要学习一下 Bootstrap 的三个组件功能:Well 组件.进度条组件.媒体对 象组件. 一．Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class ...
- 进度条媒体对象和Well组件
一．Well组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well">Bootstrap</div> //有lg和sm两种可 ...
- （十）进度条媒体对象和 Well 组件
一．Well 组件 有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二．进度条组件 ...
- ajax bootstrap 进度条,Bootstrap进度条与AJAX后端数据传递结合使用实例详解
很多时候,我们执行页面上某个URL请求的时候,需要有等待的时间.如果是直接的页面跳转,浏览器会有缓冲进度展示,但是如果是AJAX,我觉得应该自己加上进度条,等待数据全部接收到之后,进度条消失,展示页面 ...
- Bootstrap进度条
Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果. Internet Explorer 9 及之前的版本号和旧版的 Firefox 不支持该特性, Opera 12 不支持动画. 默认 ...
- Bootstrap 进度条堆叠
进度条堆叠 只需将多个进度条放到同一个 .progress 的容器中,即可以让多个进度条堆叠在一起显示.如: <div class="progress"> < ...
最新文章
- nodejs pm2使用
- 介绍三种绘制时间线图的方法
- 随办 企业打造完美执行团队的终极利器
- 独白：我为什么要从BTC转向支持BCH？
- 数据库索引的作用和优点缺点以及索引的11中用法
- android服务之录音功能
- Unable to open socket file: target process not responding or HotSpot VM not loaded The -F option can
- 感觉没睡好就..-shenmedoumeixie....
- 将权限组件应用到新项目
- 用汇编的眼光看C++（之const属性）
- 【Gbase】建表时候hash分布列的制定方式（DISTRIBUTED BY column_name）
- Web API路由与动作(三)
- 如何从python官网下载模块-Python各种模块下载及安装配置
- 深入理解FT，DTFT，DFT 之间的关系
- HHL算法第四弹（回顾伴随、正定算子、半正定算子、正规算子、酉矩阵、幺正矩阵、厄米矩阵，极式分解，奇异值分解）
- 全国计算机等级考试——C语言二级 题库
- 大神浅谈无人机飞控软件设计 系统性总结
- Unity3D-----摄像机镜头移动并限制角度
- 【微电网优化】基于粒子群算法求解热电联供型微电网经济运行优化问题含Matlab源码
- 2019年9月19日好货十元内精选包邮