rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-20 17:54:23 +01:00
Code Issues Actions Packages Releases 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
Show Stats 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
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 >}}
{{< 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:
- 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.
- 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.
- 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 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.
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
title: Close icon
description: Use a generic close icon for dismissing content like modals and alerts.
title: Close button
description: A generic close button for dismissing content like modals and alerts.
group: components
---

2
site/data/sidebar.yml
View File

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