首页
所有分类
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 相关文章推荐
js操作iframe的一些方法介绍
Jun 25 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
vue实现图片上传到后台
Jun 29 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
JS页面动态绘图工具SVG，Canvas，VML介简介
Oct 16 Javascript
JavaScript实现轮播图效果
Oct 30 Javascript
原生JS实现音乐播放器的示例代码
Feb 25 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
Tkinter(4) agg(1) apply(1) mp3Play(1) GUI(2) sortInts(1) pandas(7) 数据处理(2) Pool(1) WebSockets(3)
You might like
PHP字典树(Trie树)定义与实现方法示例
2017/10/09 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
PHP常见过waf webshell以及最简单的检测方法
2019/05/21 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
纯javascript实现分页(两种方法)
2015/08/26 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
js文字横向滚动特效
2015/11/11 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Python的Flask框架应用程序实现使用QQ账号登录的方法
2016/06/07 Python
Python变量和字符串详解
2017/04/29 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
Python3单行定义多个变量或赋值方法
2018/07/12 Python
离线状态下在jupyter notebook中使用plotly实例
2020/04/24 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
Tory Burch英国官方网站：美国时尚生活品牌
2017/12/06 全球购物
设计师珠宝：Ylang 23
2018/05/11 全球购物
Ajax实现页面无刷新留言效果
2021/03/24 Javascript
学生会主席就职演讲稿
2014/01/14 职场文书
公司接待方案
2014/03/08 职场文书
工厂车间标语
2014/06/19 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
就业推荐表院系意见
2015/06/05 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书