Bootstrap折叠导航栏

最新推荐文章于 2024-04-20 11:59:15 发布

C-kathryn

最新推荐文章于 2024-04-20 11:59:15 发布

阅读量6.8k

点赞数 1

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

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

版权

bootstrap 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

折叠导航栏

组成结构

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;
}

C-kathryn

关注

1
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap折叠导航栏

折叠导航栏组成结构div.navbar.navbar-expand-*.navbar-dark.bg-dark>a.navbar-brand 不折叠的菜单首项+button.navbar-toggler *以上屏幕不显示，*以下屏幕显示按钮 >span.navbar-toggler-icon 按钮上的三条线+div.col...
复制链接

扫一扫