导航栏(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)

posted @ 2019-05-14 08:45 网申 阅读(...) 评论(...) 编辑 收藏