bootstrap-02 常用重要组件(1)

一,下拉菜单
    下拉菜单由两部分组成,一个是下拉菜单的按钮,一个是隐藏的下拉菜单这里两部分都要写进一个div盒子中,该div要有类名.dropdown,这个类名是position:relative;的作用，
   下拉菜单按钮则必须有类名.dropdown-toggle，其他样式需要额外添加
   下拉菜单则必须要有类名.dropdown-menu 这里面可以放列表，可以用div
1,默认样式菜单位于下方
<!-- 下拉菜单总的大盒子-->
<div class="dropdown">
<!-- 下拉菜单触发器-->
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <!-- 下拉菜单（默认隐藏）-->
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

2,如果需要隐藏菜单位于上方
只需要将下方菜单的父类类名.dropdown改成.dropup即可
3,下拉菜单需要靠右对齐的话
只需要给下拉的菜单（class="dropdown-menu")设置.dropdown-menu-right 
二，列表组
列表组只有一些最简洁的样式，如果有其他的样式，则需要新增类名
给ul增加.list-group类名
给每个li标签增加.list-group-item类名
1,默认的极简样式列表组
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

2，如果需要给每个列表后面增加气泡式数字标记
则只需要在li标签内增加一个span标签类名加.badge即可
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>//气泡式徽章
    Cras justo odio
  </li>
</ul>

3，被禁用的条目
为 .list-group-item 添加 .disabled 类可以让单个条目显示为灰色，表现出被禁用的效果。
4，列表项目为a链接时
如果列表项目为a链接时，将每个li标签换成a标签，将ul标签换成div即可，类名不需要变动
<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

5，列表项目为按钮时
列表组中的元素也可以直接就是按钮，父元素必须是 <div> 而不能用 <ul>，注意不要使用标准的 .btn 类！
<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

6，需要给项目添加样式时，有几个类名可以提供选择

.list-group-item-success
.list-group-item-info
.list-group-item-warning
.list-group-item-danger
以上效果依次对应