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 相关文章推荐
iframe 异步加载技术及性能分析
Jul 19 Javascript
图片轮换效果实现代码(点击按钮停止执行)
Apr 12 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
May 25 Javascript
详解angularjs的数组传参方式的简单实现
Jul 28 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
Js中async/await的执行顺序详解
Sep 22 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
Aug 22 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
微信小程序 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和XSL stylesheets转换XML文档
2006/10/09 PHP
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
PHP explode()函数用法、切分字符串
2012/10/03 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
Javascript中call的两种用法实例
2013/12/13 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
Python模拟浏览器上传文件脚本的方法(Multipart/form-data格式)
2018/10/22 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
详解python中__name__的意义以及作用
2019/08/07 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
Myprotein意大利官网:欧洲第一运动营养品牌
2018/11/22 全球购物
体育教育专业毕业生自荐信
2013/11/15 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
销售团队获奖感言
2014/08/14 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
暑期工社会实践报告
2015/07/13 职场文书
网络营销实训总结
2015/08/03 职场文书
python 多态 协议 鸭子类型详解
2021/11/27 Python