利用bootstrap实现的响应式导航条

向右看齐 2022-05-27 11:57 181阅读 0赞

响应式导航条，在不同屏幕大小显示的效果不同，先看一下效果

![20180418122842715][]

上面是在PC端显示的效果

![20180418132217737][]

上面的是在小屏幕上显示的效果

![2018041813233046][]

上面是当我们点击三横的时候，导航条上的文字出现了

看完效果我来总结一下用到的知识点：

总体上涉及到的知识点有导航条相关的和折叠相关的，响应式导航条依赖collapse

导航条相关知识：基类：navbar

logo：一般放在.navbar-brand之内（因为它已经被设置了内填充和高度），为了解决移动端上存在的小bug，一般将它放在另外一个标签中，如下

按钮：对于<button>元素，加上.navbar-btn后可以让它在导航条里垂直居中

固定在顶部：添加.navbar-fixed-top类可以让导航条固定在顶部，还可以包含一个.container或.container-fluid容器，从而让导航条居中，并在两侧添加内填充

注意：需要为body元素设置内填充，因为这个固定的导航条会遮住页面上的其他内容，除非给body元素设置了padding-top

嗯、有必要说一下![20180418134159390][]是怎么实现的，倒不是因为它难，而是提醒我自己一下，别忘了。嗯、其实就是下面的代码喽，最主要的是用到了.icon-bar这个类啦

还有一个下拉菜单的功能，这个其实也不难，学过bootstrap的应该都会吧，这里我们重点不在它，所以就不在啰嗦了

其实响应式导航条最主要用到了折叠相关类collapse，因为有交互效果，所以data-属性肯定也是不可少的了

data-toggle：以collapse事件触发，   
data-target：事件的目标，找到对应的id；

这里让菜单显示隐藏，主要用到的类是：collapse  navbar-collapse

其实bootstrap中很多的用法都很相似，用法也就那么几种，看多了，用多了自然也就会了，所以我就不多说了，直接上代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>响应式导航条</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <style>
            body{ position:relative;}
    
        </style>
    </head>
    <body>
    <nav class="nav navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                
                <button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">logo</a>
            </div>
            <div id="menu" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">one</a></li>
                    <li><a href="#">two</a></li>
                    
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        three<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">first</a></li>
                        <li><a href="#">second</a></li>
                    </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <script src="js/jquery-1.11.1.js"></script>
    <script src="js/bootstrap.js"></script>
    </body>
    </html>

[20180418122842715]: /images/20220527/ba01d0161b6749c7b24c926cb4d4e7a2.png
[20180418132217737]: /images/20220527/ab21db3328954634a4bd9c40e70a1f84.png
[2018041813233046]: /images/20220527/a45c917b95094d3cbf6b42c95b4feb65.png
[20180418134159390]: /images/20220527/ad85f7df83cf4ec4a5b39a232bea8972.png