学习Bootstrap3组件之导航

image.png

一、选项卡

boostrap 提供了两种样式，一种是经典的选项卡，一种是胶囊式的。它默认没有提供js支持，不能切换，必须手动添加。

• 标签组合结构为 ul.nav>li>a。
• 胶囊式nav-pills，它还可以变换为堆叠排版 stacked。
• 经典式nav-tabs。
• 两种都可以转换为拉伸均分的排版 .nav-justified。
• 子项有两个样式，一个是选中的 active, 一个是禁用的disabled。
• 可以添加下拉菜单，这个时候 <li>添加 .dropdown 做为容器, <a>添加 data-toggle="dropdown" 做为触发器，再添加 span.caret 箭头，下面添加 dropdown-menu即可。

image.png

二、导航条

导航条是一个复杂的组件，它有两种视图，一种是小屏的logo加菜单按钮