Bootstrap学习--响应式导航栏

刚开始学的bootstrap都是网上的理论知识，实践的时候才发觉根本就不是那么回事，只有尝试过才知道什么才是重点，下面详细说一下响应式导航栏。（bootstrap3.0版本，在bootstrap4.0版本不生效）
 

大屏幕下：

小屏幕下：

<nav>标签中的样式我就不多做解释了，下面先看一下.navbar-header。该类不仅会使头部的文字看起来大一些，而且也是导航栏的头部，当小屏幕上时是唯一能够显示的导航栏内容之一。
botton按钮定义的就是小屏幕下那个3根横杠的东西。其样式class=“navbar-toggle collapsed”是必不可少的。
navbar-toggle样式是控制3根斑马线的。
collapsed是为了响应折叠插件的。
data-toggle=“collapse”表明这个button是一个折叠控件，其折叠的内容指向data-target="#navbar"，即是id为navbar的内容。
aria-expanded=“false”表示初始控件是折叠的。

<div id="navbar" class="navbar-collapse collapse" aria-expanded="false">这其中的nvabar-collapse是导航栏的折叠样式，collapse这是表示初始时是折叠的，若没有collapse样式，那么缩放后导航栏元素将是展开的。
————————————————
版权声明：本文为CSDN博主「风火一回」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/mafan121/article/details/47836453