BooStrap对导航条的改造实践小结


Posted in Javascript onSeptember 21, 2016

制作导航(基础样式)需要如下几部:

第一步:首先在制作导航的列表(<ul class=”nav nav-tabs”> 当然nav-tabs是用来控制样式的我们可以选择比如nav-pills)

第二步:在列表里面添加自己的链接

<ul class="nav nav-tabs">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html" data-hover="About"> About</a></li> 
<li><a href="news.html" data-hover="News">News</a></li>
<li><a href="portfolio.html" data-hover="Portfolio">Portfolio</a></li>
<li><a href="codes.html" data-hover="Codes">Codes</a></li> 
<li><a href="contact.html" data-hover="Contact">Contact</a></li>
</ul>

然后我们就可以看到类似下面的效果了:

BooStrap对导航条的改造实践小结

我们现在升级,制作一个基础导航条,主要分以下几步:

第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”,与前面不一样的是现在我们不在ul里添加nav-tabs或nav-pills之类的样式类了。

第二步:在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”

第三步:在列表里面添加自己的链接

<div class="navbar navbar-default" role="navigation">
<ul class="nav navbar-nav">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html" data-hover="About"> About</a></li> 
<li><a href="news.html" data-hover="News">News</a></li>
<li><a href="portfolio.html" data-hover="Portfolio">Portfolio</a></li>
<li><a href="codes.html" data-hover="Codes">Codes</a></li> 
<li><a href="contact.html" data-hover="Contact">Contact</a></li>
</ul>
</div>

BooStrap对导航条的改造实践小结

现在再次升级,制作一个响应式导航条:

在上面的基础上添加一些内容,首先在最外围的div里加一个控制的块其组成如下:

<div class="navbar-header">
 <!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="##" class="navbar-brand">menu</a>
</div>

其中需要注意这个button是被一个div.navbar-header包裹,还有button里的data-target=".navbar-responsive-collapse"指被控制的导航的类名,当然如果使用id也可以,只要对应起来就可以。

控制的button已经弄好了,现在来搞定受控的导航内容部分。首先明确自己是被谁控制,显然,是被上面的那个button,所以其类名一定要吻合。那么我们直接在ul外面套上一层div,在此div上指定对应的类名,以及受控方式的类名collapse(指定是折叠的类)navbar-collapse(指定是导航条的折叠的类)。如此div的写法就是 <div class="collapse navbar-collapse navbar-responsive-collapse"> </div>,加上上面的ul内容就是这样:

<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html" data-hover="About"> About</a></li> 
<li><a href="news.html" data-hover="News">News</a></li>
<li><a href="portfolio.html" data-hover="Portfolio">Portfolio</a></li>
<li><a href="codes.html" data-hover="Codes">Codes</a></li> 
<li><a href="contact.html" data-hover="Contact">Contact</a></li>
</ul>
</div>

总的就是这样:

<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
 <!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="##" class="navbar-brand">menu</a>
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html" data-hover="About"> About</a></li> 
<li><a href="news.html" data-hover="News">News</a></li>
<li><a href="portfolio.html" data-hover="Portfolio">Portfolio</a></li>
<li><a href="codes.html" data-hover="Codes">Codes</a></li> 
<li><a href="contact.html" data-hover="Contact">Contact</a></li>
</ul>
</div>
</div>

结果在未为折叠尺寸时的效果如下:

BooStrap对导航条的改造实践小结

在变为折叠尺寸时的效果如下:

BooStrap对导航条的改造实践小结

上面是纯boostrap的效果,如果我们想要添加一些自己额外需要的样式怎么办呢?

下面我们先给这个响应式导航栏添加背景色试试:

由于是定义我们自己 的样式,所以我们尽量不要去干扰boostrap自己的东西,除非有冲突。所以我们先给导航栏外面加一个div给包围起来。如下:

<div class="bg-color"> 
</div>

