mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-08 17:22:31 +03:00
Code Activity

update alert component to use theme sass map and add a ton of options in the process

Browse Source
This commit is contained in:
Mark Otto
2017-06-25 18:22:51 -07:00
parent fc053ed096
commit 2392047a0c
3 changed files with 16 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/4.0/components/alerts.md
+8 -24
View File
@@ -11,18 +11,10 @@ toc: true
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
{% example html %}
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
{% for color in site.data.theme-colors %}
<div class="alert alert-{{ color.name }}" role="alert">
This is a {{ color.name }} alert—check it out!
</div>{% endfor %}
{% endexample %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
@@ -33,18 +25,10 @@ Alerts are available for any length of text, as well as an optional dismiss butt
Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
{% example html %}
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
{% for color in site.data.theme-colors %}
<div class="alert alert-{{ color.name }}" role="alert">
This is a {{ color.name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>{% endfor %}
{% endexample %}
### Additional content