mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-31 00:59:51 +02:00
Code Issues Releases Wiki Activity

Docs: use <button> for dropdown/popover examples, explain preference over <a> for dropdowns, tweak collapse prose (#37432)

Browse Source 
* Expand dropdown explanation for use of `<a>`, use `<button>`s for modal examples

* Remove redundant `role="button"` from collapse test `<button>` elements

* Tweak language

* Tweak collapse prose
This commit is contained in:
Patrick H. Lauke
2022-11-12 17:21:33 +00:00
committed by GitHub
parent 8387827c13
commit 0446e22b5a
4 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
site/content/docs/5.2/components/modal.md
View File

@@ -329,7 +329,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
</div>
<div class="modal-body">
<h2 class="fs-5">Popover in a modal</h2>
<p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</a> triggers a popover on click.</p>
<p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</button> triggers a popover on click.</p>
<hr>
<h2 class="fs-5">Tooltips in a modal</h2>
<p><a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
@@ -351,7 +351,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
```html
<div class="modal-body">
<h2 class="fs-5">Popover in a modal</h2>
<p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<p>This <button class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</button> triggers a popover on click.</p>
<hr>
<h2 class="fs-5">Tooltips in a modal</h2>
<p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
@@ -537,7 +537,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button>
{{< /example >}}
### Change animation