1. <body style="padding-top:50px">
  2. <!--
  3.     navbar              导航条的基础样式
  4.     nav navbar-nav        导航条里菜单的固定样式组合class
  5.     navbar-default        导航条的默认样式
  6.     navbar-static-top    导航条为直角
  7.     navbar-fixed-top    导航条固定在上面,一般这时候要给body设置padding值或margin
  8.     navbar-fixed-bottom    导航条固定在下面
  9.  -->
  10. <div class="container">
  11.     <!-- 默认样式的导航条 -->
  12.     <nav class="navbar navbar-default">
  13.         <ul class="nav navbar-nav">
  14.             <li class="active"><a href="#">W3School</a></li>
  15.             <li><a href="#">雪碧</a></li>
  16.             <li><a href="#">果汁</a></li>
  17.         </ul>
  18.     </nav>
  19.  
  20.     <!-- 黑色的导航条 -->
  21.     <nav class="navbar navbar-inverse">
  22.         <ul class="nav navbar-nav">
  23.             <li class="active"><a href="#">W3School</a></li>
  24.             <li><a href="#">雪碧</a></li>
  25.             <li><a href="#">果汁</a></li>
  26.         </ul>
  27.     </nav>
  28.  
  29.     <!-- 直角的导航条 -->
  30.     <nav class="navbar navbar-inverse navbar-static-top">
  31.         <ul class="nav navbar-nav">
  32.             <li class="active"><a href="#">W3School</a></li>
  33.             <li><a href="#">雪碧</a></li>
  34.             <li><a href="#">果汁</a></li>
  35.         </ul>
  36.     </nav>
  37.  
  38.     <!-- 固定在下面/上面的导航条 -->
  39.     <nav class="navbar navbar-inverse navbar-fixed-top">
  40.         <ul class="nav navbar-nav">
  41.             <li class="active"><a href="#">W3School</a></li>
  42.             <li><a href="#">雪碧</a></li>
  43.             <li><a href="#">果汁</a></li>
  44.         </ul>
  45.     </nav>
  46. </div>
  47. <script type="text/javascript" src="jquery/jquery.min.js"></script>
  48. <script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>
  49. </body>

效果：

导航条的其他样式：

  1. <!--
  2.     navbar-header            导航的头部，一般情况下放logo
  3.     navbar-brand            用来放logo的，需要配合navbar-header
  4.  -->
  5.  
  6. <!-- 一般情况下都会把nav包在container外面 -->
  7. <nav class="navbar navbar-default">
  8.     <div class="container">
  9.         <div class="navbar-header">
  10.             <a href="#" class="navbar-brand">
  11.                 <img src="user_photo.png" height="20"/>
  12.             </a>
  13.         </div>
  14.  
  15.         <ul class="nav navbar-nav">
  16.             <li class="active"><a href="#">W3School</a></li>
  17.             <li><a href="#">雪碧</a></li>
  18.             <li><a href="#">果汁</a></li>
  19.         </ul>
  20.     </div>
  21. </nav>
  22.  
  23. <!-- 对齐方式的导航条 -->
  24. <nav class="navbar navbar-default">
  25.     <div class="container">
  26.         <div class="navbar-header">
  27.             <a href="#" class="navbar-brand">logo</a>
  28.         </div>
  29.  
  30.         <!-- navbar-left表示内容以左边对齐 -->
  31.         <ul class="nav navbar-nav navbar-left">
  32.             <li class="active"><a href="#">W3School</a></li>
  33.             <li><a href="#">雪碧</a></li>
  34.             <li><a href="#">果汁</a></li>
  35.         </ul>
  36.  
  37.         <!-- navbar-right表示内容以右边对齐 -->
  38.         <ul class="nav navbar-nav navbar-right">
  39.             <li><a href="#">登陆</a></li>
  40.             <li><a href="#">注册</a></li>
  41.         </ul>
  42.     </div>
  43. </nav>
  44.  
  45. <!-- 有链接与文字的导航条 -->
  46. <nav class="navbar navbar-default">
  47.     <div class="container">
  48.         <div class="navbar-header">
  49.             <a href="#" class="navbar-brand">logo</a>
  50.         </div>
  51.  
  52.         <!-- navbar-left表示内容以左边对齐 -->
  53.         <ul class="nav navbar-nav navbar-left">
  54.             <li class="active"><a href="#">W3School</a></li>
  55.             <li><a href="#">雪碧</a></li>
  56.             <li><a href="#">果汁</a></li>
  57.         </ul>
  58.  
  59.         <a href="#" class="navbar-link navbar-text">链接</a>
  60.         <p class="navbar-text">这里是一段文字</p>
  61.  
  62.         <!-- navbar-right表示内容以右边对齐 -->
  63.         <ul class="nav navbar-nav navbar-right">
  64.             <li><a href="#">登陆</a></li>
  65.             <li><a href="#">注册</a></li>
  66.         </ul>
  67.     </div>
  68. </nav>
  69.  
  70. <!-- 有表单的导航条 -->
  71. <nav class="navbar navbar-default">
  72.     <div class="container">
  73.         <div class="navbar-header">
  74.             <a href="#" class="navbar-brand">logo</a>
  75.         </div>
  76.  
  77.         <!-- navbar-left表示内容以左边对齐 -->
  78.         <ul class="nav navbar-nav navbar-left">
  79.             <li class="active"><a href="#">W3School</a></li>
  80.             <li><a href="#">雪碧</a></li>
  81.             <li><a href="#">果汁</a></li>
  82.         </ul>
  83.  
  84.         <button class="btn btn-success navbar-btn">搜索</button>        
  85.  
  86.         <!-- 如果导航里有form，需要给form添加navbar-form,如果让他们在一行显示添加navbar-left -->
  87.         <form action="aaa.html" class="navbar-form navbar-left">
  88.             <input type="text" class="form-control"/>
  89.             <button class="btn btn-default">搜索</button>
  90.         </form>
  91.         <!-- navbar-right表示内容以右边对齐 -->
  92.         <ul class="nav navbar-nav navbar-right">
  93.             <li><a href="#">登陆</a></li>
  94.             <li><a href="#">注册</a></li>
  95.         </ul>
  96.     </div>
  97. </nav>

