<ul class="tabs"> <li class="active"><a href="#tab1">Dog 1</a></li> <li><a href="#tab2">Dog 2</a></li> <li><a href="#tab3">Dog 3</a></li> </ul> <div class="tabs-content"> <div id="tab1"> <img src="img/1.jpg"/> </div> <div id="tab2"> <img src="img/2.jpg"/> </div> <div id="tab3"> <img src="img/3.jpg"/> </div> </div>
ul
with the class .breadcrumb
.
<ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Animals</a></li> <li><a href="#">Dogs</a></li> <li><a href="#">Mops</a></li> </ul> or <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Animals</a></li> <li><a href="#">Dogs</a></li> <li class="active">Mops</li> </ul>
ul
inside a div having the class .pagination
.
<div class="pagination"> <ul> <li class="disabled">«</li> <li class="active">1</li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </div>
.info
, .warning
and .error
on them.
data-dropdown
with the reference to your dropdown list..dropdown
.Parameter | Information | Default value |
---|---|---|
columns | Number of columns. You can define it by setting "data-columns". | 1 (3 for select elements) |
scroll | Allow scrolling on the items. If false, the dropdown will show all the items. You can define it by setting "data-scroll". | false (true for select elements) |
width | Width of the dropdown. You can define it by setting "data-width" (px|'auto'|'parent'). | auto (parent for select elements) |
<a href="#" data-dropdown="#dropdown1">Simple dropdown</a> <ul class="dropdown" id="dropdown1"> <li><a href="http://www.google.fr" rel="nofollow">Google</a></li> <li><a href="http://www.facebook.com" rel="nofollow">Facebook</a></li> <li><a href="http://twitter.com" rel="nofollow">Twitter</a></li> <li><a href="#" class="remove_btn" onclick="alert('deleted');">Delete</a></li> </ul>
<a href="#" data-dropdown="#dropdown2" data-columns="2">2 columns dropdown</a> <ul class="dropdown" id="dropdown2"> <li><a href="http://www.google.fr" rel="nofollow">Google</a></li> <li><a href="http://www.facebook.com" rel="nofollow">Facebook</a></li> <li><a href="http://twitter.com" rel="nofollow">Twitter</a></li> <li><a href="#" class="remove_btn" onclick="alert('deleted');">Delete</a></li> </ul>
<select name="birthdate_month" class="dropdown"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select>
div.carousel
containing one <ul>
and a set of li
.li
with a div.carousel-caption
.Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="carousel" data-mode="slide" data-indicators="false" data-delay="3000" data-stoponhover="false"> <ul> <li> <img src="img/slider1.jpg"/> <div class="carousel-caption"> <h4>First caption</h4> <p>Cras justo odio...</p> </div> </li> ... </ul> </div>
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="carousel" data-mode="fade" data-arrows="false" data-auto="false"> <ul> <li> <img src="img/slider1.jpg"/> <div class="carousel-caption"> <h4>First caption</h4> <p>Cras justo odio...</p> </div> </li> ... </ul> </div>
Parameter | Information | Default value |
---|---|---|
mode | Transition mode (slide or fade) | slide |
arrows | Display arrows | true |
indicators | Display indicators | false |
auto | Automatically change slides | true |
delay | Delay between automatic slide changes (in ms) | 5000 |
stoponhover | Stop auto transition if mouse is hover the carousel | true |
<a class="btn" href="#" data-modal="#modal_target1">Simple modal</a> <div class="modal span5" id="modal_target1"> <div class="modal-title"><h5>My modal title</h5> <div class="close">×</div></div> <div class="modal-content">Test hello</div> <div class="modal-footer"><input type="button" class="btn" value="Cancel" onclick="javascript:$('#modal_target1').trigger('close');"/> <input type="button" class="btn blue" value="Submit" onclick="javascript:$('#modal_target1').trigger('close');"/></div> </div>
<a class="btn" href="ajax.html" data-modal="ajax" data-title="Ajax Modal">Ajax modal</a>
.hint
to your element, and add an attribute data-hint
with the content of the hint. You can customize your hint with data-hint-position
, data-hint-presistent
and data-hint-class
.
Hint | Code |
---|---|
My link |
<a href="#" data-hint="My normal hint">My link</a> |
My link |
<a href="#" data-hint-position="bottom" data-hint-permanent="true" data-hint-class="info" data-hint="My bottom info permanent hint">My link</a> |
My link |
<a href="#" data-hint-position="left" data-hint-class="error" data-hint="My error left hint">My link</a> |
My link |
<a href="#" data-hint-position="right" data-hint-permanent="true" data-hint="My right permanent hint">My link</a> |
My link |
<a href="#" class="btn" data-hint-position="top" data-hint-class="success" data-hint="My success hint">My link</a> |
<div class="to-top"></div>
to your code.
swipeUp
, swipeDown
, swipeLeft
and/or swipeRight
.
<div id="swipe_demo" style="width:150px;height:150px;background:#ddd;border:1px solid #aaa;">Swipe me </div> <script type="text/javascript"> $(document).ready(function(){ $('#swipe_demo').miniSwipe({ swipeUp: function(){ $(this).text($(this).text()+'UP ') }, swipeDown: function(){ $(this).text($(this).text()+'DOWN ') }, swipeLeft: function(){ $(this).text($(this).text()+'LEFT ') }, swipeRight: function(){ $(this).text($(this).text()+'RIGHT ') } }); }); </script>
Parameter | Information | Default value |
---|---|---|
type | Type of the input (date|time|datetime) | date |
language | The display language for the date/time | automatic |
Date: <input type="text" class="date-picker"/>
Time in french: <input type="text" class="date-picker" data-type="time" data-language="fr"/>
Date and time in russian: <input type="text" class="date-picker" data-type="datetime" data-language="ru"/>