«
bootstrap学习笔记 - 导航栏(navbar)

时间：2021-12-4    作者：范文泉    分类： 编程

导航栏容器可以包含以下几个常用组成：品牌LOGO（.navbar-brand ）、导航菜单（.navbar-nav）、导航文本（.navbar-text）、折叠导航按钮（.navbar-toggle）、表单（.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来定义：
<nav class="navbar navbar-expand-md bg-light nav-light">
    <ul class="navbar-nav">
        <li class="nav-item active"><a href="#" class="nav-link ">菜单一</a></li> 
        <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li> 
        <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li> 
    </ul> 
</nav>
样式 说明
.navbar-nav 应用于ul标签
.nav-item 、 .active 应用于li标签
.nav-link 、 .disabled 应用于a标签
三、导航栏中加品牌元素（.navbar-brand）:
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <!-- 品牌 -->
    <a href="#" class="navbar-brand">品牌LOGO</a>
    <!-- 菜单 -->
    <ul class="navbar-nav">
        <li class="nav-item active"><a href="#" class="nav-link">菜单一</a></li>
        <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
        <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
    </ul>
</nav>

品牌可以是文字，也可以是图片。

四、导航文本类（.navbar-text），使用该类可以保证文字与导航样式统一：
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <!-- 品牌 -->
    <a href="#" class="navbar-brand">品牌LOGO</a>
    <!-- 菜单 -->
    <ul class="navbar-nav">
        <li class="nav-item active"><a href="#" class="nav-link">菜单一</a></li>
        <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
        <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
    </ul>
    <span class="navbar-text">这是一句文字</span>
</nav>
五、折叠导航：小屏幕上我们都会折叠导航栏，通过点击来显示导航选项：
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
    <!-- 品牌 -->
    <a href="#" class="navbar-brand">品牌LOGO</a>

    <!-- 定义折叠按钮 -->
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav-menu">
        <span class="navbar-toggler-icon"></span>
    </button>

    <!-- 把菜单包含在容器内 -->
    <div class="collapse navbar-collapse" id="nav-menu">
        <ul class="navbar-nav">
            <li class="nav-item active"><a href="#" class="nav-link">菜单一</a></li>
            <li class="nav-item"><a href="#" class="nav-link">菜单二</a></li>
            <li class="nav-item"><a href="#" class="nav-link disabled">菜单三</a></li>
        </ul>
    </div>
</nav>
折叠导航注意事项：
  1. 定义折叠按钮时除了折叠的属性之外，还必须加上样式： .navbar-toggler
  2. 折叠按钮内加上折叠图标，样式： .navbar-toggler-icon
  3. 菜单要包含一个容器内，容器必须包含样式： .collapse 和 .navbar-collapse
六、导航内加表单时，一定要把表单加上内联样式（.form-inline）

标签: bootstrap 导航栏 navbar