当前位置：Gxlcms > html代码 > Bootstrap入门笔记之（五）导航条、分页导航_html/css_WEB-ITnose

Bootstrap入门笔记之（五）导航条、分页导航_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：12人阅读

导航条

导航条（navbar）和我们在上一个笔记中介绍的导航（nav）相比，就多了一个 “条” 字。其实在Bootstrap框架中他们有着一定的区别。

在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

基础导航条

实际上，导航条和导航在外观上的差别并不是那么的大，但是在实际使用中导航条要比导航复杂得多。下面就来实现一个最基础的导航条。

可以达到的效果是这样的：

宽屏：

窄屏：

在制作一个基础导航条时，主要注意以下几点：

  1. 首先在制作导航的列表(
      )基础上添加类名 .navbar-nav
    • 在列表外部添加一个容器（div）在这里允许的话 推荐使用
    • .navbar 类的主要功能就是设置左右padding和圆角等效果，通过 .navbar-default 来进行控制导航条的颜色比如还有 .navbar-inverse 。（有兴趣的可以去看看源码）

带标题、二级菜单

在Web页面制作中，一般都可以在菜单前面看到有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过 .navbar-header 和 .navbar-brand 来实现，如： 

    WEB开发

当然也可以用来做logo， 中文官网描述 ，在此不进行详细描述。

二级菜单自然不用多说，在上一篇博客中已经进行了详细说明，若还是不太了解的话，可以再去翻翻我的上一篇博客，我们一起来看看下面这段代码以及能实现的效果：（注意这里使用的是 navbar-inverse 反色的导航条）

效果如下：

带表单

我们常常在导航条中都能看到搜索表单，比如知乎，新浪微博等等都具有，Bootstrap框架当然不可能缺掉这样的东西。使用方法也非常简单：

在Bootstrap框架中提供了一个 .navbar-form ，在 .navbar 容器中放置一个带有 .navbar-form 类名的表单；再添加 .navbar-left 让表单左浮动，更好实现对齐。

在Bootstrap中，还提供了 .navbar-right 样式，让元素在导航条靠右对齐。

把这段代码复制到代码当中看看效果吧：

     
    
    
按钮、文本和链接
    
除了上面的一些样式之外，bootstrap框架提供了三种其他样式：
    
             
  1.  导航条中的按钮 navbar-btn ，使不在 
     中的按钮在导航条里垂直居中 
    2.      
  2.  导航条中的文本 navbar-text ，一般使用 
     元素，达到最优的行距 
    3.      
  3.  导航条中的普通链接 navbar-link ，非导航的链接，添加这个类，可以有正确的默认颜色与反色设置 
    4.     
    
 但这三种样式在框架中使用时受到一定的限制，需要和 navbar-brand 、 navbar-nav 配合起来使用。而且 对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题 。 
    
固定导航条
    
有时，我们希望导航条固定在浏览器顶部或底部，Bootstrap为我们方便的提供了两个类来实现这样的样式：
    
             
  1.  .navbar-fixed-top ：导航条固定在浏览器窗口顶部 
    2.      
  2.  .navbar-fixed-bottom ：导航条固定在浏览器窗口底部 
    3.     
    
使用方法很简单，只需要在制作导航条最外部容器（navbar）上追加对应的类名即可。 
    
         
           
     
    
    
 这个固定的导航条会 遮住页面上的其它内容 ，除非你给  元素底部设置了 padding 。提示：导航条的 默认高度 是 50px。如： body { padding-bottom: 70px; } ，当然你也可以使用你自己的值。 
    
响应式导航条
    
 在上面的例子中，导航条就仅仅能大屏幕下有一个不错的效果，在屏幕变小的情况下，还 直接把所有的导航项直接展现出来就不适合了 。为了有一个更好的显示效果，响应式的导航条设计也就随之而来。我们先来看看效果，再一步一步分析它！ 
    
  
    
 窄屏时，点击右边的按钮图标可展开，效果与上面的展开效果除了 active 状态不再溢出容器外，其他基本相同。实现代码如下： 
    
         
           
     
    
    
