Bootstrap每天必学之导航条(二)


Posted in Javascript onMarch 01, 2016

一、基础导航条

在制作一个基础导航条时,主要分以下几步:

第一步:首先在制作导航的列表(<ul class=”nav”>)基础上添加类名“navbar-nav”

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

<div class="navbar navbar-default">
 <!-- 导航条标题-->
  <div class="navbar-header">
   <a href="##" class="navbar-brand">LOGO</a>
  </div>
 <!-- 基础导航条-->
 <ul class="nav navbar-nav">
 <li><a href="##">网站首页</a></li>
 <!-- 二级菜单-->
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 <!-- 搜索表单-->
 <form action="##" class="navbar-form navbar-left">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>
</div>

1、在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其通过“navbar-header”和“navbar-brand”来实现。

<!-- 导航条标题-->
  <div class="navbar-header">
   <a href="##" class="navbar-brand">LOGO</a>
  </div>

2、二级菜单通过<ul>嵌套来实现。

<!-- 二级菜单-->
 <li class="dropdown">
 <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="##">CSS3</a></li>
 <li><a href="##">JavaScript</a></li>
 <li class="disabled"><a href="##">PHP</a></li>
 </ul>
 </li>

3、在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单。

“navbar-left”让表单左浮动,“navbar-right”样式,让元素在导航条靠右对齐。

<!-- 搜索表单-->
 <form action="##" class="navbar-form navbar-left">
 <div class="form-group">
 <input type="text" class="form-control" placeholder="请输入关键词" />
 </div>
 <button type="submit" class="btn btn-default">搜索</button>
 </form>

 二、反色导航条

反色导航条其实是Bootstrap框架为大家提供的第二种风格的导航条,只是将"navbar-deafult"类名换成"navbar-inverse"。

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">LOGO</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="">首页</a></li>
 <li><a href="">教程</a></li>
 <li><a href="">关于我们</a></li>
 </ul>
</div>

Bootstrap每天必学之导航条(二)

三、固定导航条

很多情况之一,设计师希望导航条固定在浏览器顶部或底部。

Bootstrap框架提供了两种固定导航条的方式:

☑ .navbar-fixed-top:导航条固定在浏览器窗口顶部

☑ .navbar-fixed-bottom:导航条固定在浏览器窗口底部

使用方法很简单,只需要在制作导航条最外部容器navbar上追加对应的类名即可。

<!--导航条固定在浏览器窗口顶部-->
<div class="navbar navbar-default navbar-fixed-top">
  …
</div>
<!--导航条固定在浏览器窗口底部-->
<div class="navbar navbar-default navbar-fixed-bottom">
  …
</div>

四、响应式导航条

<div class="navbar navbar-default">
 <div class="navbar-header">
  <!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#demo">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 -->
 <a href="##" class="navbar-brand">LOGO</a>
 </div>
 <!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse" id="demo">
 <ul class="nav navbar-nav">
 <li><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 <li><a href="##">成功案例</a></li>
 <li><a href="##">关于我们</a></li>
 </ul>
 </div>
</div>

宽屏模式下:

Bootstrap每天必学之导航条(二)

窄屏模式下:

Bootstrap每天必学之导航条(二)

使用方法:

1、保证在窄屏时需要折叠的内容必须包裹在带一个div内,并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

2、保证在窄屏时要显示的图标样式(固定写法):

<button class="navbar-toggle" type="button" data-toggle="collapse">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button>

3、并为button添加data-target=".类名/#id名"

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,大家也可以结合《Bootstrap每天必学之导航条》这篇文章进行学习。

Javascript 相关文章推荐
JavaScript 事件查询综合
Jul 13 Javascript
JavaScript将取代AppleScript?
Sep 18 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
很棒的一组js图片轮播特效
Jan 12 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
Jun 28 Javascript
AngularJS中controller控制器继承的使用方法
Nov 03 Javascript
利用Javascript开发一个二维周视图日历
Dec 14 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
Oct 30 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 #Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 #Javascript
JS实现图片平面旋转的方法
Mar 01 #Javascript
JS显示日历和天气的方法
Mar 01 #Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 #Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 #Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 #Javascript
You might like
JAVA/JSP学习系列之七
2006/10/09 PHP
php Static关键字实用方法
2010/06/04 PHP
Laravel框架实现定时Task Scheduling例子
2019/10/22 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
JS的数组的扩展实例代码
2008/07/09 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
javascript事件函数中获得事件源的两种不错方法
2014/03/17 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
微信web端后退强制刷新功能的实现代码
2018/03/04 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
jquery更改元素属性attr()方法操作示例
2020/05/22 jQuery
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
Python使用Mechanize模块编写爬虫的要点解析
2016/03/31 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
html5利用canvas实现颜色容差抠图功能
2019/12/23 HTML / CSS
英国景点门票网站:attractiontix
2019/08/27 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
助理政工师申报材料
2014/06/03 职场文书
单位接收函范文
2015/01/30 职场文书
大二学年个人总结
2015/03/03 职场文书
民主生活会主持词
2015/07/01 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
python周期任务调度工具Schedule使用详解
2021/11/23 Python
vue如何清除浏览器历史栈
2022/05/25 Vue.js