九、bootstrap进度条、媒体对象、列表组、面板、Well、响应式嵌入组件

知识点：

1、进度条
2、媒体对象
3、列表组
4、面板
5、响应式嵌入组件
6、well

1、进度条

1）默认的进度条

  

      
45%
  

2）情景变化的进度条

  

      
60%
  
  

      
25%
  
  

      
45%
  
  

      
45%
  

3）条纹的进度条 progress-striped

  

      
45%
  

4）动画的进度条 active

  

      
45%
  

5）堆叠的进度条

  

      
45%
      
25%
  

2、媒体对象

   ![](images/kittens.jpg)
   

       
媒体标题
       这是一些示例文本。这是一些示例文本。
       这是一些示例文本。这是一些示例文本。
       这是一些示例文本。这是一些示例文本。
       这是一些示例文本。这是一些示例文本。
       这是一些示例文本。这是一些示例文本。
   

3、列表组

1）向列表组添加国徽

  

      
免费域名注册 20
      
免费 Window 空间托管
      
每年更新成本
  

2）向列表组添加链接

  

      免费域名注册
      免费 Window 空间托管
      每年更新成本
  

3）向列表组添加自定义内容

  

     
Cras justo odio
     
Dapibus ac facilisis in
     
Morbi leo risus
     
Porta ac consectetur ac
     
Vestibulum at eros
  

4、面板

1）面板标题

  
标题

2）面板脚注

  
by zichen

3）面板主题

  
...
  
...
  
...
  
...
  
...

4）带表格的面板

  

      
Panel heading
      

          

              
学号
              
姓名
              
年龄
          
      
  

5）带列表组的面板

  

      
标题
      
面板内容显示区域
      

          
免费域名注册
          
免费 Window 空间托管
          
图像的数量
          
24*7 支持
          
每年更新成本
      
      
by zichen
  

5、响应式嵌入组件

根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定 内容的尺寸，能够在各种设备上缩放。
这些规则可以直接用于

6、well

1）基本的well

  
您好，我在大的 Well 中！

2）尺寸大小 well-lg well-sm

  
您好，我在大的 Well 中！
  
您好，我在大的 Well 中！