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

Rename .close to .btn-close, replace times sign with background SVG, update focus state

Browse Source
This commit is contained in:
Mark Otto
2020-09-01 15:16:50 -07:00
committed by Mark Otto
parent fe77208a01
commit 99777662c6
7 changed files with 55 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
site/content/docs/5.0/components/alerts.md
View File

@@ -66,9 +66,7 @@ You can see this in action with a live demo:
{{< example >}}
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Holy guacamole!</strong> You should check in on some of those fields below.
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="alert" aria-label="Close"></button>
</div>
{{< /example >}}

11
site/content/docs/5.0/components/close-button.md
View File

@@ -5,14 +5,9 @@ description: A generic close button for dismissing content like modals and alert
group: components
---
**Be sure to include text for screen readers**, as we've done with `aria-label`. Disabled close buttons have `pointer-events: none` applied to, preventing hover and active states from triggering.
**Be sure to include text for screen readers**, as we've done with `aria-label`. Disabled close buttons have `pointer-events: none` and `user-select: none` applied to preventing hover and active states from triggering.
{{< example >}}
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="close" disabled aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" aria-label="Close"></button>
<button type="button" class="btn-close" disabled aria-label="Close"></button>
{{< /example >}}

76
site/content/docs/5.0/components/modal.md
View File

@@ -66,9 +66,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
@@ -91,9 +89,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Woohoo, you're reading this text in a modal!</p>
@@ -124,9 +120,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
@@ -149,9 +143,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>I will not close if you click outside me. Don't even try to press escape key.</p>
@@ -182,9 +174,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
@@ -208,9 +198,7 @@ When modals become too long for the user's viewport or device, they scroll indep
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
@@ -253,9 +241,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
@@ -307,9 +293,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
@@ -327,9 +311,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
@@ -376,9 +358,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h5>Popover in a modal</h5>
@@ -511,9 +491,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
@@ -638,9 +616,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
@@ -654,9 +630,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
@@ -670,9 +644,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
@@ -736,9 +708,7 @@ Another override is the option to pop up a modal that covers the user viewport,
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
@@ -772,9 +742,7 @@ Another override is the option to pop up a modal that covers the user viewport,
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full screen below sm</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
@@ -791,9 +759,7 @@ Another override is the option to pop up a modal that covers the user viewport,
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full screen below md</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
@@ -810,9 +776,7 @@ Another override is the option to pop up a modal that covers the user viewport,
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full screen below lg</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
@@ -829,9 +793,7 @@ Another override is the option to pop up a modal that covers the user viewport,
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full screen below xl</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...