mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-26 05:19:15 +02:00
Merge branch 'master' into derp
Conflicts: Gruntfile.js dist/css/bootstrap-theme.css.map dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.svg docs/_includes/components/badges.html docs/_includes/components/input-groups.html docs/_includes/components/pagination.html docs/_includes/css/forms.html docs/_includes/footer.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/grunt.html docs/_includes/home-nav.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/modal.html docs/_includes/js/popovers.html docs/_includes/js/tooltips.html docs/_includes/nav/getting-started.html docs/_includes/nav/javascript.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/browser-bugs.html docs/dist/css/bootstrap-theme.css.map docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.svg less/_button-group.less less/_jumbotron.less less/_variables.less less/mixins/vendor-prefixes.less less/panels.less less/thumbnails.less package.json
This commit is contained in:
Mark Otto
@@ -39,7 +39,7 @@ $(".alert").alert()
|
||||
|
||||
### Markup
|
||||
|
||||
Just add `data-dismiss="alert"` to your close button to automatically give an alert close functionality.
|
||||
Just add `data-dismiss="alert"` to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.
|
||||
|
||||
{% highlight html %}
|
||||
<button type="button" class="close" data-dismiss="alert">
|
||||
@@ -48,7 +48,7 @@ Just add `data-dismiss="alert"` to your close button to automatically give an al
|
||||
</button>
|
||||
{% endhighlight %}
|
||||
|
||||
To have your alerts use animation when closing, make sure they have the `.fade` and `.in` class already applied to them.
|
||||
To have your alerts use animation when closing, make sure they have the `.fade` and `.in` classes already applied to them.
|
||||
|
||||
### Methods
|
||||
|
||||
@@ -58,13 +58,13 @@ Makes an alert listen for click events on descendant elements which have the `da
|
||||
|
||||
#### $().alert('close')
|
||||
|
||||
Closes an alert.
|
||||
Closes an alert by removing it from the DOM. If the `.fade` and `.in` classes are present on the element, the alert will fade out before it is removed.
|
||||
|
||||
{% highlight js %}$(".alert").alert('close'){% endhighlight %}
|
||||
|
||||
### Events
|
||||
|
||||
Bootstrap's alert class exposes a few events for hooking into alert functionality.
|
||||
Bootstrap's alert plugin exposes a few events for hooking into alert functionality.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
|
||||
@@ -3,111 +3,88 @@ layout: page
|
||||
title: Buttons
|
||||
---
|
||||
|
||||
|
||||
Do more with buttons. Control button states or create groups of buttons for more components like toolbars.
|
||||
|
||||
## Uses
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Cross-browser compatibility</h4>
|
||||
<p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
|
||||
</div>
|
||||
|
||||
#### Stateful
|
||||
## Stateful
|
||||
|
||||
Add `data-loading-text="Loading..."` to use a loading state on a button.
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Use whichever state you like!</h4>
|
||||
<p>For the sake of this demonstration, we are using <code>data-loading-text</code> and <code>$().button('loading')</code>, but that's not the only state you can use. <a href="#buttons-methods">See more on this below in the <code>$().button(string)</code> documentation</a>.</p>
|
||||
</div>
|
||||
|
||||
{% example html %}
|
||||
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">
|
||||
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
|
||||
Loading state
|
||||
</button>
|
||||
<script>
|
||||
$('#loading-example-btn').click(function () {
|
||||
var btn = $(this)
|
||||
btn.button('loading')
|
||||
$.ajax(...).always(function () {
|
||||
btn.button('reset')
|
||||
});
|
||||
});
|
||||
$('#myButton').on('click', function () {
|
||||
var $btn = $(this).button('loading')
|
||||
// business logic...
|
||||
$btn.button('reset')
|
||||
})
|
||||
</script>
|
||||
{% endexample %}
|
||||
|
||||
#### Single toggle
|
||||
### Single toggle
|
||||
|
||||
Add `data-toggle="button"` to activate toggling on a single button.
|
||||
|
||||
{% example html %}
|
||||
<button type="button" class="btn btn-primary" data-toggle="button">
|
||||
<button type="button" class="btn btn-primary" data-toggle="button" autocomplete="off">
|
||||
Single toggle
|
||||
</button>
|
||||
{% endexample %}
|
||||
|
||||
#### Checkbox
|
||||
## Checkbox and radio
|
||||
|
||||
Add `data-toggle="buttons"` to a group of checkboxes for checkbox style toggling on btn-group.
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Pre-checked options need <code>.active</code></h4>
|
||||
<p>For pre-checked options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Visual checked state only updated on click</h4>
|
||||
<p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code><input type="reset"></code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
|
||||
</div>
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-group" data-toggle="buttons">
|
||||
<label class="btn btn-primary active">
|
||||
<input type="checkbox" autocomplete="off" checked> Option 1 (pre-checked)
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="checkbox" autocomplete="off"> Option 2
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="checkbox" autocomplete="off"> Option 3
|
||||
</label>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
#### Radio
|
||||
|
||||
Add `data-toggle="buttons"` to a group of radio inputs for radio style toggling on btn-group.
|
||||
Add `data-toggle="buttons"` to a `.btn-group` containing checkbox or radio inputs to enable toggling in their respective styles.
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Preselected options need <code>.active</code></h4>
|
||||
<p>For preselected options, you must add the <code>.active</code> class to the input's <code>label</code> yourself.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Visual checked state only updated on click</h4>
|
||||
<p>If the checked state of a checkbox button is updated without firing a <code>click</code> event on the button (e.g. via <code><input type="reset"></code> or via setting the <code>checked</code> property of the input), you will need to toggle the <code>.active</code> class on the input's <code>label</code> yourself.</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
{% example html %}
|
||||
<div class="bs-example">
|
||||
<div class="btn-group" data-toggle="buttons">
|
||||
<label class="btn btn-primary active">
|
||||
<input type="checkbox" checked autocomplete="off"> Checkbox 1 (pre-checked)
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="checkbox" autocomplete="off"> Checkbox 2
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="checkbox" autocomplete="off"> Checkbox 3
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
{% example html %}
|
||||
<div class="btn-group" data-toggle="buttons">
|
||||
<label class="btn btn-primary active">
|
||||
<input type="radio" name="options" id="option1" autocomplete="off" checked> Option 1 (preselected)
|
||||
<input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="radio" name="options" id="option2" autocomplete="off"> Option 2
|
||||
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
|
||||
</label>
|
||||
<label class="btn btn-primary">
|
||||
<input type="radio" name="options" id="option3" autocomplete="off"> Option 3
|
||||
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
|
||||
</label>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
Enable buttons via JavaScript:
|
||||
|
||||
{% highlight js %}
|
||||
$('.btn').button()
|
||||
{% endhighlight %}
|
||||
|
||||
### Markup
|
||||
|
||||
Data attributes are integral to the button plugin. Check out the example code below for the various markup types.
|
||||
|
||||
### Options
|
||||
|
||||
*None.*
|
||||
{% endexample %}
|
||||
|
||||
### Methods
|
||||
|
||||
@@ -115,48 +92,21 @@ Data attributes are integral to the button plugin. Check out the example code be
|
||||
|
||||
Toggles push state. Gives the button the appearance that it has been activated.
|
||||
|
||||
<div class="bs-callout bs-callout-info">
|
||||
<h4>Auto toggling</h4>
|
||||
<p>You can enable auto toggling of a button by using the <code>data-toggle</code> attribute.</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-primary" data-toggle="button">...</button>
|
||||
{% endhighlight %}
|
||||
|
||||
#### $().button('loading')</h4>
|
||||
|
||||
Sets button state to loading - disables button and swaps text to loading text. Loading text should be defined on the button element using the data attribute `data-loading-text`.
|
||||
|
||||
{% highlight html %}
|
||||
<button id="loading-example-btn" type="button" class="btn btn-primary" data-loading-text="loading stuff...">...</button>
|
||||
<script>
|
||||
$('#loading-example-btn').click(function () {
|
||||
var btn = $(this)
|
||||
btn.button('loading')
|
||||
$.ajax(...).always(function () {
|
||||
btn.button('reset')
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Cross-browser compatibility</h4>
|
||||
<p><a href="https://github.com/twbs/bootstrap/issues/793">Firefox persists form control states (disabledness and checkedness) across page loads</a>. A workaround for this is to use <code>autocomplete="off"</code>.</p>
|
||||
</div>
|
||||
|
||||
#### $().button('reset')
|
||||
|
||||
Resets button state - swaps text to original text.
|
||||
Resets button state—swaps text to original text.
|
||||
|
||||
#### $().button(string)
|
||||
|
||||
Resets button state - swaps text to any data defined text state.
|
||||
Swaps text to any data defined text state.
|
||||
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-primary" data-complete-text="finished!" >...</button>
|
||||
<button type="button" id="myStateButton" data-complete-text="finished!" class="btn btn-primary" autocomplete="off">
|
||||
...
|
||||
</button>
|
||||
<script>
|
||||
$('.btn').button('complete')
|
||||
$('#myStateButton').on('click', function () {
|
||||
$(this).button('complete') // button text will be "finished!"
|
||||
})
|
||||
</script>
|
||||
{% endhighlight %}
|
||||
|
||||
@@ -3,9 +3,9 @@ layout: page
|
||||
title: Carousel
|
||||
---
|
||||
|
||||
## Example
|
||||
A slideshow component for cycling through elements—images or slides of text—like a carousel. **Nested carousels are not supported.**
|
||||
|
||||
The slideshow below shows a generic plugin and component for cycling through elements like a carousel.
|
||||
## Example
|
||||
|
||||
{% example html %}
|
||||
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
|
||||
|
||||
@@ -17,42 +17,42 @@ Using the collapse plugin, we built a simple accordion by extending the panel co
|
||||
{% example html %}
|
||||
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-heading" role="tab" id="headingOne">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||||
Collapsible Group Item #1
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
|
||||
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
|
||||
<div class="panel-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-heading" role="tab" id="headingTwo">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||||
Collapsible Group Item #2
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
|
||||
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
|
||||
<div class="panel-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="panel-heading" role="tab" id="headingThree">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||||
Collapsible Group Item #3
|
||||
</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel">
|
||||
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
|
||||
<div class="panel-body">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||||
</div>
|
||||
@@ -63,6 +63,12 @@ Using the collapse plugin, we built a simple accordion by extending the panel co
|
||||
|
||||
You can also use the plugin without the accordion markup. Make a button toggle the expanding and collapsing of another element.
|
||||
|
||||
<div class="bs-callout bs-callout-warning">
|
||||
<h4>Make expand/collapse controls accessible</h4>
|
||||
<p>Be sure to add <code>aria-expanded</code> to the control element. This attribute explicitly defines the current state of the collapsible element to screen readers and similar assistive technologies. If the collapsible element is closed by default, it should have a value of <code>aria-expanded="false"</code>. If you've set the collapsible element to be open by default using the <code>in</code> class, set <code>aria-expanded="true"</code> on the control instead. The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.</p>
|
||||
<p>Additionally, if your control element is targetting a single collapsible element – i.e. the <code>data-target</code> attribute is pointing to an <code>id</code> selector – you may add an additional <code>aria-controls</code> attribute to the control element, containing the <code>id</code> of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
|
||||
simple collapsible
|
||||
@@ -84,7 +90,7 @@ These classes can be found in `component-animations.less`.
|
||||
|
||||
### Via data attributes
|
||||
|
||||
Just add `data-toggle="collapse"` and a `data-target` to element to automatically assign control of a collapsible element. The `data-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `in`.
|
||||
Just add `data-toggle="collapse"` and a `data-target` to the element to automatically assign control of a collapsible element. The `data-target` attribute accepts a CSS selector to apply the collapse to. Be sure to add the class `collapse` to the collapsible element. If you'd like it to default open, add the additional class `in`.
|
||||
|
||||
To add accordion-like group management to a collapsible control, add the data attribute `data-parent="#selector"`. Refer to the demo to see this in action.
|
||||
|
||||
@@ -115,7 +121,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>parent</td>
|
||||
<td>selector</td>
|
||||
<td>false</td>
|
||||
<td>If selector then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this dependent on the <code>panel</code> class)</td>
|
||||
<td>If a selector is provided, then all collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the <code>panel</code> class)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>toggle</td>
|
||||
|
||||
@@ -107,14 +107,14 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
|
||||
</div>
|
||||
|
||||
<div class="bs-example" style="padding-bottom: 24px;">
|
||||
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
|
||||
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
<!-- Button trigger modal -->
|
||||
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
|
||||
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
|
||||
Launch demo modal
|
||||
</button>
|
||||
|
||||
@@ -154,8 +154,8 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
|
||||
Modals have two optional sizes, available via modifier classes to be placed on a `.modal-dialog`.
|
||||
|
||||
<div class="bs-example">
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
|
||||
</div>
|
||||
|
||||
{% highlight html %}
|
||||
@@ -171,7 +171,7 @@ Modals have two optional sizes, available via modifier classes to be placed on a
|
||||
</div>
|
||||
|
||||
<!-- Small modal -->
|
||||
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>
|
||||
|
||||
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
|
||||
@@ -170,7 +170,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>string | false</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
|
||||
<p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -179,7 +179,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>''</td>
|
||||
<td>
|
||||
<p>Default content value if <code>data-content</code> attribute isn't present.</p>
|
||||
<p>If a function is given, it will be called with its <code>this</code> reference set to, which is the element that the popover is attached to.</p>
|
||||
<p>If a function is given, it will be called with its <code>this</code> reference set to the element that the popover is attached to.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -218,11 +218,11 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>string</td>
|
||||
<td><code>'<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'</code></td>
|
||||
<td>
|
||||
<p>Base HTML to use when creating the popover.</p>
|
||||
<p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
|
||||
<p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
|
||||
<p><code>.arrow</code> will become the popover's arrow.</p>
|
||||
<p>The outermost wrapper element should have the <code>.popover</code> class.</p>
|
||||
<p>Base HTML to use when creating the popover.</p>
|
||||
<p>The popover's <code>title</code> will be injected into the <code>.popover-title</code>.</p>
|
||||
<p>The popover's <code>content</code> will be injected into the <code>.popover-content</code>.</p>
|
||||
<p><code>.arrow</code> will become the popover's arrow.</p>
|
||||
<p>The outermost wrapper element should have the <code>.popover</code> class.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -241,13 +241,13 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>viewport</td>
|
||||
<td>string | object</td>
|
||||
<td>{ selector: 'body', padding: 0 }</td>
|
||||
<td>
|
||||
<p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
<td>viewport</td>
|
||||
<td>string | object</td>
|
||||
<td>{ selector: 'body', padding: 0 }</td>
|
||||
<td>
|
||||
<p>Keeps the popover within the bounds of this element. Example: <code>viewport: '#viewport'</code> or <code>{ "selector": "#viewport", "padding": 0 }</code></p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -293,27 +293,27 @@ Hides and destroys an element's popover.
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show.bs.popover</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.bs.popover</td>
|
||||
<td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.bs.popover</td>
|
||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.bs.popover</td>
|
||||
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show.bs.popover</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.bs.popover</td>
|
||||
<td>This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.bs.popover</td>
|
||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.bs.popover</td>
|
||||
<td>This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -16,9 +16,40 @@ Hover over the links below to see tooltips:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
### Directions
|
||||
### Static demo
|
||||
|
||||
Available in four directions
|
||||
Four options are available: top, right, bottom, and left aligned.
|
||||
|
||||
<div class="bs-example bs-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 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-arrow"></div>
|
||||
<div class="tooltip-inner">
|
||||
Tooltip on the right
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
### Interactive demo
|
||||
|
||||
Hover over the buttons below to see their tooltips.
|
||||
|
||||
<div class="bs-example tooltip-demo">
|
||||
<div class="bs-example-tooltips">
|
||||
@@ -100,12 +131,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">Type</th>
|
||||
<th style="width: 50px;">Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 100px;">Name</th>
|
||||
<th style="width: 100px;">Type</th>
|
||||
<th style="width: 50px;">Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
@@ -231,28 +262,28 @@ Hides and destroys an element's tooltip.
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th style="width: 150px;">Event Type</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show.bs.tooltip</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.bs.tooltip</td>
|
||||
<td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.bs.tooltip</td>
|
||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.bs.tooltip</td>
|
||||
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show.bs.tooltip</td>
|
||||
<td>This event fires immediately when the <code>show</code> instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.bs.tooltip</td>
|
||||
<td>This event is fired when the tooltip has been made visible to the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.bs.tooltip</td>
|
||||
<td>This event is fired immediately when the <code>hide</code> instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.bs.tooltip</td>
|
||||
<td>This event is fired when the tooltip has finished being hidden from the user (will wait for CSS transitions to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user