文章标题

欢迎收看大奥编写的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元素来实现，<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；
• 导航 “
  

注意：知识的积累是一个漫长的过程，请继续关注后续内容。