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 相关文章推荐
Confirmer JQuery确认对话框组件
Jun 09 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
JS注释所产生的bug 即使注释也会执行
Nov 19 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
May 09 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
微信小程序-拍照或选择图片并上传文件
Jan 06 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
jquery实现下拉菜单的手风琴效果
Jul 23 jQuery
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
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
PHP简单系统查询模块代码打包下载
2008/06/07 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
JQuery 入门实例1
2009/06/25 Javascript
JavaScript 通过模式匹配实现重载
2010/08/12 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
javascript实现的字符串转换成数组操作示例
2019/06/13 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
Python开发网站目录扫描器的实现
2019/02/21 Python
Python3.5以上版本lxml导入etree报错的解决方案
2019/06/26 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
Django的CVB实例详解
2020/02/10 Python
django-csrf使用和禁用方式
2020/03/13 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
我们是伦敦女孩:WalG
2018/01/08 全球购物
英国奢侈品在线精品店:Hervia
2020/09/03 全球购物
Linux的主要特性
2016/09/03 面试题
党校个人自我鉴定范文
2014/03/28 职场文书
护士自荐信怎么写
2015/03/06 职场文书
无房证明样本
2015/06/17 职场文书
2016银行求职自荐信
2016/01/28 职场文书
高中体育课教学反思
2016/02/16 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers