Bootstrap3.0学习第十六轮（进度条、媒体对象、列表组、面板）

前言

阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html

本文主要来讲解以下内容

1.进度条

进度条

提供工作或动作的实时反馈，只用简单且灵活的进度条。

跨浏览器兼容性

进度条使用了CSS3的transition和animation属性来完成一些效果。这些特性在Internet Explorer 9或以下版本中、Firefox的老版本中没有被支持。Opera 12不支持znimation属性。

基本案例

默认的进度条。

 <div class="progress">

   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

     <span class="sr-only">60% Complete</span>

   </div>

</div>

有意义的替换

<div class="progress">

  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">

    <span class="sr-only">40% Complete (success)</span>

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">

    <span class="sr-only">20% Complete</span>

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">

    <span class="sr-only">60% Complete (warning)</span>

  </div>

</div>

<div class="progress">

  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">

    <span class="sr-only">80% Complete</span>

  </div>

</div>

条纹效果

用一个渐变可以创建条纹效果，在IE8中不可用。

<div class="progress progress-striped">

  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">

    <span class="sr-only">40% Complete (success)</span>

  </div>

</div>

<div class="progress progress-striped">

  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">

    <span class="sr-only">20% Complete</span>

  </div>

</div>

<div class="progress progress-striped">

  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">

    <span class="sr-only">60% Complete (warning)</span>

  </div>

</div>

<div class="progress progress-striped">

  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">

    <span class="sr-only">80% Complete (danger)</span>

  </div>

</div>

运动效果

给.progress-striped加上.active使它由右向左运动。

<div class="progress progress-striped active">

  <div class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">

    <span class="sr-only">45% Complete</span>

  </div>

</div>

堆叠效果

把多个进度条放入同一个.progress，使它们堆叠。

<div class="progress">

  <div class="progress-bar progress-bar-success" style="width: 35%">

    <span class="sr-only">35% Complete (success)</span>

  </div>

  <div class="progress-bar progress-bar-warning" style="width: 20%">

    <span class="sr-only">20% Complete (warning)</span>

  </div>

  <div class="progress-bar progress-bar-danger" style="width: 10%">

    <span class="sr-only">10% Complete (danger)</span>

  </div>

</div>

媒体对象

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右对齐的图片（就像blog内容或Tweets等）。

默认媒体

默认的媒体允许在一个内容块的左边或右边浮动一个媒体对象（图像，视频，音频）

<div class="media">

  <a class="pull-left" href="#">

    <img class="media-object" src="http://placehold.it/64x64" alt="...">

  </a>

  <div class="media-body">

    <h4 class="media-heading">Media heading</h4>

    <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>

  </div>

</div>

媒体列表

用一点点额外的标记，就能在列表内使用媒体（对评论或文章列表很有用）。

列表组

列表组是灵活又强大的组件，不仅仅用于显示简单的成列表的元素，还用于复杂的定制的内容。

基本案例

最简单的列表只是无顺序列表，列表条目和正确的类。

<ul class="list-group">

  <li class="list-group-item">Cras justo odio</li>

  <li class="list-group-item">Dapibus ac facilisis in</li>

  <li class="list-group-item">Morbi leo risus</li>

  <li class="list-group-item">Porta ac consectetur ac</li>

  <li class="list-group-item">Vestibulum at eros</li>

</ul>

徽章

给列表组加入徽章，它会自动地放在右面。

<ul class="list-group">

  <li class="list-group-item"><span class="badge">14</span>Cras justo odio</li>

  <li class="list-group-item"><span class="badge">33</span>Dapibus ac facilisis in</li>

  <li class="list-group-item"><span class="badge">11</span>Morbi leo risus</li>

  <li class="list-group-item"><span class="badge">41</span>Porta ac consectetur ac</li>

  <li class="list-group-item"><span class="badge">21</span>Vestibulum at eros</li>

</ul>

链接条目

用<a>标签而不是<li>标签（也就是说父元素是<div>而不是<ul>）。没必要给每个元素都加一个父元素。

<div class="list-group">

  <a href="#" class="list-group-item active">

    Cras justo odio

  </a>

  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>

  <a href="#" class="list-group-item">Morbi leo risus</a>

  <a href="#" class="list-group-item">Porta ac consectetur ac</a>

  <a href="#" class="list-group-item">Vestibulum at eros</a>

