Bootstrap 组件之按钮（二）

2024-03-18 20:36:03 31

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师MarkOtto和JacobThornton合作开发,是一个CSS/HTML框架。

按钮组

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

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

按钮元素.btn

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

按钮工具栏

.btn-toolbar>.btn-group

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

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

按钮尺寸

.btn-group-*(lg/md/sm/xs)
.btn-group-*>.btn{padding/font-size/border-radius}

<divclass="btn-groupbt-group-*">
<buttonclass="btnbtn-default">left</button>
<buttonclass="btnbtn-default">middle</button>
<buttonclass="btnbtn-default">right</button>
</div>

按钮嵌套

.btn-group嵌套.btn-group

<divclass="btn-group"role="btn-group">
<buttonclass="btnbtn-default">按钮1</button>
<buttonclass="btnbtn-default">按钮2</button>
<divclass="btn-group"role="btn-group">
<buttonclass="btnbtn-defaultdropdown-toggle"data-toggle="dropdown">下拉
<spanclass="caret"></span>
</button>
<ulclass="dropdown-menu">
<li><a>项目一</a></li>
<li><a>项目二</a></li>
</ul>
</div>
</div>

按钮组垂直排列

.btn-group-vertical

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

按钮组两端对齐

表现为填满父元素宽度

缺陷：因margin不支持display:table-cell;会出现双边框的效果

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

<divclass="btn-groupbtn-group-justified"role="group">
<divclass="btn-group"role="group">
<buttonclass="btnbtn-default">left</button>
</div>
<divclass="btn-group"role="group">
<buttonclass="btnbtn-default">left</button>
</div>
<divclass="btn-group"role="group">
<buttonclass="btnbtn-defaultdropdown-toggle"data-toggle="dropdown">right<spanclass="caret"></span></button>
<ulclass="dropdown-menu">
<li><a>item1</a></li>
<li><a>item2</a></li>
</ul>
</div>
</div>

按钮式下拉菜单

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

依赖下拉菜单插件

单按钮下拉菜单

<divclass="btn-group"role="group">
<buttonclass="btnbtn-defaultdropdown-toggle"data-toggle="dropdown">
button<spanclass="caret"></span>
</button>
<ulclass="dropdown-menu">
<li><ahref="">item1</a></li>
<li><ahref="">item2</a></li>
</ul>
</div>

分裂式按钮下拉菜单

<divclass="btn-group">
<buttonclass="btnbtn-default">button</button>
<buttonclass="btnbtn-defaultdropdown-toggle"data-toggle="dropdown"><spanclass="caret"></span></button>
<ulclass="dropdown-menu">
<li><ahref="">item1</a></li>
<li><ahref="">item2</a></li>
</ul>
</div>

按钮下拉菜单尺寸

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

<divclass="btn-group">
<buttonclass="btnbtn-defaultdropdown-togglebtn-*"data-toggle="dropdown">button<spanclass="caret"></span></button>
<ulclass="dropdown-menu">
<li><ahref="">item1</a></li>
<li><ahref="">item2</a></li>
</ul>
</div>

向上弹出菜单

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

<divclass="btn-groupdropup">
<buttonclass="btnbtn-defaultdropdown-togglebtn-lg"data-toggle="dropdown">button<spanclass="caret"></span></button>
<ulclass="dropdown-menu">
<li><ahref="">item1</a></li>
<li><ahref="">item2</a></li>
</ul>
</div>

以上所述是小编给大家介绍的Bootstrap组件(二)之按钮的相关知识，希望对大家有所帮助！

Bootstrap 组件之按钮（二）

热门推荐

随机推荐