bootstrap进度条媒体对象和Well组件

学习笔记

一．Well 组件
这个组件可以实现简单的嵌入效果。
//嵌入效果
<div class="well">
Bootstrap
</div>
//有lg 和sm 两种可选值
<div class="well well-lg">
Bootstrap
</div>
二．进度条组件
进度条组件为当前工作流程或动作提供时时反馈。
//基本进度条
<div class="progress">
<div class="progress-bar" style="width: 60%;">60%</div>
</div>
//最低值进度条
<div class="progress">
<div class="progress-bar" style="min-width:20px">0%</div>
</div>

//结合情景的进度条
<div class="progress">
<div class="progress-bar progress-bar-success" style="min-width:20px;width:60%">60%</div>
</div>

//条纹状，IE10+支持
<div class="progress">
<div class="progress-bar progress-bar-successprogress-bar-striped" style="min-width:20px;width:60%">60%</div>
</div>
//动画效果
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-stripedactive" style="min-width:20px;width:60%">60%</div>
</div>

//堆叠效果
<div class="progress">

效果图：

三．媒体对象组件
媒体对象可以包含图片、视频或音频等媒体，以达到对象和文本组合显示的样式效果。
//基本实例

<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>

//媒体对象列表

其实就是嵌套媒体对象

<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>

<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>
<ul class="media-list">
<li 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）：有“海洋之舟”美称的企鹅是一种最古老
</p>
</div>
</li>
</ul>
</div>
</div>

bootstrap进度条媒体对象和Well组件相关推荐

第二百四十一节，Bootstrap进度条媒体对象和 Well 组件
第二百四十一节,Bootstrap进度条媒体对象和 Well 组件学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...
Bootstrap 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...
Bootstrap(10) 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. <div class="well">Bootstrap</div& ...
进度条媒体对象和Well组件
一．Well组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well">Bootstrap</div> //有lg和sm两种可 ...
（十）进度条媒体对象和 Well 组件
一．Well 组件有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二．进度条组件 ...
第 11 章进度条媒体对象和 Well 组件
本节课我们主要学习一下 Bootstrap 的三个组件功能:Well 组件.进度条组件.媒体对象组件. 一．Well 组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class ...
Bootstrap 进度条
进度条 Bootstrap提供了多种漂亮的进度条,可以使用进度条来表示加载.跳转等正在执行中的状态.进度条本身只是一个静态元素,要让它拥有交互能力,还需要JavaScript代码的配合. 基本进度条 ...
ajax bootstrap 进度条,Bootstrap进度条与AJAX后端数据传递结合使用实例详解
很多时候,我们执行页面上某个URL请求的时候,需要有等待的时间.如果是直接的页面跳转,浏览器会有缓冲进度展示,但是如果是AJAX,我觉得应该自己加上进度条,等待数据全部接收到之后,进度条消失,展示页面 ...
Bootstrap进度条
Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果. Internet Explorer 9 及之前的版本号和旧版的 Firefox 不支持该特性, Opera 12 不支持动画. 默认 ...

bootstrap进度条媒体对象和Well组件

bootstrap进度条媒体对象和Well组件相关推荐

最新文章

热门文章