Bootstrap之导航

秃头man

已于 2022-04-20 19:19:52 修改

阅读量364

点赞数 1

分类专栏：导航栏 bootstrap 文章标签： bootstrap

于 2022-04-19 14:02:18 首次发布

本文链接：https://blog.csdn.net/qq_44703604/article/details/124271910

版权

bootstrap 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

导航栏

1 篇文章 0 订阅

订阅专栏

本文介绍了HTML和CSS实现的不同风格的导航条，包括普通版本、tabs版本、胶囊版本和div+a标签版本，并提供了一个导航栏切换的实践案例。此外，还展示了响应式的导航条设计，适用于不同屏幕尺寸，包含固定顶部和吸顶效果。代码示例中使用了Bootstrap和jQuery进行交互处理。

摘要由CSDN通过智能技术生成

一、导航条

1.普通版本

    <ul class="nav ">
        <li class="nav-item ">
            <a href="" class="nav-link ">首页</a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">首页</a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">首页</a>
        </li>
    </ul>

2.tabs版本(nav-tabs)

<ul class="nav nav-tabs">
        <li class="nav-item ">
            <a href="" class="nav-link active">首页</a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">首页</a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">首页</a>
        </li>
    </ul>

3.胶囊版本(nav-pills)

<ul class="nav nav-pills">
        <li class="nav-item ">
            <a href="" class="nav-link active">首页</a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">首页</a>
        </li>
        <li class="nav-item">
            <a href="" class="nav-link">首页</a>
        </li>
    </ul>

4.div+a标签版本(常用)

<div class="nav nav-tabs">
        <a href="#" class="nav-link">首页</a>
        <a href="#" class="nav-link active">首页</a>
        <a href="#" class="nav-link">首页</a>
    </div>

二、导航栏切换案例

<style>
    .box{
        width: 100%;
        min-height: 100px;
        background-color: rgb(213, 224, 224);
        padding-top: 10px;
        display: none;
    }
    .show{
        display: block;
    }
</style>
<body>
   

    <!--  nav-tabs -->
    <div class="nav nav-tabs">
        <a href="#" class="nav-link">首页</a>
        <a href="#" class="nav-link active">首页</a>
        <a href="#" class="nav-link">首页</a>
    </div>
    <div >
        <div class="box show">内容一</div>
        <div class="box">内容二</div>
        <div class="box ">内容三</div>
    </div>

    
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
    <script src="../jquery-3.6.0.js"></script>
    <script>
        var li = $(".nav-link")
        var box = $(".box")
        $.each(li,function(index,value){
            $(this).click(function(){
                $(this).addClass("active").siblings().removeClass("active")
                box.eq(index).addClass("show").siblings().removeClass("show")
            })
        })
    </script> 
</body>

三、导航条案例（响应式）

<body>
    <div class="" style="width: 100%;height: 300px; background-color: aqua;"></div>
    <!-- navbar 设定一个弹性盒  一个相对定位    navbar-只有两种 dark或者light  fixed-top固定到顶部 sticky-top吸顶效果 --> 
   <div class="navbar navbar-dark sticky-top bg-success navbar-expand-lg">
       <!--container-fluid  导航条100%布局  并且有左右内边距  -->
        <div class="container-fluid">


            <!-- logo部分 navbar-brand左右内边距    可以放文字或者图片   图片只能是24*24-->
            <a href="#" class="navbar-brand text-success">
                <img src="../../FB$2V4G(X53]0EQ[O2BMUET.png" alt="" style="width: 24px; height: 24px;">
            </a>


            <!-- 最右侧按钮 navbar-toggler设置按钮的外边框-->
            <button class="navbar-toggler" type="button" data-bs-target="#aa" data-bs-toggle="collapse">
                <!-- navbar-toggler-icon   显示图标 -->
                <span class="navbar-toggler-icon"></span>
            </button>


            <!-- 设置了折叠组件 navbar-collapse 把菜单移到了下面-->
            <div class="collapse navbar-collapse" id="aa">
                <!-- 导航栏  navbar-nav让a标签都成为块元素  nav-link设置了颜色-->
                <div class="navbar-nav">
                    <a href="##" class="nav-link text-danger">首页</a>
                    <a href="##" class="nav-link">新闻</a>
                    <a href="##" class="nav-link">联系我们</a>
                    <a href="##" class="nav-link">首页</a>
                    <a href="##" class="nav-link">新闻</a>
                    <a href="##" class="nav-link">联系我们</a>
                    <a href="##" class="nav-link text-danger">首页</a>
                    <a href="##" class="nav-link">新闻</a>
                    <a href="##" class="nav-link">联系我们</a>
                    <a href="##" class="nav-link">首页</a>
                    <a href="##" class="nav-link">新闻</a>
                    <a href="##" class="nav-link">联系我们</a>
                </div>
            </div>
        </div> 
    </div>
    <div style="width: 100%;height: 3300px; background-color: aqua;"></div>
    <script src="../bootstrap-5.1.3-dist/js/bootstrap.bundle.min.js"></script>
    <script src="../jquery-3.6.0.js"></script>
</body>