mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-15 22:27:09 +03:00
61 lines
2.2 KiB
Markdown
61 lines
2.2 KiB
Markdown
|
---
|
||
|
|
layout: docs
|
||
|
|
title: Tags
|
||
|
|
group: components
|
||
|
|
---
|
||
|
|
|
||
|
|
[//]: # DO NOT EDIT IT WILL BE OVERWRITTEN - copy of bootstrap documentation generated by grunt docs-copy-bootstrap-docs
|
||
|
|
|
||
|
|
{% callout info %}
|
||
|
|
**Bootstrap Reference Documentation**
|
||
|
|
This is a part of the reference documentation from <a href="http://getbootstrap.com">Bootstrap</a>.
|
||
|
|
It is included here to demonstrate rendering with Material Design for Bootstrap default styling.
|
||
|
|
See the <a href="/material-design/buttons">Material Design</a> section for more elements and customization options.
|
||
|
|
{% endcallout %}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
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 %}
|