Bootstrap[Bootstrap]组件(二)

按钮组

.btn-group>.btn : 一组.btn按钮包裹于.btn-group

外包元素.btn-group  {position/display/}

比如钮元素.btn

<div class="btn-group" role="group">
  <button type="button" class="btn btn-default">left</button>
  <button type="button" class="btn btn-default">middle</button>
  <button type="button" class="btn btn-default">right</button>
</div>

 

按钮工具栏

.btn-toolbar>.btn-group

外包元素.btn-toolbar  {margin-left}

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group" role="group">...</div>
  <div class="btn-group" role="group">...</div>
  <div class="btn-group" role="group">...</div>
</div>

 

按钮尺寸

.btn-group-*(lg/md/sm/xs)

.btn-group-*>.btn  {padding/font-size/border-radius}

<div class="btn-group bt-group-*">
  <button class="btn btn-default">left</button>
  <button class="btn btn-default">middle</button>
  <button class="btn btn-default">right</button>
</div>

 

按钮嵌套

.btn-group嵌套.btn-group

<div class="btn-group" role="btn-group">
  <button class="btn btn-default">按钮1</button>
  <button class="btn btn-default">按钮2</button>
  <div class="btn-group" role="btn-group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">下拉 

    </button>
    <ul class="dropdown-menu">
      <li><a>项目一</a></li>
      <li><a>项目二</a></li>
    </ul>
  </div>
</div>

 

按钮组垂直排列

.btn-group-vertical

<div class="btn-group-vertical" role="btn-group">
  ...
</div>

 

按钮组两端对联合

呈现呢填满父元素宽度

短:因margin不支持display:table-cell;会起彼此框的功能

亟需按钮嵌套.btn-group-justified {display/width/float}

<div class="btn-group btn-group-justified" role="group">
  <div class="btn-group" role="group">
    <button class="btn btn-default">left</button>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-default">left</button>
  </div>
  <div class="btn-group" role="group">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">right </button>
      <ul class="dropdown-menu">
        <li><a>item1</a></li>
        <li><a>item2</a></li>
      </ul>
  </div>
</div>

 

按钮式下拉菜单

外包元素类.btn-group  {display/position}

据下拉菜单插件

 

惟有按钮下拉菜单

<div class="btn-group" role="group">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    button 
  </button>
  <ul class="dropdown-menu">
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
  </ul>
</div>

 

分裂式按钮下拉菜单

<div class="btn-group">
  <button class="btn btn-default">button</button>
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
  <ul class="dropdown-menu">
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
  </ul>
</div>

 

按钮下拉菜单尺寸

支配大小.btn-*:.btn-lg/btn-sm/btn-xs  {padding/font-size/border-radius}

<div class="btn-group">
  <button class="btn btn-default dropdown-toggle btn-*" data-toggle="dropdown">button </button>
  <ul class="dropdown-menu">
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
  </ul>
</div>

 

提高弹来菜谱

控制弹出方向.dropup:  .dropup.drop-menu {bottom/margin-bottom}

<div class="btn-group dropup">
  <button class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">button </button>
  <ul class="dropdown-menu">
    <li><a href="">item1</a></li>
    <li><a href="">item2</a></li>
  </ul>
</div>

 

相关文章