<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. iOS开发UI篇—ios应用数据存储方式(归档)

    iOS开发UI篇—ios应用数据存储方式(归档)  一.简单说明 在使用plist进行数据存储和读取,只适用于系统自带的一些常用类型才能用,且必须先获取路径相对麻烦: 偏好设置(将所有的东西都保存在同 ...

  2. SQL语句---nvl 用法

    SQL语句---nvl 用法   一NVL函数是一个空值转换函数 NVL(表达式1,表达式2) 如果表达式1为空值,NVL返回值为表达式2的值,否则返回表达式1的值. 该函数的目的是把一个空值(nul ...

  3. BestCoder Round #40

    T1:Tom and pape (hdu 5224) 题目大意: 给出一个矩形面积N,求周长的最小值.(长&&宽&&面积都是正整数) N<=109 题解: 没啥好 ...

  4. hdu 1050 (preinitilization or postcleansing, std::fill) 分类: hdoj 2015-06-18 11:33 34人阅读 评论(0) 收藏

    errors, clauses in place, logical ones, should be avoided. #include <cstdio> #include <cstr ...

  5. Android MediaPlayer和SurfaceView播放视频

    昨天介绍了VideoView播放视频,今天再介绍一种播放视频的方法MediaPlayer和SurfaceView,MediaPlayer播放音频,SurfaceView来显示图像,具体步骤如下: 1. ...

  6. HDU1004 BALLO0N

    Let the Balloon Rise Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...

  7. iOS 根据UIImage 修改UIImageView Frame (包括截取图片中间部分)

    iOS UIImageView 根据需求调整frame 1.图片的宽和高不相等,截取图片的中间部分,截取的部分Size明确 2.图片的宽度要等于其父视图的类的宽度,然后根据宽度计算高度,保证 图片不变 ...

  8. SQL匹配顺序

    SELECT%DISTINCT%%FIELD%FROM %TABLE%%JOIN%%WHERE%%GROUP%%HAVING%%ORDER%%LIMIT% %UNION%%COMMENT%

  9. VHDL:信号、端口以及和Verilog的区别

    1.信号 信号是描述硬件系统的基本数据对象,它的性质类似于连接线.信号可以作为设计实 体中并行语句模块间的信息交流通道.      信号作为一种数值容器,不但可以容纳当前值,也可以保持历史值(这决定于 ...

  10. SAP HR宏 rp-provide-from-last

    运行se11 Database table: 输入 TRMAC 点击display 查看其内容:第14个按钮(ctrl + shift +F10) 再Name 输入:rp-provide-from-l ...