| Button | Shortcode | Description |
|---|---|---|
[mybtn url="#"]Text[/mybtn] |
Button with YUOR colors | |
[btn url="#"]Text[/btn] |
Standard gray button with gradient | |
[btn url="#" style="btn-primary"]Text[/btn] |
Provides extra visual weight and identifies the primary action in a set of buttons | |
[btn url="#" style="btn-info"]Text[/btn] |
Used as an alternate to the default styles | |
[btn url="#" style="btn-success"]Text[/btn] |
Indicates a successful or positive action | |
[btn url="#" style="btn-warning"]Text[/btn] |
Indicates caution should be taken with this action | |
[btn url="#" style="btn-danger"]Text[/btn] |
Indicates a dangerous or potentially negative action | |
[btn url="#" style="btn-inverse"]Text[/btn] |
Alternate dark gray button, not tied to a semantic action or use | |
[btn url="#" style="btn-inverse"][icon image="icon-ok" style="icon-white"][/btn] |
Button with incons |
| Button | Shortcode |
|---|---|
[btn size="large" url="#"]Large[/btn] |
|
[btn url="#"]Text[/btn] |
|
[btn size="small" url="#"]Small[/btn] |
|
[btn size="mini" url="#"]Mini[/btn] |
| Separator | Shortcode |
|---|---|
|
|
[hr] |
|
|
[hr style="dash"] |
Instead of making every icon an extra request, we’ve compiled them into a sprite—a bunch of images in one file that uses CSS to position the images with background-position. This is the same method we use on Twitter.com and it has worked well for us.
All icons classes are prefixed with .icon- for proper namespacing and scoping, much like our other components. This will help avoid conflicts with other tools.
Glyphicons has granted us use of the Halflings set in our open-source toolkit so long as we provide a link and credit here in the docs. Please consider doing the same in your projects.
Bootstrap uses an [i] tag for all icons, but they have no case class—only a shared prefix. To use, place the following code just about anywhere:
[i image="icon-search"][/i]
There are also styles available for inverted (white) icons, made ready with one extra class:
[i iamge="icon-search" style="icon-white"][/i]
There are 120 classes to choose from for your icons. Just add an [i] tag with the right classes and you’re set. You can find the full list in sprites.less or right here in this document.
Heads up!
When using beside strings of text, as in buttons or nav links, be sure to leave a space after the [i] tag for proper spacing.
Icons are great, but where would one use them? Here are a few ideas:
Essentially, anywhere you can put an [i] tag, you can put an icon.
| Labels | Markup |
|---|---|
| Default |
[label]Default[/label]
|
| Success |
[label style="label-success"]Success[/label]
|
| Warning |
[label style="label-warning"]Warning[/label]
|
| Important |
[label style="label-important"]Important[/label]
|
| Info |
[label style="label-info"]Info[/label]
|
| Inverse |
[label style="label-inverse"]Inverse[/label]
|
Badges are small, simple components for displaying an indicator or count of some sort. They’re commonly found in email clients like Mail.app or on mobile apps for push notifications.
| Name | Example | Markup |
|---|---|---|
| Default | 1 |
[badge]1[/badge]
|
| Success | 2 |
[badge style="badge-success"]2[/badge]
|
| Warning | 4 |
[badge style="badge-warning"]4[/badge]
|
| Error | 6 |
[badge style="badge-error"]6[/badge]
|
| Info | 8 |
[badge style="badge-info"]8[/badge]
|
| Inverse | 10 |
[badge style="badge-inverse"]10[/badge]
|
[alert style="alert-error"] ... [/alert]
[alert style="alert-success"] ... [/alert]
[alert style="alert-info"] ... [/alert]
[progress_bar width="20%"] [/progress_bar]
[progress_bar style="progress-success" width="20%"] [/progress_bar]
[progress_bar style="progress-warning" width="20%"] [/progress_bar]
[progress_bar style="progress-danger" width="20%"] [/progress_bar]
Use the well as a simple effect on an element to give it an inset effect.
[well] ... [/well]
| Dropcaps | Markup |
|---|---|
| V alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. |
[dropcap1]L[/dropcap1]orem ipsum… ]
|
| V alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. |
[dropcap2]L[/dropcap2]orem ipsum… ]
|
| V alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. |
[dropcap3]L[/dropcap3]orem ipsum… ]
|
| V alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. |
[dropcap4]L[/dropcap4]orem ipsum… ]
|
| V alera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. |
[dropcap5]L[/dropcap5]orem ipsum… ]
|
| Blockquote | Markup |
|---|---|
|
[blockquote1]Some text[/blockquote1]
|
|
Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. |
[blockquote1]Some text[/blockquote1]
|
|
Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. |
[blockquote2]Some text[/blockquote2]
|
|
Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. |
[blockquote3]Some text[/blockquote3]
|
|
Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. |
[blockquote4]Some text[/blockquote4]
|
|
Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. |
[blockquote5]Some text[/blockquote5]
|
|
Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. |
[blockquote6]Some text[/blockquote6]
|
|
Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. |
[blockquote7]Some text[/blockquote7]
|
|
Valera is designed to help people of all skill levels designer or developer, huge nerd or early beginner. Use it as a complete kit or use to start something more complex. |
[blockquote8]Some text[/blockquote8]
|
| Image | Shortcode |
|---|---|
|
[style_image image="..." alt="" size="one_fourth"]
|
|
|
[style_image image="..." alt="" size="one_third"]
|
|
|
[style_image image="..." alt="" size="one_half"]
|
|
|
[style_image image="..." alt="" size="two_third"]
|
[4col_portfolio show_posts=4][3col_portfolio show_posts=3][2col_portfolio show_posts=2]
[well] [tslider] <li> [blockquote author="Jhon Doe"]Some text[/blockquote] </li> <li> [blockquote author="Jhon Doe"]Some text[/blockquote] </li> [/tslider] [/well]
Video Rating: 5 / 5
Renato da empresa R&R INFORMÁTICA recebe várias notícias ruins. Video Rating: 0 / 5
En soitu.es creemos en tu talento, por eso te invitamos a que escribas tus propias noticias. Y, además, si las publicamos en nuestras secciones especializada... Video Rating: 1 / 5
[blog show_posts=3]
Siguenos en Twitter!!!, @ZamoraRepara