之前我们大致说了一下bootstrap的一个布局结构，知道布局结构以后呢，当然是要在结构中写内容了咯。
那内容内容一个网站肯定是从导航开始，就跟我们写静态一样，头部总归有个导航项。那今儿咱就来八一八导航
导航在小B里分为导航元素和导航条，这俩是不一样的，一个是nav 一个是navbar，一般一个导航都是以一个带有 class .nav 的无序列表开始并添加类名“navbar-nav”，然后在列表外部添加一个容器使用类名“navbar”和“navbar-default”
这四个类是啥呢？.nav表示导航的基本组件;.navbar-nav设置标签（比如ul）为导航条组件内的列表元素;.navbar表示导航条的基本组件，主要功能就是设置左右padding和圆角等效果，但他和颜色相关的样式设置要利用navbar-default来控制
当然这些其实都是小B自带的组件，我们要学会去查看和利用就省去了一堆麻烦，最麻烦的是我们需要去记，并不然我写的时候还真傻乎乎不会用死机白赖的去用写静态的方法自己定类，那就你就真傻
下面我列举了一些用于导航条的几个组件：
.navbar：设置nav元素为导航条组件；
.navbar-default：指定导航条组件为默认主题；
.navbar-inverse：指定导航条组件为黑色主题；
.navbar-fixed-top：设置导航条组件固定在顶部；
.navbar-fixed-bottom：设置导航条组件固定在底部；
.container-fluid：设置宽度充满父元素，即为100%；
.navbar-header：主要指定div元素为导航条组件包裹品牌图标及切换按钮；
.navbar-toggle：设置button元素为导航条组件的切换钮；
.collapsed：设置button元素为在视口小于768px时才显示；
.navbar-brand：设置导航条组件内的品牌图标；
.collapse：设置div元素为视口大于768px时显示；
.navbar-collapse:设置div元素为导航条组件各列表项的父元素；
.navbar-nav:设置ul为导航条组件内的列表元素;
.navbar-left:设置导航条内元素向左对齐；
.navbar-right:设置导航条内元素向右对齐；
.navbar-form:为导航条组件内部的表单组件；
.navbar-btn:为导航条组件内部的按钮样式；
.navbar-text:为导航条组件内部的文本样式；
.navbar-link:在标准的导航组件之外添加标准链接，让链接有正确的颜色和反色设置；
.breadcrumb:设置列表元素显示为路径导航组件；
当然学小B为了啥，就是为了自适应
视口>768px时的显示效果
视口<768px时的显示效果
这只是俩简单的效果图，导航肯定还有二级菜单什么的对不对，他也是用导航的不同组件来写，孩纸们自己玩会。其实按我的理解他的类其实是先给大盒子写个大类，比如类似nav、 navbar，然后后面跟各种小组件去实现效果，
学无止境，沧海无涯，有的好背了，欢迎小伙伴们加群142991222慢慢背把
网友评论