03-Bootstarp高级性组件

一、下拉菜单

构成一：容器

​ 向上容器 - div.class = dropdown
​ 向下容器 - div.class = dropup

​ 特殊容器 - div.class = btn-group

构成二：按钮btn类元素

点击的button框需要添加 data-toggle=“dropdown” 的JS监听。
​ button[data-toggle=‘dropdown’]

构成三：下拉菜单

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>

二、按钮菜单

(当使用btn-group作为容器时，里面的button最好加上drop-toggle属性，dropdown无所谓)

1.单按钮下拉菜单：

​ 组成：按钮组 { 按钮+下拉菜单 }；

.btn-group>button.btn+ul.dropdown-menu

2.分裂按钮式菜单：

​ 组成：按钮组 { 按钮(带文字) + 按钮(带符号) }；】

.btn-group>button.btn(点这里)+（button.btn>.span.符号类型）

3.上弹式按钮菜单：

​ 组成： div.class = .btn-group.dropup

4.尺寸：就是前面学的按钮的大小尺寸的尺寸添加到按钮上即可。

1. btn-lg
2. 默认
3. btn-sm
4. btn-xs

三、标签页

1.普通标签页

​ 基类 - ul.nav.nav-tabs

2.胶囊式标签页

​ 基类 - ul.nav.nav-pills

3.导航栏排列方向

​ 默认排列 - 水平不均分
​ 垂直排列 - 添加.nav-stacked
​ 水平均分 - 添加.nav-justified

4.带下拉的标签页、带下拉的胶囊式标签页

​ 组成：.dropdown + 按钮[data-toggle=‘dropdown’] + dropdown-menu

​ dropdown == 将其中的li标签添加此类

四、导航条

1.组成

​ 整体：

​ 基类 - navbar navbar-default

​ 头部：

​ 基类 - navbar-header

​ 隐藏按钮样式 - navbar-toggle collapsed
​ 隐藏按钮属性 - [data-toggle = ‘collapse’]
​ 隐藏按钮目标 - [data-toggle = ‘#目标id’ ]

​ 品牌或者首页 - 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