mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-19 06:18:22 +01:00
Drop labels from the docs
This commit is contained in:
Mark Otto
parent
c6cc1b1a1d
commit
2011a0d50f
@ -90,7 +90,7 @@
|
||||
<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="#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="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
|
||||
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
|
||||
@ -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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
@ -1511,73 +1511,13 @@
|
||||
|
||||
|
||||
|
||||
<!-- Labels and badges
|
||||
<!-- Badges
|
||||
================================================== -->
|
||||
<section id="labels-badges">
|
||||
<section id="badges">
|
||||
<div class="page-header">
|
||||
<h1>Labels and badges</h1>
|
||||
<h1>Badges</h1>
|
||||
</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><span class="label">Default</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-success">Success</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-success">Success</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-warning">Warning</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-warning">Warning</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-danger">Danger</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-danger">Danger</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-info">Info</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-info">Info</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-inverse">Inverse</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-inverse">Inverse</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Badges</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1657,7 +1597,7 @@
|
||||
</table>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
@ -303,7 +303,7 @@
|
||||
</div>
|
||||
<pre class="prettyprint"><em>rendered as italicized text</em></pre>
|
||||
|
||||
<p><span class="label label-info">Heads up!</span> Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></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>
|
||||
@ -567,8 +567,8 @@
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
</pre>
|
||||
<h5>Auto-truncating</h5>
|
||||
<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.
|
||||
</p>
|
||||
</section>
|
||||
@ -601,7 +601,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
&lt;p&gt;Sample text here...&lt;/p&gt;
|
||||
</pre>
|
||||
</pre>
|
||||
<p><span class="label label-info">Heads up!</span> Be sure to keep code within <code><pre></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>
|
||||
</section>
|
||||
|
||||
@ -1841,7 +1840,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<a href="#" class="btn btn-large disabled">Link</a>
|
||||
</pre>
|
||||
<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.
|
||||
</p>
|
||||
|
||||
@ -1884,7 +1882,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<h1>Images</h1>
|
||||
</div>
|
||||
|
||||
<p>Add classes to an <code><img></code> element to easily style images in any project.</p>
|
||||
<p>Add classes to an <code><img></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">
|
||||
<img data-src="holder.js/140x140" class="img-rounded">
|
||||
<img data-src="holder.js/140x140" class="img-circle">
|
||||
@ -1895,8 +1893,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<img src="..." class="img-circle">
|
||||
<img src="..." class="img-polaroid">
|
||||
</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>
|
||||
|
||||
@ -2094,10 +2090,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<i class="glyphicon-search"></i>
|
||||
</pre>
|
||||
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
72
docs/templates/pages/components.mustache
vendored
72
docs/templates/pages/components.mustache
vendored
@ -22,7 +22,7 @@
|
||||
<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="#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="#thumbnails"><i class="glyphicon-chevron-right"></i> Thumbnails</a></li>
|
||||
<li><a href="#alerts"><i class="glyphicon-chevron-right"></i> Alerts</a></li>
|
||||
@ -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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
@ -1443,73 +1443,13 @@
|
||||
|
||||
|
||||
|
||||
<!-- Labels and badges
|
||||
<!-- Badges
|
||||
================================================== -->
|
||||
<section id="labels-badges">
|
||||
<section id="badges">
|
||||
<div class="page-header">
|
||||
<h1>Labels and badges</h1>
|
||||
<h1>Badges</h1>
|
||||
</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><span class="label">Default</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-success">Success</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-success">Success</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-warning">Warning</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-warning">Warning</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-danger">Danger</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-danger">Danger</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-info">Info</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-info">Info</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="label label-inverse">Inverse</span>
|
||||
</td>
|
||||
<td>
|
||||
<code><span class="label label-inverse">Inverse</span></code>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Badges</h3>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -1589,7 +1529,7 @@
|
||||
</table>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
15
docs/templates/pages/css.mustache
vendored
15
docs/templates/pages/css.mustache
vendored
@ -240,7 +240,7 @@
|
||||
</div>
|
||||
<pre class="prettyprint"><em>rendered as italicized text</em></pre>
|
||||
|
||||
<p><span class="label label-info">Heads up!</span> Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></code> is mostly for voice, technical terms, etc.</p>
|
||||
<p>Feel free to use <code><b></code> and <code><i></code> in HTML5. <code><b></code> is meant to highlight words or phrases without conveying additional importance while <code><i></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>
|
||||
@ -507,8 +507,8 @@
|
||||
<dd>...</dd>
|
||||
</dl>
|
||||
</pre>
|
||||
<h5>Auto-truncating</h5>
|
||||
<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.
|
||||
</p>
|
||||
</section>
|
||||
@ -541,7 +541,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
&lt;p&gt;Sample text here...&lt;/p&gt;
|
||||
</pre>
|
||||
</pre>
|
||||
<p><span class="label label-info">Heads up!</span> Be sure to keep code within <code><pre></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>
|
||||
</section>
|
||||
|
||||
@ -1781,7 +1780,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<a href="#" class="btn btn-large disabled">Link</a>
|
||||
</pre>
|
||||
<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.
|
||||
</p>
|
||||
|
||||
@ -1824,7 +1822,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<h1>Images</h1>
|
||||
</div>
|
||||
|
||||
<p>Add classes to an <code><img></code> element to easily style images in any project.</p>
|
||||
<p>Add classes to an <code><img></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">
|
||||
<img data-src="holder.js/140x140" class="img-rounded">
|
||||
<img data-src="holder.js/140x140" class="img-circle">
|
||||
@ -1835,8 +1833,6 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<img src="..." class="img-circle">
|
||||
<img src="..." class="img-polaroid">
|
||||
</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>
|
||||
|
||||
@ -2034,10 +2030,7 @@ For example, <code><section></code> should be wrapped as inlin
|
||||
<i class="glyphicon-search"></i>
|
||||
</pre>
|
||||
<p>Want to change the icon color? Just change the <code>color</code> of the parent element.</p>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
|
||||
<hr class="bs-docs-separator">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user