Components
A collection of useful components.
Navbar
Based on the Bootstrap filosophy navbars are static and not fixed on the top
Navbar with search form
Heads up!When adding a search form to the navbar, just have in mind that is has to be inside the element with the id #menu.
Psst over here!If you want a growing effect for the search input on the navbar, just add data-furatto="search" and let the magic begins.
Optional Navbar variations
Fix the navbar to the top or to the bottom, or perhaps add transparency
Fixed Top
Fixed Bottom
Transparency
Pagination
Simple and sleek pagination. Great for apps and search results.
Alignment
Add one of two optional classes to align the pagination.
Center 'pagination-centered'
...
Right 'pagination-right'
...
Labels and badges
Labels
| Label | Markup |
|---|---|
| Default | <span class="label">Default</span> |
| Primary | <span class="label label-primary">Primary</span> |
| Success | <span class="label label-success">Success</span> |
| Danger | <span class="label label-danger">Danger</span> |
| Warning | <span class="label label-warning">Warning</span> |
| Inverse | <span class="label label-inverse">Inverse</span> |
| Info | <span class="label label-info">Info</span> |
| Funky | <span class="label label-funky">Funky</span> |
Badges
| badge | Markup |
|---|---|
| 1 | <span class="badge">1</span> |
| 2 | <span class="badge badge-primary">2</span> |
| 3 | <span class="badge badge-success">3</span> |
| 4 | <span class="badge badge-danger">4</span> |
| 5 | <span class="badge badge-warning">5</span> |
| 6 | <span class="badge badge-inverse">6</span> |
| 7 | <span class="badge badge-info">7</span> |
| 8 | <span class="badge badge-funky">8</span> |
Alerts
Alert any message in 4 different ways.
Hola mundo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hola mundo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hola mundo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hola mundo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hola mundo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hola mundo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hola mundo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Hola mundo!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tooltips
Based on the tooltips from Bootstrap. Hover over the links below to see tooltips.
Tooltips can be place in four different positions: Top, Bottom, Right, Left.
Tags
Furatto integrates the tags jquery input plugin from XOXCO. Just add the data attribute tags.
<input name="tagsinput" id="tagsinput" class="tagsinput" value="Clean,Fresh,Modern,Unique" data-tags />
Helper classes
Simple and functional classes on behavior tweaks.
.pull-left
Float an element to the left.
class="pull-left"
.pull-right
Float an element to the right.
class="pull-right"
.clearfix
Clear the float on any element.
class="clearfix"
Left Navbar
Furatto offers an alternative for navbar, which sticks to the left.
Heads up! The left navbar does not play well with the top navbar, so don't put them together. You may experience bad behavior on phones or tablets when toggling, but don't worry it will work fine alone.
Toggle navbar!