码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap学习之路(2)---导航组件

时间:2014-08-26 13:04:26      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   java   使用   io   strong   

在bootstrap中,导航条的样式都依赖于.nav类,而样式又分为多种,如:

标签页的样式为:.nav-tabs

<ul class="nav nav-tabs">
          <li class="active"><a href="http://www.weixh.net">微笑话</a></li>
          <li><a href="#">图文</a></li>
          <li><a href="#">文字</a></li>
        </ul>

这是一个最简单的标签样式的导航,li标签中的active则是当前页的状态,运行效果如下:
bubuko.com,布布扣

胶囊式的标签页则只需把.nav-tabs类换成.nav-pills类即可,运行效果如下:

bubuko.com,布布扣

当然,胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .nav-stacked 类。

<ul class="nav nav-pills nav-stacked">
          <li class="active"><a href="http://www.weixh.net">微笑话</a></li>
          <li><a href="#">图文</a></li>
          <li><a href="#">文字</a></li>
        </ul>

运行效果如下:
bubuko.com,布布扣

两端对齐的标签页:

在大于 768px 的屏幕上,通过 添加.nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上,导航链接呈现堆叠样式。

<div class="container-fluid">
        <ul class="nav nav-tabs nav-justified">
          <li class="active"><a href="http://www.weixh.net">微笑话</a></li>
          <li><a href="#">图文</a></li>
          <li><a href="#">文字</a></li>
        </ul>
    </div>

运行效果如下:

屏幕大于768px时
bubuko.com,布布扣

说明一下,第三个选项卡是鼠标经过的样式,这些都是可以重写的,现在说的只是入门。

当屏幕变小时,则自动变成堆叠的样式,是不是瞬间觉得很高大上了呢?

bubuko.com,布布扣

 

默认样式的导航条:

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewport)宽度增加时逐渐变为水平展开模式。

当浏览器视口(viewport)的宽度小于 @grid-float-breakpoint 值时,导航条内部的元素变为折叠排列,也就是变现为移动设备展现模式;当浏览器视口(viewport)的宽度大于 @grid-float-breakpoint 值时,导航条内部的元素变为水平排列,也就是变现为非移动设备展现模式。通过调整源码中的这个值,就可以控制导航条何时堆叠排列,何时水平排列。默认值是 768px (小屏幕 -- 或者说是平板 --的最小值,或者说是平板)。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://www.weixh.net"><img src="images/waplogo.png" alt="微笑话" />微笑话</a>
        </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav nav-pills">
           <li class="active"><a href="http://www.weixh.net">全部</a></li>
                <li><a href="#">图文</a></li>
                <li><a href="#">文字</a></li>
                </ul>
          </div>
        </nav>

解释:

此响应式导航条依赖折叠(collapse)插件,你所使用的 Bootstrap 版本中应该包含此插件。
.navbar-default类是导航的默认样式,也可以重新定义自己样式加进去;

.navbar-fixed-top是导航固定到顶部为了增强可访问性,务必给每个导航条加上 属性。

依赖 JavaScript

如果 JavaScript 被禁用,并且视口(viewport)足够窄,致使导航条折叠起来,导航条将不能被打开.navbar-collapse内所包含的内容也将不可见。

class="navbar-toggle collapsed"是折叠的样式,data-target="#bs-example-navbar-collapse-1"是指折叠的目标;

运行效果如下:

当窗口够大时,导航平铺开来:

bubuko.com,布布扣

当屏幕变小时,导航自动折叠,显示导航开关:

bubuko.com,布布扣

点击开关,打开折叠的导航:

bubuko.com,布布扣

是不是觉得很方便呢?先啰嗦到这吧,如果觉得还不错的话,麻烦点个赞,如果有什么说不到位的地方,欢迎回复批评指正。大家也可以到我最近瞎搞的笑话网站去看看笑话什么的:www.weixh.net,下次说列表组件。

Bootstrap学习之路(2)---导航组件

标签:style   blog   http   color   os   java   使用   io   strong   

原文地址:http://www.cnblogs.com/sanjuantianshu/p/3936871.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!