Bootstrap Navbar Component实现响应式导航


Posted in Javascript onOctober 08, 2016

目的:

用Bootstrap Navbar component 实现一个响应式导航

理解Bootstrap Navbar component是如何工作的(不包括collepse.js)

清楚自己添加一个规定的类名时是做了些什么

根据自己的需求进行改装

对比自己的实现方法,找出差距。

1.实现:

我想要模仿一个这样的响应式导航:

Bootstrap Navbar Component实现响应式导航

Bootstrap Navbar Component实现响应式导航

按照Bootstrap官网上介绍的方法,按照规则创建标签添加类名之后,可以得到一个这样的导航:

Bootstrap Navbar Component实现响应式导航

代码:

<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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">Live With It</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>

2.实现原理:

从他的源码中扒出和nav navbar相关的代码,挑出和位置相关的:

@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-brand {
float: left;
}
@media (min-width: 768px) {
.navbar-nav {
float: left;
}
.navbar-nav > li {
float: left;
}
}

两个关键的盒子,navbar-header和navbar-nav

默认是小屏幕,他们的状态是:

Bootstrap Navbar Component实现响应式导航

大屏幕时,navbar-header左浮动,navbar-nav和里面的li也都左浮动,像下面这样:

Bootstrap Navbar Component实现响应式导航

所以,他实现的原理就是,利用块级元素在文档流中占满一行,浮动之后挤到一起的特性,来控制堆叠和并排。

所以,为了可以在变成大屏幕时这两个盒子可以顺利地到一行上去,也就是说不要出现下面的情况,需要控制navbar-header和navbar-nav里面元素的总宽度不要超过768px。

Bootstrap Navbar Component实现响应式导航

再挑出和隐藏于出现相关的样式:

@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
.collapse {
display: none;
}
@media (min-width: 768px) {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
overflow: visible !important;
}
}

navbar-collapse是控制导航列表隐藏和出现的盒子,按钮会在变成大屏后消失。

3.弄清楚每个类名添加的样式

.navbar 负责定义一个长条

.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
@media (min-width: 768px) {
.navbar {
border-radius: 4px;
}
}

.navbar-header ,负责包裹brand和折叠按钮,控制小屏幕时brand和按钮的位置,控制导航列表的布局。

@media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.container > .navbar-header,
.container-fluid > .navbar-header {
margin-right: -15px; //小屏幕的时候header内容左边缘和container左边缘对齐
margin-left: -15px;
}
@media (min-width: 768px) {
.container > .navbar-header,
.container-fluid > .navbar-header {
margin-right: 0; 
margin-left: 0;
}
}

.navbar-brand, 负责左边logo区的默认样式

.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: block;
}
@media (min-width: 768px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px; /*大屏幕的时候内容左边缘和header左边缘对齐*/
}
}

container和navbar-brand都在左右两边设置了15px的内填充,所以container、header、brand三个盒子左边线本该是这样的:

Bootstrap Navbar Component实现响应式导航

小屏幕的时候,header左右两边各有一个负边距,所以是这样的状态:

Bootstrap Navbar Component实现响应式导航

大屏幕的时候,brand左边有一个负边距:

Bootstrap Navbar Component实现响应式导航

.nav 负责定义成垂直导航的样式

.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav > li {
position: relative;
display: block;
}
.nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eee;
}

navbar-nav:负责竖版导航的填充、实现横版导航。

.navbar-nav {
margin: 7.5px -15px; /*折叠之后添加一个上下边距,每一行都和屏幕等宽*/
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
@media (min-width: 768px) {
.navbar-nav {
float: left;
margin: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
}

navbar-right,navbar-left :负责定位

@media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
margin-right: -15px; //第一个添加navbar-right的元素右边会有一个负边距
}
.navbar-right ~ .navbar-right { //之后的都不会有
margin-right: 0;
}
}

navbar-toggle:负责定义按钮的样式,里面用三个盒子绘制三条线。在大屏幕时消失。

.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle:focus {
outline: 0;
}
@media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}

collapse,负责控制显示和隐藏

.collapse {
display: none;
}
@media (min-width: 768px) {
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
}

.navbar-collapse: 负责被折叠盒子的样式

