首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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个精彩的专题：

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

bootstrap导航条实现代码

- Author -

有点懒惰的小青年

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
关于javascript document.createDocumentFragment()
Apr 04 Javascript
js中if语句的几种优化代码写法
Mar 12 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
JQuery基础语法小结
Feb 27 Javascript
js轮播图代码分享
Jul 14 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
Oct 13 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
Angular4实现图片上传预览路径不安全的问题解决
Dec 25 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
React中获取数据的3种方法及优缺点
Feb 18 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
基于Vant UI框架实现时间段选择器
Dec 24 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
保证书(97) 责任书(145) 寄语(276) 请假条(31) 评语(336) 建议书(203) 活动总结(790) 决心书(42) 倡议书(159) 感谢信(72)
You might like
汉字转化为拼音(php版)
2006/10/09 PHP
PHP判断远程图片或文件是否存在的实现代码
2014/02/20 PHP
PHP版微信公众平台红包API
2015/04/02 PHP
php获取linux命令结果的实例
2017/03/13 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
[01:26]神话结束了，却也刚刚开始——DOTA2新英雄玛尔斯驾临战场
2019/03/10 DOTA
windows下python安装paramiko模块和pycrypto模块（简单三步）
2017/07/06 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
编写python代码实现简单抽奖器
2020/10/20 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
英国女装网上商店：I Saw It First
2018/10/18 全球购物
英国森林假期：Forest Holidays
2021/01/01 全球购物
行政助理岗位职责
2013/11/10 职场文书
校园安全标语
2014/06/07 职场文书
防卫过当辩护词
2015/05/21 职场文书
离婚案件上诉状
2015/05/23 职场文书
合同审查法律意见书
2015/06/04 职场文书