</div>

定制内容

在里面可以加几乎任何HTML，甚至是像下面的带链接的列表组。

<div class="list-group">

  <a href="#" class="list-group-item active">

    <h4 class="list-group-item-heading">List group item heading</h4>

    <p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>

  </a>

    <a href="#" class="list-group-item">

    <h4 class="list-group-item-heading">List group item heading</h4>

    <p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>

  </a>

    <a href="#" class="list-group-item">

    <h4 class="list-group-item-heading">List group item heading</h4>

    <p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>

  </a>

</div>

面板

虽然不总是必须，但是某些时候你可能需要将某些内容放到一个盒子里。对于这种情况，可以试试面板组件。

基本案例

默认的.panel所做的只是提供基本的边界和内部，来包含内容。

<div class="panel panel-default">

  <div class="panel-body">

    Basic panel example

  </div>

</div>

带标题的面版

用.panel-heading可以简单地加入一个标题容器。您也可以用<h1>-<h6>和.panel-title类加入预定义样式的标题。

<div class="panel panel-default">

  <div class="panel-heading">Panel heading without title</div>

  <div class="panel-body">

    Panel content

  </div>

</div>

带脚注的面版

把按钮或次要的文本放入.panel-footer。注意面版的脚注不会从带意义的替换中继承颜色，因为它不是在前面的内容。

<div class="panel panel-default">

  <div class="panel-body">

    Panel content

  </div>

  <div class="panel-footer">Panel footer</div>

</div>

有意义的替换

像其它组件一样，可以简单地通过加入有意义的状态类，给特定的内容使用更有意义的面版。

<div class="panel panel-primary">

  <div class="panel-heading">Panel heading without title</div>

  <div class="panel-body">

    Panel content

  </div>

</div>

<div class="panel panel-success">

  <div class="panel-heading">Panel heading without title</div>

  <div class="panel-body">

    Panel content

  </div>

</div>

<div class="panel panel-info">

  <div class="panel-heading">Panel heading without title</div>

  <div class="panel-body">

    Panel content

  </div>

</div>

<div class="panel panel-warning">

  <div class="panel-heading">Panel heading without title</div>

  <div class="panel-body">

    Panel content

  </div>

</div>

带表格的面版

为了无缝的设计，在面版中加入.table。如果有.panel-body，就在表格的上方加上一个用于分割的边界。

<div class="panel panel-default">

  <!-- Default panel contents -->

  <div class="panel-heading">Panel heading</div>

  <div class="panel-body">

    <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    <table class="table">

      <thead>

        <tr>

          <th>First Name</th>

          <th>Last Name</th>

          <th>User Name</th>

        </tr>

      </thead>

      <tbody>

        <tr>

          <td>aehyok</td>

          <td>leo</td>

          <td>@aehyok</td>

        </tr>

        <tr>

          <td>lynn</td>

          <td>thl</td>

          <td>@lynn</td>

        </tr>

      </tbody>

    </table>

  </div>

如果没有.panel-body，面版标题会和表格连接起来，没有空隙。

带列表组的面版

<div class="panel panel-default">

  <!-- Default panel contents -->

  <div class="panel-heading">Panel heading</div>

  <div class="panel-body">

    <p>Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

  </div>

    <ul class="list-group">

    <li class="list-group-item">Cras justo odio</li>

    <li class="list-group-item">Dapibus ac facilisis in</li>

    <li class="list-group-item">Morbi leo risus</li>

    <li class="list-group-item">Porta ac consectetur ac</li>

    <li class="list-group-item">Vestibulum at eros</li>

  </ul>

  </div>

总结

对了Bootstrap的基本组件，已经简单的过了一遍，还是收获很多的。接下来就要去学习Bootstrap插件了。

本文已更新至Bootstrap3.0入门学习系列导航http://www.cnblogs.com/aehyok/p/3404867.html

分类: BootStrap3.0

标签: BootStrap前端设计

Bootstrap3.0（进度条、媒体对象、列表组、面板）的更多相关文章

