bootstrap学习笔记-导航和导航条

最新推荐文章于 2025-01-20 00:16:55 发布

原创最新推荐文章于 2025-01-20 00:16:55 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #导航

前端专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了Bootstrap的导航和导航条的使用，包括带下拉菜单的标签页、响应式导航条、滚动监听等功能。讲解了如何创建标签页、胶囊式标签、导航条的基本结构和样式调整，以及如何实现鼠标移入移出效果。还涵盖了固定导航条的实现、导航条中的内容布局，如链接、按钮、输入框和下拉菜单。同时，探讨了在移动端的适配和滚动监听功能的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

.nav 类作为基类（都要有）
标签页：.nav-tabs
胶囊式标签页：.nav-pills ；可以选择竖着的菜单：.nav-stacked
两端对齐（按钮）自适应：.nav-justified ，在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。(小于768 变成竖着的了)
如果要让线也自适应（对于按钮的长度，不是对于父类）：.nav-tabs.justified
注意胶囊式标签的时候，如果有.nav-tabs.justified那么也会出现线的。
内容类：ul:tab-content li:tab-pane
要按钮切换，在按钮上还要加上属性data-toggle=”tab”
而内容要对应切换的话，要把href 对应id （注意加#号）
例如：

<ul class="nav nav-tabs">
    <li class="active"><a href="#a" data-toggle="tab">1</a></li>
    <li><a href="#b" data-toggle="tab">2</a></li>
    <li><a href="#c" data-toggle="tab">3</a></li>
</ul>
<ul class="tab-content">
    <li id="a" class="tab-pane active">111111111</li>
    <li id="b" class="tab-pane">2222222</li>
    <li id="c" class="tab-pane">33333333</li>
</ul>

内容切换时淡入淡出效果（加在li上）：fade 注意默认的那个要加in （这和加active一样）

带下拉菜单的标签页

<ul class="nav nav-tabs">
    <li class="active"><a>1</a></li>
    <li><a href="#">2</a></li>
    <li><a>3</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Separated link</a>
        <ul class="dropdown-menu">
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>

        </ul>
    </li>
</ul>

实际上就是在其中的一个li里面加一个下拉菜单ul，并且按钮上增加dropdown-toggle类以及自定义方法 data-toggle=”dropdown”

如果下拉菜单内容结合进去的话，那么和上面的类似，只要href和id对应，并且给a增加对应切换的属性data-toggle=”tab”就可以了例如：

<div class="div1">
    <ul class="nav nav-tabs" id="tables">
        <li class="active">
            <a href="#a" data-toggle="tab">1</a>
        </li>
        <li>
            <a href="#b" data-toggle="tab">2</a>
        </li>
        <li>
            <a href="#c" data-toggle="tab">3</a>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Separated link
            <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#e" data-toggle="tab">1</a></li>
                <li><a href="#f" data-toggle="tab">2</a></li>           
            </ul>
        </li>
    </ul>
    <ul class="tab-content">
    <li id="a"class="tab-pane active fade in">111111111</li>
    <li id="b" class="tab-pane fade ">2222222</li>
    <li id="c" class="tab-pane fade">33333333</li>
    <li id="e" class="tab-pane fade ">dsdad</li>
    <li id="f" class="tab-pane fade">aaaaaa</li>
    </ul>
</div>

特别要注意的是：这里如果之前的不是dropdown 而是dropup，则效果会出错…暂时没有找出原因（*）

鼠标移入移出

bootstrap是没有这个效果的，因为bootstrap主要是为了移动端服务的，所以只有点击
所以必须要用js 去写方法

$("#tables a").on("mouseover",function(){
    $(this).tab('show');//选项卡中就这个方法show
});

如果移动端的话，就做一个判断就可以了，例如：

if(window.navigator.userAgent.toLowerCase().indexOf('mobile')==-1){
    ...
}

导航条

基础类

.navbar类作为基类,并且使用<nav>标签，如果使用div，需要加上role=”navigation”这样能够让使用辅助设备的用户明确知道这是一个导航区域。
默认的样式.nav-default
菜单（导航） .nav .navbar-nav组合

