首页
所有分类
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 相关文章推荐
Dom操作之兼容技巧分享
Sep 20 Javascript
extjs两个tbar问题探讨
Aug 08 Javascript
Javascript学习笔记之 对象篇（三） : hasOwnProperty
Jun 24 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
Vue 过渡（动画）transition组件案例详解
Jan 22 Javascript
javascript自执行函数
Feb 10 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 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
mysqldump(1) protocol(1) sentinel(1) csgo(1) ACID(1) Windows server 2003(1) xps(1) Stater(1) sock(2) XPathParser(1)
You might like
php&amp;java（三）
2006/10/09 PHP
PHP 身份验证方面的函数
2009/10/11 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
php将图片文件转换成二进制输出的方法
2015/06/10 PHP
深入php内核之php in array
2015/11/10 PHP
PHP实现导出带样式的Excel
2016/08/28 PHP
PHP实现在windows下配置sendmail并通过mail()函数发送邮件的方法
2017/06/20 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
深入探寻javascript定时器
2015/01/02 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
vue中监听路由参数的变化及方法
2019/12/06 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
python getopt 参数处理小示例
2009/06/09 Python
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
python Pygame的具体使用讲解
2017/11/03 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
简单了解python PEP的一些知识
2019/07/13 Python
Python3.7基于hashlib和Crypto实现加签验签功能(实例代码)
2019/12/04 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
Python-for循环的内部机制
2020/06/12 Python
Python datetime模块使用方法小结
2020/06/18 Python
Python之字符串的遍历的4种方式
2020/12/08 Python
养殖人员的创业计划书范文
2013/12/26 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书