第二百四十一节，Bootstrap进度条媒体对象和 Well 组件
第二百四十一节,Bootstrap进度条媒体对象和 Well 组件学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...
第 11 章进度条媒体对象和 Well 组件
学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件主讲教师:李炎恢本节课我们主要学习一下 Bootstrap 的三个组件功能:Well 组件.进度条组件.媒体对象组件. 一．Well ...
Bootstrap 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...
Bootstrap(10) 进度条媒体对象和 Well 组件
一．Well 组件这个组件可以实现简单的嵌入效果.  <div class="well">Bootstrap</div& ...
Bootstrap 进度条媒体对象和条组
列表组组件列表组组件用于显示一组列表的组件. //基本实例 <ul class="list-group"> <li class="list-group ...
（十）进度条媒体对象和 Well 组件
一．Well 组件有 lg 和 sm 两种可选值 <div class="well well-lg"> Bootstrap </div> 二．进度条组件 ...
Bootstrap 媒体对象列表组
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport&q ...
Bootstrap 学习笔记5 进度条媒体对象和well组件
代码: <ul class="media-list"> <li class="media"> <div class="m ...
第二百四十二节，Bootstrap列表组面板和嵌入组件
Bootstrap列表组面板和嵌入组件学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应式嵌入组 ...
BootStrap学习(5)_多媒体对象&列表组
一.多媒体对象这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. .media: ...

随机推荐

深入理解C指针之二：C内存管理
原文:深入理解C指针之二:C内存管理内存管理对所有程序来说都很重要.有时候内存由运行时系统隐式的管理,比如为变量自动分配内存.在这种情况下,变量分配在它所处的函数的栈帧上(每个函数都有它自己的栈帧, ...
异常处理 Access to the path is denied
在需要进行读写操作的目录下添加Network Service这个帐号, 由于在iis 6.0中,默认的应用程序池中的标示用的是Network Service, 所以在进程中是使用Network Ser ...
Excel基于POI导入导出的Annotation化之路（一）
Excel在web项目里的使用变得越来越广泛,特别是和线下耦合度较高的业务,Excel导入导出变得非常频繁,尽管很多人写了诸多的工具方法,但是终究没有解决一个问题:有效的控制字段英文名称和实际表头名称 ...
Require.JS 2.0
就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0.随后的几小时James Burke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升 ...
php错误及异常捕捉
原文:php错误及异常捕捉在实际开发中,错误及异常捕捉仅仅靠try{}catch()是远远不够的. 所以引用以下几中函数. a) set_error_handler 一般用于捕捉 E_NOTI ...
异步提交form的时候利用jQuery validate实现表单验证
异步提交form的时候利用jQuery validate实现表单验证相信很多人都用过jquery validate插件,非常好用,并且可以通过下面的语句来自定义验证规则 // 电话号码验证 ...
华硕K55DR体验 - 显卡就是坑
朋友拿来电脑,本来他室友已经把他电脑重做完了,但还是卡,非要给我再搞一遍,难道?我就是传说中的大神?咳咳...YY一下,适可而止华硕K55DR的配置来看,似乎应付CF没什么问题,可是,FPS各种不稳 ...
Mysql之IN 和 Exists 用法
1.基本用法 IN:后面的子查询是返回结果集的,换句话说执行次序和Exists()不一样.子查询先产生结果集,然后主查询再去结果集里去找符合要求的字段列表去.符合要求的输出,反之则不输出. Exis ...
Visual Studio 2010 单元测试－－运行测试并查看代码覆盖率
原文:Visual Studio 2010 单元测试--运行测试并查看代码覆盖率运行测试并查看代码覆盖率对程序集中的代码运行测试时,可以通过收集代码覆盖率数据来查看正在测试的项目代码部分. 运行测试 ...
css技巧--整理（1）
1.文字描边 -webkit-text-shadow:#be8ef8 2px 0 1px,#be8ef8 0 2px 1px,#be8ef8 -2px 0 1px,#be8ef8 0 -2px 1px ...

Bootstrap3.0（进度条、媒体对象、列表组、面板）

Bootstrap3.0学习第十六轮（进度条、媒体对象、列表组、面板）

跨浏览器兼容性

基本案例

有意义的替换

条纹效果

运动效果

堆叠效果

默认媒体

媒体列表

基本案例

徽章

链接条目

定制内容

基本案例

带标题的面版

带脚注的面版

有意义的替换

带表格的面版

带列表组的面版

Bootstrap3.0（进度条、媒体对象、列表组、面板）的更多相关文章

随机推荐

热门专题