Bootstrap学习之路（2）-导航组件_html/css_WEB-ITnose

PHP中文网

发布时间：2016-06-24 11:59:04

1401人浏览过

来源于php中文网

原创

bootstrap学习之路（2）-导航组件_html/css_web-itnose

在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则是当前页的状态，运行效果如下：

立即学习“前端免费学习笔记（深入）”；

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

当然，胶囊是标签页也是可以垂直方向堆叠排列的。只需添加 .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>

运行效果如下：

两端对齐的标签页：

在大于 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时

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

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

Yourware

专注于AI编程作品部署与分享的云托管平台

下载

默认样式的导航条：

导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（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">@@##@@
          微笑话</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"是指折叠的目标；

运行效果如下：

当窗口够大时，导航平铺开来：

Bootstrap学习之路（2）-导航组件_html/css_WEB-ITnose

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