一般导航栏可以这么写：外面一个<nav>自适应，里面包含一个container固定，例如：

<nav class="navbar navbar-default">
    <div class="container">
        <ul class="nav navbar-nav">
        <li><a href="#">one</a></li>
        <li><a href="#">two</a></li>
        <li><a href="#">three</a></li>
        </ul>
    </div>
</nav>

固定的导航条.navbar-fixed-top 或者.navbar-fixed-botom
注意这里固定导航条的话可能会遮盖下面的内容，解决办法是：给body加一个margin-top值。
顺带一提，固定是使用了fixed属性值，它是相对于浏览器窗口进行定位的，而absolute是相对于有设定定位属性（非默认）的父级。
如果要加logo，可以用一个nav-header z嵌套一个navbar-brand例如：

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand">logo</a>
        <!-- 这是一个logo注意要用navbar-header嵌套-->
        </div> 
        <ul class="nav navbar-nav">
            <li><a href="#">one</a></li>
            <li><a href="#">two</a></li>
            <li><a href="#">three</a></li>
        </ul>
    </div>
</nav>

如果要让导航靠右，可以用navbar-right,默认是navbar-left，复杂一点的，就一个导航靠左，一个导航靠右

<ul class="nav navbar-nav">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li><a href="#">three</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
    <li><a href="#">登录</a></li>
    <li><a href="#">注册</a></li>
</ul>

如果导航条中有button按钮，要注意加上.navbar-btn类这样就可以使它在导航条中居中

<button class="btn btn-default navbar-btn">
    搜索 
</button>

而如果有链接，那么加上.navbar-link 类，使它的颜色接近导航条
而如果是普通的文字什么的，要让它居中，则需要加上.navbar-text类，并且有可能需要加上.navbar-left，使之浮动。（如果用的是<p>这种块级元素）
如果是输入框，则加上navbar-form,和narbar-left。例如：

<form class="navbar-form navbar-left">
    <input type="text" class="form-control">
    <input type="submit" value="搜索">
</form>

带下拉菜单的导航条：

<ul class="nav navbar-nav">
    <li><a href="#">one</a></li>
    <li><a href="#">two</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">three<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">22</a></li>
            <li><a href="#">22</a></li>
            <li><a href="#">22</a></li>
            <li><a href="#">22</a></li>
            <li><a href="#">22</a></li>
        </ul>
    </li>
</ul>

响应式导航条

但是呢这样效果在移动上不是很好，所以要修改一下。类似于官网那样，在移动端上多一个按钮，一点击导航就出现。加上.navbar-toggle类

<button class="navbar-toggle">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

然后要做到折叠效果的话，就给要折叠隐藏的部分加上collapse 和navbar-collapse类，然后给button按钮加上data-toggle=”collapse”属性以及data-target=”#id”。例如：

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target="#collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand">logo</a>
        <!-- 这是一个logo注意要用navbar-header嵌套-->
        </div> 
        <div class="collapse navbar-collapse" id="collapse">
            <ul class="nav navbar-nav">
                <li><a href="#">one</a></li>
                <li><a href="#">two</a></li>
            </ul>
        </div>
    </div>
</nav>

滚动监听

首先滚动监听加在body上，加上data-spy=”scroll”和data-target=”#id”(监听的标签id，这里就是导航条的id)；并且要给body相对定位，这样才能内容相对于它进行操作（这是监听整个页面，如果只想监听一部分页面，也可以相对的属性加载别的标签上）
给要监听滚动的内容分别加上id，然后导航条的a的href对应每个id
这样做的话，要注意一个问题，滚动到页面哪里的时候导航相对应的发生变化，如果要改变位置，可以用data-offset 属性来实现。注意这是滚动到那里导航变化，而不是点击导航，跳转到页面那里，
点击导航跳转的话，默认是内容到达最顶端的时候（这里说的内容是指<=border），是在最顶端的时候，要修改，可以给除导航条外的内容加一个padding-top值。