效果：

bootstrap-导航条的更多相关文章

  1. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  2. Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  3. Bootstrap 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  4. bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何

    bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何(多去看参考手册) 一.总结 一句话总结:在手机端或者平板端或者显示不够的话就缩起来了.(多去看参考手册) 二.bootst ...

  5. 浅谈Bootstrap——导航条起步

    不多说,直接上代码. <div class="navbar navbar-default"> <div class="container"&g ...

  6. bootstrap导航条+模态对话框+分页样式

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. Bootstrap——导航条（navbar）

    导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航).表单以及表单和导航一起结合等多种形式. 在制作一个基 ...

  8. bootstrap导航条组件

    一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-flui ...

  9. bootstrap导航条等样例持续更新》。。

    1.导航条 <!-- 导航条 --> <nav class="navbar navbar-static-top navbar-inverse"> <d ...

  10. bootstrap导航条相关知识

    在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 为导航条添加标题.二级菜单及状态 <div class=&quo ...

随机推荐

  1. iOS开发UI篇—从代码的逐步优化看MVC

    iOS开发UI篇—从代码的逐步优化看MVC 一.要求 要求完成下面一个小的应用程序. 二.一步步对代码进行优化 注意:在开发过程中,优化的过程是一步一步进行的.(如果一个人要吃五个包子才能吃饱,那么他 ...

  2. 对比Linux系统和Windows系统哪个更好

    最近半年来,我一直在读一本叫做<Linux就该这么学>的Linux教材,确实让我进步的很快,也慢慢的让Linux系统走入了我的知识认知中,那么学习前我们来对比下Windows和Linux的 ...

  3. Java学习指南学习笔记

    1, Java是一种静态类型.动态绑定的语言.具体来说,每一个对象都是编译时确定的良好类型.同时,可以在运行时检查一个对象究竟是什么. 2, Java中除了基本数字类型之外,Java中所有的对象都是通 ...

  4. SharePoint\O365 "See also"功能 and site feature 激活\禁用小节

    博客地址:http://blog.csdn.net/FoxDave 最近因为问题发现了SharePoint的"See also"功能,该功能是由SharePoint自动的Feat ...

  5. Ubuntu16.04 操作

    1. 无法获得锁 /var/lib/dpkg/lock - open (11: 资源临时不可用) sudo rm /var/cache/apt/archives/locksudo rm /var/li ...

  6. centos lamp

    一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...

  7. Java与数据库之间时间的处理

    Java与数据库之间时间的处理 在数据库中建表: DROP TABLE IF EXISTS `times`; CREATE TABLE `times` ( `id` int(11) NOT NULL ...

  8. mysql alter 语句用法,添加、修改、删除字段等

    2013-05-03 17:13 39459人阅读 评论(1) 收藏 举报  分类: Mysql(9)  修改表名: ALTER  TABLE admin_user RENAME TO a_use / ...

  9. CSS第一天总结

    CSS是层叠样式表,其作用在我看来就是统一一个或多个元素或者ID.class等的属性,CSS可以定义的属性非常多,一个好看的网页离不开CSS的修饰. CSS简而言之就是三个部分:选择符.属性.属性值. ...

  10. JQuery源码解析（十一）

    内存泄露 什么是内存泄露? 内存泄露是指一块被分配的内存既不能使用,又不能回收,直到浏览器进程结束.在C++中,因为是手动管理内存,内存泄露是经常出现的事情.而现在流行的C#和Java等语言采用了自动 ...