rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases Activity

fixes #4909: add color utility classes .text-warning, etc and document them

Browse Source
This commit is contained in:
Mark Otto 2012-09-03 00:47:48 -07:00
parent 69d4c3f9a1
commit 9d5f9eca85
4 changed files with 68 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -609,6 +609,22 @@ cite {
color: #999999;
}
.text-warning {
color: #c09853;
}
.text-error {
color: #b94a48;
}
.text-info {
color: #3a87ad;
}
.text-success {
color: #468847;
}
h1,
h2,
h3,

21
docs/base-css.html
View File

@ -154,14 +154,14 @@
</p>
</pre>
<h3><code>&lt;strong&gt;</code></h3>
<h3>Bold</h3>
<p>For emphasizing a snippet of text with <strong>important</strong></p>
<div class="bs-docs-example">
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
</div>
<pre class="prettyprint">&lt;strong&gt;rendered as bold text&lt;/strong&gt;</pre>
<h3><code>&lt;em&gt;</code></h3>
<h3>Italics</h3>
<p>For emphasizing a snippet of text with <em>stress</em></p>
<div class="bs-docs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
@ -170,6 +170,23 @@
<p><span class="label label-info">Heads up!</span> Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.</p>
<h3>Emphasis classes</h3>
<p>Convey meaning through color with a handful of emphasis utility classes.</p>
<div class="bs-docs-example">
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
<pre class="prettyprint linenums">
&lt;p class="muted"&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.&lt;/p&gt;
&lt;p class="text-warning"&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/p&gt;
&lt;p class="text-error"&gt;Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
&lt;p class="text-info"&gt;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.&lt;/p&gt;
&lt;p class="text-success"&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
</pre>
<hr class="bs-docs-separator">

21
docs/templates/pages/base-css.mustache vendored
View File

@ -88,14 +88,14 @@
&lt;/p&gt;
</pre>
<h3><code>&lt;strong&gt;</code></h3>
<h3>{{_i}}Bold{{/i}}</h3>
<p>{{_i}}For emphasizing a snippet of text with <strong>important</strong>{{/i}}</p>
<div class="bs-docs-example">
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
</div>
<pre class="prettyprint">&lt;strong&gt;rendered as bold text&lt;/strong&gt;</pre>
<h3><code>&lt;em&gt;</code></h3>
<h3>{{_i}}Italics{{/i}}</h3>
<p>{{_i}}For emphasizing a snippet of text with <em>stress</em>{{/i}}</p>
<div class="bs-docs-example">
<p>The following snippet of text is <em>rendered as italicized text</em>.</p>
@ -104,6 +104,23 @@
<p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Feel free to use <code>&lt;b&gt;</code> and <code>&lt;i&gt;</code> in HTML5. <code>&lt;b&gt;</code> is meant to highlight words or phrases without conveying additional importance while <code>&lt;i&gt;</code> is mostly for voice, technical terms, etc.{{/i}}</p>
<h3>{{_i}}Emphasis classes{{/i}}</h3>
<p>{{_i}}Convey meaning through color with a handful of emphasis utility classes.{{/i}}</p>
<div class="bs-docs-example">
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
</div>
<pre class="prettyprint linenums">
&lt;p class="muted"&gt;Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.&lt;/p&gt;
&lt;p class="text-warning"&gt;Etiam porta sem malesuada magna mollis euismod.&lt;/p&gt;
&lt;p class="text-error"&gt;Donec ullamcorper nulla non metus auctor fringilla.&lt;/p&gt;
&lt;p class="text-info"&gt;Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.&lt;/p&gt;
&lt;p class="text-success"&gt;Duis mollis, est non commodo luctus, nisi erat porttitor ligula.&lt;/p&gt;
</pre>
<hr class="bs-docs-separator">

14
less/type.less
View File

@ -32,9 +32,23 @@ em {
cite {
font-style: normal;
}
// Utility classes
.muted {
color: @grayLight;
}
.text-warning {
color: @warningText;
}
.text-error {
color: @errorText;
}
.text-info {
color: @infoText;
}
.text-success {
color: @successText;
}
// Headings