bootstrap边学边做记（二）：导航条制作
bootstrap边学边做记（二）
如何制作一个固定导航栏？
1.bootstrap提供了丰富的组件，在这里查找nav，如下图所示：
2.找到模板，粘贴到你的项目上，ctrl+s，然后浏览器运行
代码：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
运行结果:
3.然后进行一些小修改：
代码：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="./CSS/bootstrap.css" >
<title>导航栏制作</title>
</head>
<body>
<!-- 粘性顶部 -->
<nav class="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">公司名字</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<!-- active保持高亮主题 -->
<li class="nav-item active">
<a class="nav-link" href="#">Home
<!-- 屏幕阅读器 -->
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<!-- 下拉菜单 -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="./JS/jquery.js" ></script>
<script src="./JS/popper.js" ></script>
<script src="./JS/bootstrap.min.js" ></script>
</body>
</html>
运行结果:.navbar-brand 适用于您的公司，产品或项目名称。下图是有无.navbar-brand区别
无.navbar-brand有.navbar-brand
CSS代码片段：
因为这里是在.navbar-dark里，所以他会变成白色
.navbar-nav 用于全高度和轻量级导航（包括对下拉菜单的支持）。
没有.navbar-nav 效果:有.navbar-nav 效果
CSS代码片段：因为在.navbar-dark里，所以颜色会变成下面CSS代码的颜色
4.如何添加图标
添加图像.navbar-brand可能总是需要自定义样式或实用程序来正确调整大小。建议不要给我搞这样的图，如果有这样的图怎么办，切吧
一顿ps操作后，现在好看多了,（顺便宣传下我们学校）
5.代码解释
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
data-toggle="collapse" 添加到您想要展开或折叠的组件的链接上。
href 或 data-target 属性添加到父组件，它的值是子组件的 id。
data-parent 属性把折叠面板（accordion）的 id 添加到要展开或折叠的组件的链接上。
aria-* ：这属性是跟盲人阅读器有关
.navbar-toggler用于我们的折叠插件和其他导航切换行为。
效果：当他小于一定宽度时候就会显示出来
.collapse.navbar-collapse 用于通过父断点对导航栏内容进行分组和隐藏。
.form-inline 将各种表单控件和组件放在导航栏中,如输入框，按钮
.navbar-text 用于添加垂直居中的文本字符串。
6.固定导航与粘性导航：（欢迎补充）
Fixed top,图示：
Sticky top，图示：