#每日技术学习# Bootstrap学习：分页导航、标签、徽章、缩略图、警示框

Date | 2018-11-02

一、分页导航

分页导航几乎在哪个网站都可见。好的分页导航能给用户带来更好的用户体验。在Bootstrap框架中提供了两种分页导航：
☑ 带页码的分页导航
☑ 带翻页的分页导航

1.1 带页码的分页导航

带页码的分页导航

在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法，代码：

  
«第一页
  
11
  
12
  
13
  
14
  
15
  
最后一页»
 

注意：要禁用当前状态和禁用状态不能点击，我们还要依靠js来实现，或者将这两状态下的a标签换成span标签，如上代码所示，否则就只是看起来不能点击，但实际还是可以点击。

• 大小设置
  在Bootstrap框架中，也可以通过几个不同的情况来设置其大小。类似于按钮一样：
  1、通过在ul中加pagination-lg让分页导航变大
  2、通过在ul中加pagination-sm让分页导航变小

---

1.2 翻页分页导航

翻页分页导航

如图，翻页分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮。在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类：

  
上一页
  
下一页

---

二、标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。如下图所示：

标签

使用方法很简单，你可以在使用span这样的行内标签：

Example heading New

默认标签
主要标签
成功标签
信息标签
警告标签
错误标签

效果如图：

各种标签效果

---

三、徽章

徽章

在Bootstrap框架中，把这种效果称作为徽章效果，使用“badge”样式来实现。
使用方法，其实也没什么太多可说的，你可以像标签一样，使用span标签来制作，然后为他加入.badge类：

Inbox 42

可以通过pull-right来让徽章在最右边显示：

pull-right效果

代码：

      

        
          42
          Home
        
      
      
Profile
      

        
          3
          Messages
        
      

---

三、缩略图

缩略图在网站中最常用的地方就是产品列表页面，在Bootstrap中是通过.thumbnail样式配合bootstrap的网格系统来实现。

3.1 基本缩略图

示例代码：

上面的结构表示的是在宽屏幕（可视区域大于768px）的时候，一行显示四个缩略图：

宽屏状态下

在窄屏（可视区域小于768px）的时候，一行只显示两个缩略图：

窄屏状态下

3.2 带标题、内容、按钮的缩略图

Bootstrap还可以让缩略图配合标题、描述内容，按钮等：

带标题、内容、按钮的缩略图

例如，在3.1中代码的基础上添加如下代码

    

        

            
                
            
            

                
Bootstrap框架系列教程
                
Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...
                

                    开始学习
                    正在学习
                
            
        
    …
    

---

四、警示框

4.1 默认警示框

Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果：

• 1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；
• 2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；
• 3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；
• 4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。

实例代码：

    请修改相应信息

4.2 可关闭的警示框

在默认的警示框里面添加一个关闭按钮。三个步骤：
1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。
2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。
3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。
实例代码：

    ×
    恭喜您操作成功！

4.3 警示框的链接

在警示框中加入链接地址，用来告诉用户跳到某一个地方或新的页面。在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理，并且颜色相应加深。
实现方法：
Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示。
实例代码：

    Well done! 
    You successfully read 
    this important alert message.

---