<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>

效果：

导航条的其他样式：

<!--

    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-导航条的更多相关文章

  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. Windows Store App 全球化：在XAML元素中引用字符串资源

    在应用程序中可以通过XAML元素和后台代码两种方式引用资源文件中的字符串资源.本小节先讲述如何在XAML元素中引用字符串资源的相关知识点. 在XAML元素中可以通过使用x:Uid属性来引用资源文件中的 ...

  2. PDF 补丁丁 0.4.2.1023 测试版发布：新增旋转页面功能

    新的测试版发布啦.此版本增加了旋转页面的功能. 在“PDF文档选项”对话框的“页面设置”选项卡中,可设置需要旋转的页面(输入页码范围),以及旋转角度. 此外,还修复了统一页面尺寸功能的小问题.

  3. GCC选项 –I,-l,-L

    -I:指定第一个寻找头文件的目录 -L:指定第一个寻找库文件的目录 -l:表示在库文件目录中寻找指定的动态库文件 例: gcc –o hello hello.c –I /home/hello/incl ...

  4. python语法------时间函数

    1.导入函数库: import time 获取格式化的时间 你可以根据需求选取各种格式,但是最简单的获取可读的时间模式的函数是asctime(): #!/usr/bin/python # -*- co ...

  5. FileUpload V2.1详细

    Uploadify是JQuery的一个上传插件,实现的效果非常不错,带进度显示.不过官方提供的实例时php版本的,本文将详细介绍Uploadify在Aspnet中的使用,您也可以点击下面的链接进行演示 ...

  6. （DFS）codevs1004-四子连棋

    题目地址 方法是建立dfs,并在其中加入pre变量,记录之前移动的是W还是B.外面套for循环,从1步开始逐次递增,直到在i步时可以走完(dfs返回1),break退出循环,即为最短步. 本题的关键主 ...

  7. jQuery.extend源码深层分析

    在网站的开发中,经常会自己写一些jQuery插件来方便使用,其中自然少不了一个关键的方法->jQuery.extend(),使用这个方法来扩展jQuery对象. 那么今天就来讲讲这个函数的实现原 ...

  8. 初始化脚本(Os_Init_Optimization.sh)

    #!/bin/bash #解压缩startup.tar.gz包 cd /tmp && tar -zxf startup.tar.gz #初始化YUM源 rm -rf /etc/yum. ...

  9. disconnected no supported authentication methods available(server sent: publickey，keyboard interae）

    因为乌龟Git和Git的冲突 我们需要把乌龟Git设置改正如下. 找到TortoiseGit -> Settings -> Network 将SSH client指向~\Git\bin\s ...

  10. JS中数据类型及原生对象简介

    js是一种专门设计用来给网页增加交互性的编程语言,它的技术体系包含了一下几个方面: 1.JavaScript核心语言定义:包括数据类型,变量,常量,运算符,语句等. 2.原生对象和内置对象 3.浏览器 ...