本文介绍了Bootstrap中的导航条组件，包括导航条的作用、组成、常用类样式，并通过实例展示了如何创建一个包含导航链接、下拉菜单和搜索表单的响应式导航条。通过示例代码，详细解释了各个部分的功能和用法。
前端学习笔记：bootstrap(8)
5.组件
(1)导航条
a.导航条的作用:导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且
在视口（viewport）宽度增加时逐渐变为水平展开模式。
b.导航条的组成:整个导航条就是一个nav标签
导航条的类样式 描述
navbar navbar-default 默认导航条的样式。
navbar-header 显示第一项有一个开关，在移动设备上显示得更好。
collapse navbar-collapse 用于折叠的菜单项：各种链接、表单、其它内容。
dropdown 下拉菜单。
navbar-left 向左对齐，navbar-right向右对齐。
navbar-inverse 反转颜色，变成黑色。
c.导航条的案例
案例需求:做出如下图所示的导航条
案例分析
1_代码从上到下依次是导航容器
2_首选项和商标按钮
3_可折叠的菜单，表单或其它的内容
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<!--设置页面的字符集-->
<meta charset="UTF-8">
<title>Title</title>
<!--强制浏览器按照最新的标准去渲染当前的网页-->
<meta http-equiv="X-UA-Compatible" content="IE=edge"&g
最低0.47元/天 解锁文章
858
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
