Bootstrap学习记录-1.Navigation

Bootstrap中的导航栏功能需要添加bootstrap.css、jquery.js、bootstrap.js，其中，jquery.js文件是bootstrap.js文件中必须的，否则就会抛出异常信息：Bootstrap\'s JavaScript requires jQuery。

1. 工作原理

学习Navbar之前，学习知道以下知识点：

nav标签必须使用.navbar、.navbar-expand{-sm|-md|-lg|-xl}、颜色主题类进行装饰。
导航栏内容默认是流动布局，可以使用containers选项来限制水平宽度。
使用spacing和flex类来控制导航栏项目的间隔和排列。
导航栏默认是响应式的，但很容易调整为其他模式。响应式导航栏必须依赖Collapse插件。
打印时，导航栏默认是隐藏的。在导航栏中添加.d-print类可以强制打印。
务必使用nav元素，或者，如果使用的是通用的<div>元素的话，务必为导航条设置role="navigation"属性，这样能够让使用辅助设备的用户明确知道这是导航区域。

2. 内容支持

导航栏支持一些内置子组件，可以根据实际选择以下内容：

.nvabar-brand用来显示公司名称、产品名称或项目名称等。
.navbar-nav指定一个全高度轻量化的导航条，并支持下拉菜单。此处的全高度应该就是来说明支持下来菜单
.navbar-toggler使用响应式插件支持响应式行为。
.form-inline支持表单控件和行为。
.navbar-text用来添加垂直居中的文本信息
.collapse.navbar-collapsefor grouping and hiding navbar contents by a parent breakpoint.

3. Brand

大多数HTML标签都可以应用.navbar-brand，但是需要使用更多的类标签来定义样式。

<nav class="navbar navbar-light bg-light">

    <!-- As a link -->

    <a class="navbar-brand" href="#">NavBarBrand</a>

    <!-- As a heading -->

    <!-- mb-1 可以参考Bootstrap Spacing -->

    <span class="navbar-brand ml-5 h1"></span>

</nav>

向.navbar-brand中添加图片时，通常需要设置更多的样式或属性。

<nav class="navbar navbar-light bg-light">

    <a class="navbar-brand" href="#">

        <!--指定宽度、高度、无法显示时的替换文本 -->

        <img src="XXXX" width="30" height="30" alt="">

    </a>

</nav>

4. 导航项

导航栏链接使用自带的标识符来定义，且使用toggler来标识响应式行为。导航栏中的项目尽可能维持水平间隔以保持一致性。

    <!--navbar-expand-lg指定响应式行为， navbar-light bg-light定义导航栏样式 -->

    <nav class="navbar navbar-expand-lg navbar-light bg-light">

        <!-- 执行导航栏的显示商标信息 -->

        <a class="navbar-brand" href="#">NavBar</a>

        <!-- 指定导航栏的响应式行为 -->

        <!-- `data-toggle`指以什么事件触发，`data-target`指触发事件的目标标签。一起使用时表示`data-target`所指的元素以`data-toggle`指定的形式显示。 -->

        <!-- `aria-*`的一系列属性都是为了应用在辅助设备上使用。 -->

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"

            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

            <!-- 指定按钮的显示图标 -->

            <span class="navbar-toggler-icon"></span>

        </button>

        <!-- 导航栏内容，collapse表示隐藏内容 -->

        <div class="navbar-collapse collapse " id="navbarNav">

            <ul class="navbar-nav">

                <!-- 每一个导航项目，active表示显示当前导航链接 -->

                <li class="nav-item active">

                    <!-- sr-only表示除屏幕阅读器外，其他设备隐藏该元素 -->

                    <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">Features</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="#">Pricing</a>

                </li>

                <li class="nav-item">

                    <!-- disabled类指定该导航无法操作 -->

                    <a class="nav-link disabled" href="#">Disabled</a>

                </li>

                <!-- 指定导航项目为下拉列表形式 -->

                <li class="nav-item dropdown">

                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

                        Dropdown link

                    </a>

                    <!-- 下拉列表及其项目-->

                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                        <a class="dropdown-item" href="#">Action</a>

                        <a class="dropdown-item" href="#">Another Action</a>

                        <a class="dropdown-item" href="#">Something else here</a>

                    </div>

                </li>

            </ul>

        </div>

    </nav>

5. 表单

<nav class="navbar navbar-expand-lg navbar-light bg-light ">

    <form class="form-inline">

        <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>

        <!-- 支持Input Group -->

        <div class="input-group">

            <div class="input-group-prepend">

                <span class="input-group-text" id="basic-addon1">@</span>

            </div>

            <input type="text" class="form-control" placeholder="UserName" aria-label="Username" aria-describedby="basic-addon1">

        </div>

    </form>

</nav>

6. 文本

<nav class="navbar navbar-expand-lg navbar-light bg-light ">

    <span class="navbar-text">

        Navbar Text

    </span>

</nav>

7. 颜色主题

导航栏的颜色需要使用navbar-{light|dark}和bg-*配合使用，其中navbar-light适合使用浅背景色，navbar-dark适合使用深背景色，然后再使用bg-*来设置背景色，或者使用使用style="background-color:#e3f2fd来设置背景色。

8. 定位

fixed-top：固定在页面顶部
fixed-bottom：固定在页面底部
sticky-top：页面滚动显示，始终在顶部。

9. 响应式行为

使用navbar-toggler、navbar-collapse、navbar-expand{-sm|md|lg|xl}等类设置导航链接的折叠与显示。

若导航栏始终不需要折叠，则在nav中添加navbar-expand类标签，若需要导航栏始终折叠，不要添加

任何navbar-expand类标签，

navbar-brand定义了导航栏的品牌信息，其后跟着一个button,采用navbar-toggler装饰，它表示导航栏在折叠式，该按钮会显示出来。其中，navbar-expand装饰的元素A的位置和navbar-toggler装饰的元素B的位置是根据该元素在代码中的位置定义的，比如，A在B的上面定义，则A在左边，B在右边，A在B的下面定义，则A在右边，B在左边。

原文链接：Bootstrap V4.0 导航栏介绍