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

Dump the type margin overrides in alerts for utils, document that particular example, sidesteps part of #18884

Browse Source
This commit is contained in:
Mark Otto
2016-02-03 20:43:12 -08:00
parent 2ac922c78f
commit b4a2b99395
2 changed files with 13 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
docs/components/alerts.md
View File

@@ -49,6 +49,19 @@ Use the `.alert-link` utility class to quickly provide matching colored links wi
</div> </div>
{% endexample %} {% endexample %}
### Additional content
Alerts can also contain additional HTML elements like headings and paragraphs.
{% example html %}
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">Well done!</h4>
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
<p class="m-b-0">Whenever you need to, be sure to use a margin utilities to keep things nice and tidy.</p>
</div>
{% endexample %}
### Dismissing ### Dismissing
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:

9
scss/_alert.scss
View File

@@ -7,15 +7,6 @@
margin-bottom: $spacer-y; margin-bottom: $spacer-y;
border: $alert-border-width solid transparent; border: $alert-border-width solid transparent;
@include border-radius($alert-border-radius); @include border-radius($alert-border-radius);
// Improve alignment and spacing of inner content
> p,
> ul {
margin-bottom: 0;
}
> p + p {
margin-top: 5px;
}
} }
// Headings for larger alerts // Headings for larger alerts