第二百四十一节,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 组件的更多相关文章

  1. Bootstrap 进度条媒体对象和 Well 组件

    一.Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...

  2. Bootstrap(10) 进度条媒体对象和 Well 组件

    一.Well 组件这个组件可以实现简单的嵌入效果. <!-- //嵌入效果 --> <div class="well">Bootstrap</div& ...

  3. 第 11 章 进度条媒体对象和 Well 组件

    学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 的三个组件功能:Well 组件.进度条组件.媒体对象组件. 一.Well ...

  4. (十)进度条媒体对象和 Well 组件

    一.Well 组件 有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二.进度条组件 ...

  5. Bootstrap 进度条媒体对象和条组

    列表组组件 列表组组件用于显示一组列表的组件. //基本实例 <ul class="list-group"> <li class="list-group ...

  6. Bootstrap 学习笔记5 进度条媒体对象和well组件

    代码: <ul class="media-list"> <li class="media"> <div class="m ...

  7. 第二百一十一节,jQuery EasyUI,ValidateBox(验证框)组件

    jQuery EasyUI,ValidateBox(验证框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 4.自定义验证 本节课重点了解 EasyUI 中 ValidateBox(验证框 ...

  8. 第三百四十一节,Python分布式爬虫打造搜索引擎Scrapy精讲—编写spiders爬虫文件循环抓取内容—meta属性返回指定值给回调函数—Scrapy内置图片下载器

    第三百四十一节,Python分布式爬虫打造搜索引擎Scrapy精讲—编写spiders爬虫文件循环抓取内容—meta属性返回指定值给回调函数—Scrapy内置图片下载器 编写spiders爬虫文件循环 ...

  9. Android零基础入门第51节:进度条ProgressBar

    原文:Android零基础入门第51节:进度条ProgressBar 不知不觉这已经是第51期了,在前面50期我们学了Android开发中使用频率非常高的一些UI组件,当然这些组件还不足够完成所有AP ...

随机推荐

  1. IP地址冲突排查

    普通ARP请求报文(查找别人的IP地址,比如:我需要10.1.1.2的MAC地址,10.1.1.2是别人的IP)广播发送出去,广播域内所有主机都接收到,计算机系统判断ARP请求报文中的目的IP地址字段 ...

  2. Spark1.0.0 history server 配置

    在执行Spark应用程序的时候,driver会提供一个webUI给出应用程序的执行信息.可是该webUI随着应用程序的完毕而关闭port,也就是说,Spark应用程序执行完后,将无法查看应用程序的历史 ...

  3. array_intersect_assoc用法详解

    最近在做考试系统,想到这个数组函数,用法如下: <?php $a1=array('a','b','d','c','d','b','c','a'); $a2=array('b','d','d',' ...

  4. MSSQL数据库迁移到Oracle(二)

    上一篇文章采用的PowerDesigner实现对MSSQL数据库迁移到Oracle,后来博友建议用ESF Database Migration Toolkit进行迁移会更加简单方便,本文就是通过一个实 ...

  5. ZK框架笔记1、ZK Ajax框架简介

    简介    ZK是一个基于事件驱动和组件的框架,他为web应用提供了丰富的接口.zk包括一个基于Ajax的事件驱动引擎.一整套丰富的XML用户接口语言(XML User Interface Langu ...

  6. 利用nginx做tcp负载均衡

    当前nginx-13.1已经支持tcp,ucp,unix域套接字三种负载均衡模式(http肯定支持,这个不用说).最近有需求需要对后端服务做负载均衡,因此考虑使用nginx来做. 1. 下载nginx ...

  7. unity3d协同不同设备的代码

    unity3d的脚本代码中,Update()函数每一帧都会运行一次. 假设有这两台设备:一台超级四路泰坦计算机,一台旧手机,它们一起运行一个赛跑游戏,Update()函数每一帧运行一次,游戏中的小人就 ...

  8. python list插入、拼接

    1可以使用"+"号完成操作 输出为: [1, 2, 3, 8, 'google', 'com'] 2.使用extend方法 . 输入相同 3使用切片 输出相同 PS:len(l1) ...

  9. C#Virtual和Override的几种组合

    情况1: class A{public void Show()} class B:A{public void Show()} 编译通过,有警告让在B的方法里添加new关键字,以便将A的方法隐藏 编译时 ...

  10. Mac 常用的手势

    可以在触屏版-更多手势查看 技巧:前期慢慢滑动练习.一定要慢慢滑动,这样可以清楚的看出有没有产生效果,尤其注意大拇指滑动的感觉. 回到桌面:四指向外 打开Lanuchpad:四指向内 查看所有任务:三 ...