美文网首页
#每日技术学习# Bootstrap学习:分页导航、标签、徽章、

#每日技术学习# Bootstrap学习:分页导航、标签、徽章、

作者: 筱平哥哥 | 来源:发表于2018-11-03 11:00 被阅读14次

    Date | 2018-11-02

    一、分页导航

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

    1.1 带页码的分页导航

    带页码的分页导航

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

    <ul class="pagination">
      <li><a href="#">«第一页</a></li>
      <li><a href="#">11</a></li>
      <li><a href="#">12</a></li>
      <li class="active"><span>13</span></li>
      <li><a href="#">14</a></li>
      <li><a href="#">15</a></li>
      <li class="disabled"><a href="#">最后一页»</a></li>
    </ul> 
    

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

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

    1.2 翻页分页导航

    翻页分页导航

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

    <ul class="pager">
      <li class="disabled"><span>上一页</span></li>
      <li><a href="#">下一页</a></li>
    </ul>
    

    二、标签

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


    标签

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

    <h3>Example heading <span class="label label-default">New</span></h3>
    <!--其他类型标签的代码-->
    <span class="label label-default">默认标签</span>
    <span class="label label-primary">主要标签</span>
    <span class="label label-success">成功标签</span>
    <span class="label label-info">信息标签</span>
    <span class="label label-warning">警告标签</span>
    <span class="label label-danger">错误标签</span>
    

    效果如图:


    各种标签效果

    三、徽章

    徽章
    在Bootstrap框架中,把这种效果称作为徽章效果,使用“badge”样式来实现。
    使用方法,其实也没什么太多可说的,你可以像标签一样,使用span标签来制作,然后为他加入.badge类:
    <a href="#">Inbox <span class="badge">42</span></a>
    

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

    pull-right效果
    代码:
    <ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
          <li class="active">
            <a href="#">
              <span class="badge pull-right">42</span>
              Home
            </a>
          </li>
          <li><a href="#">Profile</a></li>
          <li>
            <a href="#">
              <span class="badge pull-right">3</span>
              Messages
            </a>
          </li>
    </ul>
    

    三、缩略图

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

    3.1 基本缩略图

    示例代码:

    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
                </a>
            </div>
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
                </a>
            </div>
        </div>
    </div>
    

    上面的结构表示的是在宽屏幕(可视区域大于768px)的时候,一行显示四个缩略图:


    宽屏状态下

    在窄屏(可视区域小于768px)的时候,一行只显示两个缩略图:


    窄屏状态下

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

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


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

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

    <div class="container">
        <div class="row">
            <div class="col-xs-6 col-md-3">
                <a href="#" class="thumbnail">
                    <img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=c56d7638b0b7d0a27bc9059dfbee760d/3b292df5e0fe9925d46873da36a85edf8cb171d7.jpg" style="height: 180px; width: 100%; display: block;" alt="">
                </a>
                <div class="caption">
                    <h3>Bootstrap框架系列教程</h3>
                    <p>Bootstrap框架是一个优秀的前端框,就算您是一位后端程序员或者你是一位不懂设计的前端人员,你也能依赖于Bootstrap制作做优美的网站...</p>
                    <p>
                        <a href="##" class="btn btn-primary">开始学习</a>
                        <a href="##" class="btn btn-info">正在学习</a>
                    </p>
                </div>
            </div>
        …
        </div>
    </div>
    

    四、警示框

    4.1 默认警示框

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

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

    实例代码:

    <div class="alert alert-info">
        请修改相应信息
    </div>
    

    4.2 可关闭的警示框

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

    <div class="alert alert-success alert-dismissable" role="alert">
        <button class="close" type="button" data-dismiss="alert">&times;</button>
        恭喜您操作成功!
    </div>
    

    4.3 警示框的链接

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

    <div class="alert alert-success" role="alert">
        <strong>Well done!</strong> 
        You successfully read 
        <a href="#" class="alert-link">this important alert message</a>.
    </div>
    

    相关文章

      网友评论

          本文标题:#每日技术学习# Bootstrap学习:分页导航、标签、徽章、

          本文链接:https://www.haomeiwen.com/subject/wppotqtx.html