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

最新推荐文章于 2024-06-04 08:58:47 发布

冰雪为融

最新推荐文章于 2024-06-04 08:58:47 发布

阅读量3.8w

点赞数 13

分类专栏： bootstrap 文章标签：响应式导航条 bootstrap

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79987166

版权

bootstrap 专栏收录该内容

1 篇文章 2 订阅

订阅专栏

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

上面是在PC端显示的效果

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

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

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

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

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

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

        <div class="navbar-header">
            <a href="#" class="navbar-brand">logo</a>
        </div>

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

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

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

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

<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>

还有一个下拉菜单的功能，这个其实也不难，学过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>

冰雪为融

关注

13
点赞
踩
90

收藏

觉得还不错? 一键收藏
2
评论
利用bootstrap实现的响应式导航条

响应式导航条，在不同屏幕大小显示的效果不同，先看一下效果上面是在PC端显示的效果上面的是在小屏幕上显示的效果上面是当我们点击三横的时候，导航条上的文字出现了看完效果我来总结一下用到的知识点：总体上涉及到的知识点有导航条相关的和折叠相关的，响应式导航条依赖collapse导航条相关知识：基类：navbarlogo：一般放在.navbar-brand之内（因为它已经被设置了内填充和高度），为了解决移动...
复制链接

扫一扫

专栏目录