mirror of
https://github.com/tabler/tabler.git
synced 2026-07-29 14:34:37 +04:00
badges docs fulfilled
This commit is contained in:
@@ -16,6 +16,8 @@ A small count and labeling component. Please read the [official Bootstrap docume
|
||||
|
||||
### Pill badges
|
||||
|
||||
To make a pill bagde (with rounded corners) add `.bagde-pill` class.
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<span class="badge badge-pill bg-{{ color[0] }}">{{ forloop.index }}</span>
|
||||
@@ -25,6 +27,8 @@ A small count and labeling component. Please read the [official Bootstrap docume
|
||||
|
||||
### Soft badges
|
||||
|
||||
Creates a soft variant of a corresponding contextual badge variation. You can click [here]({% docs_url colors %}) to see the list of available colors.
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<span class="badge bg-{{ color[0] }}-lt">{{ color[0] }}</span>
|
||||
@@ -34,6 +38,8 @@ A small count and labeling component. Please read the [official Bootstrap docume
|
||||
|
||||
### Links
|
||||
|
||||
Make a badge work as a link by putting it into an `<a>` element.
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<a href="#" class="badge bg-{{ color[0] }}">{{ color[0] }}</a>
|
||||
@@ -43,6 +49,8 @@ A small count and labeling component. Please read the [official Bootstrap docume
|
||||
|
||||
### Empty badges
|
||||
|
||||
If you don't want your badge to contain any text you can do it by leaving the html element empty.
|
||||
|
||||
{% example %}
|
||||
{% for color in site.colors %}
|
||||
<a href="#" class="badge bg-{{ color[0] }}"></a>
|
||||
|
||||
Reference in New Issue
Block a user