分析：
    
             
  1.  和普通导航条一样，最外层使用 
    2.      
  2.  保证在窄屏时 需要折叠的内容必须 包裹在带一个div内，并且为这个div加入 .collapse 、 .navbar-collapse 两个类名。最后为这个div 添加一个class类名或者id名 。 
    3.      
  3.  
    保证在窄屏时要显示的图标样式（固定写法）：
          
                 
                   
           
          
     
    4.      
  4.  
     并为button添加 data-target=”.类名/#id名” ，究竞是类名还是id名呢？由 需要折叠的div 来决定。（这里很关键，你可以把上面的代码在这里进行修改，会发现无法展开） 
     
    5.     
    
分页导航
    
分页导航几乎在所有的网站都可以看到，好的分页导航可以给用户带来更好额用户体验，还可以方便爬虫在网页中进行搜索。
    
带页码的分页导航
    
 带页码的分页导航，应该是最常见的一种分页导航，特别是在列表页内容很多的时候，会给用户提供带页码的分页导航方式，在Bootstrap中使用的是 ul>li>a 这样的结构，在ul标签上加入 pagination 类： 
    
         
           
        
  • «第一页
    •     
  • 6
    •     
  • 7
    •     
  • 8
    •     
  • 9
    •     
  • 10
    •     
  • 最后一页»
     
    
    
实现效果如下：
    
  
    
 可以看到同样会有 hover 、 active 、 disabled 等等状态，当然它也可以调整大小：在外层容器中的 .pagination 类后，添加 .pagination-lg 让分页导航变大； .pagination-sm 让分页导航变小： 
    
翻页分页导航
    
 其实这种方式，就是看不到具体的页码，只会提供一个 上一页 和 下一页 的按钮。 
    
 使用方式很简单，也就是在ul标签上添加 pager 类： 
    
         
           
        
  • «上一页
    •     
  • 下一页»
     
    
    
 它默认是居中显示的，如果我们需要一个居左一个居右显示的话，添加两个样式： previous 让“上一步”按钮居左； next 让“下一步”按钮居右。（同样可以使用 disabled 表示禁用状态） 
    
         
           
            
     
    
    
其他
    
标签
    
         
在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息，比如说在导航上添加了一个新导航项，可能就会加一个“new”标签，来告诉用户。这是新添加的导航项。
     
 在Bootstrap专门将这样的效果提取成为了单独的标签组件。可以使用  这样的行内标签添加 .label 类来控制大小，再使用情景类来控制高亮显示的颜色如： label-default 、 label-danger 等等（在原来笔记中说到过这样的情景类，只不过这里需要加上不同的前缀） 
    
    
  
    
徽章（角标）
    
 其实和上面的标签效果很大一部分是类似的，一般用作信息提示，例如剩余多少未读信息等等，也就是我们常常能在右上角看到的未读信息提示。在Bootstrap中，把这种效果称作为徽章效果，使用 badge 类来实现。 
    
 给链接、导航等元素嵌套  元素，可以很醒目的展示新的或未读的信息条目。 
    
         
           
Inbox 42
     
    
    
  
    
 通过查看源码，我们可以发现Bootstrap同样使用 :empty 伪元素，来设置当没有内容的时候隐藏： 
    
         
           
.badge:empty { display: none;}
     
    
    
 需要注意的是IE8 不支持 :empty 选择符，所以不会默认隐藏； 
    
Bootstrap 中的徽章会适配导航元素的激活状态。
    
         
           
            
  • Profile
    •     
  • Messages 3
     
    
    
  
    
 好了《导航条、分页导航》的学习到此就结束了，下面需要学习Bootstrap中其他的一些比较零散的 内置组件 。 
    
继续坚持，加油！                    


                  

	 	
                    

                        
                    

                    
                    
                    
                    
                

              
                    

                
                  

                    

                        
人气教程排行

                    

                    

			
                        
                    

                

            

            
        
    
  



   本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！