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

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

前言

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

本文主要来讲解以下内容

1.进度条

2.媒体对象

3.列表组

4.面板

5.总结

进度条

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

跨浏览器兼容性

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

基本案例

默认的进度条。

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

有意义的替换

class="progress">
  
class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    class="sr-only">40% Complete (success)
  

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

class="progress">
  
class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    class="sr-only">60% Complete (warning)
  

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

条纹效果

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

class="progress progress-striped">
  
class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    class="sr-only">40% Complete (success)
  

class="progress progress-striped">
  
class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    class="sr-only">20% Complete
  

class="progress progress-striped">
  
class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    class="sr-only">60% Complete (warning)
  

class="progress progress-striped">
  
class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    class="sr-only">80% Complete (danger)
  

运动效果

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

class="progress progress-striped active">
  
class="progress-bar"  role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    class="sr-only">45% Complete
  

堆叠效果

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

class="progress">
  
class="progress-bar progress-bar-success" style="width: 35%">
    class="sr-only">35% Complete (success)
  
  
class="progress-bar progress-bar-warning" style="width: 20%">
    class="sr-only">20% Complete (warning)
  
  
class="progress-bar progress-bar-danger" style="width: 10%">
    class="sr-only">10% Complete (danger)
  

媒体对象

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

默认媒体

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

class="media">
  class="pull-left" href="#">
    class="media-object" src="http://placehold.it/64x64" alt="...">
  
  
class="media-body">
    
class="media-heading">Media heading
    
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.
  

媒体列表

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

View Code

 

列表组

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

基本案例

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

class="list-group">
  
class="list-group-item">Cras justo odio
  
class="list-group-item">Dapibus ac facilisis in
  
class="list-group-item">Morbi leo risus
  
class="list-group-item">Porta ac consectetur ac
  
class="list-group-item">Vestibulum at eros

徽章

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

class="list-group">
  
class="list-group-item">class="badge">14Cras justo odio
  
class="list-group-item">class="badge">33Dapibus ac facilisis in
  
class="list-group-item">class="badge">11Morbi leo risus
  
class="list-group-item">class="badge">41Porta ac consectetur ac
  
class="list-group-item">class="badge">21Vestibulum at eros

链接条目

用标签而不是

标签（也就是说父元素是

而不是

）。没必要给每个元素都加一个父元素。

class="list-group">
  "#" class="list-group-item active">
    Cras justo odio
  
  "#" class="list-group-item">Dapibus ac facilisis in
  "#" class="list-group-item">Morbi leo risus
  "#" class="list-group-item">Porta ac consectetur ac
  "#" class="list-group-item">Vestibulum at eros




定制内容

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


class="list-group">
  "#" class="list-group-item active">
    
class="list-group-item-heading">List group item heading
    
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.
  
    "#" class="list-group-item">
    
class="list-group-item-heading">List group item heading
    
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.
  
    "#" class="list-group-item">
    
class="list-group-item-heading">List group item heading
    
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.
  


 

面板

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

基本案例

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

class="panel panel-default">
  
class="panel-body">
    Basic panel example
  



带标题的面版

用.panel-heading可以简单地加入一个标题容器。您也可以用

-

和.panel-title类加入预定义样式的标题。

class="panel panel-default">
  
class="panel-heading">Panel heading without title
  
class="panel-body">
    Panel content
  



带脚注的面版

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

class="panel panel-default">
  
class="panel-body">
    Panel content
  
  
class="panel-footer">Panel footer



有意义的替换

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


class="panel panel-primary">
  
class="panel-heading">Panel heading without title
  
class="panel-body">
    Panel content
  

class="panel panel-success">
  
class="panel-heading">Panel heading without title
  
class="panel-body">
    Panel content
  

class="panel panel-info">
  
class="panel-heading">Panel heading without title
  
class="panel-body">
    Panel content
  

class="panel panel-warning">
  
class="panel-heading">Panel heading without title
  
class="panel-body">
    Panel content
  




带表格的面版

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


class="panel panel-default">
  
  
class="panel-heading">Panel heading
  
class="panel-body">
    
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.
    class="table">  
      
  
        
  
          
First Name
  
          
Last Name
          
User Name
  
        
  
      
  
      
  
        
  
          
aehyok
  
          
leo
 
          
@aehyok
  
        
        
  
          
lynn
  
          
thl
 
          
@lynn
  
        
      
  
    
  
  




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



带列表组的面版


class="panel panel-default">
  
  
class="panel-heading">Panel heading
  
class="panel-body">
    
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.
 
  
    
class="list-group">
    
class="list-group-item">Cras justo odio
    
class="list-group-item">Dapibus ac facilisis in
    
class="list-group-item">Morbi leo risus
    
class="list-group-item">Porta ac consectetur ac
    
class="list-group-item">Vestibulum at eros
  
  




总结

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

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