mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-02 01:42:36 +02:00
Code Issues Releases Wiki Activity

Rename close icon to close button (#29387)

Browse Source
This commit is contained in:
Shohei Yoshida
2019-10-22 11:27:43 +09:00
committed by Mark Otto
parent 3251de8d57
commit 3b876be652
3 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
site/content/docs/4.3/components/alerts.md
View File

@@ -11,7 +11,7 @@ toc: true
## Examples ## Examples
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing). Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
{{< example >}} {{< example >}}
{{< alerts.inline >}} {{< alerts.inline >}}
@@ -58,8 +58,8 @@ Alerts can also contain additional HTML elements like headings, paragraphs and d
Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how: Using the alert JavaScript plugin, it's possible to dismiss any alert inline. Here's how:
- Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript. - Be sure you've loaded the alert plugin, or the compiled Bootstrap JavaScript.
- Add a dismiss button and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the `.close` button. - Add a [close button]({{< docsref "/components/close-button" >}}) and the `.alert-dismissible` class, which adds extra padding to the right of the alert and positions the close button.
- On the dismiss button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices. - On the close button, add the `data-dismiss="alert"` attribute, which triggers the JavaScript functionality. Be sure to use the `<button>` element with it for proper behavior across all devices.
- To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes. - To animate alerts when dismissing them, be sure to add the `.fade` and `.show` classes.
You can see this in action with a live demo: You can see this in action with a live demo:

4
site/content/docs/4.3/components/close-icon.md → site/content/docs/4.3/components/close-button.md
View File

@@ -1,7 +1,7 @@
--- ---
layout: docs layout: docs
title: Close icon title: Close button
description: Use a generic close icon for dismissing content like modals and alerts. description: A generic close button for dismissing content like modals and alerts.
group: components group: components
--- ---

2
site/data/sidebar.yml
View File

@@ -46,7 +46,7 @@
- title: Button group - title: Button group
- title: Card - title: Card
- title: Carousel - title: Carousel
- title: Close icon - title: Close button
- title: Collapse - title: Collapse
- title: Dropdowns - title: Dropdowns
- title: Icons - title: Icons