mirror of
https://github.com/twbs/bootstrap.git
synced 2025-09-25 21:09:06 +02:00
Merge branch 'master' into v4
Conflicts: Gruntfile.js _config.yml dist/css/bootstrap-theme.css dist/css/bootstrap-theme.min.css dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css dist/fonts/glyphicons-halflings-regular.eot dist/fonts/glyphicons-halflings-regular.svg dist/fonts/glyphicons-halflings-regular.ttf dist/fonts/glyphicons-halflings-regular.woff docs/_data/glyphicons.yml docs/_includes/components/alerts.html docs/_includes/components/badges.html docs/_includes/components/button-dropdowns.html docs/_includes/components/button-groups.html docs/_includes/components/dropdowns.html docs/_includes/components/glyphicons.html docs/_includes/components/input-groups.html docs/_includes/components/labels.html docs/_includes/components/media.html docs/_includes/components/navbar.html docs/_includes/components/navs.html docs/_includes/components/pagination.html docs/_includes/components/panels.html docs/_includes/components/progress-bars.html docs/_includes/css/buttons.html docs/_includes/css/forms.html docs/_includes/css/grid.html docs/_includes/css/helpers.html docs/_includes/css/images.html docs/_includes/css/less.html docs/_includes/css/responsive-utilities.html docs/_includes/css/sass.html docs/_includes/css/tables.html docs/_includes/css/type.html docs/_includes/getting-started/accessibility.html docs/_includes/getting-started/browser-device-support.html docs/_includes/getting-started/community.html docs/_includes/getting-started/download.html docs/_includes/getting-started/examples.html docs/_includes/getting-started/whats-included.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/carousel.html docs/_includes/js/collapse.html docs/_includes/js/dropdowns.html docs/_includes/js/modal.html docs/_includes/js/overview.html docs/_includes/js/tabs.html docs/_includes/nav/components.html docs/_includes/nav/css.html docs/_includes/nav/javascript.html docs/_includes/nav/main.html docs/about.html docs/assets/css/docs.min.css docs/assets/js/customize.min.js docs/assets/js/raw-files.min.js docs/dist/css/bootstrap-theme.css docs/dist/css/bootstrap-theme.min.css docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/dist/fonts/glyphicons-halflings-regular.eot docs/dist/fonts/glyphicons-halflings-regular.svg docs/dist/fonts/glyphicons-halflings-regular.ttf docs/dist/fonts/glyphicons-halflings-regular.woff docs/examples/carousel/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/non-responsive/non-responsive.css docs/examples/sticky-footer-navbar/index.html docs/examples/theme/index.html fonts/glyphicons-halflings-regular.eot fonts/glyphicons-halflings-regular.svg fonts/glyphicons-halflings-regular.ttf fonts/glyphicons-halflings-regular.woff less/_carousel.less less/_forms.less less/glyphicons.less
This commit is contained in:
Mark Otto
@@ -17,6 +17,8 @@ Add dismiss functionality to all alert messages with this plugin.
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
When using a `.close` button, it must be the first child of the `.alert-dismissible` and no text content may come before it in the markup.
|
||||
|
||||
{% example html %}
|
||||
<div class="alert alert-danger alert-dismissible fade in" role="alert">
|
||||
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
||||
|
||||
@@ -26,11 +26,11 @@ A slideshow component for cycling through elements—images or slides of text—
|
||||
</div>
|
||||
</div>
|
||||
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||
<span class="icon-prev" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
<span class="icon-next" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
@@ -41,6 +41,11 @@ A slideshow component for cycling through elements—images or slides of text—
|
||||
<p>Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 & 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.</p>
|
||||
</div>
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-carousel-active">
|
||||
<h4>Initial active element required</h4>
|
||||
<p>The <code>.active</code> class needs to be added to one of the slides. Otherwise, the carousel will not be visible.</p>
|
||||
</div>
|
||||
|
||||
### Optional captions
|
||||
|
||||
Add captions to your slides easily with the `.carousel-caption` element within any `.item`. Place just about any optional HTML within there and it will be automatically aligned and formatted.
|
||||
@@ -76,11 +81,11 @@ Add captions to your slides easily with the `.carousel-caption` element within a
|
||||
</div>
|
||||
</div>
|
||||
<a class="left carousel-control" href="#carousel-example-captions" role="button" data-slide="prev">
|
||||
<span class="glyphicon glyphicon-chevron-left"></span>
|
||||
<span class="icon-prev" aria-hidden="true"></span>
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
<a class="right carousel-control" href="#carousel-example-captions" role="button" data-slide="next">
|
||||
<span class="glyphicon glyphicon-chevron-right"></span>
|
||||
<span class="icon-next" aria-hidden="true"></span>
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -3,16 +3,42 @@ layout: page
|
||||
title: Collapse
|
||||
---
|
||||
|
||||
Get base styles and flexible support for collapsible components like accordions and navigation.
|
||||
Flexible plugin that utilizes a handful of classes for easy toggle behavior.
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Plugin dependency</h4>
|
||||
<p>Collapse requires the <a href="#transitions">transitions plugin</a> to be included in your version of Bootstrap.</p>
|
||||
</div>
|
||||
|
||||
## Example accordion
|
||||
## Example
|
||||
|
||||
Using the collapse plugin, we built a simple accordion by extending the panel component.
|
||||
Click the buttons below to show and hide another element via class changes:
|
||||
|
||||
- `.collapse` hides content
|
||||
- `.collapsing` is applied during transitions
|
||||
- `.collapse.in` shows content
|
||||
|
||||
You can use a link with the `href` attribute, or a button with the `data-target` attribute. In both cases, the `data-toggle="collapse"` is required.
|
||||
|
||||
{% example html %}
|
||||
<p>
|
||||
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Link with href
|
||||
</a>
|
||||
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
|
||||
Button with data-target
|
||||
</button>
|
||||
</p>
|
||||
<div class="collapse" id="collapseExample">
|
||||
<div class="well">
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
|
||||
</div>
|
||||
</div>
|
||||
{% endexample %}
|
||||
|
||||
## Accoridion example
|
||||
|
||||
Extend the default collapse behavior to create an accordion with the panel component.
|
||||
|
||||
{% example html %}
|
||||
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
|
||||
|
||||
@@ -8,7 +8,7 @@ Add dropdown menus to nearly anything with this simple plugin, including the nav
|
||||
### Within navbars
|
||||
|
||||
<div class="bs-example">
|
||||
<nav id="navbar-example" class="navbar navbar-default navbar-static" role="navigation">
|
||||
<nav id="navbar-example" class="navbar navbar-default navbar-static">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-collapse">
|
||||
@@ -173,7 +173,7 @@ Toggles the dropdown menu of a given navbar or tabbed navigation.
|
||||
|
||||
### Events
|
||||
|
||||
All dropdown events are fired at the `.dropdown-menu`'s parent element.
|
||||
All dropdown events are fired at the `.dropdown-menu`'s parent element and have a `relatedTarget` property, whose value is the toggling anchor element.
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
@@ -186,19 +186,19 @@ All dropdown events are fired at the `.dropdown-menu`'s parent element.
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>show.bs.dropdown</td>
|
||||
<td>This event fires immediately when the show instance method is called. The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
|
||||
<td>This event fires immediately when the show instance method is called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>shown.bs.dropdown</td>
|
||||
<td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
|
||||
<td>This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide.bs.dropdown</td>
|
||||
<td>This event is fired immediately when the hide instance method has been called. The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
|
||||
<td>This event is fired immediately when the hide instance method has been called.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hidden.bs.dropdown</td>
|
||||
<td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the <code>relatedTarget</code> property of the event.</td>
|
||||
<td>This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -5,7 +5,13 @@ title: Modal
|
||||
|
||||
Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
|
||||
|
||||
**Due to how HTML5 defines its semantics, the `autofocus` HTML attribute has no effect in Bootstrap modals.**
|
||||
**Due to how HTML5 defines its semantics, the `autofocus` HTML attribute has no effect in Bootstrap modals.** To achieve the same effect, use some custom JavaScript:
|
||||
|
||||
{% highlight js %}
|
||||
$('#myModal').on('shown.bs.modal', function () {
|
||||
$('#myInput').focus()
|
||||
})
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-warning" id="callout-stacked-modals">
|
||||
<h4>Overlapping modals not supported</h4>
|
||||
@@ -241,7 +247,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
|
||||
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form role="form">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="recipient-name" class="control-label">Recipient:</label>
|
||||
<input type="text" class="form-control" id="recipient-name">
|
||||
@@ -274,7 +280,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
|
||||
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form role="form">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="recipient-name" class="control-label">Recipient:</label>
|
||||
<input type="text" class="form-control" id="recipient-name">
|
||||
|
||||
@@ -38,6 +38,11 @@ Alternatively, to target a specific plugin, just include the plugin's name as a
|
||||
$(document).off('.alert.data-api')
|
||||
{% endhighlight %}
|
||||
|
||||
<div class="bs-callout bs-callout-danger">
|
||||
<h4>Only one plugin per element via data attributes</h4>
|
||||
<p>Don't use data attributes from multiple plugins on the same element. For example, a button cannot both have a tooltip and toggle a modal. To accomplish this, use a wrapping element.</p>
|
||||
</div>
|
||||
|
||||
### Programmatic API
|
||||
|
||||
We also believe you should be able to use all Bootstrap plugins purely through the JavaScript API. All public APIs are single, chainable methods, and return the collection acted upon.
|
||||
|
||||
@@ -8,7 +8,7 @@ title: Tabs
|
||||
Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.
|
||||
|
||||
<div class="bs-example bs-example-tabs">
|
||||
<ul id="myTab" class="nav nav-tabs" role="tablist">
|
||||
<ul id="myTab" class="nav nav-tabs" role="tabpanel">
|
||||
<li role="presentation" class="active">
|
||||
<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
|
||||
</li>
|
||||
@@ -71,6 +71,7 @@ $('#myTab li:eq(2) a').tab('show') // Select third tab (0-indexed)
|
||||
|
||||
You can activate a tab or pill navigation without writing any JavaScript by simply specifying `data-toggle="tab"` or `data-toggle="pill"` on an element. Adding the `.nav` and `.nav-tabs` classes to the tab `<ul>` will apply the Bootstrap <a href="../components/#nav-tabs">tab styling</a>, while adding the `.nav` and `.nav-pills` classes will apply <a href="../components/#nav-pills">pill styling</a>.
|
||||
|
||||
<div role="tabpanel">
|
||||
{% highlight html %}
|
||||
<!-- Nav tabs -->
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
@@ -88,6 +89,7 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
|
||||
<div role="tabpanel" class="tab-pane" id="settings">...</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
|
||||
### Fade effect
|
||||
|
||||
@@ -110,10 +112,18 @@ 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"><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 role="presentation" class="active">
|
||||
<a href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a>
|
||||
</li>
|
||||
<li role="presentation">
|
||||
<a href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content">
|
||||
|
||||
Reference in New Issue
Block a user