diff options
| author | Mark Otto <[email protected]> | 2016-02-16 20:28:51 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-02-16 20:28:51 -0800 |
| commit | d6207d852adddbd67b5002d0a89d115e5669e528 (patch) | |
| tree | 84172dbb886d852a1cd1236b1faa0debb6eab91f /docs | |
| parent | a2fe2aacedd5b7143018a65794ee01b446f60eb3 (diff) | |
| parent | 8cd27781486e3133241e032e194f5a7c3d60043d (diff) | |
| download | bootstrap-d6207d852adddbd67b5002d0a89d115e5669e528.tar.xz bootstrap-d6207d852adddbd67b5002d0a89d115e5669e528.zip | |
Merge branch 'fix-19094' of https://github.com/ameya-pandilwar/bootstrap into ameya-pandilwar-fix-19094
Diffstat (limited to 'docs')
| -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 | ||||
| -rw-r--r-- | docs/migration.md | 2 |
4 files changed, 52 insertions, 52 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 %} diff --git a/docs/migration.md b/docs/migration.md index 814e1d9be..c11a871df 100644 --- a/docs/migration.md +++ b/docs/migration.md @@ -128,7 +128,7 @@ New to Bootstrap 4 is the Reboot, a new stylesheet that builds on Normalize with ### Badges -- Dropped the badge component. Use the `.label-pill` modifier together with the label component instead. +- Dropped the badge component. Use the `.tag-pill` modifier together with the tag component instead. ### Panels, thumbnails, and wells |
