bootstrap导航条实现代码


Posted in Javascript onDecember 28, 2016

本文实例为大家分享了bootstrap导航条的具体代码,供大家参考,具体内容如下

<body style="padding-top:50px">
<!--
 navbar  导航条的基础样式
 nav navbar-nav 导航条里菜单的固定样式组合class
 navbar-default 导航条的默认样式
 navbar-static-top 导航条为直角
 navbar-fixed-top 导航条固定在上面,一般这时候要给body设置padding值或margin
 navbar-fixed-bottom 导航条固定在下面
 -->
<div class="container">
 <!-- 默认样式的导航条 -->
 <nav class="navbar navbar-default">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>
 </nav>

 <!-- 黑色的导航条 -->
 <nav class="navbar navbar-inverse">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>
 </nav>

 <!-- 直角的导航条 -->
 <nav class="navbar navbar-inverse navbar-static-top">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>
 </nav>

 <!-- 固定在下面/上面的导航条 -->
 <nav class="navbar navbar-inverse navbar-fixed-top">
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>
 </nav>
</div>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
</body>

效果:

bootstrap导航条实现代码

导航条的其他样式:

<!--
 navbar-header  导航的头部,一般情况下放logo
 navbar-brand  用来放logo的,需要配合navbar-header
 -->

<!-- 一般情况下都会把nav包在container外面 -->
<nav class="navbar navbar-default">
 <div class="container">
 <div class="navbar-header">
  <a href="#" class="navbar-brand">
  <img src="user_photo.png" height="20"/>
  </a>
 </div>
 
 <ul class="nav navbar-nav">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>
 </div>
</nav>

<!-- 对齐方式的导航条 -->
<nav class="navbar navbar-default">
 <div class="container">
 <div class="navbar-header">
  <a href="#" class="navbar-brand">logo</a>
 </div>
 
 <!-- navbar-left表示内容以左边对齐 -->
 <ul class="nav navbar-nav navbar-left">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>

 <!-- navbar-right表示内容以右边对齐 -->
 <ul class="nav navbar-nav navbar-right">
  <li><a href="#">登陆</a></li>
  <li><a href="#">注册</a></li>
 </ul>
 </div>
</nav>

<!-- 有链接与文字的导航条 -->
<nav class="navbar navbar-default">
 <div class="container">
 <div class="navbar-header">
  <a href="#" class="navbar-brand">logo</a>
 </div>
 
 <!-- navbar-left表示内容以左边对齐 -->
 <ul class="nav navbar-nav navbar-left">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>

 <a href="#" class="navbar-link navbar-text">链接</a>
 <p class="navbar-text">这里是一段文字</p>

 <!-- navbar-right表示内容以右边对齐 -->
 <ul class="nav navbar-nav navbar-right">
  <li><a href="#">登陆</a></li>
  <li><a href="#">注册</a></li>
 </ul>
 </div>
</nav>

<!-- 有表单的导航条 -->
<nav class="navbar navbar-default">
 <div class="container">
 <div class="navbar-header">
  <a href="#" class="navbar-brand">logo</a>
 </div>
 
 <!-- navbar-left表示内容以左边对齐 -->
 <ul class="nav navbar-nav navbar-left">
  <li class="active"><a href="#">W3School</a></li>
  <li><a href="#">雪碧</a></li>
  <li><a href="#">果汁</a></li>
 </ul>

 <button class="btn btn-success navbar-btn">搜索</button> 

 <!-- 如果导航里有form,需要给form添加navbar-form,如果让他们在一行显示添加navbar-left -->
 <form action="aaa.html" class="navbar-form navbar-left">
  <input type="text" class="form-control"/>
  <button class="btn btn-default">搜索</button>
 </form>
 <!-- navbar-right表示内容以右边对齐 -->
 <ul class="nav navbar-nav navbar-right">
  <li><a href="#">登陆</a></li>
  <li><a href="#">注册</a></li>
 </ul>
 </div>
</nav>

效果:

bootstrap导航条实现代码

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js加密解密字符串可自定义密码因子
May 13 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
Aug 15 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
JS去除字符串最后的逗号实例分析【四种方法】
Jun 20 Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
vue+element树组件 实现树懒加载的过程详解
Oct 21 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 #Javascript
bootstrap导航、选项卡实现代码
Dec 28 #Javascript
bootstrap提示标签、提示框实现代码
Dec 28 #Javascript
EasyUI折叠表格层次显示detailview详解及实例
Dec 28 #Javascript
一个炫酷的Bootstrap导航菜单
Dec 28 #Javascript
基于bootstrap风格的弹框插件
Dec 28 #Javascript
BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题
Dec 28 #Javascript
You might like
smarty基础之拼接字符串的详解
2013/06/18 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php简单实现快速排序的方法
2015/04/04 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
js 方法实现返回多个数据的代码
2009/04/30 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
javascript创建函数的20种方式汇总
2015/06/23 Javascript
jQuery解析Json实例详解
2015/11/24 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
Python中的descriptor描述器简明使用指南
2016/06/02 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
一道python走迷宫算法题
2018/01/22 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
如何使用python代码操作git代码
2020/02/29 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
英国品牌男装折扣网站:Brown Bag
2018/03/08 全球购物
优秀生推荐信范文
2013/11/28 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
班级学习计划书
2014/04/27 职场文书
母亲节演讲稿
2014/05/27 职场文书
节水标语大全
2014/06/11 职场文书
毕业实习计划书
2015/01/16 职场文书
芙蓉镇观后感
2015/06/10 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript