24
2020
04

Bootstrap 导航栏折叠

折叠导航栏


组成结构


div.navbar.navbar-expand-*.navbar-dark.bg-dark

>a.navbar-brand             不折叠的菜单首项

+button.navbar-toggler        *以上屏幕不显示,*以下屏幕显示按钮

 >span.navbar-toggler-icon        按钮上的三条线

+div.collapse.navbar-collapse          折叠的内容

 >ul.navbar-nav>li.nav-item>a.nav-link


<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <meta name="viewport" content="width=device-width,initial-scale=1"/>

    <!--注意顺序-->

    <link rel="stylesheet" href="css/bootstrap.css"/>

    <script src="js/jquery.min.js"></script>

    <script src="js/popper.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

    <div class="navbar navbar-expand-sm navbar-dark bg-dark">

     <!--1.最前面不折叠的菜单-->

        <a href="" class="navbar-brand">Bootstrap中文网</a>

        <!--2.在小屏幕下出现的按钮,按钮上有三条线-->

        <button data-toggle="collapse" data-target="#content" class="navbar-toggler">

            <span class="navbar-toggler-icon"></span>

        </button>

        <!--3.折叠的菜单,小屏以上横向显示,小屏幕以下纵向显示-->

        <div id="content" class="collapse navbar-collapse">

            <ul class="navbar-nav">

                <li class="nav-item">

                    <a href="" class="nav-link">Boot3</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="">Boot4</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="">Less教程</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="">示例</a>

                </li>

                <li class="nav-item">

                    <a class="nav-link" href="">jQuery API</a>

                </li>

            </ul>

        </div>

    </div>

</div>

</body>

</html>


1. .navbar-expand- 。*指md/lg/xs/sm

让按钮在 以上屏幕不显示,以下屏幕显示**


.navbar-expand-sm .navbar-toggler {

  display: none;

}


在ul中的li在*以上的屏幕,横向显示在*以下的屏幕,垂直显示


.navbar-expand-sm .navbar-nav {

  -webkit-box-orient: horizontal;

  -webkit-box-direction: normal;

  -ms-flex-direction: row;

  flex-direction: row;

}

.navbar-nav {

  display: flex;

  flex-direction: column;

}


.navbar-dark

对当前div没有任何样式

告诉子元素,这个导航栏是深色背景

.navbar-dark .navbar-brand

.navbar-dark .navbar-toggler

.navbar-dark .navbar-toggler-icon

.navbar-dark …nav-link

都是浅色

.navbar-dark .navbar-brand {

  color: #fff; //白色

}

.navbar-dark .navbar-nav .nav-link {

  color: rgba(255, 255, 255, 0.5); //浅灰色

}

.navbar-dark .navbar-toggler {

  color: rgba(255, 255, 255, 0.5);

  border-color: rgba(255, 255, 255, 0.1);

}


3. .navbar-collapse 让折叠导航,打开的位置为导航栏的下方


.navbar-collapse {

  -ms-flex-preferred-size: 100%;

  flex-basis: 100%;

  -webkit-box-flex: 1;

  -ms-flex-positive: 1;

  flex-grow: 1;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

}



版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/qq_41003773/article/details/99881967

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。