3.5Bootstrap组件篇之导航条_通过添加()样式类可以设计导航条() a .nav-navbar b .nav-bar c .nav-CSDN博客

本文链接：https://blog.csdn.net/a316212802/article/details/25004549

1、默认的导航条

导航条是在您的应用或网站中作为导航标头的响应式元组件。它们在移动设备上可以折叠（并且可开可关），且在可用的视口宽度增加时变为水平展开模式

定制折叠模式与水平模式的阈值

根据你所放在导航条上的内容的长度，也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。

Requires JavaScript

If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.

第一步：

最外面的容器nav标签，并添加nav-bar样式类，表示这里面属于导航条

		<nav class="navbar navbar-default" role="navigation">
		</nav>

效果：

第二步：增加header

<nav class="navbar navbar-default" role="navigation">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				</button>
			<a href="#" class="navbar-brand">品牌</a>
			</div>
		</nav>

按钮标签里嵌套了三个span的icon。然后给与navbar-toggle样式类和属性collapse(收起)，点击的时候目标为data-target。
当窗口缩小到一定程度，右侧的效果显现。

第三步、嵌套下拉菜单，form表单，下拉菜单。

代码：

<h1 class="page-header">导航条</h1>
		<nav class="navbar navbar-default" role="navigation">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				</button>
			<a href="#" class="navbar-brand">品牌</a>
			</div>
			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				<!--嵌套下拉菜单-->
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						下拉<b class="caret"></b>
						</a>
						<ul class="dropdown-menu">
							<li><a href="#">Action</a></li>
							<li><a href="#">Action</a></li>
							<li><a href="#">Action</a></li>
							<li><a href="#">Action</a></li>
						</ul>
					</li>
				</ul>
				
				<!--嵌套表单-->
				<form action="" class="navbar-form navbar-left" role="search">
					<div class="form-group">
					<input type="text" class="form-control" />
					</div>
					<button type="button" class="btn btn-default">Submit</button>
				
				</form>
				<!---->
			</div>
		</nav>

预览：

增强导航条的可访问性

要增强可访问性，一定要给每个导航条加上role="navigation"。

2、表单

将表单放置于.navbar-form之内可以呈现很好的垂直对齐，并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。

通过使用mixin，.navbar-form和 .form-inline共享了很多代码。

代码

<form action="" class="navbar-form navbar-left" role="search">
					<div class="form-group">
					<input type="text" class="form-control" />
					</div>
					<button type="button" class="btn btn-default">Submit</button>
				
				</form>

为输入框添加label标签

如果你没有为输入框添加label标签，屏幕阅读器将会遇到问题。对于导航条内的表单，可以通过.sr-only class隐藏label标签。

3、按钮

代码：

<button type="button" class="btn btn-default navbar-btn">登陆</button>

预览：

Context-specific usage

Like the standard button classes, .navbar-btn can be used on <a> and <input> elements. However, neither .navbar-btnnor the standard button classes should be used on <a> elements within .navbar-nav.

4、文本

把文本包裹在.navbar-text中时，为了有正确的行距和颜色，通常使用<p>标签。

代码段：

<p class="navbar-text">文本</p>

5、非导航的链接

或许你希望在标准的导航组件之外添加标准链接，那么，使用.navbar-link class可以让链接有正确的默认颜色和反色。

代码段：

<p class="navbar-text navbar-right">这个是<a href="#" class="navbar-link">链接</a></p>

6、组件对齐

用.navbar-left或者.navbar-right工具类给导航链接、表单、按钮或文本对齐。两种类都用到在特定方向的CSS浮动样式。例如，要对齐导航链接，就要把它们放在个分开的、应用了工具类的<ul>里。

这些class是.pull-left和.pull-right的mixin版本，但是他们被限定在了媒体查询中，这样可以更容易的在各种尺寸的屏幕上处理导航条组件。

7、固定在顶部

添加.navbar-fixed-top可以让导航条固定在顶部。效果就不上了。

需要为body标签设置内补（padding）

这个固定的导航条会遮住页面上的其它内容，除非你给<body>的上方设置了padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是50px。

body { padding-top: 70px; }

一定要放在Bootstrap CSS的核心文件之后。（覆盖问题）

8、固定在底部

用.navbar-fixed-bottom代替。

需要为body标签设置内部（padding）

这个固定的导航条会遮住页面上的其它内容，除非你给<body>底部设置了padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是50px。

body { padding-bottom: 70px; }

一定要在加载Bootstrap CSS的核心后使用它。

9、静止在顶部

通过添加.navbar-static-top即可创建一个与页面的导航条。它会随着页面向下滚动而消失。和.navbar-fixed-*类不同的是，你不用给body添加padding。

10、反色的导航条

通过添加.navbar-inverse类可以改变导航条的外观。