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:
parent
102cadf02b
commit
439e834b38
@ -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">
|
||||||
</button>
|
Set "California"
|
||||||
|
</button>
|
||||||
<button class="js-programmatic-multi-clear btn btn-primary">
|
</div>
|
||||||
Clear
|
<div class="btn-group btn-group-sm" role="group" aria-label="Open and close">
|
||||||
</button>
|
<button class="js-programmatic-open btn btn-default">
|
||||||
</p>
|
Open
|
||||||
|
</button>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user