Skip to content

B
bootstrap
Commit 2011a0d5 authored by Mark Otto's avatar Mark Otto
Browse files
Options

Drop labels from the docs

parent c6cc1b1a
Show whitespace changes
Inline Side-by-side
Showing with 20 additions and 154 deletions
docs/components.html
View file @ 2011a0d5
...@@ -90,7 +90,7 @@ ...@@ -90,7 +90,7 @@
<li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li> <li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li>
<li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li> <li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li>
<li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li> <li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li>
<li><a href="#labels-badges"><i class="glyphicon-chevron-right"></i> Labels and badges</a></li> <li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li> <li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li> <li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li> <li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
...@@ -327,7 +327,7 @@ ...@@ -327,7 +327,7 @@
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p> <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p>
<h4>Dropdowns in button groups</h4> <h4>Dropdowns in button groups</h4>
<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p> <p>Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
</section> </section>
...@@ -1511,73 +1511,13 @@ ...@@ -1511,73 +1511,13 @@
<!-- Labels and badges <!-- Badges
================================================== --> ================================================== -->
<section id="labels-badges"> <section id="badges">
<div class="page-header"> <div class="page-header">
<h1>Labels and badges</h1> <h1>Badges</h1>
</div> </div>
<h3>Labels</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Labels</th>
<th>Markup</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="label">Default</span>
</td>
<td>
<code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-success">Success</span>
</td>
<td>
<code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-warning">Warning</span>
</td>
<td>
<code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-danger">Danger</span>
</td>
<td>
<code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-info">Info</span>
</td>
<td>
<code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-inverse">Inverse</span>
</td>
<td>
<code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
<h3>Badges</h3>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1657,7 +1597,7 @@ ...@@ -1657,7 +1597,7 @@
</table> </table>
<h3>Easily collapsible</h3> <h3>Easily collapsible</h3>
<p>For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p> <p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
</section> </section>
......
docs/css.html
View file @ 2011a0d5
...@@ -303,7 +303,7 @@ ...@@ -303,7 +303,7 @@
</div> </div>
<pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre> <pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>
<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> <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>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>
...@@ -567,8 +567,8 @@ ...@@ -567,8 +567,8 @@
&lt;dd&gt;...&lt;/dd&gt; &lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt; &lt;/dl&gt;
</pre> </pre>
<h5>Auto-truncating</h5>
<p> <p>
<span class="label label-info">Heads up!</span>
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout. Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
</p> </p>
</section> </section>
...@@ -601,7 +601,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -601,7 +601,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt; &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
&lt;/pre&gt; &lt;/pre&gt;
</pre> </pre>
<p><span class="label label-info">Heads up!</span> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p> <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
</section> </section>
...@@ -1841,7 +1840,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1841,7 +1840,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;a href="#" class="btn btn-large disabled"&gt;Link&lt;/a&gt; &lt;a href="#" class="btn btn-large disabled"&gt;Link&lt;/a&gt;
</pre> </pre>
<p> <p>
<span class="label label-info">Heads up!</span>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here. We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
</p> </p>
...@@ -1884,7 +1882,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1884,7 +1882,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h1>Images</h1> <h1>Images</h1>
</div> </div>
<p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p> <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
<div class="bs-docs-example bs-docs-example-images"> <div class="bs-docs-example bs-docs-example-images">
<img data-src="holder.js/140x140" class="img-rounded"> <img data-src="holder.js/140x140" class="img-rounded">
<img data-src="holder.js/140x140" class="img-circle"> <img data-src="holder.js/140x140" class="img-circle">
...@@ -1895,8 +1893,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1895,8 +1893,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;img src="..." class="img-circle"&gt; &lt;img src="..." class="img-circle"&gt;
&lt;img src="..." class="img-polaroid"&gt; &lt;img src="..." class="img-polaroid"&gt;
</pre> </pre>
<p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE8 due to lack of <code>border-radius</code> support.</p>
</section> </section>
...@@ -2094,10 +2090,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -2094,10 +2090,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;i class="glyphicon-search"&gt;&lt;/i&gt; &lt;i class="glyphicon-search"&gt;&lt;/i&gt;
</pre> </pre>
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p> <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
<p> <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
<span class="label label-info">Heads up!</span>
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
</p>
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
......
docs/templates/pages/components.mustache
View file @ 2011a0d5
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
<li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li> <li><a href="#navbar"><i class="glyphicon-chevron-right"></i> Navbar</a></li>
<li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li> <li><a href="#breadcrumbs"><i class="glyphicon-chevron-right"></i> Breadcrumbs</a></li>
<li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li> <li><a href="#pagination"><i class="glyphicon-chevron-right"></i> Pagination</a></li>
<li><a href="#labels-badges"><i class="glyphicon-chevron-right"></i> Labels and badges</a></li> <li><a href="#badges"><i class="glyphicon-chevron-right"></i> Badges</a></li>
<li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li> <li><a href="#typography"><i class="glyphicon-chevron-right"></i> Typography</a></li>
<li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li> <li><a href="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li> <li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
...@@ -259,7 +259,7 @@ ...@@ -259,7 +259,7 @@
<p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p> <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the JavaScript docs</a> for that.</p>
<h4>Dropdowns in button groups</h4> <h4>Dropdowns in button groups</h4>
<p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p> <p>Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
</section> </section>
...@@ -1443,73 +1443,13 @@ ...@@ -1443,73 +1443,13 @@
<!-- Labels and badges <!-- Badges
================================================== --> ================================================== -->
<section id="labels-badges"> <section id="badges">
<div class="page-header"> <div class="page-header">
<h1>Labels and badges</h1> <h1>Badges</h1>
</div> </div>
<h3>Labels</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Labels</th>
<th>Markup</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="label">Default</span>
</td>
<td>
<code>&lt;span class="label"&gt;Default&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-success">Success</span>
</td>
<td>
<code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-warning">Warning</span>
</td>
<td>
<code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-danger">Danger</span>
</td>
<td>
<code>&lt;span class="label label-danger"&gt;Danger&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-info">Info</span>
</td>
<td>
<code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>
</td>
</tr>
<tr>
<td>
<span class="label label-inverse">Inverse</span>
</td>
<td>
<code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</code>
</td>
</tr>
</tbody>
</table>
<h3>Badges</h3>
<table class="table table-bordered table-striped"> <table class="table table-bordered table-striped">
<thead> <thead>
<tr> <tr>
...@@ -1589,7 +1529,7 @@ ...@@ -1589,7 +1529,7 @@
</table> </table>
<h3>Easily collapsible</h3> <h3>Easily collapsible</h3>
<p>For easy implementation, labels and badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p> <p>For easy implementation, badges will simply collapse (via CSS's <code>:empty</code> selector) when no content exists within.</p>
</section> </section>
......
docs/templates/pages/css.mustache
View file @ 2011a0d5
...@@ -240,7 +240,7 @@ ...@@ -240,7 +240,7 @@
</div> </div>
<pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre> <pre class="prettyprint">&lt;em&gt;rendered as italicized text&lt;/em&gt;</pre>
<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> <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>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>
...@@ -507,8 +507,8 @@ ...@@ -507,8 +507,8 @@
&lt;dd&gt;...&lt;/dd&gt; &lt;dd&gt;...&lt;/dd&gt;
&lt;/dl&gt; &lt;/dl&gt;
</pre> </pre>
<h5>Auto-truncating</h5>
<p> <p>
<span class="label label-info">Heads up!</span>
Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout. Horizontal description lists will truncate terms that are too long to fit in the left column fix <code>text-overflow</code>. In narrower viewports, they will change to the default stacked layout.
</p> </p>
</section> </section>
...@@ -541,7 +541,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -541,7 +541,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt; &amp;lt;p&amp;gt;Sample text here...&amp;lt;/p&amp;gt;
&lt;/pre&gt; &lt;/pre&gt;
</pre> </pre>
<p><span class="label label-info">Heads up!</span> Be sure to keep code within <code>&lt;pre&gt;</code> tags as close to the left as possible; it will render all tabs.</p>
<p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p> <p>You may optionally add the <code>.pre-scrollable</code> class which will set a max-height of 350px and provide a y-axis scrollbar.</p>
</section> </section>
...@@ -1781,7 +1780,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1781,7 +1780,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;a href="#" class="btn btn-large disabled"&gt;Link&lt;/a&gt; &lt;a href="#" class="btn btn-large disabled"&gt;Link&lt;/a&gt;
</pre> </pre>
<p> <p>
<span class="label label-info">Heads up!</span>
We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here. We use <code>.disabled</code> as a utility class here, similar to the common <code>.active</code> class, so no prefix is required. Also, this class is only for aesthetic; you must use custom JavaScript to disable links here.
</p> </p>
...@@ -1824,7 +1822,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1824,7 +1822,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
<h1>Images</h1> <h1>Images</h1>
</div> </div>
<p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project.</p> <p>Add classes to an <code>&lt;img&gt;</code> element to easily style images in any project. Rounded corners are not available in IE8.</p>
<div class="bs-docs-example bs-docs-example-images"> <div class="bs-docs-example bs-docs-example-images">
<img data-src="holder.js/140x140" class="img-rounded"> <img data-src="holder.js/140x140" class="img-rounded">
<img data-src="holder.js/140x140" class="img-circle"> <img data-src="holder.js/140x140" class="img-circle">
...@@ -1835,8 +1833,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -1835,8 +1833,6 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;img src="..." class="img-circle"&gt; &lt;img src="..." class="img-circle"&gt;
&lt;img src="..." class="img-polaroid"&gt; &lt;img src="..." class="img-polaroid"&gt;
</pre> </pre>
<p><span class="label label-info">Heads up!</span> <code>.img-rounded</code> and <code>.img-circle</code> do not work in IE8 due to lack of <code>border-radius</code> support.</p>
</section> </section>
...@@ -2034,10 +2030,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin ...@@ -2034,10 +2030,7 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
&lt;i class="glyphicon-search"&gt;&lt;/i&gt; &lt;i class="glyphicon-search"&gt;&lt;/i&gt;
</pre> </pre>
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p> <p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
<p> <p>When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.</p>
<span class="label label-info">Heads up!</span>
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the icon for proper spacing.
</p>
<hr class="bs-docs-separator"> <hr class="bs-docs-separator">
......
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