首页
所有分类
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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
VUE多层路由嵌套实现代码
May 15 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 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
 AD域(1) Windows server 2012(17) Rewrite(4) 日志格式分析(1) mounted(1) 组策略(1) 伪静态(1) 子查询(1) destoon(1) nginx(76)
You might like
Zend Guard一些常见问题解答
2008/09/11 PHP
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
MySQL连接数超过限制的解决方法
2011/07/17 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
php5.3 注意事项说明
2013/07/01 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
thinkphp5 + ajax 使用formdata提交数据（包括文件上传） 后台返回json完整实例
2020/03/02 PHP
页面加载完后自动执行一个方法的js代码
2014/09/06 Javascript
Bootstrap项目实战之首页内容介绍（全）
2016/04/25 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
原生js轮播特效
2017/05/18 Javascript
微信小程序本地缓存数据增删改查实例详解
2017/05/24 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
对python多线程中互斥锁Threading.Lock的简单应用详解
2019/01/11 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
python selenium 查找隐藏元素 自动播放视频功能
2019/07/24 Python
python反转列表的三种方式解析
2019/11/08 Python
parser.add_argument中的action使用
2020/04/20 Python
Python如何获取文件路径/目录
2020/09/22 Python
中层干部岗位职责
2013/12/18 职场文书
高级销售求职信
2014/02/21 职场文书
农林环境专业求职信
2014/03/13 职场文书
教师批评与自我批评总结
2014/10/16 职场文书
酒店前台接待岗位职责
2015/04/02 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
《颐和园》教学反思
2016/02/19 职场文书
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技