继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

Bootstrap教程(21)--响应式导航栏详解

程序员大阳
关注TA
已关注
手记 357
粉丝 1.5万
获赞 1523

1. 概述

在很长的一段时间里,我都很羡慕一个一些大神的个人网站。这些网站有一个共同特点,同时支持PC端显示和手机端显示。

当使用手机打开时,导航栏会自动折叠为一个按钮,效果棒极了。

后来学会了Bootstrap才知道,偶买噶,Bootstrap提供的导航栏原来天生就带这效果。厉害!

2. 响应式导航栏

导航栏的创建还是比较复杂的,但是不要担心,我们来一步步分析创建过程。

第1步,创建一个导航栏navbar。

<nav class="navbar navbar-default">
</nav>

第2步,添加.container-fluid类的容器,这样可以让导航栏内容按容器规则显示。

<nav class="navbar navbar-default">
	<div class="container-fluid">
	</div>
</nav>

第3步,添加导航栏头部navbar-header,并在头部放置品牌栏navbar-brand,品牌蓝内放置网站图标和标题文字。

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<a href="#" class='navbar-brand'>
	        	<span class="glyphicon glyphicon-leaf"></span> 响应式导航栏
	        </a>
	    </div>
	</div>
</nav>

第4步,添加导航菜单栏,使用nav navbar-nav类设置。

<nav class="navbar navbar-default">
	<div class="container-fluid">
		<div class="navbar-header">
			<a href="#" class='navbar-brand'>
	        	<span class="glyphicon glyphicon-leaf"></span> 响应式导航栏
	        </a>
	    </div>
	</div>
	<div>
    	<ul class="nav navbar-nav">
	    	<li class="active"><a href="#">菜单1</a></li>
            <li><a href="#">菜单2</a></li>
         </ul>
     </div>
</nav>

经过上面的步骤,即可创建一个响应式的导航栏,当容器宽度较大时,显示如下:
图片描述
当容器宽度较小时,则自动变换为:
图片描述

3. 可折叠导航栏

虽然上面创建的导航栏,已经可以实现在手机等小屏幕设备上完整展示菜单了。

但是菜单占用的地方比较大,会遮住内容部分,此时就可以考虑使用可折叠导航栏了,当容器宽度不足时,菜单栏会折叠为一个按钮,当点击按钮时才弹出完整菜单。

首先,在导航栏的头部添加一个折叠按钮,代码如下。

		<div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#collapsed-nav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class='navbar-brand'>
                    <span class="glyphicon glyphicon-leaf"></span> 可折叠导航栏
                </a>
            </div>

解释下,class="navbar-toggle collapsed"用来设置折叠样式,data-toggle="collapse"是通过JavaScript实现折叠效果,data-target="#collapsed-nav"则指向折叠的容器元素。

然后,我们将菜单部分修为:

			<div class="collapse navbar-collapse" id="collapsed-nav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                </ul>
            </div>

解释下,class="collapse navbar-collapse"设置了容器折叠样式,id="collapsed-nav"呼应按钮指向的id。

如此一来,当容器宽度不足时,菜单部分就折叠为一个按钮,点击按钮时弹出折叠的菜单,效果如下:
图片描述

4. 深色导航栏

深色导航栏就比较简单了,直接添加navbar-inverse类即可。

	<nav class="navbar navbar-default navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#collapsed-nav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class='navbar-brand'>
                    <span class="glyphicon glyphicon-leaf"></span> 深色导航栏
                </a>
            </div>
            <div class="collapse navbar-collapse" id="collapsed-nav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                </ul>
            </div>
        </div>
    </nav>

效果如下:
图片描述

5. 顶部固定菜导航栏

有时候网页内容较多,当我们浏览完内容想要点击导航栏时,需要回到顶部,比较麻烦。

有一种效果是将导航栏固定到顶部,就算网页向下滑动,导航栏一直显示在顶部。

实现也相当简单,添加navbar-fixed-top类即可,代码如下:

	<nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#collapsed-nav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class='navbar-brand'>
                    <span class="glyphicon glyphicon-leaf"></span> 顶部固定导航栏
                </a>
            </div>
            <div class="collapse navbar-collapse" id="collapsed-nav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">菜单1</a></li>
                    <li><a href="#">菜单2</a></li>
                </ul>
            </div>
        </div>
    </nav>

效果如下,当页面滑动时,导航栏固定不动。
在这里插入图片描述

6. 导航栏添加下拉菜单和表单控件

Bootstrap导航栏非常灵活,可以添加下拉菜单,同时可以添加使用navbar-form类修饰的表单,代码如下:

	<nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#collapsed-nav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class='navbar-brand'>
                    <span class="glyphicon glyphicon-leaf"></span> 添加子菜单和表单
                </a>
            </div>
            <div class="collapse navbar-collapse" id="collapsed-nav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">菜单1</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">菜单3 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">子菜单3-1</a></li>
                            <li><a href="#">子菜单3-2</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-right">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="搜索">
                    </div>
                    <button type="button" class="btn btn-primary">按钮</button>
                </form>
            </div>
        </div>
    </nav>

效果如下:
图片描述

7. 小结

Bootstrap提供的导航栏可以说功能非常全面,而且稳定,而且优雅。非常好~

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP