首页
所有分类
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 相关文章推荐
jQuery对表单的操作代码集合
Apr 06 Javascript
js 浏览器事件介绍
Mar 30 Javascript
Jquery操作radio的简单实例
Jan 06 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
JS求解两数之和算法详解
Apr 28 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
vue实现下拉菜单树
Oct 22 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
井字棋(1) PyTorch(1) 人工智能(2) 对齐打印(1) 底部导航(1) 五子棋(12) format(1) 图像处理(1) 计算器(5) 异步回调(1)
You might like
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
PHP中获取内网用户MAC地址（WINDOWS/linux）的实现代码
2011/08/11 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PHP邮件群发机实现代码
2016/02/16 PHP
linux下为php添加iconv模块的方法
2016/02/28 PHP
用php和jQuery来实现“顶”和“踩”的投票功能
2016/10/13 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
javascript编程起步（第七课）
2007/01/10 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
详解vuex的简单使用
2018/03/12 Javascript
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
layui动态加载多表头的实例
2019/09/05 Javascript
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
[02:29]大剑、皮鞭、女装，这届DOTA2勇士令状里都有
2020/07/17 DOTA
python 自动批量打开网页的示例
2019/02/21 Python
Python3.8中使用f-strings调试
2019/05/22 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
Python 实现 T00ls 自动签到脚本代码（邮件+钉钉通知）
2020/07/06 Python
难忘的一课教学反思
2014/04/30 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
研究生个人学年总结
2015/02/14 职场文书
导游词之潮音寺
2019/09/26 职场文书
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
深入理解 Golang 的字符串
2022/05/04 Golang