mirror of
https://github.com/tenrok/bootstrap.git
synced 2026-05-30 15:24:08 +03:00
Merge branch 'master' into v4
This commit is contained in:
Mark Otto
@@ -22,62 +22,62 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
@@ -86,14 +86,14 @@ Turn a button into a dropdown toggle with some basic markup changes.
|
||||
{% highlight html %}
|
||||
<!-- Single button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Action
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -106,79 +106,79 @@ Similarly, create split button dropdowns with the same markup changes, only with
|
||||
<div class="bd-example">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-secondary">Default</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-primary">Primary</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-success">Success</button>
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-info">Info</button>
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-warning">Warning</button>
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Danger</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
@@ -188,14 +188,14 @@ Similarly, create split button dropdowns with the same markup changes, only with
|
||||
<!-- Split button -->
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-danger">Action</button>
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -208,42 +208,42 @@ Button dropdowns work with buttons of all sizes.
|
||||
<div class="bd-example">
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Large button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Small button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
</div><!-- /btn-toolbar -->
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Extra small button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
@@ -253,30 +253,30 @@ Button dropdowns work with buttons of all sizes.
|
||||
{% highlight html %}
|
||||
<!-- Large button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
<button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Large button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Small button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Small button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Extra small button group -->
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
|
||||
<button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Extra small button
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
@@ -290,27 +290,27 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
||||
<div class="btn-toolbar" role="toolbar">
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">Dropup</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-primary">Right dropup</button>
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
<ul class="dropdown-menu dropdown-menu-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div><!-- /btn-group -->
|
||||
@@ -320,10 +320,10 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
|
||||
{% highlight html %}
|
||||
<div class="btn-group dropup">
|
||||
<button type="button" class="btn btn-secondary">Dropup</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<!-- Dropdown menu links -->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -106,10 +106,10 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
|
||||
<button type="button" class="btn btn-secondary">2</button>
|
||||
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
|
||||
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
</ul>
|
||||
@@ -126,10 +126,10 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
|
||||
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
</ul>
|
||||
@@ -137,28 +137,28 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<button type="button" class="btn btn-secondary">Button</button>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
|
||||
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
|
||||
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group" role="group">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
|
||||
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
<li><a href="#">Dropdown link</a></li>
|
||||
</ul>
|
||||
|
||||
@@ -130,6 +130,8 @@ Do more with buttons. Control button states or create groups of buttons for more
|
||||
|
||||
Use JavaScript to change the text and "state" of a particular button. For the sake of this demonstration, we are using `data-loading-text` and `$().button('loading')`, but that's not the only state you can use. [Custom strings of text](#buttons-methods) can also be used with `$().button(string)`.
|
||||
|
||||
**This feature is deprecated since v3.3.5 and will be removed in v4.**
|
||||
|
||||
**Heads up!** You'll likely need to work around Firefox's [persisted form control states across page loads bug](https://github.com/twbs/bootstrap/issues/793) (e.g., disabled and checked states) with `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072) for details.
|
||||
|
||||
{% example html %}
|
||||
@@ -199,7 +201,7 @@ Toggles push state. Gives the button the appearance that it has been activated.
|
||||
|
||||
#### $().button('reset')
|
||||
|
||||
Resets button state—swaps text to original text.
|
||||
Resets button state—swaps text to original text. **This method is asynchronous and returns before the resetting has actually completed.**
|
||||
|
||||
#### $().button(string)
|
||||
|
||||
|
||||
@@ -80,7 +80,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item">
|
||||
<img data-src="holder.js/900x500/auto/#555:#5555" alt="Third slide image">
|
||||
<img data-src="holder.js/900x500/auto/#555:#555" alt="Third slide image">
|
||||
<div class="carousel-caption">
|
||||
<h3>Third slide label</h3>
|
||||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
|
||||
|
||||
@@ -16,18 +16,18 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another
|
||||
|
||||
{% example html %}
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
|
||||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="#">Action</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
|
||||
<li>
|
||||
<a href="#">Action</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="#">Another action</a>
|
||||
<li>
|
||||
<a href="#">Another action</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="#">Something else here</a>
|
||||
<li>
|
||||
<a href="#">Something else here</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -44,7 +44,7 @@ Dropdowns are automatically positioned via CSS within the normal flow of the doc
|
||||
{% endcallout %}
|
||||
|
||||
{% highlight html %}
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
|
||||
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
|
||||
...
|
||||
</ul>
|
||||
{% endhighlight %}
|
||||
@@ -54,13 +54,13 @@ Dropdowns are automatically positioned via CSS within the normal flow of the doc
|
||||
Add a header to label sections of actions in any dropdown menu.
|
||||
|
||||
{% example html %}
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li role="presentation" class="dropdown-header">Dropdown header</li>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="#">Action</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li class="dropdown-header">Dropdown header</li>
|
||||
<li>
|
||||
<a href="#">Action</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="#">Another action</a>
|
||||
<li>
|
||||
<a href="#">Another action</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
@@ -70,19 +70,19 @@ Add a header to label sections of actions in any dropdown menu.
|
||||
Separate groups of related menu items with a divider.
|
||||
|
||||
{% example html %}
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="#">Action</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#">Action</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="#">Another action</a>
|
||||
<li>
|
||||
<a href="#">Another action</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="#">Something else here</a>
|
||||
<li>
|
||||
<a href="#">Something else here</a>
|
||||
</li>
|
||||
<li role="presentation" class="dropdown-divider"></li>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
|
||||
<li class="dropdown-divider"></li>
|
||||
<li>
|
||||
<a href="#">Separated link</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
@@ -92,15 +92,15 @@ Separate groups of related menu items with a divider.
|
||||
Add `.disabled` to a `<li>` in the dropdown to disable the link.
|
||||
|
||||
{% example html %}
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="#">Regular link</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li>
|
||||
<a href="#">Regular link</a>
|
||||
</li>
|
||||
<li role="presentation" class="disabled">
|
||||
<a role="menuitem" tabindex="-1" href="#">Disabled link</a>
|
||||
<li class="disabled">
|
||||
<a href="#">Disabled link</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a role="menuitem" tabindex="-1" href="#">Another link</a>
|
||||
<li>
|
||||
<a href="#">Another link</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endexample %}
|
||||
@@ -119,11 +119,10 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
|
||||
|
||||
{% highlight html %}
|
||||
<div class="dropdown">
|
||||
<button id="dLabel" type="button" data-toggle="dropdown">
|
||||
<button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown trigger
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
<ul class="dropdown-menu" aria-labelledby="dLabel">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
@@ -133,12 +132,11 @@ To keep URLs intact with link buttons, use the `data-target` attribute instead o
|
||||
|
||||
{% highlight html %}
|
||||
<div class="dropdown">
|
||||
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown">
|
||||
<a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown trigger
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
|
||||
<ul class="dropdown-menu" aria-labelledby="dLabel">
|
||||
...
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -306,7 +306,7 @@ For more structured form layouts, you can utilize Bootstrap's predefined grid cl
|
||||
|
||||
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
|
||||
|
||||
A checkbox or radio with the `disabled` attribute will be styled appropriately. To have the `<label>` for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the `.disabled` class to your `.radio`, `.radio-inline`, `.checkbox`, `.checkbox-inline`, or `<fieldset>`.
|
||||
Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent `<label>`, you'll need to add the <code>.disabled</code> class to the parent `.radio`, `.radio-inline`, `.checkbox`, or `.checkbox-inline`.
|
||||
|
||||
### Default (stacked)
|
||||
|
||||
@@ -806,4 +806,3 @@ The file input is the most gnarly of the bunch. Here's how it works:
|
||||
In other words, it's an entirely custom element, all generated via CSS.
|
||||
|
||||
**Heads up!** The custom file input is currently unable to update the *Choose file...* text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas.
|
||||
|
||||
|
||||
@@ -110,12 +110,14 @@ Buttons in input groups are a bit different and require one extra level of nesti
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Action
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -126,12 +128,14 @@ Buttons in input groups are a bit different and require one extra level of nesti
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" aria-label="Text input with dropdown button">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Action
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -148,14 +152,14 @@ Buttons in input groups are a bit different and require one extra level of nesti
|
||||
<div class="input-group">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
@@ -167,14 +171,14 @@ Buttons in input groups are a bit different and require one extra level of nesti
|
||||
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary">Action</button>
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
|
||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
<span class="sr-only">Toggle Dropdown</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
<ul class="dropdown-menu dropdown-menu-right">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@@ -60,6 +60,20 @@ Linkify list group items by using anchor tags instead of list items (that also m
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Button items
|
||||
|
||||
List group items may be buttons instead of list items (that also means a parent `<div>` instead of an `<ul>`). No need for individual parents around each element. **Don't use the standard `.btn` classes here.**
|
||||
|
||||
{% example html %}
|
||||
<div class="list-group">
|
||||
<button type="button" class="list-group-item">Cras justo odio</button>
|
||||
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
|
||||
<button type="button" class="list-group-item">Morbi leo risus</button>
|
||||
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
|
||||
<button type="button" class="list-group-item">Vestibulum at eros</button>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Disabled items
|
||||
|
||||
Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
|
||||
|
||||
@@ -19,7 +19,7 @@ $('#myModal').on('shown.bs.modal', function () {
|
||||
{% endhighlight %}
|
||||
|
||||
{% callout warning %}
|
||||
#### Overlapping modals not supported
|
||||
#### Multiple open modals not supported
|
||||
|
||||
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
|
||||
{% endcallout %}
|
||||
@@ -42,7 +42,7 @@ A rendered modal with header, body, and set of actions in the footer.</p>
|
||||
|
||||
<div class="bd-example bd-example-modal">
|
||||
<div class="modal">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
@@ -65,7 +65,7 @@ A rendered modal with header, body, and set of actions in the footer.</p>
|
||||
|
||||
{% highlight html %}
|
||||
<div class="modal fade">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
@@ -91,7 +91,7 @@ A rendered modal with header, body, and set of actions in the footer.</p>
|
||||
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
|
||||
|
||||
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
|
||||
<div class="modal-header">
|
||||
@@ -147,7 +147,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
@@ -171,7 +171,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
|
||||
{% callout warning %}
|
||||
#### Make modals accessible
|
||||
|
||||
Be sure to add `role="dialog"` to `.modal`, `aria-labelledby="myModalLabel"` attribute to reference the modal title, and `aria-hidden="true"` to tell assistive technologies to skip the modal's DOM elements.
|
||||
Be sure to add `role="dialog"` and `aria-labelledby="..."``, referencing the modal title, to `.modal`, and `role="document"` to the `.modal-dialog` itself.
|
||||
|
||||
Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`.
|
||||
{% endcallout %}
|
||||
@@ -267,7 +267,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
|
||||
|
||||
{% example html %}
|
||||
<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
@@ -325,7 +325,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
|
||||
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
|
||||
+40
-42
@@ -52,16 +52,16 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item active" role="presentation">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled" role="presentation">
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -73,16 +73,16 @@ Take that same HTML, but use `.nav-pills` instead:
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item active" role="presentation">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled" role="presentation">
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -94,16 +94,16 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav nav-pills nav-stacked">
|
||||
<li class="nav-item active" role="presentation">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Link</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled" role="presentation">
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -117,23 +117,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="nav-item active" role="presentation">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled" role="presentation">
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -143,23 +143,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
|
||||
|
||||
{% example html %}
|
||||
<ul class="nav nav-pills">
|
||||
<li class="nav-item active" role="presentation">
|
||||
<li class="nav-item active">
|
||||
<a href="#" class="nav-link">Active</a>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#">Action</a></li>
|
||||
<li><a href="#">Another action</a></li>
|
||||
<li><a href="#">Something else here</a></li>
|
||||
<li class="divider"></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">Another link</a>
|
||||
</li>
|
||||
<li class="nav-item disabled" role="presentation">
|
||||
<li class="nav-item disabled">
|
||||
<a href="#" class="nav-link">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -171,20 +171,19 @@ Use the tab JavaScript plugin—include it individually or through the compiled
|
||||
|
||||
<div class="bd-example bd-example-tabs" role="tabpanel">
|
||||
<ul id="myTab" class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation" class="active">
|
||||
<li class="active">
|
||||
<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<li>
|
||||
<a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a>
|
||||
</li>
|
||||
<li role="presentation" class="dropdown">
|
||||
<li class="dropdown">
|
||||
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">
|
||||
Dropdown
|
||||
<span class="caret"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
|
||||
<li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
|
||||
<li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
|
||||
<ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
|
||||
<li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
|
||||
<li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -212,10 +211,10 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
|
||||
{% highlight html %}
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
|
||||
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
|
||||
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
|
||||
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
|
||||
<li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
|
||||
<li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
|
||||
<li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
|
||||
<li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Tab panes -->
|
||||
@@ -269,16 +268,16 @@ Activates a tab element and content container. Tab should have either a `data-ta
|
||||
|
||||
{% highlight html %}
|
||||
<ul class="nav nav-tabs" role="tablist" id="myTab">
|
||||
<li role="presentation" class="active">
|
||||
<li class="active">
|
||||
<a href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<li>
|
||||
<a href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<li>
|
||||
<a href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<li>
|
||||
<a href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -343,4 +342,3 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
||||
e.relatedTarget // previous active tab
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
+12
-12
@@ -93,37 +93,37 @@ Four options are available: top, right, bottom, and left aligned.
|
||||
|
||||
<div class="bd-example popover-demo">
|
||||
<div class="bd-example-popovers">
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on top
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
||||
sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on bottom
|
||||
</button>
|
||||
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on right
|
||||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||||
Popover on left
|
||||
</button>
|
||||
{% endhighlight %}
|
||||
|
||||
@@ -249,7 +249,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>trigger</td>
|
||||
<td>string</td>
|
||||
<td>'click'</td>
|
||||
<td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
|
||||
<td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>viewport</td>
|
||||
|
||||
@@ -29,12 +29,14 @@ The ScrollSpy plugin is for automatically updating nav targets based on scroll p
|
||||
<li><a href="#fat">@fat</a></li>
|
||||
<li><a href="#mdo">@mdo</a></li>
|
||||
<li class="dropdown">
|
||||
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
|
||||
<li><a href="#one" tabindex="-1">one</a></li>
|
||||
<li><a href="#two" tabindex="-1">two</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#three" tabindex="-1">three</a></li>
|
||||
<a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||||
Dropdown
|
||||
</a>
|
||||
<ul class="dropdown-menu" aria-labelledby="navbarDrop1">
|
||||
<li><a href="#one">one</a></li>
|
||||
<li><a href="#two">two</a></li>
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="#three">three</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -66,7 +68,7 @@ Scrollspy currently requires the use of a [Bootstrap nav component](/components/
|
||||
|
||||
### Requires relative positioning
|
||||
|
||||
No matter the implementation method, scrollspy requires the use of `position: relative;` on the element you're spying on. In most cases this is the `<body>`.
|
||||
No matter the implementation method, scrollspy requires the use of `position: relative;` on the element you're spying on. In most cases this is the `<body>`. When scrollspying on elements other than the `<body>`, be sure to have a `height` set and `overflow-y: scroll;` applied.
|
||||
|
||||
### Via data attributes
|
||||
|
||||
|
||||
@@ -458,7 +458,7 @@ Firefox has some awkward fieldset styling involving `width` that interferes with
|
||||
}
|
||||
{% endhighlight %}
|
||||
|
||||
For more information, read [this Stack Overflow answer](http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685).
|
||||
For more information, read [this Stack Overflow answer](https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685).
|
||||
{% endcallout %}
|
||||
|
||||
<div class="bd-example">
|
||||
|
||||
+16
-16
@@ -45,28 +45,28 @@ Hover over the links below to see tooltips:
|
||||
Four options are available: top, right, bottom, and left aligned.
|
||||
|
||||
<div class="bd-example bd-example-tooltip">
|
||||
<div class="tooltip left" role="tooltip">
|
||||
<div class="tooltip-arrow"></div>
|
||||
<div class="tooltip-inner">
|
||||
Tooltip on the left
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip top" role="tooltip">
|
||||
<div class="tooltip-arrow"></div>
|
||||
<div class="tooltip-inner">
|
||||
Tooltip on the top
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip right" role="tooltip">
|
||||
<div class="tooltip-arrow"></div>
|
||||
<div class="tooltip-inner">
|
||||
Tooltip on the right
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip bottom" role="tooltip">
|
||||
<div class="tooltip-arrow"></div>
|
||||
<div class="tooltip-inner">
|
||||
Tooltip on the bottom
|
||||
</div>
|
||||
</div>
|
||||
<div class="tooltip right" role="tooltip">
|
||||
<div class="tooltip left" role="tooltip">
|
||||
<div class="tooltip-arrow"></div>
|
||||
<div class="tooltip-inner">
|
||||
Tooltip on the right
|
||||
Tooltip on the left
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -77,25 +77,25 @@ Hover over the buttons below to see their tooltips.
|
||||
|
||||
<div class="bd-example tooltip-demo">
|
||||
<div class="bd-example-tooltips">
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
|
||||
Tooltip on top
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
|
||||
Tooltip on right
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
|
||||
Tooltip on bottom
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
|
||||
Tooltip on right
|
||||
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
|
||||
Tooltip on left
|
||||
</button>
|
||||
{% endhighlight %}
|
||||
|
||||
@@ -210,7 +210,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>trigger</td>
|
||||
<td>string</td>
|
||||
<td>'hover focus'</td>
|
||||
<td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
|
||||
<td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>viewport</td>
|
||||
|
||||
Reference in New Issue
Block a user