Skip to content

B
bootstrap
Commit 072ccd4d authored by Mark Otto's avatar Mark Otto
Browse files
Options

Fixes #11572: Add contextual background-color classes to match text classes;... 

Fixes #11572: Add contextual background-color classes to match text classes; move both sets of classes to Helper Classes section of the CSS docs
parent 67b536ea
Hide whitespace changes
Inline Side-by-side
Showing with 131 additions and 38 deletions
_includes/nav-css.html
View file @ 072ccd4d
......@@ -87,6 +87,8 @@
<li>
<a href="#helper-classes">Helper classes</a>
<ul class="nav">
<li><a href="#helper-classes-colors">Contextual colors</a></li>
<li><a href="#helper-classes-backgrounds">Contextual backgrounds</a></li>
<li><a href="#helper-classes-close">Close icon</a></li>
<li><a href="#helper-classes-carets">Carets</a></li>
<li><a href="#helper-classes-floats">Quick floats</a></li>
......
css.html
View file @ 072ccd4d
......@@ -782,29 +782,6 @@ base_url: "../"
<p class="text-right">Right aligned text.</p>
{% endhighlight %}
<h3>Emphasis classes</h3>
<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
<div class="bs-example">
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
{% highlight html %}
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
{% endhighlight %}
<div class="bs-callout bs-callout-info">
<h4>Dealing with specificity</h4>
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code>&lt;span&gt;</code> with the class.</p>
</div>
<!-- Abbreviations -->
<h2 id="type-abbreviations">Abbreviations</h2>
......@@ -2323,6 +2300,47 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h1 id="helper-classes">Helper classes</h1>
</div>
<h3 id="helper-classes-colors">Contextual colors</h3>
<p>Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.</p>
<div class="bs-example">
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
{% highlight html %}
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
{% endhighlight %}
<div class="bs-callout bs-callout-info">
<h4>Dealing with specificity</h4>
<p>Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <code>&lt;span&gt;</code> with the class.</p>
</div>
<h3 id="helper-classes-backgrounds">Contextual backgrounds</h3>
<p>Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.</p>
<div class="bs-example bs-example-bg-classes">
<p class="bg-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="bg-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="bg-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="bg-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="bg-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
{% highlight html %}
<p class="bg-muted">...</p>
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
{% endhighlight %}
<h3 id="helper-classes-close">Close icon</h3>
<p>Use the generic close icon for dismissing content like modals and alerts.</p>
......
dist/css/bootstrap.css
View file @ 072ccd4d
......@@ -450,6 +450,18 @@ small,
cite {
font-style: normal;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
.text-muted {
color: #999;
}
......@@ -483,17 +495,36 @@ cite {
.text-info:hover {
color: #245269;
}
.text-left {
text-align: left;
.bg-primary {
color: #fff;
background-color: #428bca;
}
.text-right {
text-align: right;
a.bg-primary:hover {
background-color: #3071a9;
}
.text-center {
text-align: center;
.bg-warning {
background-color: #fcf8e3;
}
.text-justify {
text-align: justify;
a.bg-warning:hover {
background-color: #f7ecb5;
}
.bg-danger {
background-color: #f2dede;
}
a.bg-danger:hover {
background-color: #e4b9b9;
}
.bg-success {
background-color: #dff0d8;
}
a.bg-success:hover {
background-color: #c1e2b3;
}
.bg-info {
background-color: #d9edf7;
}
a.bg-info:hover {
background-color: #afd9ee;
}
.page-header {
padding-bottom: 9px;
......
dist/css/bootstrap.min.css
View file @ 072ccd4d
This source diff could not be displayed because it is too large. You can view the blob instead.
docs-assets/css/docs.css
View file @ 072ccd4d
......@@ -779,6 +779,11 @@ h1[id] {
margin: 0;
}
/* Contextual background colors */
.bs-example-bg-classes p {
padding: 15px;
}
/* Images */
.bs-example > .img-circle,
.bs-example > .img-rounded,
......
less/type.less
View file @ 072ccd4d
......@@ -81,7 +81,13 @@ small,
// Undo browser default styling
cite { font-style: normal; }
// Contextual emphasis
// Alignment
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
// Contextual colors
.text-muted {
color: @text-muted;
}
......@@ -116,11 +122,42 @@ cite { font-style: normal; }
}
}
// Alignment
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
// Contextual backgrounds
// For now we'll leave these alongside the text classes until v4 when we can
// safely shift things around (per SemVer rules).
.bg-primary {
// Given the contrast here, this is the only class to have it's color inverted
// automatically.
color: #fff;
background-color: @brand-primary;
a&:hover {
background-color: darken(@brand-primary, 10%);
}
}
.bg-warning {
background-color: @state-warning-bg;
a&:hover {
background-color: darken(@state-warning-bg, 10%);
}
}
.bg-danger {
background-color: @state-danger-bg;
a&:hover {
background-color: darken(@state-danger-bg, 10%);
}
}
.bg-success {
background-color: @state-success-bg;
a&:hover {
background-color: darken(@state-success-bg, 10%);
}
}
.bg-info {
background-color: @state-info-bg;
a&:hover {
background-color: darken(@state-info-bg, 10%);
}
}
// Page header
......
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