更换背景颜色：
.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>
相关推荐
2. **预定义组件**：Bootstrap提供了丰富的预构建组件，如导航条（navbar）、模态框（modal）、下拉菜单（dropdown）、按钮组（button group）、卡片（card）等，这些组件简化了网页的开发过程。 3. **CSS样式**：...
- **导航条**（Navbar）：提供了一种创建顶部固定导航菜单的方式，支持折叠和展开，适应不同设备。 - **模态框**（Modal）：可以在当前页面上弹出一个可交互的窗口，用于显示额外的内容或进行操作。 - **按钮组**...
例如，导航条（Navbar）可以让你轻松构建顶部导航，按钮（Buttons）提供了不同风格和大小的选择，表格（Tables）则让你能够快速创建结构化的数据展示。此外，还有模态框（Modals）、下拉菜单（Dropdowns）、分页...
3. **组件**：Bootstrap 3包含多种可复用的组件，如导航条（navbar）、下拉菜单（dropdown）、模态框（modal）、轮播图（carousel）、按钮组（button group）和表单控件等，这些组件大大减少了自定义设计的工作量。...
3. **JavaScript 插件**：Bootstrap的JavaScript插件包括导航条（navbar）、模态框（modal）、下拉菜单（dropdown）、工具提示（tooltip）、弹出框（popover）、滚动spy、tab切换、 Collapse折叠内容、轮播...
3. **CSS组件**：Bootstrap 3提供了许多内置的CSS组件，如按钮（Buttons）、表单（Forms）、导航条（Navbar）、下拉菜单（Dropdowns）、模态框（Modals）、警告提示（Alerts）等，这些组件可以快速构建常见的网页...
3. **新组件**：Bootstrap 4引入了新的组件，如卡（Cards）、模态（Modals）、导航条（Navbar）和折叠内容（Collapse）。这些组件都经过优化，更易于使用和定制。 4. **颜色系统**：Bootstrap 4提供了一套全新的...
8. **布局和组件**：Bootstrap-WPF 样式支持常见的 Bootstrap 组件，如卡片（Card）、网格系统（Grid）、导航条（Navbar）、按钮（Button）、表单（Form）等。开发者可以直接在 WPF 应用程序中使用这些组件，以快速...
在JavaScript组件方面，Bootstrap 5提供了诸如模态框（Modal）、下拉菜单（Dropdown）、轮播（Carousel）、导航条（Navbar）等常见功能。这些组件都进行了重构，以提高性能和减少代码量。例如，新的Tooltips和...
导航条是Bootstrap3中的重要组件，可以轻松创建固定在顶部、折叠式或者带有下拉菜单的导航栏。例如，通过添加`.navbar`、`.navbar-default`、`.navbar-static-top`、`.navbar-collapse`等类，可以快速构建一个基础的...
3. **导航条（Navbar）**：Bootstrap3提供了多种类型的导航条，包括固定顶栏、折叠式菜单等，用于构建网站的主要导航结构。在第十三讲中，可能详细讲解了如何创建和定制这些导航条。 4. **按钮（Buttons）和按钮组...
4. **组件**：Bootstrap 提供了一系列可重用的UI组件，如导航条（Navbar）、下拉菜单（Dropdowns）、按钮组（Button Groups）、轮播（Carousel）、警告提示（Alerts）、模态框（Modals）、缩略图（Thumbnails）、...
2. **预定义的组件**：Bootstrap提供了许多预先设计的UI组件，如导航条（navbar）、按钮（button）、表单（form）、下拉菜单（dropdown）、模态框（modal）、警告提示（alert）、轮播（carousel）等，这些组件大大...
4. **导航条（Navbar）**：Bootstrap3的导航条是构建网站顶部导航的重要元素，支持固定顶置、折叠、品牌标识等功能。了解如何定制导航条样式，添加链接和下拉菜单，对于构建专业级网站至关重要。 5. **模态框...
在JavaScript方面，Bootstrap提供了许多交互式的组件，如模态框（modal）、下拉菜单（dropdown）、导航条（navbar）、轮播（carousel）、工具提示（tooltip）和弹出框（popover）。这些组件可以通过引入`bootstrap....
4. **导航栏（Navbar）**：Bootstrap的导航栏组件可以方便地创建顶部导航，支持固定在顶部、折叠在小屏幕设备上等功能。 5. **页眉（Header）和页脚（Footer）**：模板通常包含预定义的页眉和页脚结构，便于添加...
3. **组件**: 提供了丰富的UI组件，如模态框（Modal）、下拉菜单（Dropdown）、轮播（Carousel）、导航条（Navbar）、工具提示（Tooltip）和弹出框（Popover）等，这些都是网页设计中常见的功能。 4. **JavaScript...
项目的核心是Bootstrap的固定导航条（navbar-fixed）组件，这是Bootstrap提供的一个基础布局元素，通常设置在页面顶部，始终保持可见。然而，对于某些设计需求，可能会希望在用户滚动页面时导航条能够自动隐藏，以...
本文实例为大家分享了bootstrap导航条的具体代码，供大家参考，具体内容如下 <body style=padding-top:50px> <!-- navbar 导航条的基础样式 nav navbar-nav 导航条里菜单的固定样式组合class navbar-...