Skip to content

B
bootstrap
Commit 6dbf5882 authored by Mark Otto's avatar Mark Otto
Browse files
Options

fixes #9310: alerts aren't dismissable by default, now requires... 

fixes #9310: alerts aren't dismissable by default, now requires .alert-dismissable if you need a close button
parent aefed0ad
Show whitespace changes
Inline Side-by-side
Showing with 56 additions and 35 deletions
_includes/nav-components.html
View file @ 6dbf5882
......@@ -94,6 +94,7 @@
<ul class="nav">
<li><a href="#alerts-default">Default alert</a></li>
<li><a href="#alerts-alternatives">Contextual alternatives</a></li>
<li><a href="#alerts-dismissable">Dismissable alerts</a></li>
<li><a href="#alerts-links">Links in alerts</a></li>
</ul>
</li>
......
components.html
View file @ 6dbf5882
......@@ -1880,40 +1880,30 @@ body { padding-bottom: 70px; }
</div>
<p class="lead">Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the <a href="../javascript/#js-alerts">alerts jQuery plugin</a>.</p>
<h3 id="alerts-default">Default alert</h3>
<h2 id="alerts-default">Default alert</h2>
<p>Wrap any text and an optional dismiss button in <code>.alert</code> for a basic warning alert message.</p>
<div class="bs-callout bs-callout-warning">
<h4>Ensure proper behavior across all devices</h4>
<p>Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
</div>
<div class="bs-example">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
{% highlight html %}
<div class="alert">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
{% endhighlight %}
<h3 id="alerts-alternatives">Contextual alternatives</h3>
<h2 id="alerts-alternatives">Contextual alternatives</h2>
<p>Add optional classes to change an alert's connotation.</p>
<div class="bs-example">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
</div>
......@@ -1923,19 +1913,36 @@ body { padding-bottom: 70px; }
<div class="alert alert-info">...</div>
{% endhighlight %}
<h3 id="alerts-links">Links in alerts</h3>
<h2 id="alerts-dismissable">Dismissable alerts</h2>
<p>Build on any alert by adding an optional <code>.alert-dismissable</code> and close button.</p>
<div class="bs-example">
<div class="alert alert-dismissable">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
{% highlight html %}
<div class="alert alert-dismissable">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
{% endhighlight %}
<div class="bs-callout bs-callout-warning">
<h4>Ensure proper behavior across all devices</h4>
<p>Be sure to use the <code>&lt;button&gt;</code> element with the <code>data-dismiss="alert"</code> data attribute.</p>
</div>
<h2 id="alerts-links">Links in alerts</h2>
<p>Use the <code>.alert-link</code> utility class to quickly provide matching colored links within any alert.</p>
<div class="bs-example">
<div class="alert alert-danger">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info">
<button type="button" class="close" data-dismiss="alert">&times;</button>
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
</div>
......
dist/css/bootstrap.css
View file @ 6dbf5882
......@@ -4117,7 +4117,7 @@ button.close {
}
.alert {
padding: 15px 35px 15px 15px;
padding: 15px;
margin-bottom: 20px;
color: #c09853;
background-color: #fcf8e3;
......@@ -4139,13 +4139,6 @@ button.close {
color: #a47e3c;
}
.alert .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
.alert > p,
.alert > ul {
margin-bottom: 0;
......@@ -4155,6 +4148,17 @@ button.close {
margin-top: 5px;
}
.alert-dismissable {
padding-right: 35px;
}
.alert-dismissable .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
.alert-success {
color: #468847;
background-color: #dff0d8;
......
dist/css/bootstrap.min.css
View file @ 6dbf5882
This source diff could not be displayed because it is too large. You can view the blob instead.
less/alerts.less
View file @ 6dbf5882
......@@ -7,7 +7,7 @@
// -------------------------
.alert {
padding: @alert-padding (@alert-padding + 20) @alert-padding @alert-padding;
padding: @alert-padding;
margin-bottom: @line-height-computed;
color: @alert-text;
background-color: @alert-bg;
......@@ -30,14 +30,6 @@
color: darken(@alert-text, 10%);
}
// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
// Improve alignment and spacing of inner content
> p,
> ul {
......@@ -48,8 +40,25 @@
}
}
// Dismissable alerts
//
// Expand the right padding and account for the close button's positioning.
.alert-dismissable {
padding-right: (@alert-padding + 20);
// Adjust close link position
.close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
}
// Alternate styles
// -------------------------
//
// Generate contextual modifier classes for colorizing the alert.
.alert-success {
.alert-variant(@alert-success-bg; @alert-success-border; @alert-success-text);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment