mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-09-25 21:09:06 +02:00
Code Issues Releases Wiki Activity

Rename .tag to .badge to avoid conflicting with WordPress

Browse Source
This commit is contained in:
Mark Otto
2016-10-26 18:33:58 -07:00
parent d9d75f4d54
commit d9fa3fd797
9 changed files with 95 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
docs/components/badge.md Normal file
View File

@@ -0,0 +1,50 @@
---
layout: docs
title: Badges
description: Documentation and examples for badges, our small count and labelling component.
group: components
---
Small and adaptive tag for adding context to just about any content.
## Example
Badges 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="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>
{% endexample %}
## 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 tag-default">Default</span>
<span class="badge badge-pill tag-primary">Primary</span>
<span class="badge badge-pill tag-success">Success</span>
<span class="badge badge-pill tag-info">Info</span>
<span class="badge badge-pill tag-warning">Warning</span>
<span class="badge badge-pill tag-danger">Danger</span>
{% endexample %}

6
docs/components/list-group.md
View File

@@ -32,15 +32,15 @@ Add tags to any list group item to show unread counts, activity, etc.
{% example html %}
<ul class="list-group">
<li class="list-group-item">
<span class="tag tag-default tag-pill float-xs-right">14</span>
<span class="badge badge-default tag-pill float-xs-right">14</span>
Cras justo odio
</li>
<li class="list-group-item">
<span class="tag tag-default tag-pill float-xs-right">2</span>
<span class="badge badge-default tag-pill float-xs-right">2</span>
Dapibus ac facilisis in
</li>
<li class="list-group-item">
<span class="tag tag-default tag-pill float-xs-right">1</span>
<span class="badge badge-default tag-pill float-xs-right">1</span>
Morbi leo risus
</li>
</ul>

50
docs/components/tag.md
View File

@@ -1,50 +0,0 @@
---
layout: docs
title: Tags
description: Documentation and examples for tags, our small label-badge component.
group: components
---
Small and adaptive tag for adding context to just about any content.
## Example
Tags 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="tag tag-default">New</span></h1>
<h2>Example heading <span class="tag tag-default">New</span></h2>
<h3>Example heading <span class="tag tag-default">New</span></h3>
<h4>Example heading <span class="tag tag-default">New</span></h4>
<h5>Example heading <span class="tag tag-default">New</span></h5>
<h6>Example heading <span class="tag tag-default">New</span></h6>
{% endexample %}
## Contextual variations
Add any of the below mentioned modifier classes to change the appearance of a tag.
{% example html %}
<span class="tag tag-default">Default</span>
<span class="tag tag-primary">Primary</span>
<span class="tag tag-success">Success</span>
<span class="tag tag-info">Info</span>
<span class="tag tag-warning">Warning</span>
<span class="tag tag-danger">Danger</span>
{% endexample %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
{{ callout-include | markdownify }}
## Pill tags
Use the `.tag-pill` modifier class to make tags more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
{% example html %}
<span class="tag tag-pill tag-default">Default</span>
<span class="tag tag-pill tag-primary">Primary</span>
<span class="tag tag-pill tag-success">Success</span>
<span class="tag tag-pill tag-info">Info</span>
<span class="tag tag-pill tag-warning">Warning</span>
<span class="tag tag-pill tag-danger">Danger</span>
{% endexample %}