文章目录
一、下拉菜单
构成一：容器
向上容器- div.class = dropdown
向下容器- div.class = dropup
特殊容器- div.class = btn-group
构成二：按钮btn类元素
构成三：下拉菜单
1.- ul.class= dropdown
2.- li.class = dropdown-menu
3.- li.class = divider
4.- li.class = disabled
整体对齐使用： 容器属性class添加 —> pull-right、pull-left
下拉菜单换位： 下拉菜单class添加 —> dropdown-menu-[left|right]
<div class="dropdown">
<button href="#" class="btn" data-toggle="dropdown">
下拉菜单 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="alert-danger">背景色，字体色</li>
<li><a href="#">选项3</a></li>
<li><a href="javascript：void(0);">选项4</a></li>
<li class="divider">分割线</li>
<li class="dropdown-header">选项标题1/li>
<li><a href="#">选项8</a></li>
<li class="disabled"><a href="">选项9</a></li>
</ul>
</div>
二、按钮菜单
1.单按钮下拉菜单：
组成：；
.btn-group>button.btn+ul.dropdown-menu
2.分裂按钮式菜单：
组成：】
.btn-group>button.btn(点这里)+（button.btn>.span.符号类型）
3.上弹式按钮菜单：
组成： div.class = .btn-group.dropup
4.尺寸：就是前面学的按钮的大小尺寸的尺寸添加到按钮上即可。
- btn-lg
- 默认
- btn-sm
- btn-xs
三、标签页
1.普通标签页
基类-ul.nav.nav-tabs
2.胶囊式标签页
基类-ul.nav.nav-pills
3.导航栏排列方向
默认排列-水平不均分
垂直排列-添加.nav-stacked
水平均分-添加.nav-justified
4.带下拉的标签页、带下拉的胶囊式标签页
组成：.dropdown + + dropdown-menu
dropdown == 将其中的li标签添加此类
四、导航条
1.组成
基类 - navbar navbar-default
基类 - navbar-header
隐藏按钮样式 - navbar-toggle collapsed
隐藏按钮属性 -
隐藏按钮目标 -
品牌或者首页 - a.navbar-brand
基类- collapse navbar-collapse + [id=“自定义”]
2.自适应主体：
1.导航标签 - .nav.navbar-nav
2.导航表单- .form.navbar-form
3.导航按钮- button.btn.navbar-btn
4.导航文本- .navbar-text
5.导航链接- .navbar-link
6.导航排列- .navbar-left、.navbar-right
(推荐设置在自适应主体中)
3.固定导航栏：
固定顶部- .navbar-fiexd-top
固定底部- .navbar-fiexd-buttom
静止顶部- .navbar-static-top
4.导航栏颜色：
颜色反转- .navbar-inverse