Interface elements
Labels and badges
| Labels | Markup |
|---|---|
| Default | <span class="label"> |
| Success | <span class="label label-success"> |
| Warning | <span class="label label-warning"> |
| Important | <span class="label label-important"> |
| Info | <span class="label label-info"> |
| Inverse | <span class="label label-inverse"> |
| Name | Example | Markup |
|---|---|---|
| Default | 1 | <span class="badge"> |
| Success | 2 | <span class="badge badge-success"> |
| Warning | 4 | <span class="badge badge-warning"> |
| Important | 6 | <span class="badge badge-important"> |
| Info | 8 | <span class="badge badge-info"> |
| Inverse | 10 | <span class="badge badge-inverse"> |
Different notifications
- Standard notification
- Sticky notification
- Notification with image
Icon With box
- icon-book
- icon-cabinet
- icon-calendar
- icon-client
- icon-database
- icon-download
- icon-graph
- icon-home
- icon-lock
- icon-mail
- icon-Dashboard
- icon-facetime-video
- icon-external-link
- icon-folder-open
<ul class="quick-actions">
<li a href="https://uX.yaonuan.cn/"> <i class="icon-book"></i> icon-book </a> </li>
</ul>
Different Bars
- <div class="progress">
- <div class="bar" style="width: difine%;"></div>
- </div>
- <div class="progress progress-striped">
- <div class="bar" style="width: 60%;"></div>
- </div>
- <div class="progress progress-striped active">
- <div class="bar" style="width: 60%;"></div>
- </div>
- <div class="progress">
- <div class="bar bar-success" style="width: 35%;"></div>
- <div class="bar bar-warning" style="width: 20%;"></div>
- <div class="bar bar-danger" style="width: 10%;"></div>
- </div>
Pop-up dialogs
View Popup Alert image Popup
Pop up Header
Here is the text coming you can put also image if you want…
Tooltip directions
Four directions of the tooltips, just add a class: 'tip-top', 'tip-bottom', 'tip-left' or 'tip-right' without quotes to the element you want to have tooltip.
Pagination
Typography
h1. Heading 1
h2. Heading 2
h3. Heading 3
h4. Heading 4
h5. Heading 5
h6. Heading 6
Popover Option
Notifications
×
Warning!
You're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. ×
Success!
Tou're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. ×
Info!
Tou're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. ×
Error!
You're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Warning! Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Success! Libero, a pharetra augue. Praesent commodo
Info! you're not looking too good.
Error! Nulla vitae elit libero, a pharetra augue. Praesent commodo