This article mainly includes three major aspects, please study carefully.
1. Form in the navigation bar
The form in the navigation bar does not use the default class mentioned in the Bootstrap form chapter, it uses the .navbar-form class. This ensures proper vertical alignment of the form and collapse behavior in narrower viewports. Use the alignment options (which are explained in detail in the Component Alignment section) to decide where the content in the navigation bar is placed.
The following example demonstrates this:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 默认的导航栏</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">林炳文在此～</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">导航一</a></li>
<li><a href="#">导航二</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="#">我是谁呢？</a></li>
<li><a href="#">我也不知道</a></li>
<li><a href="#">你是谁呢？</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
<div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜一下</button>
</form>
</div>
</nav>
</body>
</html> Effect:
Black effect
2. Buttons in the navigation bar
You can use class .navbar-btn to add a button to a
Don’t use .navbar-btn on elements inside .navbar-nav as it is not a standard button class.
The following example demonstrates this:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 默认的导航栏</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">林炳文在此～</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">导航一</a></li>
<li><a href="#">导航二</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="#">我是谁呢？</a></li>
<li><a href="#">我也不知道</a></li>
<li><a href="#">你是谁呢？</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
<div>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜一下</button>
</form>
<button type="button" class="btn btn-default navbar-btn">
导航栏按钮
</button>
</div>
</nav>
</body>
</html> The effect is as follows:
3. Text in the navigation bar
If you need to include a text string in the navigation, use class .navbar-text. This is typically used in conjunction with the
tag, ensuring appropriate leading and coloring. The following example demonstrates this:
<div class="navbar-header"> <a class="navbar-brand" href="#">林炳文在此～</a> </div> <div> <p class="navbar-text">导航栏中的文本</p> </div> <div>
The effect is as follows:
The above is the entire content of this article. I hope it will be helpful to everyone’s learning, so that everyone can implement the Bootstrap navigation bar more skillfully.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
