Bootstrap导航和导航条

导航

• 基本nav组件不包含任何.active状态
• 直接用nav标签或ul标签
• 更改导航的水平对齐方式，例如为中心.justify-content-center
• .flex-column通过使用该实用程序更改弹性项目方向来堆叠导航
• 添加.nav-tabs类以生成选项卡式界面
• 或.nav-pills改用胶囊按钮式
• 使用.nav-fill，所有水平空间都被占用，按比例填充
• 对于等宽元素，使用.nav-justified. 所有水平空间都将被导航链接占用，但与.nav-fill不同的是，每个导航项目的宽度都相同。
• 在元素上指定data-toggle="tab"或即可激活选项卡或药丸按钮导航
• 添加.fade到每个.tab-pane. 第一个选项卡窗格还必须.show使初始内容可见
  代码练习：

        <ul class="nav  justify-content-center nav-tabs">
            <li>
                <a href="#" class="nav-link active nav-item">首页</a>
            </li>
            <li>
                <a href="#" class="nav-link nav-item">分类</a>
            </li>
            <li>
                <a href="#" class="nav-link disabled nav-item">内容</a>
            </li>
        </ul>
        <br />
        <nav class="nav flex-column">
            <a href="#" class="nav-link active">首页</a>
            <a href="#" class="nav-link">分类</a>
            <a href="#" class="nav-link disabled">内容</a>
        </nav>
        <br />
        <nav class="nav  nav-pills">
            <a href="#" class="nav-link active nav-item">首页</a>
            <a href="#" class="nav-link nav-item">分类1</a>
            <a href="#" class="nav-link nav-item">分类2</a>
            <a href="#" class="nav-link disabled nav-item">内容</a>
        </nav>
        <br />
        <ul class="nav nav-pills nav-fill">
            <li class="nav-item">
                <a class="nav-link active" href="#">aa</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">bb</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">cc</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled">dd</a>
            </li>
        </ul>
        <br />
        <nav class="nav  nav-tabs">
            <a href="#one" class="nav-link active nav-item" data-toggle="tab">首页</a>
            <a href="#two" class="nav-link nav-item" data-toggle="tab">分类1</a>
            <a href="#three" class="nav-link nav-item" data-toggle="tab">内容</a>
        </nav>
        <div>
            <div id="one" class="tab-pane fade show active">
                首页内容..............
            </div>
            <div id="two" class="tab-pane fade">
                分类1.................
            </div>
            <div id="three" class="tab-pane fade">
                分类2.................
            </div>
        </div>

导航条

• 最外层可以用一个<nav></nav>标签，在里面写上.navbar属性，可用navbar-dark/light和bg-dark/light进行导航条字体颜色和背景颜色的设置
• 在nav里的左边可插入LOGO或其他内容，可设置.navbar-brand属性来使文字进行与上面导航条的对比，以显示出来
• 每一个列表项可放在ul标签里的li标签li标签里，用a标签进行呈现
• ul标签需要添加.navbar-nav属性，li标签需要添加.nav-item属性，a标签需要添加.nav-link属性
• 做成响应式的话，在nav里添加.navbar-expand-md表示中等屏幕显示
• 想要大屏幕显示，中等屏幕隐藏的话，将ul包裹在div里，div添加.collapse和.navbar-collapse属性
• 可以给中等屏幕及以下添加图标，点击图标，菜单显示，添加以下代码：

            <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
                <span class="navbar-toggler-icon"></span>
            </button>

• 也可将ul标签和li标签去掉，直接用div标签和a标签，可减少代码量
• 可在导航条里加文本，通过设置.navbar-text属性使文本样式与导航条样式更统一
• 可用.active或.disabled属性设置菜单选项的激活与禁用状态
  练习：

        <!--<nav class="navbar navbar-expand-md navbar-dark bg-dark">
            <span class="navbar-brand">LOGO</span>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar">
                <ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="#">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">菜单1</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">菜单2</a></li>
                </ul>
            </div>          
        </nav>-->
        
        <br />
        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            <span class="navbar-brand">LOGO</span>
            <button class="navbar-toggler" data-toggle="collapse" data-target="#navbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar">
                <div class="navbar-nav">
                    <a class="nav-item nav-link active" href="#">首页</a>
                    <a class="nav-item nav-link" href="#">菜单1</a>
                    <a class="nav-item nav-link disabled" href="#">菜单2</a>
                    <span class="navbar-text">文本</span>
                </div>
            </div>          
        </nav>