1
0
mirror of synced 2024-11-25 22:36:03 +03:00

Group buttons for "Programmatic access" and "Disabled mode" demos.

This also gets rid of the colored buttons in favor of `.btn-default`, prevents wrapping of the "Destroy" button of the first button group of the "Programmatic access" demos to a second line and consistently places buttons below the Select2 widgets they apply to.

Ref. http://getbootstrap.com/components/#btn-groups.
This commit is contained in:
Florian Kissling 2015-04-22 18:05:59 +02:00
parent 102cadf02b
commit 439e834b38

View File

@ -352,15 +352,17 @@ $(".js-data-example-ajax").select2({
<select class="js-example-disabled-multi js-states form-control" multiple="multiple" disabled="disabled"></select> <select class="js-example-disabled-multi js-states form-control" multiple="multiple" disabled="disabled"></select>
</p> </p>
<p> <div class="btn-group" role="group" aria-label="Programmatic enabling and disabling">
<button class="js-programmatic-enable btn btn-primary"> <button type="button" class="js-programmatic-enable btn btn-default">
Enable Enable
</button> </button>
<button class="js-programmatic-disable btn btn-warning"> <button type="button" class="js-programmatic-disable btn btn-default">
Disable Disable
</button> </button>
</p>
</div> </div>
</div>
<div class="col-md-8"> <div class="col-md-8">
<h2>Example code</h2> <h2>Example code</h2>
@ -423,47 +425,49 @@ $(".js-programmatic-disable").on("click", function () {
component. component.
</p> </p>
<p>
<button class="js-programmatic-set-val btn btn-primary">
Set to California
</button>
<button class="js-programmatic-open btn btn-success">
Open
</button>
<button class="js-programmatic-close btn btn-success">
Close
</button>
<button class="js-programmatic-init btn btn-danger">
Init
</button>
<button class="js-programmatic-destroy btn btn-danger">
Destroy
</button>
</p>
<p> <p>
<select class="js-example-programmatic js-states form-control"></select> <select class="js-example-programmatic js-states form-control"></select>
</p> </p>
<p> <div class="btn-toolbar" role="toolbar" aria-label="Programmatic control">
<button class="js-programmatic-multi-set-val btn btn-primary"> <div class="btn-group btn-group-sm" aria-label="Set Select2 option">
Set to California and Alabama <button class="js-programmatic-set-val btn btn-default">
Set "California"
</button> </button>
</div>
<button class="js-programmatic-multi-clear btn btn-primary"> <div class="btn-group btn-group-sm" role="group" aria-label="Open and close">
Clear <button class="js-programmatic-open btn btn-default">
Open
</button> </button>
</p> <button class="js-programmatic-close btn btn-default">
Close
</button>
</div>
<div class="btn-group btn-group-sm" role="group" aria-label="Initialize and destroy">
<button class="js-programmatic-init btn btn-default">
Init
</button>
<button class="js-programmatic-destroy btn btn-default">
Destroy
</button>
</div>
</div>
<p> <p>
<select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select> <select class="js-example-programmatic-multi js-states form-control" multiple="multiple"></select>
</p> </p>
<div class="btn-group" role="group" aria-label="Programmatic setting and clearing Select2 options">
<button type="button" class="js-programmatic-multi-set-val btn btn-default">
Set to California and Alabama
</button>
<button type="button" class="js-programmatic-multi-clear btn btn-default">
Clear
</button>
</div> </div>
</div>
<div class="col-md-8"> <div class="col-md-8">
<h2>Example code</h2> <h2>Example code</h2>