首页
所有分类
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 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
实例讲解JavaScript中的this指向错误解决方法
Jun 13 Javascript
Vue.JS入门教程之处理表单
Dec 01 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
详解用vue-cli来搭建vue项目和webpack
Apr 20 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
解决await在forEach中不起作用的问题
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
capture(1) uniapp(4) Navigator(1) Normal From(1) element-china-area-data(1) self(1) MybatisPlus(2) Flutter(2) SpringBoot(22) tabBar(1)
You might like
选择PHP作为网站开发语言的原因分享
2012/01/03 PHP
解析php取整的几种方式
2013/06/25 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
php过滤所有的空白字符（空格、全角空格、换行等）
2015/10/27 PHP
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
js仿百度切换皮肤功能（html+css）
2016/07/10 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
Angular5.1新功能分享
2017/12/21 Javascript
vue组件传递对象中实现单向绑定的示例
2018/02/28 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
vue内置组件keep-alive事件动态缓存实例
2020/10/30 Javascript
python实现读取并显示图片的两种方法
2017/01/13 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
Python龙贝格法求积分实例
2020/02/29 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
MoviePy简介及Python视频剪辑自动化
2020/12/18 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
如何手工释放资源
2013/12/15 面试题
几个常见的消息中间件(MOM)
2014/01/08 面试题
商学院大学生求职的自我评价
2014/03/12 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
土建技术员岗位职责
2015/04/11 职场文书
校运会广播稿
2015/08/19 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
2019年“我为祖国点赞”演讲稿（3篇）
2019/09/26 职场文书