更换背景颜色：
.navbar {
background-color: #febf04;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Basic Tab Based Navigation Example</title>
<meta name="description"
content="Twitter Bootstrap Basic Tab Based Navigation Example">
<link href="../../bootstrap-3.0.0/dist/css/bootstrap.min.css"
rel="stylesheet">
<style type="text/css">
<!-- 自定义导航条背景 -->
.navbar-w3r{
background: #ffd65e; /* Old browsers */
background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffd65e 0%,#febf04 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffd65e 0%,#febf04 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
}
</style>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../bootstrap-3.0.0/assets/js/html5shiv.js"></script>
<script src="../../bootstrap-3.0.0/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- 导航开始 -->
<nav class="navbar navbar-fixed-top navbar-w3r" role="navigation">
<div class="container">
<!-- 项目名称/公司名称 -->
<div class="navbar-header">
<!-- 这个button有什么用？ -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project Name</a>
</div>
<!-- 导航 -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<!-- 下拉列表 -->
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.sina.com.cn">新浪</a></li>
<li><a href="http://www.google.com.hk">谷歌</a></li>
</ul>
</li>
</ul>
<!-- 1个简单的表单 -->
<form class="navbar-form navbar-right" action="#">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div><!-- /.navbar-collapse -->
</div>
</nav>
<script src="../../jquery/jquery-1.10.2.min.js"></script>
<script src="../../bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>
相关推荐
本文实例为大家分享了bootstrap导航条的具体代码，供大家参考，具体内容如下 <body style=padding-top:50px> <!-- navbar 导航条的基础样式 nav navbar-nav 导航条里菜单的固定样式组合class navbar-...
Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态，都是点击弹出下拉菜单，为了适应一般网站使用，我稍作了一些修改，鼠标hover时就弹出二级菜单。 效果图： CSS修改： <style type="text/css...
本文实例为大家分享了Bootstrap导航条的具体代码，供大家参考，具体内容如下 navbar： 导航条的基础样式 nav navbar-nav ：导航条里菜单的的固定样式组合的class navbar-default ：导航条的默认样式 navbar-...
主要为大家详细介绍了Bootstrap CSS组件之导航条(navbar)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
一、基础导航条 在制作一个基础导航条时，主要分以下几步： 第一步：首先在制作导航的列表(”nav”>)基础上添加类名“navbar-nav” 第二步：在列表外部添加一个容器（div），...-- 基础导航条--> <ul cl
本文为大家介绍Bootstrap滚动监听，供大家学习，具体内容如下 ...-- navbar navbar-inner nav navbar-fixed-top 固定导航条 --> <div id=menu class=navbar> <div class=navbar-inner> <li><a>列表1</a></li>
navbar-default类用来规定导航条的颜色，可以更改为navbar-inverse来让导航条反色显示。bootstrap官网建议使用nav元素。但也常用div元素，建议用div元素时增加role=”navigation”属性，该属性对一些特殊的辅助设备...
源码解读Bootstrap导航条 基础导航条 要制作一个基础导航条，要在制作导航的列表”nav”>基础上添加类名“navbar-nav”，然后在列表外部添加一个容器（div），并且使用类名“navbar”和“navbar-default”。例如： ...
主要为大家详细解析了Bootstrap中form、navbar的使用方法，感兴趣的朋友可以参考一下
在导航条(navbar)中有一个背景色（显示更突出）、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。 导航条和导航一样...
导航条是在您的应用或网站中作为导航标头的响应式元组件。 1、默认的导航条 导航条在移动设备上可以折叠（并且可开可关），且在可用的视口宽度增加时变为水平展开模式 定制折叠模式与水平模式的阈值 根据你所放在...
导航条（navbar）在Bootstrap中是一个独立组件，导航条（navbar）和导航（nav）在Bootstrap中是有明显的区别的。在导航条（navbar）中有一个背景色、而且导航条可以是纯链接、表单、表单和导航一起结合等多种形式。 ...
应用场景：经典上下布局中，顶部导航条固定，下部填充不显示滚动条 解决方案：导航条固定在顶部，同时为body设置内边距（padding-top），内边距为导航条高度（默认50px，可自己调整高度），html代码如下： <!--...
通过bootstrap文档对导航条样式的设置发现，其实本身是有一个类似于主题的概念 – navbar-default：默认的外观 – navbar-inverse：暗色背景的样式 – 所以我们希望可以通过自定义一套完整的风格： 比如自定义一个...
导航条（navbar）在Bootstrap中是一个独立组件，导航条（navbar）和导航（nav）在Bootstrap中是有明显的区别的。在导航条（navbar）中有一个背景色、而且导航条可以是纯链接、表单、表单和导航一起结合等多种形式。 ...
导航条（navbar）和上一节介绍的Bootstrap入门书籍之（四）菜单、按钮及导航。导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航...
以下是头部导航的代码,我只简要的对个别常用属性进行解释 总效果如图所示: 代码如下: <nav class=navbar> ...//container-fluid设置导航条内容是否有一定的内间距,如果class=container-fluid则没有
Bootstrap，来自 ...响应式导航条就是可以在不同的设备下查看不同的效果。 下面给大家分享代码： <nav role=navigation class=navbar> <div class=navbar-header> <button type=button class=navbar-toggle
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。 如何创建滚动监听 以下实例演示了如何创建滚动监听： 实例 <!-- The navbar - The...