diff options
Diffstat (limited to 'docs/components')
| -rw-r--r-- | docs/components/label.md | 46 | ||||
| -rw-r--r-- | docs/components/list-group.md | 10 | ||||
| -rw-r--r-- | docs/components/tag.md | 46 |
3 files changed, 51 insertions, 51 deletions
diff --git a/docs/components/label.md b/docs/components/label.md deleted file mode 100644 index e1495201c..000000000 --- a/docs/components/label.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -layout: docs -title: Labels -group: components ---- - -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> -<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> -{% endexample %} - -## Pill labels - -Use the `.label-pill` modifier class to make labels more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3. - -{% example html %} -<span class="label label-pill label-default">Default</span> -<span class="label label-pill label-primary">Primary</span> -<span class="label label-pill label-success">Success</span> -<span class="label label-pill label-info">Info</span> -<span class="label label-pill label-warning">Warning</span> -<span class="label label-pill label-danger">Danger</span> -{% endexample %} diff --git a/docs/components/list-group.md b/docs/components/list-group.md index c3d466d5f..db339c824 100644 --- a/docs/components/list-group.md +++ b/docs/components/list-group.md @@ -24,22 +24,22 @@ The most basic list group is simply an unordered list with list items, and the p </ul> {% endexample %} -## Labels +## Tags -Add labels to any list group item to show unread counts, activity, etc. +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="label label-default label-pill pull-xs-right">14</span> + <span class="tag tag-default tag-pill pull-xs-right">14</span> Cras justo odio </li> <li class="list-group-item"> - <span class="label label-default label-pill pull-xs-right">2</span> + <span class="tag tag-default tag-pill pull-xs-right">2</span> Dapibus ac facilisis in </li> <li class="list-group-item"> - <span class="label label-default label-pill pull-xs-right">1</span> + <span class="tag tag-default tag-pill pull-xs-right">1</span> Morbi leo risus </li> </ul> diff --git a/docs/components/tag.md b/docs/components/tag.md new file mode 100644 index 000000000..185ea378d --- /dev/null +++ b/docs/components/tag.md @@ -0,0 +1,46 @@ +--- +layout: docs +title: Tags +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 %} + +## 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 %} |
