Boostrap学习（导航条）

最新推荐文章于 2020-06-13 17:00:15 发布

_magnolia

最新推荐文章于 2020-06-13 17:00:15 发布

阅读量400

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_41574134/article/details/96989908

前端专栏收录该内容

7 篇文章

订阅专栏

这篇博客主要探讨了在Bootstrap中学习的重点，包括如何调整按钮位置、自定义折叠页，以及样式设置。作者通过分析Bootstrap组件代码，详细讲解了在大屏幕和小屏幕设备上如何定制导航条，以实现自动适配。文章最后引发思考，引导读者深入理解如何让导航条更好地适应不同屏幕尺寸。

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

学习Boostrap使用中的重点内容

首先需要在Boostrap中文网上将所需要的组件代码爬取下来然后对内部的内容进行逐一分析。

调整按钮位置

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
/* 这一段的内容为设置sm屏幕以及xs屏幕下时出现的按钮的样式 */
/*data-toggle的作用为点击会设置折叠页的出现与否（collapse：折叠）而data-target则指向折叠内容*/
/*aria-expanded的作用是设置默认展开状态:false即是默认不展开;span的作用是设置按钮内部的三条横线样式*/

nav的大小

按钮的盒模型
如图,若想按钮处于导航条中间，需要设置总高度与nav一致即70px。此处我们可以通过修改margin实现。（修改margin-top为（70-2-18-14）/ 2=18px)

调整折叠页

官方的导航页具有许多元素，需要自己进行自定义。

         <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">第一 <span class="sr-only">(current)</span></a></li>
                            <li><a href="网站2.html">第二</a></li>
                            <li><a href="#">第三</a></li>
                            <li><a href="#">第四</a></li>
                    </div>
         <!-- /.navbar-collapse -->
         /*以上代码即为在sm屏幕以上时出现的导航条内容，且为在sm||xs屏幕下的折叠页内容*/
         /* "sr-only"属性系提供给有视觉问题的人士在屏幕阅读器下的辅助功能，在其他情况下不起作用*/
         /*切换页面时修改当前li的class为active且清除其他class*/

在这里插入图片描述

大屏幕

小屏幕

样式设置

#my_header .navbar-my {
    background-color: #3B7B9A;
    margin-bottom: 0px;
}
/*修改导航条的背景颜色*/

#my_header .navbar-my .navbar-brand {
    color: white;
    height: 70px;
    line-height:40px;
}
/*修改导航条的高度以及网站图标的样式*/

#my_header .navbar-my .navbar-nav a {
    height: 70px;
    line-height: 40px;
}
/* 修改导航链接的样式,行高需要减去边框（2*15px）的大小 */

#my_header .navbar-my .navbar-nav li.active a,
#my_header .navbar-my .navbar-nav li a:hover {
    border-bottom: 2px solid rgb(206, 112, 140);
}

/* 修改当前应用链接以及选中链接的样式 */

思考

如何使导航条自动适应不同屏幕？

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .container {
            height: 40px;
            margin: 0 auto;
            background-color: red;
        }
        
        /*↓↓↓媒体查询↓↓↓*/
        @media screen and (max-width: 768px) {
            .container {
                width: 100%;
            }
            .hidden-xs {
                display: none;
            }
            .visible-lg {
                display: none;
            }
        }
        /* 超小屏幕 */
        
        @media screen and (min-width:768px) and (max-width:992px) {
            .container {
                width: 750px;
            }
            .visible-lg {
                display: none;
            }
        }
        /*  小屏幕 */
        
        @media screen and (min-width:992px) and (max-width:1200px) {
            .container {
                width: 970px;
            }
            .visible-lg {
                display: none;
            }
        }
        /*  中屏幕 */
        
        @media screen and (min-width:1200px) {
            .container {
                width: 1170px;
            }
        }
        /* 大屏幕 */
    </style>
    <title>Document</title>
</head>

<body>
    <div class="container">
        <p class="hidden-xs">在超小屏幕下看不到这段文字</p>
        <p class="visible-lg">只有在大屏幕下才看得到这段文字</p>
    </div>


</body>