css样式如下:

.bg-color{
background: #0C0;
}

只这样设置时发现没什么变化,后来想到应该是boostrap给导航栏添加了背景色而覆盖掉了最外层的背景色,后来我给此层div加了更高的高度后发现确实如此。
那么就直接给里面一层加背景色吧:

.bg-color div.navbar.navbar-default{
background: #0C0;
}

结果如下:

BooStrap对导航条的改造实践小结

BooStrap对导航条的改造实践小结

第一步已经成功,如果我们想给可折叠的状态改变一下样式,比如把文字居中显示怎么办?
由于boostrap使用媒体查询使得网页在一定尺寸时改变样式,那么我们现在是想在可折叠的状态时使文本居中,那么我们就以毒攻毒,也使用媒体查询的方式我们也可以简单粗暴的直接设置其居中(也就是没有下面的@media(max-width:768px)约束条件)。

.bg-color{
background: #0C0;
}
.bg-color div.navbar.navbar-default{
background: inherit;
}
@media(max-width:768px){
div.navbar.navbar-default{
text-align: center;
}
.navbar-header>.navbar-toggle{
float:none;
}
}

这是简单粗暴的方法(可以发现只是去掉了媒体查询的部分)

.bg-color{
background: #0C0;
}
.bg-color div.navbar.navbar-default{
background: inherit;
}
div.navbar.navbar-default{
text-align: center;
}
.navbar-header>.navbar-toggle{
float:none;
}

由于水平居中时那个menu标志有一点碍眼,所以我就把它去掉了:

<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
 <!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 -->
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html" data-hover="About"> About</a></li> 
<li><a href="news.html" data-hover="News">News</a></li>
<li><a href="portfolio.html" data-hover="Portfolio">Portfolio</a></li>
<li><a href="codes.html" data-hover="Codes">Codes</a></li> 
<li><a href="contact.html" data-hover="Contact">Contact</a></li>
</ul>
</div>
</div>

效果如下:

BooStrap对导航条的改造实践小结

BooStrap对导航条的改造实践小结

至此我们已经完成了导航栏的简单样式改造,如果需要更多,更丰富的样式,我们还可以继续改造。比如给导航栏的链接添加一些hover效果,或再给文本添加响应式样式(可以利用媒体查询实现诸如font-size,color,font-family等等效果的变化),甚至再添加一些动画效果,本节先告一段落,等待后续吧!

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

Javascript 相关文章推荐
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQuery Ajax向服务端传递数组参数值的实例代码
Sep 03 jQuery
js Dom实现换肤效果
Oct 21 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 #Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 #Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 #Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 #Javascript
D3.js实现饼状图的方法详解
Sep 21 #Javascript
angularJS Provider、factory、service详解及实例代码
Sep 21 #Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 #Javascript
You might like
用Socket发送电子邮件
2006/10/09 PHP
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
PHP加密技术的简单实现
2016/09/04 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
js 居中漂浮广告
2010/03/21 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
基于jQuery实现自动轮播旋转木马特效
2015/11/02 Javascript
js实现点击图片自动提交action的简单方法
2016/10/16 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
jQuery实现视频展示效果
2020/05/30 jQuery
Python中__name__的使用实例
2015/04/14 Python
python实现在sqlite动态创建表的方法
2015/05/08 Python
python实现识别相似图片小结
2016/02/22 Python
深入理解Django的中间件middleware
2018/03/14 Python
用Python实现二叉树、二叉树非递归遍历及绘制的例子
2019/08/09 Python
python中open函数的基本用法示例
2019/09/07 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
使用python计算三角形的斜边例子
2020/04/15 Python
python 元组和列表的区别
2020/12/30 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
学生打架检讨书
2014/02/14 职场文书
应届毕业生自荐信
2014/05/28 职场文书
门面房租房协议书
2014/08/20 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
政风行风评议工作总结
2014/10/21 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python