bob体育官方平台
[Bootstrap]组件(二)

Bootstrap是推特(TWTR.US卡塔尔国推出的多个用从前端开垦的开源工具包。它由Instagram的设计员Mark奥托和Jacob Thornton合营开拓,是四个CSS/HTML框架。

按钮组

.btn-group>.btn : 大器晚成组.btn开关包裹在.btn-group

.btn-group>.btn : 大器晚成组.btn开关包裹在.btn-group

外包成分.btn-group {position/display/}

外包成分.btn-group  {position/display/}

leftmiddleright 

按钮成分.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}

开关工具栏

......... 

.btn-toolbar>.btn-group

开关尺寸

外包成分.btn-toolbar  {margin-left}

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

<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>
leftmiddleright 

 

开关嵌套

开关尺寸

.btn-group嵌套.btn-group

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

按钮1按钮2下拉 项目一项目二 

.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-vertical

 

... 

按键嵌套

开关组两端对齐

.btn-group嵌套.btn-group

症结:因margin不协理display:table-cell;会鬼使神差相互框的效果

<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-justified {display/width/float}

 

leftleftright item1item2 

按键组垂直排列

外包成分类.btn-group {display/position}

.btn-group-vertical

单开关下拉菜单

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

 

返回顶部