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

Add text alignment utility classes

Browse Source
This commit is contained in:
Mark Otto 2013-01-09 18:56:08 -08:00
parent 3d04d9ba75
commit 91dd77939b
4 changed files with 42 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -510,6 +510,18 @@ a.text-success:hover {
color: #356635; color: #356635;
} }
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
h1, h1,
h2, h2,
h3, h3,

13
docs/css.html
View File

@ -305,6 +305,19 @@
<p>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> <p>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>Alignment classes</h3>
<p>Easily realign text to components with text alignment classes.</p>
<div class="bs-docs-example">
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
</div>
<pre class="prettyprint linenums">
&lt;p class="text-left"&gt;Left aligned text.&lt;/p&gt;
&lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;
&lt;p class="text-right"&gt;Right aligned text.&lt;/p&gt;
</pre>
<h3>Emphasis classes</h3> <h3>Emphasis classes</h3>
<p>Convey meaning through color with a handful of emphasis utility classes.</p> <p>Convey meaning through color with a handful of emphasis utility classes.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">

13
docs/templates/pages/css.mustache vendored
View File

@ -242,6 +242,19 @@
<p>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> <p>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>Alignment classes</h3>
<p>Easily realign text to components with text alignment classes.</p>
<div class="bs-docs-example">
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
</div>
<pre class="prettyprint linenums">
&lt;p class="text-left"&gt;Left aligned text.&lt;/p&gt;
&lt;p class="text-center"&gt;Center aligned text.&lt;/p&gt;
&lt;p class="text-right"&gt;Right aligned text.&lt;/p&gt;
</pre>
<h3>Emphasis classes</h3> <h3>Emphasis classes</h3>
<p>Convey meaning through color with a handful of emphasis utility classes.</p> <p>Convey meaning through color with a handful of emphasis utility classes.</p>
<div class="bs-docs-example"> <div class="bs-docs-example">

4
less/type.less
View File

@ -40,6 +40,10 @@ a.text-error:hover { color: darken(@state-error-text, 10%); }
.text-success { color: @state-success-text; } .text-success { color: @state-success-text; }
a.text-success:hover { color: darken(@state-success-text, 10%); } a.text-success:hover { color: darken(@state-success-text, 10%); }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
// Headings // Headings
// ------------------------- // -------------------------