From 35e68dcc3349a06ec280cfee6dce76367bb821f7 Mon Sep 17 00:00:00 2001
From: Mark Otto <otto@github.com>
Date: Mon, 14 Jul 2014 09:14:41 -0700
Subject: [PATCH] markdownify label docs
---
docs/components/label.md | 59 +++++++++++++++++++---------------------
1 file changed, 28 insertions(+), 31 deletions(-)
diff --git a/docs/components/label.md b/docs/components/label.md
index 05cf2fe81d..ae36a8fd45 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>
--
GitLab