Bootstrap基础教程（第3版）（微课版）课31-任务3：导航条

任务3：导航条项目六Css组件主讲人：余璐武汉软件工程职业学院课程导入导航条的基本用法

在宽屏幕时，导航栏水平铺开；小屏幕时，导航栏垂直展开。通过添加折叠插件，让其折叠显示。而.navbar-expand类则表示任何宽度都是水平展开。品牌图标在nav元素中添加一个带有.navbar-brand类的元素作为导航条的头部。这个元素可以是超链接a元素、div元素或者其他大多数元素，但是用超链接a元素的效果最好。

在导航条的头部中可以使用文本，也可以使用图像，作为品牌图标。如果将图像添加到导航条的头部中，可能还需要自定义样式或使用一些工具类来正确调整图像大小。品牌图标导航条上的链接导航条中的链接或者说导航条中的导航元素，是在前一节导航的基础上添加导航条的专属class而成，用法与“导航”几乎一致。在导航条中，将“导航”中的“.nav类”修改为“.navbar-nav”类，可设置导航条中的链接内容。导航条上的链接导航条中的链接或者说导航条中的导航元素，是在前一节导航的基础上添加导航条的专属class而成，用法与“导航”几乎一致。在导航条中，将“导航”中的“.nav类”修改为“.navbar-nav”类，可设置导航条中的链接内容。导航条上的表单如果要将各种表单控件或输入框组放在导航条中，需要在表单form元素上添加.d-flex类。表单控件或输入框组的样式设置，与前面已经学的表单内容一致。导航条上的文本将文本内容装在使用了.navbar-text类的span元素中，便能在导航条中添加非链接的纯文本了。根据需要，可以与其他导航条的元素混合使用。固定导航条给导航条元素nav添加.fixed-top类或.fixed-bottom类，将导航条固定在顶部或底部。

当导航条固定在顶部或底部时，导航条的宽度不再与父元素同宽，而是与浏览器窗口同宽。如果添加.sticky-top，可以让导航条粘贴在顶部。再给导航条添加.fixed-top，导航条会脱离原来的文档流，并固定在浏览器顶部，后面的内容会被导航条遮挡，因此需要设置body元素的顶部内边距。固定导航条改为fixed-bottom导航条配色方案为导航条nav元素添加.bg-颜色词的类以及.navbar-颜色词的类，即可设置导航条的背景颜色与文本颜色。.bg-颜色词导航栏的背景颜色。颜色有很多选择，例如.bg-info、.bg-dark，详细内容参考前面章节颜色部分。.navbar-颜色词导航栏的文字颜色，只有.navbar-dark和.navbar-light两种选择。V5.2.0开始，没有.navbar-light类，默认为ligth主题。v5.3.0中，可以使用data-bs-theme="dark”设置导航条文字颜色。.navbar-dark为了搭配深色背景而显示的浅色字。.navbar-light为了搭配浅色背景而显示的深色字。导航条配色方案响应式导航条导航条结合JS插件中的折叠插件，可以制作响应式导航条。在前面的实例中，导航条都使用了.navbar-expand-md类，表示在md、lg、xl设备上水平展开。在小于md设备宽度（<768px）时，导航条的导航会垂直展开。响应式导航条在小于md设备宽度（<768px）时，将导航条上的元素隐藏在一个折叠菜单中。通过触发按钮来控制菜单项的显示与隐藏。响应式导航条01将导航条中导航和表单放在一个<div>中，对这个<div>元素应用.collapse、.navbar-collapse类，并给这个<div>添加一个ID名。02在导航条内.navbar-brand的后面添加一个<button>元素，用于触发折叠菜单的显示与隐藏。给这个<button>应用.navbar-toggler类，添加属性

data-bs-toggle="collapse"，data-target="..."，data-target属性值对应的是前面折叠<div>的class或ID值。<button>文本内容应用类.navbar-toggler-icon，这样会让