rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-29 21:52:22 +01:00
Code Issues Actions Packages Releases Activity

markdownify label docs

Browse Source
This commit is contained in:
Mark Otto 2014-07-14 09:14:41 -07:00
parent 2879b93624
commit 35e68dcc33
1 changed files with 26 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
docs/components/label.md
View File

@ -1,40 +1,37 @@
<div class="bs-docs-section"> ---
<h1 id="labels" class="page-header">Labels</h1> layout: page
title: Labels
---
<h3>Example</h3> Small and adaptive tag for adding context to just about any content.
<div class="bs-example">
### Example
Labels scale to match the size of the immediate parent element by using relative font sizing and `em` units.
{% example html %}
<h1>Example heading <span class="label label-default">New</span></h1> <h1>Example heading <span class="label label-default">New</span></h1>
<h2>Example heading <span class="label label-default">New</span></h2> <h2>Example heading <span class="label label-default">New</span></h2>
<h3>Example heading <span class="label label-default">New</span></h3> <h3>Example heading <span class="label label-default">New</span></h3>
<h4>Example heading <span class="label label-default">New</span></h4> <h4>Example heading <span class="label label-default">New</span></h4>
<h5>Example heading <span class="label label-default">New</span></h5> <h5>Example heading <span class="label label-default">New</span></h5>
<h6>Example heading <span class="label label-default">New</span></h6> <h6>Example heading <span class="label label-default">New</span></h6>
</div> {% endexample %}
{% highlight html %}
<h3>Example heading <span class="label label-default">New</span></h3>
{% endhighlight %}
<h3>Available variations</h3> ### Contextual variations
<p>Add any of the below mentioned modifier classes to change the appearance of a label.</p>
<div class="bs-example"> Add any of the below mentioned modifier classes to change the appearance of a label.
{% example html %}
<span class="label label-default">Default</span> <span class="label label-default">Default</span>
<span class="label label-primary">Primary</span> <span class="label label-primary">Primary</span>
<span class="label label-success">Success</span> <span class="label label-success">Success</span>
<span class="label label-info">Info</span> <span class="label label-info">Info</span>
<span class="label label-warning">Warning</span> <span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span> <span class="label label-danger">Danger</span>
</div> {% endexample %}
{% highlight html %}
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
{% endhighlight %}
<div class="bs-callout bs-callout-info"> <div class="bs-callout bs-callout-info">
<h4>Have tons of labels?</h4> <h4>Have tons of labels?</h4>
<p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <a href="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p> <p>Rendering problems can arise when you have dozens of inline labels within a narrow container, each containing its own <code>inline-block</code> element (like an icon). The way around this is setting <code>display: inline-block;</code>. For context and an example, <a href="https://github.com/twbs/bootstrap/issues/13219">see #13219</a>.</p>
</div> </div>
</div>