欢迎收看大奥编写的Bootstrap快速学习笔记（4）菜单按钮及导航
本学习笔记根据[慕课网]教程修改而来，用它学习Bootstrap，将会带来全新的体验哦：
- 下拉菜单
- 按钮
- 导航
详细介绍
- 下拉菜单
基本用法：首先设置一个外围div标签有dropdown类<div class="dropdown">，其次设置一个button元素，<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉菜单，然后是一个向下箭头的icon图标<span class="caret">，至此button标签结束，接下来是一个无序列表，<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">，之后是各个下拉选项，用li标签实现，<li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>；其他功能：下拉分隔线，通过添加一个带有divider类的li元素来 实现，<li role="presentation" class="divider"></li>；菜单标题，通过添加一个带有dropdown-header类的li元素来实现，& lt;li role="presentation" class="dropdown-header">第一部分菜单头部</li>；对齐方式，如果想让下拉菜单与父容器的右边框对齐，则 在ul元素上追加类pull-right或dropdown-menu-right；菜单项状态，分为active状态，需要在li元素上添加类 class="active"，disabled状态，需要在li元素上添加类class="disabled"，以及悬浮和焦点状态，这是已经设置好的 - 按钮
按钮组：通过设置一个btn-group容器来实现，<div class="btn-group">，然后将多个按钮添加在容器当中；按钮工具栏：通过将多个按钮组放置在同一个大容器里来实现，<div class="btn-toolbar">；按钮组大小：通过在按钮组btn-group后面追加类名来实现，btn-group-lg btn-group-sm btn-group-xs；导航菜单：通过组合按钮组和下拉菜单实现，使用时，只需要把原来设置下拉菜单的div容器的类名由dropdown改为 btn-group并和其他按钮放在同一级就行了；按钮组垂直显示：只需要把原来按钮组的类名由btn-group改为btn-group- vertical；等分按钮：按钮组占容器的100%，其中的按钮平分按钮的宽度，通过在btn-group类名后添加btn-group-justified类名来实现；如果想把下拉菜单的箭头变成向上箭头并且隐藏的菜单从上方弹出，那么我们在btn-group类后面追加dropup类来实现这个改变； - 导航
作为Bootstrap中又一个独立的组件，为我们前端开发人员制作导航栏提供了不小的帮助，我们可以通过给一个无序列表添加class类来制作导航栏而不用使用传统的做法，那样既繁琐又不容易调控，实现方法为给ul标签添加nav类，表明这是一个导航，然后添加nav-tabs或nav-pills等来实现导航样式的设定，如果要给导航栏中某个选项添加选中状态，就在该选项对应的li元素上添加active类，有的选项卡还有禁用状态，这个也通过给该选项对应的li元素添加disabled类来实现；此外还有垂直堆叠的导航，每个选项都占满容器的100%，每个选项占一行；如果想在垂直堆叠导航中添加分割线，只需要添加一个li标签并带有nav-divider类就行；同时我们还可以设置自适应导航，要在nav-pills或nav-tabs后面添加nav-justified类就行，当屏幕宽度较大时，会按照水平导航来显示，当宽度变小时，会按照垂直堆叠导航来显示；二级导航：通过在一级导航中的某个li元素中嵌套ul元素来实现，该li元素要添加dropdown类名，旗下的a元素要添加class="dropdown-toggle" data-toggle="dropdown"属性，该ul元素要添加dropdown-menu类名；面包屑导航：通过ol列表来实现，添加breadcrumb类名，旗下有li和li旗下的a元素，并且当前所处的位置要在对应li元素上添加类名active；
注意：知识的积累是一个漫长的过程，请继续关注后续内容。