在微信上关注我们
A Group of buttons.
Put a series of .am-btn buttons into .am-btn-group.
<div class="am-btn-group">
<button type="button" class="am-btn am-btn-default">Left Hand</button>
...
</div>
<div class="am-btn-group">
<button type="button" class="am-btn am-btn-primary am-radius">Left Hand</button>
...
</div>
<div class="am-btn-group">
<button type="button" class="am-btn am-btn-primary am-round">Left Hand</button>
...
</div>
``Put .am-btn-group into .am-btn-toolbar to make a button tool bar.
<div class="am-btn-toolbar">
<div class="am-btn-group">...</div>
<div class="am-btn-group">...</div>
<div class="am-btn-group">...</div>
</div>Add .am-btn-group-lg, .am-btn-group-sm or .am-btn-group-xs to .am-btn-group to change the size of bottons.
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-lg">...</div>
</div>
<div class="am-btn-toolbar">
<div class="am-btn-group">...</div>
</div>
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-sm">...</div>
</div>
<div class="am-btn-toolbar">
<div class="am-btn-group am-btn-group-xs">...</div>
</div>
</div>Use .am-btn-group-stacked to arrange buttons vertically.
<div class="am-btn-group-stacked">
<button type="button" class="am-btn am-btn-default">Button</button>
...
</div>Add .am-btn-group-justify to justify a button group.
Attention: This can only be apply to .<a> element and <button> element. Don't works for display: table-cell style
Implemented using flexbox, so this only works on IE 10+ and other modern browser.
<div class="am-btn-group am-btn-group-justify">
<a class="am-btn am-btn-default" role="button">Left Hand</a>
...
</div>The following example shows how to combine button-group with Dropdown.
<div class="am-btn-group">
<button class="am-btn am-btn-secondary">Down</button>
<div class="am-dropdown" data-am-dropdown>
<button class="am-btn am-btn-secondary am-dropdown-toggle" data-am-dropdown-toggle> <span class="am-icon-caret-down"></span></button>
<ul class="am-dropdown-content">
<li class="am-dropdown-header">Title</li>
<li><a href="#">Devouring Time,blunt thou the lion'paws,</a></li>
<li class="am-active"><a href="#">And make the earth devour her own sweet brood;</a></li>
<li><a href="#">Pluck the keen teeth from the fierce tiger's jaws,</a></li>
<li class="am-disabled"><a href="#">And burn the long--liv'd phoenix in her blood;</a></li>
<li class="am-divider"></li>
<li><a href="#">Make glad and sorry seasons as thou fleets,</a></li>
</ul>
</div>
</div><div class="am-btn-group">
<button class="am-btn am-btn-secondary">上拉按钮</button>
<div class="am-dropdown am-dropdown-up" data-am-dropdown>
<button class="am-btn am-btn-secondary am-dropdown-toggle" data-am-dropdown-toggle> <span class="am-icon-caret-up"></span></button>
<ul class="am-dropdown-content">
<li class="am-dropdown-header">Title</li>
<li><a href="#">Devouring Time,blunt thou the lion'paws,</a></li>
<li class="am-active"><a href="#">And make the earth devour her own sweet brood;</a></li>
<li><a href="#">Pluck the keen teeth from the fierce tiger's jaws,</a></li>
<li class="am-disabled"><a href="#">And burn the long--liv'd phoenix in her blood;</a></li>
<li class="am-divider"></li>
<li><a href="#">Make glad and sorry seasons as thou fleets,</a></li>
</ul>
</div>
</div>