首页
所有分类
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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
jquery 事件执行检测代码
Dec 09 Javascript
Chrome中JSON.parse的特殊实现
Jan 12 Javascript
7个JS基础知识总结
Mar 05 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
jquery实现键盘左右翻页特效
Apr 30 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
学习Node.js模块机制
Oct 17 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 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
win10(43) i7 6700(1) 对讲机(1) GTX1660(1) win11(40) Tomcat(18) React(6) ipad(1) i5 9400(1) i5 10400(1)
You might like
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
jQuery中filter()和find()的区别深入了解
2013/09/25 Javascript
jQuery中parents()和parent()的区别分析
2014/10/28 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
JS实现焦点图轮播效果的方法详解
2016/12/19 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
实例详解display:none与visible:hidden的区别
2017/03/30 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
解决python中os.listdir()函数读取文件夹下文件的乱序和排序问题
2018/10/17 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
python支持多继承吗
2020/06/19 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
python实现计算器简易版
2020/12/17 Python
美国户外生活方式品牌：Eddie Bauer
2016/12/28 全球购物
美国第一香水网站：Perfume.com
2017/01/23 全球购物
数控机械专业个人的自我评价
2014/01/02 职场文书
办理信用卡工作证明
2014/09/30 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
离婚起诉书范本
2015/05/18 职场文书
医学会议开幕词
2016/03/03 职场文书
什么是执行力？9个故事告诉您：成功绝非偶然！
2019/07/05 职场文书
golang 实现菜单树的生成方式
2021/04/28 Golang
Go语言空白表示符_的实例用法
2021/07/04 Golang
vue elementUI批量上传文件
2022/04/26 Vue.js