.btn-info2.btn-purple.btn-pink.btn-light.btn-yellow.btn-grey.btn-mini.btn-minierClick
.no-hover and .no-border for more options:
.icon-on-right when icon is on right:
.icon-only when there is only icon:
.btn-white for white button backgrounds:
.btn-bold for bolder bottom border and
.btn-round for slightly rounder corner:
.btn-app class:
.width-auto if your text is long:
Longggggg textttttttt
.btn-corner so that first and last buttons have round corners.btn-overlap so that there's no space between buttons... ...
Success!
.label-pink.label-purple.label-grey.label-light.label-yellow.label-transparent.label-sm.label-lg.label-xlg
label-lg
.arrowed.arrowed-right.arrowed-in.arrowed-in-right
Promotion!
.badge-info.badge-primary.badge-success.badge-danger.badge-warning.badge-inverse.badge-pink.badge-purple.badge-grey.badge-light.badge-yellow.badge-transparent
4 new
.ace-icon class to all icons
except those that don't need any special styles.
.ace-icon to something else.
.menu-icon class should be added to sidebar icons:
ringingverticalhand-pointerwrenchingblinkingpulsating
.my-pulsating-icon {
/* pulsating duration repetition timing_function delay */
-moz-animation: pulsating 2s 2 linear 1s;
-webkit-animation: pulsating 2s 2 linear 1s;
-o-animation: pulsating 2s 2 linear 1s;
-ms-animation: pulsating 2s 2 linear 1s;
animation: pulsating 2s 2 linear 1s;
}
.icon-animated-bell.icon-animated-vertical.icon-animated-hand-pointer.icon-animated-wrench<link rel="stylesheet" href="path/to/assets/css/font-awesome.css" />Font files should be in the right directory:
path/to/assets/fonts
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
path/to/assets/fonts
.col-xs-10.col-sm-5
or .form-control
.no-padding-right or .no-padding-left classes to label element.
option elements in select dropdowns
add .no-option class for example when option element has no value or text:
.input-icon or .input-icon.input-icon-right
element:
.input-mini.input-small.input-medium.input-large.input-xlarge.input-xxlarge.has-warning.has-error.has-success.has-infoWarning tip help!
home tab contentprofile tab content
.tabs-below to .tabbable:
.tabs-left and .tabs-right to .tabbable element,
for tabs to appear on right or left
.tab-color-blue and .background-blue classes to
.nav-tabs element for blue tabs:
.tab-size-bigger to .nav-tabs for larger tab buttons
.tab-space-1
.tab-space-2
.tab-space-3
.tab-space-4
to .nav-tabs for more space between tab buttons
.padding-2
.padding-4
...
.padding-32
to .nav-tabs for less/more padding for tab buttons
.padding-2
.padding-4
...
.padding-32
to .tab-content for less/more padding for tab content
and tab content is:
$('#myTab a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//if( $(e.target).attr('href') == "#home" ) drawChartNow();
//if($(e.target).is('#my-chart-tab')) drawChartNow();
})
.accordion-style1 & .accordion-style2 classes:
Panel Body
.accordion-toggle or data-toggle="panel" element, you can add an icon
with data-icon-show and data-icon-hide attributes,
and the icons will be swapped on panel(accordion) toggle:
$('#accordion').on('shown.bs.collapse', function (e) {
//if($(e.target).is('#collapseTwo')) drawChartNow();
});
.tooltip-error.tooltip-warning.tooltip-success.tooltip-infocontainer option of tooltip, you should add the color class to the element:
Show Tooltipand then:
$('.my-tooltip-link').tooltip();
container option of tooltip, you should change the template option:
$('.my-tooltip-link').tooltip({
'container': 'body',
'template': '<div class="tooltip tooltip-error"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'
});
container:'body' options, so that the element's layout is not affected:
$('.my-tooltip-link').tooltip({
'container': 'body'
});
container:'body' option of the tooltip.
z-index
value of "tooltips" is defined less than that of "modals".
//find "pie chart tooltip example" in mustache/app/views/assets/scripts/index.js
var tooltip = $("<div class='tooltip top in'><div class='tooltip-inner'></div></div>").hide().appendTo('body');
//and when necessary
tooltip.show().children(0).text(tip);//dynamically change its text
tooltip.css({top: y, left: x});
tooltip.hide();
or slider:
//find "range slider tooltip example" in mustache/app/views/assets/scripts/form-elements.js
if(! ui.handle.firstChild ) {
$(ui.handle).
append("tooltip right in' style='display:none; left:16px; top:-6px;'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>")
}
$(ui.handle.firstChild).show().children().eq(1).text(val);//update (.tooltip-inner)'s text and show it
//placement parameter can be a function
$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
function tooltip_placement(context, source) {
var $source = $(source);
var $parent = $source.closest('div.container_selector')//or maybe 'body' > $parent = $('body')
//get containers offset and width
var off1 = $parent.offset();
var w1 = $parent.width();
//get elements offset
var off2 = $source.offset();
//this is approximate and optional, you can change it
if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
return 'left';
}
.popover-error.popover-warning.popover-success.popover-info.dropdown-default.dropdown-info.dropdown-primary.dropdown-success.dropdown-warning.dropdown-danger.dropdown-inverse.dropdown-purple.dropdown-pink.dropdown-grey.dropdown-light.dropdown-lighter.dropdown-lightest.dropdown-yellow.dropdown-yellow2.dropdown-light-bluedata-position="auto" attribute for a "dropdown" to become a dropup
when appropriate:
overflow:hidden or overflow:scroll
//change a dropdown to "dropup" depending on its position
$('.dropdown-hover').on('mouseenter', function() {
var offset = $(this).offset();
var $w = $(window)
if (offset.top > $w.scrollTop() + $w.innerHeight() - 100)
$(this).addClass('dropup');
else $(this).removeClass('dropup');
});
.dropdown-caret to add a caret.
.dropdown-close & .dropdown-closer
for dropdown elements appear closer to invoker element:
Note the
.inline & .pos-rel wrapper element may come in handy when using
dropdowns inside content areas.
.dropdown-only-icon for an icon or image only dropdown:
.dropdown-hover on parent container
and remove data-toggle="dropdown" attribute.
.dropdown-50 .dropdown-75 .dropdown-100 .dropdown-125 .dropdown-150
for smaller dropdown width:
.dropdown-hover class to parent li:
.progress-bar-pink.progress-bar-purple.progress-bar-yellow.progress-bar-inverse.progress-bar-grey.progress-small.progress-mini