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

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

上面是在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>

利用bootstrap实现的响应式导航条相关推荐

Bootstrap 响应式导航条
响应式导航条能够根据浏览器窗口宽度,自动调整导航条的显示状态.一般会为响应式导航提供一个导航条和一个按钮. 当浏览器窗口足够宽时,正常显示导航条而不显示按钮.当浏览器窗口宽度缩小到一定程度时,自动隐藏 ...
html5响应式导航条,10个响应式设计的导航菜单源码-附教程
10个响应式设计的导航菜单源码-附教程 Sponsor 在2013年里,响应式Web设计将会开始普及,我们应该学习这些新技术,尤其作为网页设计师和前端开发人员,学习CSS3样式表和HTML5是必不可少 ...
练习2:课工场响应式导航条_作业帮直播课APP下载最新版入口
作业帮直播课app由作业帮一课升级更名而来,作业帮直播课app课程设置科学合理,课程紧贴校内教学进度,老师根据学习要求进行同步教学.作业帮直播课app更有长期班课.专题课.小学兴趣班等,欢迎加入. 软 ...
利用vue 实现一个响应式导航
效果图: 实现起来很简单,下面主要代码 page_width() {let screenWidth = window.screen.width;console.log(screenWidth);if ...
bootstrap-响应式导航条
1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
基于Vue的事件响应式进度条组件
写在前面找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容 ...
Angular最新教程-第六节编写响应式导航栏
这节课我们讲解如何使用bootstrap 4 编写响应式布局. 参考图我们还是参照Angular中文社区http://www.angularjs.cn/ 图中标注红色的部分,我自己不是很喜欢,所以做了 ...
Java程序员的日常 —— 响应式导航Demo
这两天想要做响应式的页面,于是本着重复造轮子的想法,模仿Bootstrap官网,精简了一个响应式导航的Demo. 效果代码 <!DOCTYPE html> <html> &l ...
Bootstrap设计可响应式的移动网页
目录 1.设计响应式图片 1.1.使用标签(中) 1.2.使用css图片 2.响应式视频 3.响应式导航菜单 4.响应式表格 4.1.隐藏表格中的列 4.2 滚动表格中的列 4.3 转换表格中的列 ...
Bootstrap_响应式导航栏，汉堡按钮，遮盖
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...

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

利用bootstrap实现的响应式导航条相关推荐

最新文章

热门文章