本网站只能被运行在支持JavaScript脚本的环境中

第5章 下拉菜单及导航条设计组件

本节概述

本节介绍如何使用Bootstrap 3提供的下拉菜单及导航条设计组件。

Bootstrap 3中的设计组件

在Bootstrap 3中,提供诸如标签、标题、导航条、超大屏幕、菜单等各种设计组件。只需为块元素指定相应的class,我们就可以轻松使用这些设计组件。

但是,如果不书写CSS或LESS,即不进行设计的话,如果全部依靠Bootstrap,则外观不一定如开发者所愿,尤其是在图像、照片等视觉元素较少而以文字为主的网站中。因此,在使用这些组件时,我们需要考虑如何使这些组件呈现出我们所想要的视觉效果。

在Bootstrap 3中,有时为了让设计组件正常工作,内部使用jQuery代码。在使用这些设计组件时,我们需要在页面上依序调用jQuery核心脚本文件及bootstrap.min.js脚本文件。

下拉菜单

现在介绍如何制作可自由开关的下拉菜单。需要导入Bootstrap的下拉框菜单组件,在使用该组件时,需要依序引用jQuery脚本文件及bootstrap.min.js脚本文件。

制作下拉菜单的制作步骤如下所示:

1.准备外壳

首先需要为用于封装下拉框菜单的div元素指定dropdown这个class。通过在其中放置必要的元素来制作下拉菜单。

下拉菜单默认为关闭状态,可以通过为div元素指定open这个class的方法来使菜单处于打开状态。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">新建</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">保存</a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">共享</a></li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">删除</a></li>
    </ul>
</div>

2.准备按钮

准备用于实现菜单头部的按钮。

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    下拉菜单
    <span class="caret"></span><!--←用于显示「▼」图标-->
</button>

这段代码中的重要之处在于data-toggle属性值必须为dropdown。如果点击具有该属性的元素,可以切换下拉菜单的打开与关闭状态。另外,并不介意使用button元素还是a元素或其他元素。

3.制作下拉菜单主体

使用ul元素来制作下拉菜单的主体部分。可以通过为空li元素指定divider这个class的方法来制作分隔条。

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">新建</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">保存</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">共享</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">删除</a></li>
</ul>

为菜单项添加标题

可以通过为li元素指定dropdown-header这个class的方法为菜单项添加标题。

<li role="presentation" class="dropdown-header">文件</li>

在按钮组中嵌套下拉菜单

可以在按钮组中嵌套下拉菜单。请注意这时代码书写方法稍有不同。

<div class="btn-group">
    <button type="button" class="btn btn-default">一</button>
    <button type="button" class="btn btn-default">二</button>
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            下拉菜单
           <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">三</a></li>
            <li><a href="#">四</a></li>
        </ul>
    </div>
</div>

定义按钮大小

可以使用.btn-large、.btn-sm 或 .btn-xs这几个class指定按钮大小。

<div class="btn-group">
    <button class="btn btn-default dropdown-toggle btn-lg" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        ...
    </ul>
    <button class="btn btn-default dropdown-toggle btn-sm" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        ...
    </ul>
    <button class="btn btn-default dropdown-toggle btn-xs" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        ...
    </ul>
</div>

上拉菜单

菜单也可以往上拉伸,只需要简单地向class为“.btn-group”的容器元素添加使用“ .dropup”class 即可。

<div class="dropdown  dropup">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        ...
    </ul>
</div>

分割的下拉菜单

分割的下拉菜单使用与上面所讲的下拉菜单大致相同,但是对下拉菜单添加了默认功能。点击下拉箭头的左边按钮可执行默认功能,点击下拉箭头可打开下拉菜单。

<div class="btn-group">
    <button type="button" class="btn btn-default">默认</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">切换下拉菜单</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">功能</a></li>
        <li><a href="#">另一个功能</a></li>
        <li><a href="#">其他</a></li>
        <li class="divider"></li>
        <li><a href="#">分离的链接</a></li>
    </ul>
</div>

在输入框中放置下拉菜单

如果要在输入框组中添加下拉菜单,只需要简单地在一个class属性值为input-group-btn的span元素中放置下拉菜单即可。

<form role="form">
    <div class="row">
        <div class="col-lg-6">
            <div class="input-group">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        下拉菜单 
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu">
                        <li><a href="#">功能</a></li>
                        <li><a href="#">另一个功能</a></li>
                        <li><a href="#">其他</a></li>
                        <li class="divider"></li>
                        <li><a href="#">分离的链接</a></li>
                    </ul>
                </div><!-- /btn-group -->
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
</form>

