码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-12-20 14:03:15      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:str   stripe   class   pre   gre   反馈   结合   hid   warning   

一.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-success progress-bar-striped" style="min-width:20px;width:60%">60%</div>
</div>
技术分享

//动画效果

<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:35%">35%</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:10%">10%</div>
</div>
技术分享

三.媒体对象组件

媒体对象可以包含图片、视频或音频等媒体,以达到对象和文本组合显示的样式效果。

//基本实例

<div class="media">
  <div class="media-left"> <img src="yhmgc/img/4.jpg" 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="yhmgc/img/4.jpg" alt="" class="media-object"> </div> </div>
技术分享

//媒体对象列表

技术分享
<ul class="media-list">
<!--1开始-->
  <li class="media">
      <div class="media-left"> <img src="yhmgc/img/4.jpg" alt="" class="media-object"> </div>
      <div class="media-body">
        <h4 class="media-heading">标题</h4>
        <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p>
        <!--1-1开始-->
        <div class="media">
      <div class="media-left"> <img src="yhmgc/img/4.jpg" alt="" class="media-object"> </div>
      <div class="media-body">
        <h4 class="media-heading">标题</h4>
        <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p>
        <!--2-1开始-->
        <div class="media">
      <div class="media-left"> <img src="yhmgc/img/4.jpg" alt="" class="media-object"> </div>
      <div class="media-body">
        <h4 class="media-heading">标题</h4>
        <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p>
      </div>
  </div>
  <!--2-1结束-->
      </div>
  </div>
  <!--1-1结束-->
  <!--1-2开始-->
  <div class="media">
      <div class="media-left"> <img src="yhmgc/img/4.jpg" alt="" class="media-object"> </div>
      <div class="media-body">
        <h4 class="media-heading">标题</h4>
        <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p>
      </div>
  </div>
  <!--1-2结束-->
      </div>
  </li>
  <!--1结束-->
  <li class="media">
      <div class="media-left"> <img src="yhmgc/img/4.jpg" alt="" class="media-object"> </div>
      <div class="media-body">
        <h4 class="media-heading">标题</h4>
        <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老 的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17 种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔; 脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状; 羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个 种的主要区别在于头部色型和个体大小。</p>
      </div>
  </li>
</ul>
View Code

效果图:

技术分享

 

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

标签:str   stripe   class   pre   gre   反馈   结合   hid   warning   

原文地址:http://www.cnblogs.com/zxl89/p/6202277.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!