导航栏（navbar）-bootStrap4常⽤CSS笔记
导航栏：navbar
导航栏容器可以包含以下⼏个常⽤组成：
1、品牌LOGO（.navbar-brand ）
2、导航菜单（.navbar-nav）
3、导航⽂本（.navbar-text）
导航菜单
4、折叠导航按钮（.navbar-toggle）
5、表单（.form-inline）
⼀、导航容器⼀般使⽤nav标签来定义：
<nav class="navbar">...</nav>
导航容器可⽤样式：
.
navbar导航栏基础样式
.navbar-expand-{sm | md | xl | lg}响应式导航，⼤屏幕⽔平铺开，⼩屏幕垂直堆叠.flex-top导航栏⼀直在顶部
.flex-bottom导航栏⼀直在顶部
.bg-{primary | secondary | success | info | danger | warning | dark | light}导航栏的背景颜⾊
.navbar-dark导航配⾊⽅案。深⾊背景，加此样式可以突显⽂字.navbar-light导航配⾊⽅案。浅⾊背景，加此样式可突显⽂字
⼆、导航菜单⼀般使⽤ul、li来定义：
1<nav class="navbar navbar-expand-md bg-light nav-light">
2<ul class="navbar-nav">
3<li class="nav-item active"><a href="#" class="nav-link ">菜单⼀</a></li>
4<li class="nav-item"><a href="#" class="nav-link">菜单⼆</a></li>
5<li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
6</ul>
7</nav>
导航菜单可⽤样式：
.navbar-nav应⽤于ul标签
.nav-item 、 .active应⽤于li标签
.nav-link 、 .disabled应⽤于a标签
三、导航栏中加品牌元素（.navbar-brand）:
1<nav class="navbar navbar-expand-md bg-dark navbar-dark">
2<!-- 品牌 -->
3<a href="#" class="navbar-brand">品牌LOGO</a>
4
5<!-- 菜单 -->
6<ul class="navbar-nav">
7<li class="nav-item active"><a href="#" class="nav-link">菜单⼀</a></li>
8<li class="nav-item"><a href="#" class="nav-link">菜单⼆</a></li>
9<li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
10</ul>
11</nav>
品牌可以是⽂字，也可以是图⽚。
四、导航⽂本类（.navbar-text），使⽤该类可以保证⽂字与导航样式统⼀：
1<nav class="navbar navbar-expand-md bg-dark navbar-dark">
2<!-- 品牌 -->
3<a href="#" class="navbar-brand">品牌LOGO</a>
4<!-- 菜单 -->
5<ul class="navbar-nav">
6<li class="nav-item active"><a href="#" class="nav-link">菜单⼀</a></li>
7<li class="nav-item"><a href="#" class="nav-link">菜单⼆</a></li>
8<li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
9</ul>
10<span class="navbar-text">这是⼀句⽂字</span>
11</nav>
五、折叠导航：⼩屏幕上我们都会折叠导航栏，通过点击来显⽰导航选项：
1<nav class="navbar navbar-expand-md bg-dark navbar-dark">
2<!-- 品牌 -->
3<a href="#" class="navbar-brand">品牌LOGO</a>
4
5<!-- 定义折叠按钮 -->
6<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-menu"> 7<span class="navbar-toggler-icon"></span>
8</button>
9
10<!-- 把菜单包含在容器内 -->
11<div class="collapse navbar-collapse" id="nav-menu">
12<ul class="navbar-nav">
13<li class="nav-item active"><a href="#" class="nav-link">菜单⼀</a></li>
14<li class="nav-item"><a href="#" class="nav-link">菜单⼆</a></li>
15<li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
16</ul>
17</div>
18</nav>
折叠导航注意事项：
1、定义折叠按钮时除了折叠的属性之外，还必须加上样式： .navbar-toggler
2、折叠按钮内加上折叠图标，样式： .navbar-toggler-icon
3、菜单要包含⼀个容器内，容器必须包含样式： .collapse 和 .navbar-collapse
六、导航内加表单时，⼀定要把表单加上内联样式（.form-inline）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。