导航条

在Bootstrap中制作菜单时,通常需要使用到导航条。导航条中通常放置用于显示Web应用程序中具有哪些功能的总菜单,通常放置在网页首部或底部。在智能手机中,该菜单默认呈收缩状态,当用户手指点击菜单图标时,菜单被展开显示。

<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">菜单</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">菜单项</a></li>
                <li><a href="#">菜单项</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单 <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">菜单项</a></li>
                        <li><a href="#">菜单项</a></li>
                        <li><a href="#">菜单项</a></li>
                        <li class="divider"></li>
                        <li><a href="#">菜单项</a></li>
                        <li class="divider"></li>
                        <li><a href="#">菜单项</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">右对齐菜单</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">菜单项</a></li>
                        <li><a href="#">菜单项</a></li>
                        <li><a href="#">菜单项</a></li>
                        <li class="divider"></li>
                        <li><a href="#">菜单项</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

此处的代码有些复杂,让我们从上往下依序介绍。

<nav class="navbar navbar-default" role="navigation">

首先,在使用导航条时,需要使用nav元素,同时将nav元素的class属性值指定为navbar,将nav元素的role属性值指定为navigation。可以通过如下表所示的class来指定导航条的背景。

class 说明
navbar-default 标准导航条
navbar-inverse 深色系导航条。其背景色与navbar-default正好相反。

本例中如果为nav元素使用“navbar-inverse”class,导航显示效果如下图所示。

这段代码中使用了多处container元素。为了让导航条内部的内容居中,我们需要为元素指定container-fluid或container class。

<div class="container-fluid">

如果使用container class,可以使最大宽度为1170px的内容居中。

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">菜单</a>
</div>

此处定义了智能手机中显示的按钮与菜单标题。在Bootstrap的data-api中为该按钮定义了切换显示菜单的功能。在data-target属性中需要指定被切换显示的元素ID。

可以为按钮指定任何图标,代码如下所示。

<button type="button" class="navbar-toggle"  data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="glyphicon glyphicon-envelope"></span>
</button>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    :
</div><!-- /.navbar-collapse -->

此处定义下拉菜单,在智能手机中将被切换显示。

<ul class="nav navbar-nav">
 :
</ul>

在这个ul元素中放置菜单项。可以在其中放置下拉菜单(在智能手机中显示时也不会产生问题)。

当需要使用多个菜单时,可以为ul元素指定navbar-right这个class以使其右对齐。

导航条的固定位置

在Bootstrap中,可以通过如下表中所示class的使用来指定导航条的固定位置。

class 说明
navbar-fixed-top 通过CSS中position: flex样式规则的使用使导航条固定在页面顶部。因此,需要为保留导航条的位置(70px)而将内容向下移动。例如:body { padding-top: 70px; }
navbar-fixed-bottom 通过CSS中position: flex样式规则的使用使导航条固定在页面底部。因此,需要在页面底部保留导航条的位置(70px)。例如:body { padding-bottom: 70px; }

输入表单

可以在导航条内放置搜索表单。这时需要将表单的class属性值设置为navbar-form。另外,如果需要在导航条内显示任何文字,需要将p元素的class属性值设置为navbar-text。

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
            ...
    </ul>
    <p class="navbar-text">搜索</p>
    <form class="navbar-form">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入搜索关键字">
        </div>
        <button type="submit" class="btn btn-info">搜索</button>
    </form>
</div><!-- /.navbar-collapse -->

信息的隐藏与显示

在Bootstrap中可以根据设备屏幕大小切换信息的隐藏与显示。

当需要显示内容时,可以对元素指定visible-(设备断点)class,当需要隐藏内容时,可以对元素指定hidden-(设备断点)class。

断点的指定方法如下表所示。

种类 屏幕宽度 关键字
智能手机 屏幕宽度<768px xs
平板电脑 屏幕宽度>=768px/td> sm
一般PC屏幕 屏幕宽度>=992px/td> md
大PC屏幕 屏幕宽度>=1200px/td> lg

例如在智能手机中隐藏搜索表单时需要为表单元素指定“hidden-xs”class。

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
        ...
    </ul>
    <form class="navbar-form hidden-xs">
        ...
    </form>
</div>
在PC电脑中显示搜索表单
在智能手机中隐藏搜索表单