主要学习了Bootstrap3响应式导航条相关内容,学会使用navbar和navbar‑default类来创建导航条组件,用container作为内容容器实现内容居中,navbar‑header区域用来放置品牌logo与折叠汉堡按钮,navbar‑brand用来设置导航品牌文字。掌握小屏幕折叠菜单的实现,navbar‑toggle是只在小屏幕显示的汉堡按钮,通过data‑toggle="collapse"触发折叠插件,data‑target关联对应折叠容器的id,collapse navbar‑collapse容器在大屏展开、小于768px时默认收起。使用nav navbar‑nav搭建导航菜单列表,active标识当前选中的导航项,利用label label‑danger组件实现小红new角标,配合行内样式调整间距。学习响应式工具类hidden‑xs,该类可以在屏幕小于768px时自动隐藏元素,本案例用来让小屏幕下搜索框和搜索按钮隐藏。还学会在导航条内部嵌入表单,navbar‑form搭配navbar‑right可以让搜索表单在导航栏靠右摆放。同时清楚资源引入的先后顺序,页面先引入Bootstrap的css样式文件,脚本部分要先引入jQuery再引入Bootstrap的js文件,因为Bootstrap折叠插件依赖jQuery,顺序不对点击折叠功能会失效,也理解了视口meta标签的作用,做响应式网页必须添加该标签,让移动设备浏览器按照设备真实宽度渲染页面。最终实现了大屏完整展示logo、导航菜单、搜索框,小屏幕隐藏搜索框、菜单收起,点击汉堡图标展开菜单的页面效果。





