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 相关文章推荐
最新优化收藏到网摘代码(digg,diigo)
Feb 07 Javascript
插件:检测javascript的内存泄漏
Mar 04 Javascript
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
Angular Material Icon使用详解
Nov 07 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
论建造顺序的重要性
2020/03/04 星际争霸
yii2 url重写并隐藏index.php方法
2018/12/10 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
javascript针对DOM的应用分析(二)
2012/04/15 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
浅谈下拉菜单中的Option对象
2015/05/10 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
2016/07/07 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
jquery css实现邮箱自动补全
2016/11/14 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
如何正确理解vue中的key详解
2019/11/02 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
js实现验证码干扰(动态)
2021/02/23 Javascript
Python实现控制台中的进度条功能代码
2017/12/22 Python
Python使用ConfigParser模块操作配置文件的方法
2018/06/29 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
pytorch构建多模型实例
2020/01/15 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
美国最受欢迎的度假目的地优惠套餐:BookVIP
2018/09/27 全球购物
中职应届生会计求职信
2013/10/23 职场文书
博士研究生自我鉴定范文
2013/12/04 职场文书
四下基层实施方案
2014/03/28 职场文书
寄语学生的话
2014/04/10 职场文书
中国梦演讲稿开场白
2014/08/28 职场文书
市委常委班子党的群众路线教育实践活动整改措施
2014/10/02 职场文书
悬空寺导游词
2015/02/05 职场文书
2015年电教工作总结
2015/05/26 职场文书
六一儿童节园长致辞
2015/07/31 职场文书
建筑工程挂靠协议书
2016/03/23 职场文书
如何让vue长列表快速加载
2021/03/29 Vue.js
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
Pandas搭配lambda组合使用详解
2022/01/22 Python
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android
Redis实现短信验证码登录的示例代码
2022/06/14 Redis