Bootstrap 组件 - 按钮组与下拉按钮(Button Groups B
发布时间:2017-09-09 11:08:05
Bootstrap 组件 - 按钮组与下拉按钮(Button Groups Button Dropdowns) 按钮组(Button Groups)

单个按钮组

用.btn-group封装多个带.btn的<button>

[html]

<div class="btn-group">

<button class="btn">1</button>

<button class="btn">2</button>

<button class="btn">3</button>

</div>

多个按钮组

将多个<div class="btn-group">放进<div class="btn-toolbar">中。

[html]

<div class="btn-toolbar">

<div class="btn-group">

...

</div>

<div class="btn-group">

...

</div>

</div>

垂直按钮组

向.btn-group添加.btn-group-vertical。

[html]

<div class="btn-group btn-group-vertical">

...

</div>

下拉按钮(Button Dropdowns)

例子

[html]

<div class="btn-group">

<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">

Action

<span class="caret"></span>

</a>

<ul class="dropdown-menu">

<!-- dropdown menu links -->

</ul>

</div>

控制大小

同样使用.btn-large、.btn-small、.btn-mini控制大小。

分割的下拉按钮

[html]

<div class="btn-group">

<button class="btn">Action</button>

<button class="btn dropdown-toggle" data-toggle="dropdown">

<span class="caret"></span>

</button>

<ul class="dropdown-menu">

<!-- dropdown menu links -->

</ul> www.2cto.com

</div>

向上出现的菜单

[html]

<div class="btn-group dropup">

<button class="btn">Dropup</button>

<button class="btn dropdown-toggle" data-toggle="dropdown">

<span class="caret"></span>

</button>

<ul class="dropdown-menu">

<!-- dropdown menu links -->

</ul>

</div>

,,

企业建站2800元起,携手武汉肥猫科技,做一个有见地的颜值派!更多优惠请戳:武汉网站制作 https://www.feimao666.com