Bootstrap 4基础学习03

1. Bootstrap4 导航栏

用 .navbar 类来创建一个标准的导航栏

 .navbar-expand-xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。

用 ul 元素并添加 class="navbar-nav" 类。 然后在 li 元素上添加 .nav-item 类， a 元素上使用 .nav-link 类:

删除 .navbar-expand-xl|lg|md|sm 类来创建垂直导航栏

bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light

激活和禁用状态: 可以在 a元素上添加 .active 类激活。 .disabled 类禁用的。

设置在nav中ul前面设置a元素.navbar-brand 类用于高亮显示品牌/Logo

li上设置dropdown，li中的a上设置dropdown-toggle，data-toggle="dropdown"，li中创建下拉菜单

导航栏的表单form 元素使用 class="form-inline" 类来排版输入框与按钮

navbar-text:非连接文本,保证水平对齐

使用 .fixed-top 类来实现导航栏的固定 .fixed-bottom 类用于设置导航栏固定在底部

1.2

<nav class="navbar navbar-expand-lg bg-success">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="#">首页1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页4</a></li>
            </ul>
        </nav>

显示如下：

1.

  1.2 垂直导航栏，删除 navbar-expand-lg

 <nav class="navbar  bg-info">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="#">首页1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页4</a></li>
            </ul>
        </nav>

显示如下：

1.3 高亮显示品牌/Logo  

 <nav class="navbar navbar-expand-lg bg-success">
            <a class="navbar-brand" href="#">
                <img src="imgs/avatar2.png" width="50px" height="50px">
            </a>
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link " href="#">首页1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页2</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页3</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页4</a></li>
            </ul>
        </nav>

显示如下：

  1.4 下拉菜单与排版输入框与按钮

 <nav class="navbar navbar-expand-lg bg-success fixed-top">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link active" href="#">首页1</a></li>
                <li class="nav-item"><a class="nav-link" href="#">首页2</a></li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">首页3</a>
                </li>
                <div class="dropdown-menu">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                </div>