Bootstrap分页，标签，徽章，屏幕，缩略图，警告，进度条，多媒体对象，列表组，面板，Well

分页

分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页

class	描述
.pagination	在页面上显示分页
.disabled, .active	通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面
.pagination-lg, .pagination-sm	获取不同大小的项

    
«
    
1
    
2
    
3
    
4
    
5
    
»

类	描述
.pager	一个简单的分页链接，链接居中对齐
.previous	.pager 中上一页的按钮样式，左对齐
.next	.pager 中下一页的按钮样式，右对齐

    
← Older
    
Newer →

标签

标签可用于计数、提示或页面上其他的标记显示

类	描述
.label label-default	默认的灰色标签
.label label-primary	"primary" 类型的蓝色标签
.label label-success	"success" 类型的绿色标签
.label label-info	"info" 类型的浅蓝色标签
.label label-warning	"warning" 类型的黄色标签
.label label-danger	"danger" 类型的红色标签

默认标签
主要标签
成功标签
信息标签
警告标签
危险标签

徽章

徽章与标签相似，主要的区别在于徽章的边角更加圆滑

    
消息 42
    

超大屏幕

该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）

   

        
欢迎登陆页面！
        
这是一个超大屏幕（Jumbotron）的实例。
        

        学习更多
      
   

在所有的 .container class 外使用 .jumbotron class可以获得占用全部宽度且不带圆角的超大屏幕

缩略图

需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为在网格中布局图像、视频、文本等，提供了一种简便的方式

• 在图像周围添加带有 class .thumbnail 的 标签。
• 这会添加四个像素的内边距（padding）和一个灰色的边框。
• 当鼠标悬停在图像上时，会动画显示出图像的轮廓。

警告

警告（Alerts）向用户提供了一种定义消息样式的方式。它们为典型的用户操作提供了上下文信息反馈

    
        ×
    
    成功！很好地完成了提交。


    
        ×
    
    信息！请注意这个信息。


    
        ×
    
    警告！请不要提交。


    
        ×
    
    错误！请进行一些更改。

进度条

• 添加一个带有 class .progress 的
  。
• 在上面的
  内，添加一个带有 class .progress-bar 的空的

  。
• 添加一个带有百分比表示的宽度的 style 属性，例如 style="60%"; 表示进度条在 60% 的位置
  默认进度条

    

        40% 完成
    

带条纹的进度条

• 添加一个带有 class .progress 和 .progress-striped 的
• 在上面的
  内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的

  。其中，* 可以是 success、info、warning、danger

    

        90% 完成（成功）
    


    

        30% 完成（信息）
    


    

        20% 完成（警告）
    


    

        10% 完成（危险）
    

动画的进度条

• 添加一个带有 class .progress 和 .progress-striped 的
  。同时添加 class .active

    

        40% 完成
    

堆叠的进度条

• 把多个进度条放在相同的 .progress 中即可实现堆叠

    

        40% 完成
    
    

        30% 完成（信息）
    
    

        20% 完成（警告）
    

多媒体对象

在组件中使用图文混排，图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排

• .media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。
• .media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表

    

        
            
        
        

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

                
                    
                
                

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

                        
                            
                        
                        

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

                
                    
                
                

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

        
            
        
        

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

列表组

列表组件用于以列表形式呈现复杂的和自定义的内容

• 向元素
  添加 class .list-group。
  • 向
  • 添加 class .list-group-item。
    可以向任意的列表项添加徽章组件，它会自动定位到右边。只需要在
  • 元素中添加 即可

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

  
  
  

  我们可以向上面已添加链接的列表组添加任意的 HTML 内容

  
      
          
  
              入门网站包
          
      
      
          
  
              免费域名注册
          
          
  
              您将通过网页进行免费域名注册。
          
      
  
  

  

  面板

  面板组件用于把 DOM 组件插入到一个盒子中
  基本面板

  
       
  
          
  
              带有 title 的面板标题
          
      
      
  
          这是一个基本的面板
      
      
  面板脚注
  
  

  
  
  带语境色彩的面板

  
      
  
          
  面板标题
      
      
  
          这是一个基本的面板
      
  
  
      
  
          
  面板标题
      
      
  
          这是一个基本的面板
      
  
  
      
  
          
  面板标题
      
      
  
          这是一个基本的面板
      
  
  
      
  
          
  面板标题
      
      
  
          这是一个基本的面板
      
  
  
      
  
          
  面板标题
      
      
  
          这是一个基本的面板
      
  
  

  
  
  带表格的列表

  
      
  
          
  面板标题
      
      
  
          这是一个基本的面板
      
      
  
          
  产品
  价格 
          
  产品 A
  200
          
  产品 B
  400
      
  
  

  
  
  带列表的面板

  
      
  面板标题
      
  
          
  这是一个基本的面板内容。这是一个基本的面板内容。
              这是一个基本的面板内容。这是一个基本的面板内容。
              这是一个基本的面板内容。这是一个基本的面板内容。
              这是一个基本的面板内容。这是一个基本的面板内容。
          
      
      
  
          
  免费域名注册
          
  免费 Window 空间托管
          
  图像的数量
          
  24*7 支持
          
  每年更新成本
      
  
  

  

  Well

  Well 是一种会引起内容凹陷显示或插图效果的容器

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