zoukankan      html  css  js  c++  java
  • bootstrap基础(五)

    导航条、分页导航

    一、导航条基础

    导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。

    <!--基本导航条-->
    <div class="navbar navbar-default" role="navigation">
         <ul class="nav navbar-nav">
             <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
         </ul>
    </div>
    <div class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
           <a href="##" class="navbar-brand">慕课网</a>
       </div>
         <ul class="nav navbar-nav">
             <li class="active"><a href="##">网站首页</a></li>
          <li class="dropdown">
            <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="##">CSS3</a></li>
                <li><a href="##">JavaScript</a></li>
                <li class="disabled"><a href="##">PHP</a></li>
            </ul>
         </li>
          <li><a href="##">名师介绍</a></li>
          <li><a href="##">成功案例</a></li>
          <li><a href="##">关于我们</a></li>
         </ul>
      <form action="##" class="navbar-form navbar-left" rol="search">
           <div class="form-group">
               <input type="text" class="form-control" placeholder="请输入关键词" />
           </div>
         <button type="submit" class="btn btn-default">搜索</button>
       </form>
    </div>

    二、基础导航条

    使用方法:

    在制作一个基础导航条时,主要分以下几步:

    第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

    第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”

    <div class="navbar navbar-default" role="navigation">
         <ul class="nav navbar-nav">
             <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
         </ul>
    </div>

     三、为导航条添加标题、二级菜单及状态

    在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过“navbar-header”和“navbar-brand”来实现,

    <!--导航条状态及二级菜单-->
    <div class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
           <a href="##" class="navbar-brand">慕课网</a>
       </div>
        <ul class="nav navbar-nav">
             <li class="active"><a href="##">网站首页</a></li>
            <li class="dropdown">
              <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="##">CSS3</a></li>
                <li><a href="##">JavaScript</a></li>
                <li class="disabled"><a href="##">PHP</a></li>
              </ul>
           </li>
           <li><a href="##">名师介绍</a></li>
           <li><a href="##">成功案例</a></li>
           <li><a href="##">关于我们</a></li>
        </ul>
    </div>

    四、带表单的导航条

     在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单。

    大家看到了“navbar-left”让表单左浮动,更好实现对齐。在Bootstrap框架中,还提供了“navbar-right”样式,让元素在导航条靠右对齐。

    <div class="navbar navbar-default" role="navigation">
       <div class="navbar-header">
           <a href="##" class="navbar-brand">慕课网</a>
       </div>
        <ul class="nav navbar-nav">
           <li class="active"><a href="##">网站首页</a></li>
           <li class="dropdown">
              <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="##">CSS3</a></li>
                <li><a href="##">JavaScript</a></li>
                <li class="disabled"><a href="##">PHP</a></li>
              </ul>
          </li>
          <li><a href="##">名师介绍</a></li>
          <li><a href="##">成功案例</a></li>
          <li><a href="##">关于我们</a></li>
         </ul>
         <form action="##" class="navbar-form navbar-left" rol="search">
               <div class="form-group">
                  <input type="text" class="form-control" placeholder="请输入关键词" />
               </div>
            <button type="submit" class="btn btn-default">搜索</button>
         </form>
    </div>

     五、导航条中的按钮、文本和链接

    框架提供了三种其他样式:

    1、导航条中的按钮navbar-btn

    2、导航条中的文本navbar-text

    3、导航条中的普通链接navbar-link

    但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题。

    六、固定导航条

    很多情况之一,设计师希望导航条固定在浏览器顶部或底部,这种固定式导航条的应用在移动端开发中更为常见。Bootstrap框架提供了两种固定导航条的方式:

    .navbar-fixed-top:导航条固定在浏览器窗口顶部

    .navbar-fixed-bottom:导航条固定在浏览器窗口底部

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="navbar-header">
           <a href="##" class="navbar-brand">慕课网</a>
       </div>
         <ul class="nav navbar-nav">
             <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
         </ul>
    </div>
    <div class="content">我是内容</div>
    <div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
       <div class="navbar-header">
           <a href="##" class="navbar-brand">慕课网</a>
       </div>
         <ul class="nav navbar-nav">
             <li class="active"><a href="##">网站首页</a></li>
            <li><a href="##">系列教程</a></li>
            <li><a href="##">名师介绍</a></li>
            <li><a href="##">成功案例</a></li>
            <li><a href="##">关于我们</a></li>
         </ul>
    </div> 

    七、响应式导航条

    使用方法:

    1、保证在窄屏时需要折叠的内容必须包裹在带一个div内,并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

    2、保证在窄屏时要显示的图标样式(固定写法):

    <button class="navbar-toggle" type="button" data-toggle="collapse">
      <span class="sr-only">Toggle Navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    3、并为button添加data-target=".类名/#id名",究竞是类名还是id名呢?由需要折叠的div来决定。

    需要折叠的div代码段:

    <div class="collapse navbar-collapse" id="example">
          <ul class="nav navbar-nav"></ul>
    </div>

    窄屏时显示的图标代码段:

    <div class="collapse navbar-collapse example" >
          <ul class="nav navbar-nav"></ul>
    </div>

    窄屏时要显示的图标:

    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
      ...
    </button>
    <div class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
          <!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 -->
           <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
             <span class="sr-only">Toggle Navigation</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
           <!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 -->
           <a href="##" class="navbar-brand">慕课网</a>
      </div>
      <!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 -->
      <div class="collapse navbar-collapse navbar-responsive-collapse">
            <ul class="nav navbar-nav">
                  <li class="active"><a href="##">网站首页</a></li>
                  <li><a href="##">系列教程</a></li>
                  <li><a href="##">名师介绍</a></li>
                  <li><a href="##">成功案例</a></li>
                  <li><a href="##">关于我们</a></li>
             </ul>
      </div>
    </div>

    大屏幕:

    小屏幕:

    八、反色导航条

    反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条,与默认的导航条相比,使用方法并无区别,只是将navbar-deafult类名换成navbar-inverse。其变化只是导航条的背景色和文本做了修改。

    <div class="navbar navbar-inverse" role="navigation">
      <div class="navbar-header">
         <a href="##" class="navbar-brand">慕课网</a>
      </div>
      <ul class="nav navbar-nav">
          <li class="active"><a href="">首页</a></li>
        <li><a href="">教程</a></li>
        <li><a href="">关于我们</a></li>
      </ul>
    </div>

    九、分页导航

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

          带页码的分页导航

          带翻页的分页导航

    1、带页码的分页导航

    使用方法:

    平时很多同学喜欢用div>adiv>span结构来制作带页码的分页导航。不过,在Bootstrap框架中使用的是ul>li>a这样的结构,在ul标签上加入pagination方法:

    <ul class="pagination">
       <li><a href="#">&laquo;</a></li>
       <li><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
       <li><a href="#">4</a></li>
       <li><a href="#">5</a></li>
       <li><a href="#">&raquo;</a></li>
    </ul>

    大小设置:

    在Bootstrap框架中,也可以通过几个不同的情况来设置其大小。类似于按钮一样:

    1、通过“pagination-lg”让分页导航变大;

    2、通过“pagination-sm”让分页导航变小:

    <ul class="pagination pagination-lg"></ul>
    <ul class="pagination"></ul>
    <ul class="pagination pagination-sm"></ul>

    2、翻页分页导航

    这种分页导航常常在一些简单的网站上看到,比如说个人博客,杂志网站等。这种分页导航是看不到具体的页码,只会提供一个“上一页”和“下一页”的按钮。

    在实际使用中,翻页分页导航和带页码的分页导航类似,为ul标签加入pager类:

    <ul class="pager">
       <li><a href="#">&laquo;上一页</a></li>
       <li><a href="#">下一页&raquo;</a></li>
    </ul>

    对齐样式设置:

    默认情况之下,翻页分页导航是居中显示,但有的时候我们需要一个居左,一个居右。Bootstrap框架提供了两个样式:

        previous:让“上一步”按钮居左

        next:让“下一步”按钮居右

    具体使用的时候,只需要在li标签上添加对应类名即可:

    <ul class="pager">
       <li class="previous"><a href="#">&laquo;上一页</a></li>
       <li class="next"><a href="#">下一页&raquo;</a></li>
    </ul>

    状态样式设置:

    和带页码分页导航一样,如果在li标签上添加了disabled类名的时候,分页按钮处于禁用状态,但同样不能禁止其点击功能。你可以通过js来处理,或将a标签换成span标签。

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

    十、标签

    颜色样式设置:

    和按钮元素button类似,label样式也提供了多种颜色:

         label-deafult:默认标签,深灰色

         label-primary:主要标签,深蓝色

         label-success:成功标签,绿色

         label-info:信息标签,浅蓝色

         label-warning:警告标签,橙色

         label-danger:错误标签,红色

    <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> 

    十一、徽章

    徽章效果,使用“badge”样式来实现。

    使用方法:

    使用方法,其实也没什么太多可说的,你可以像标签一样,使用span标签来制作,然后为他加入badge类:

    <a href="#">Inbox <span class="badge">42</span></a>

  • 相关阅读:
    Canvas
    FastDFS 下载与安装
    Oracle 表空间错误集锦
    Sql Server 网络配置
    telnet 功能启用并测试端口是否正常
    UIBarButtonItem 上按钮切换/隐藏的简单例子 转载
    UIScrollView详解
    warning:performSelector may cause a leak because its selector is unknown
    dispatch_once优化代码性能 转
    UIView 和 CALayer的那点事
  • 原文地址:https://www.cnblogs.com/wangyuxue/p/13271775.html
Copyright © 2011-2022 走看看