首页
所有分类
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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
查询json的数据结构的8种方式简介
Mar 10 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
JS提交form表单实例分析
Dec 10 Javascript
jQuery语法小结(超实用)
Dec 31 Javascript
jquery dataview数据视图插件使用方法
Dec 23 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
AngularJS  ng-repeat遍历输出的用法
Jun 19 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
Nov 04 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
增删改查(2) 存储过程(3) muduo(1) pt-archiver(1) 忘记密码(1) instantclient(1) 优化(1) B+树(2) TcpServer(1) ICF-5900W(2)
You might like
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
php中常用字符串处理代码片段整理
2011/11/07 PHP
PHP+Ajax实时自动检测是否联网的方法
2015/07/01 PHP
PHP 自动加载的简单实现(推荐)
2016/08/12 PHP
DOM Scripting中的图片切换[兼容Firefox]
2010/06/12 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
九种js弹出对话框的方法总结
2013/03/12 Javascript
ajax与302响应代码测试
2013/10/23 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
2016/12/23 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
小程序hover-class点击态效果实现
2019/02/26 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
[51:27]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
Python如何读写二进制数组数据
2020/08/01 Python
详解Canvas 跨域脱坑实践
2018/11/07 HTML / CSS
美国最佳在线航班预订网站：LookupFare
2019/03/26 全球购物
美国折扣地毯销售网站：Rugs.com
2020/03/27 全球购物
分层教学实施方案
2014/03/19 职场文书
房屋买卖协议书范本
2014/04/10 职场文书
教师个人事迹材料
2014/12/17 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
python 网络编程要点总结
2021/06/18 Python