mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 18:44:01 +02:00
Code Issues Releases Wiki Activity

Change up link alerts

Browse Source 
* No more children selectors to set all links in alerts as a special color because buttons and more wrongly inherited color
* Adds .alert-link for easy styling in any alert
This commit is contained in:
Mark Otto
2013-05-16 20:53:59 -07:00
parent 0f4b4acce1
commit 9762f95bde
5 changed files with 39 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_includes/nav-components.html
View File

@@ -84,6 +84,7 @@
<li><a href="#alerts-default">Default alert</a></li>
<li><a href="#alerts-block">Block alerts</a></li>
<li><a href="#alerts-alternatives">Contextual alternatives</a></li>
<li><a href="#alerts-links">Links in alerts</a></li>
</ul>
</li>
<li>

12
docs/assets/css/bootstrap.css vendored
View File

@@ -4410,8 +4410,7 @@ button.close {
border-top-color: #f8e5be;
}
.alert > a,
.alert > p > a {
.alert .alert-link {
font-weight: 500;
color: #a47e3c;
}
@@ -4433,8 +4432,7 @@ button.close {
border-top-color: #c9e2b3;
}
.alert-success > a,
.alert-success > p > a {
.alert-success .alert-link {
color: #356635;
}
@@ -4448,8 +4446,7 @@ button.close {
border-top-color: #e6c1c7;
}
.alert-danger > a,
.alert-danger > p > a {
.alert-danger .alert-link {
color: #953b39;
}
@@ -4463,8 +4460,7 @@ button.close {
border-top-color: #a6e1ec;
}
.alert-info > a,
.alert-info > p > a {
.alert-info .alert-link {
color: #2d6987;
}

28
docs/components.html
View File

@@ -1905,6 +1905,34 @@ body { padding-bottom: 70px; }
<div class="alert alert-danger">...</div>
<div class="alert alert-success">...</div>
<div class="alert alert-info">...</div>
{% endhighlight %}
<h3 id="alerts-links">Links in alerts</h3>
<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>
{% highlight html %}
<div class="alert alert-danger">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-success">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info">
<a href="#" class="alert-link">...</a>
</div>
{% endhighlight %}
</div>

2
docs/javascript.html
View File

@@ -1053,7 +1053,7 @@ $('#example').tooltip(options)
<h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<a class="btn btn-danger" href="#">Take this action</a> <a class="btn" href="#">Or do this</a>
<a class="btn btn-danger" href="#">Take this action</a> <a class="btn btn-default" href="#">Or do this</a>
</p>
</div>
</div><!-- /example -->