diff options
| author | Mark Otto <[email protected]> | 2014-07-14 09:14:41 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-07-14 09:14:41 -0700 |
| commit | 35e68dcc3349a06ec280cfee6dce76367bb821f7 (patch) | |
| tree | 2e2ceb9f98f8c7e80d379b5f444ea152b426059d /docs/components/label.md | |
| parent | 2879b936248a79340926d8b7d603d3c53f9f102c (diff) | |
| download | bootstrap-35e68dcc3349a06ec280cfee6dce76367bb821f7.tar.xz bootstrap-35e68dcc3349a06ec280cfee6dce76367bb821f7.zip | |
markdownify label docs
Diffstat (limited to 'docs/components/label.md')
| -rw-r--r-- | docs/components/label.md | 59 |
1 files changed, 28 insertions, 31 deletions
diff --git a/docs/components/label.md b/docs/components/label.md index 05cf2fe81..ae36a8fd4 100644 --- a/docs/components/label.md +++ b/docs/components/label.md @@ -1,40 +1,37 @@ -<div class="bs-docs-section"> - <h1 id="labels" class="page-header">Labels</h1> - - <h3>Example</h3> - <div class="bs-example"> - <h1>Example heading <span class="label label-default">New</span></h1> - <h2>Example heading <span class="label label-default">New</span></h2> - <h3>Example heading <span class="label label-default">New</span></h3> - <h4>Example heading <span class="label label-default">New</span></h4> - <h5>Example heading <span class="label label-default">New</span></h5> - <h6>Example heading <span class="label label-default">New</span></h6> - </div> -{% highlight html %} +--- +layout: page +title: Labels +--- + +Small and adaptive tag for adding context to just about any content. + +### 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> +<h2>Example heading <span class="label label-default">New</span></h2> <h3>Example heading <span class="label label-default">New</span></h3> -{% endhighlight %} - - <h3>Available variations</h3> - <p>Add any of the below mentioned modifier classes to change the appearance of a label.</p> - <div class="bs-example"> - <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> - </div> -{% highlight html %} +<h4>Example heading <span class="label label-default">New</span></h4> +<h5>Example heading <span class="label label-default">New</span></h5> +<h6>Example heading <span class="label label-default">New</span></h6> +{% endexample %} + +### Contextual variations + +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-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 %} +{% endexample %} - <div class="bs-callout bs-callout-info"> - <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> - </div> +<div class="bs-callout bs-callout-info"> + <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> </div> |