diff options
| author | Mark Otto <[email protected]> | 2017-05-28 22:50:57 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-29 23:32:28 -0700 |
| commit | 3e76d6565603fafa2c85ad81d7b6345c4e279c72 (patch) | |
| tree | fad0aa6a4a70cafb4a803bd920d6ae2fa44dc466 /docs/components/badge.md | |
| parent | 32153eb7cba316b873e82cd7b9362c92ca00eddf (diff) | |
| download | bootstrap-3e76d6565603fafa2c85ad81d7b6345c4e279c72.tar.xz bootstrap-3e76d6565603fafa2c85ad81d7b6345c4e279c72.zip | |
Rearrange all the docs to allow for a docs/major.minor/ setup
Diffstat (limited to 'docs/components/badge.md')
| -rw-r--r-- | docs/components/badge.md | 71 |
1 files changed, 0 insertions, 71 deletions
diff --git a/docs/components/badge.md b/docs/components/badge.md deleted file mode 100644 index 764e5a1cb..000000000 --- a/docs/components/badge.md +++ /dev/null @@ -1,71 +0,0 @@ ---- -layout: docs -title: Badges -description: Documentation and examples for badges, our small count and labeling component. -group: components -toc: true ---- - -## Example - -Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. - -<div class="bd-example"> -<div class="h1">Example heading <span class="badge badge-default">New</span></div> -<div class="h2">Example heading <span class="badge badge-default">New</span></div> -<div class="h3">Example heading <span class="badge badge-default">New</span></div> -<div class="h4">Example heading <span class="badge badge-default">New</span></div> -<div class="h5">Example heading <span class="badge badge-default">New</span></div> -<div class="h6">Example heading <span class="badge badge-default">New</span></div> -</div> - -{% highlight html %} -<h1>Example heading <span class="badge badge-default">New</span></h1> -<h2>Example heading <span class="badge badge-default">New</span></h2> -<h3>Example heading <span class="badge badge-default">New</span></h3> -<h4>Example heading <span class="badge badge-default">New</span></h4> -<h5>Example heading <span class="badge badge-default">New</span></h5> -<h6>Example heading <span class="badge badge-default">New</span></h6> -{% endhighlight %} - -## Contextual variations - -Add any of the below mentioned modifier classes to change the appearance of a badge. - -{% example html %} -<span class="badge badge-default">Default</span> -<span class="badge badge-primary">Primary</span> -<span class="badge badge-success">Success</span> -<span class="badge badge-info">Info</span> -<span class="badge badge-warning">Warning</span> -<span class="badge badge-danger">Danger</span> -{% endexample %} - -{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} -{{ callout-include | markdownify }} - -## Pill badges - -Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3. - -{% example html %} -<span class="badge badge-pill badge-default">Default</span> -<span class="badge badge-pill badge-primary">Primary</span> -<span class="badge badge-pill badge-success">Success</span> -<span class="badge badge-pill badge-info">Info</span> -<span class="badge badge-pill badge-warning">Warning</span> -<span class="badge badge-pill badge-danger">Danger</span> -{% endexample %} - -## Links - -Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover and focus states. - -{% example html %} -<a href="#" class="badge badge-default">Default</a> -<a href="#" class="badge badge-primary">Primary</a> -<a href="#" class="badge badge-success">Success</a> -<a href="#" class="badge badge-info">Info</a> -<a href="#" class="badge badge-warning">Warning</a> -<a href="#" class="badge badge-danger">Danger</a> -{% endexample %} |
