mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-05-24 14:04:09 +03:00
Code Activity

Merge branch 'v4-dev' of https://github.com/twbs/bootstrap into v4-dev

Browse Source
This commit is contained in:
Mark Otto
2017-03-07 20:44:42 -08:00
parent 07f63324d1 95f37e4c40
commit 7e07d5bf2e
61 changed files with 312 additions and 590 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/badge.md
+1 -1
View File
@@ -1,7 +1,7 @@
---
layout: docs
title: Badges
description: Documentation and examples for badges, our small count and labelling component.
description: Documentation and examples for badges, our small count and labeling component.
group: components
---
docs/components/collapse.md
+1 -1
View File
@@ -40,7 +40,7 @@ You can use a link with the `href` attribute, or a button with the `data-target`
## Accordion example
Using the [card]({{ site.baseurl }}/components/card) component, you can extend the default collapse behavior to create an accordion.
Using the [card]({{ site.baseurl }}/components/card/) component, you can extend the default collapse behavior to create an accordion.
{% example html %}
<div id="accordion" role="tablist">
docs/components/modal.md
+2 -2
View File
@@ -20,7 +20,7 @@ Before getting started with Bootstrap's modal component, be sure to read the fol
- Clicking on the modal "backdrop" will automatically close the modal.
- Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences.
- Modals use `position: fixed`, which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element.
- One again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
- Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
- Lastly, the `autofocus` HTML attribute has no effect in modals. Here's how you can achieve the same effect with custom JavaScript.
Keep reading for demos and usage guidelines.
@@ -347,7 +347,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
### Varying modal content
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes) (possibly [via jQuery](https://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked.
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) (possibly [via jQuery](https://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked.
Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`.