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 导航栏介绍

来源：oschina

链接：https://my.oschina.net/u/4274582/blog/3301082

标签

Bootstrap

navbar

sticky