.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
@media (min-width: 768px) {
.navbar-collapse {
width: auto; 
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
@media (min-width: 768px) {
.container > .navbar-collapse,
.container-fluid > .navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}

以上这些类负责的样式是除了颜色之外的样式,与颜色相关的一切都由.navbar-default负责。

4.改装

现在的导航条是这个样子的:

Bootstrap Navbar Component实现响应式导航

和我想要的还有一些差异,不过知道了它的实现方式,就可以进行想要的改动。

首先让小屏幕的时候导航列表也是水平显示,并且与屏幕两边有一定距离:

.navbar-nav {
text-align:center;
}
.nav li {
display:inline-block;
}
.navbar {
border: 0;
}
.navbar .navbar-header {
padding-top:10px;
padding-bottom:10px;
}
@media(min-width:768px){
.navbar-collapse {
padding-top:10px;
padding-bottom:10px;
}
}
.navbar-brand {
font-size: 34px;
font-family: Lobster, Monospace;
}
.nav {
font-size: 20px;
}
@media(max-width:768px){
.container .navbar-collapse {
margin-left: 12px;
margin-right: 12px;
}
}

Bootstrap Navbar Component实现响应式导航

(如果以后也会用到这种版式,也可以为他定义一个类)

然后定义一个新的配色方案,替换掉.navbar-default

@media(min-width:768px){
.navbar {
background-color: #F79C9C;
}
}
.navbar-girl .navbar-header,
.navbar-girl .navbar-collapse {
background-color: #F79C9C;
}
.navbar-girl .navbar-brand {
color: #FFF;
}
.navbar-girl .navbar-text {
color: #F7846B;
}
.navbar-girl .navbar-nav > li > a {
color: #F7846B;
}
.navbar-girl .navbar-nav > li > a:hover,
.navbar-girl .navbar-nav > li > a:focus {
color: #CEE6E6;
background-color: transparent;
}
.navbar-girl .navbar-nav > .active > a,
.navbar-girl .navbar-nav > .active > a:hover,
.navbar-girl .navbar-nav > .active > a:focus {
color: #F7846B;
background-color: #FFF;
}
.navbar-girl .navbar-toggle {
border-color: #FFF;
}
.navbar-girl .navbar-toggle:hover,
.navbar-girl .navbar-toggle:focus {
background-color: #CEE6E6;
}
.navbar-girl .navbar-toggle .icon-bar {
background-color: #FFF;
}
.navbar-girl .navbar-collapse {
border-color: #FFF;
}

Bootstrap Navbar Component实现响应式导航

大功告成啦。

5.反思

之前用自己的思路实现了一个响应式导航:CSS3media queries+jQuery实现响应式导航

和Bootstrap的思想对比之后,发现自己的一些问题

①定位:

我的思路是通过position:absolute来控制导航列表的位置。这样有一个明显的缺点,导航列表已经完全脱离普通流。

我这样思考的根源是,我没有抓住这个变化的本质,当我看到两个相同的东西在不同情况下出现在不同地方的时候,(也就是从一个地方换到另一个地方),我首先想到的就是直接挪过去,即利用absolute定位。

而Bootstrap看到了这个变化的本质,让一些块级元素由堆叠排列变成水平排列(或者相反),这样的变化通过利用块级元素的特点和浮动就可以实现。

②出发点:

Bootstrap的中心思想是:mobile first,先把在小屏幕上的布局实现,然后再做一些改变来实现在大屏幕上的布局。

而我的思想是:每一个布局和样式都考虑到这两种情况,对比一下看哪种情况方便就用哪个。所以我的代码中会出现@media(min-width:768px)和@media(max-width:768px)两种条件,对于一个设计我可能默认大屏幕的,小屏幕的用media,另一个设计我可能就会默认小屏幕的,大屏幕的用media。

这样做可以减少一些重复的不必要的代码。但是缺点远远大于优点:

①对于写的人来说,如果逻辑清晰的话,写的会很顺畅。如果思维稍微有点混乱的话,就会把自己绕进去。

②对于看的人来说,理解起来会很别扭。

③如果过段时间想改一个小样式,都需要重新理解一下当时的逻辑。

以上所述是小编给大家介绍的Bootstrap Navbar Component实现响应式导航,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript对象模型-执行模型
Apr 28 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
JS截取字符串实例详解
Nov 24 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 #Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
Oct 08 #Javascript
Javascript单例模式的介绍和实例
Oct 08 #Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 #Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 #Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 #Javascript
浅谈js的ajax的异步和同步请求的问题
Oct 07 #Javascript
You might like
php UTF8 文件的签名问题
2009/10/30 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
js 创建书签小工具之理论
2011/02/25 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
2017/06/08 jQuery
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
Python爬取成语接龙类网站
2018/10/19 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
C语言笔试题
2014/09/04 面试题
软件测试英文面试题
2012/10/14 面试题
jQuery treeview树形结构应用
2021/03/24 jQuery
建筑设计专业求职自我评价
2014/03/02 职场文书
优秀教师感人事迹材料
2014/05/04 职场文书
卖车协议书范例
2014/09/16 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
Go 语言结构实例分析
2021/07/04 Golang
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python