Boostrap学习（导航条）

最新推荐文章于 2024-05-14 09:55:02 发布

_magnolia

最新推荐文章于 2024-05-14 09:55:02 发布

阅读量369

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41574134/article/details/96989908

版权

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

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

学习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的作用是设置按钮内部的三条横线样式*/