1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-28 22:39:11 +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
2014-11-30 20:17:45 -08:00
89 changed files with 4375 additions and 2859 deletions

View File

@@ -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">