10186 lines
391 KiB
HTML
10186 lines
391 KiB
HTML
<!DOCTYPE html>
|
||
<!--
|
||
|
||
TABLE OF CONTENTS.
|
||
|
||
Use search to find needed section.
|
||
|
||
=========================================================================================================
|
||
|
||
| 1. $BODY | Body |
|
||
| 2. $MAIN_NAVIGATION | Main navigation |
|
||
| 3. $NAVBAR_ICON_BUTTONS | Navbar Icon Buttons |
|
||
| 4. $MAIN_MENU | Main menu |
|
||
| 5. $LABELS_TAGS_BADGES | Labels, tags and badges |
|
||
| 5.1. $LABELS | Labels |
|
||
| 5.2. $TAGS | Tags |
|
||
| 5.3. $BADGES | Badges |
|
||
| 6. $BREADCRUMB | Breadcrumb |
|
||
| 6.1. $DEFAULT_BREADCRUMB | Default breadcrumb |
|
||
| 6.2. $DARK_BACKGROUND_BREADCRUMB | Dark background breadcrumb |
|
||
| 6.3. $PAGE_BREADCRUMB | Page breadcrumb |
|
||
| 7. $ALERTS | Alerts |
|
||
| 7.1. $DEFAULT_ALERTS | Default alerts |
|
||
| 7.2. $DARK_ALERTS | Dark alerts |
|
||
| 7.3. $PAGE_ALERTS | Page alerts |
|
||
| 7.4. $PAGE_DARK_ALERTS | Page dark alerts |
|
||
| 8. $BUTTONS | Buttons |
|
||
| 8.1. $DEFAULT_BUTTONS | Default buttons |
|
||
| 8.2. $LARGE_BUTTONS | Large buttons |
|
||
| 8.3. $SMALL_BUTTONS | Small buttons |
|
||
| 8.4. $EXTRA_SMALL_BUTTONS | Extra small buttons |
|
||
| 8.5. $OUTLINE_BUTTONS | Outline buttons |
|
||
| 8.6. $DARK_OUTLINE_BUTTONS | Dark outline buttons |
|
||
| 8.7. $FLAT_BUTTONS | Flat buttons |
|
||
| 8.8. $FLAT_OUTLINE_BUTTONS | Flat outline buttons |
|
||
| 8.9. $ROUNDED_BUTTONS | Rounded buttons |
|
||
| 8.10. $DISABLED_BUTTONS | Disabled buttons |
|
||
| 8.11. $STATE_BUTTONS | State buttons |
|
||
| 8.12. $SINGLE_TOGGLE_BUTTONS | Single toggle buttons |
|
||
| 8.13. $CHECKBOX_BUTTONS | Checkbox buttons |
|
||
| 8.14. $RADIO_BUTTONS | Radio buttons |
|
||
| 8.15. $BUTTONS_WITH_LABEL | Buttons with label |
|
||
| 9. $BUTTON_GROUPS | Button groups |
|
||
| 9.1. $DEFAULT_BUTTON_GROUPS | Default button groups |
|
||
| 9.2. $BUTTON_GROUPS_TOOLBAR | Button toolbar |
|
||
| 9.3. $BUTTON_GROUP_SIZES | Button group sizes |
|
||
| 9.4. $VERTICAL_BUTTON_GROUPS | Vertical button groups |
|
||
| 9.5. $BUTTON_GROUP_COLORS | Button group colors |
|
||
| 9.6. $BUTTON_GROUP_JUSTIFIED | Button group justified |
|
||
| 10. $BUTTON_DROPDOWNS | Button dropdowns |
|
||
| 10.1. $SINGLE_BUTTON_DROPDOWNS | Single button dropdowns |
|
||
| 10.2. $SPLIT_BUTTON_DROPDOWNS | Split button dropdowns |
|
||
| 10.3. $DROPDOWN_BUTTON_SIZES | Dropdown button sizes |
|
||
| 10.4. $DROPUP | Dropup |
|
||
| 11. $PROGRESS_BARS | Progress Bars |
|
||
| 11.1. $DEFAULT_PROGRESS_BARS | Default progress bars |
|
||
| 11.2. $STRIPED_PROGRESS_BARS | Striped progress bars |
|
||
| 11.3. $STRIPED_ANIMATED_PROGRESS_BARS | Striped animated progress bars |
|
||
| 11.4. $STACKED_PROGRESS_BARS | Stacked progress bars |
|
||
| 12. $DROPDOWNS | Dropdowns |
|
||
| 12.1. $DEFAULT_DROPDOWNS | Default dropdowns |
|
||
| 12.2. $DROPDOWN_COMPONENTS | Dropdown components |
|
||
| 13. $TABS | Tabs |
|
||
| 13.1. $DEFAULT_TABS | Default tabs |
|
||
| 13.2. $TAB_SIZES | Tab sizes |
|
||
| 13.3. $SIMPLE_TABS | Simple tabs |
|
||
| 13.4. $JUSTIFIED_TABS | Justified tabs |
|
||
| 14. $PILLS | Pills |
|
||
| 14.1. $DEFAULT_PILLS | Default pills |
|
||
| 14.2. $STACKED_PILLS | Stacked pills |
|
||
| 15. $PAGINATION | Pagination |
|
||
| 15.1. $DEFAULT_PAGINATION | Default pagination |
|
||
| 15.2. $PAGINATION_STATES | Disabled and active states |
|
||
| 15.3. $PAGINATION_SIZES | Pagination sizes |
|
||
| 15.4. $PAGINATION_PAGER | Pager |
|
||
| 15.5. $PAGINATION_ALIGNED_PAGER | Aligned pager links |
|
||
| 16. $TABLES | Tables |
|
||
| 16.1. $DEFAULT_TABLES | Default tables |
|
||
| 16.2. $STRIPED_TABLES | Striped tables |
|
||
| 16.3. $BORDERED_TABLES | Bordered tables |
|
||
| 16.4. $HOVER_ROWS_TABLES | Hover rows tables |
|
||
| 16.5. $CONDENSED_TABLES | Condensed tables |
|
||
| 16.6. $TABLE_VARIATIONS | Table variations |
|
||
| 17. $LIST_GROUPS | List groups |
|
||
| 17.1. $DEFAULT_LIST_GROUPS | Default list groups |
|
||
| 17.2. $LIST_GROUPS_LINKED_ITEMS | Linked items |
|
||
| 17.3. $LIST_GROUPS_CUSTOM_CONTENT | Custom content |
|
||
| 18. $FORMS | Forms |
|
||
| 18.1. $FORMS_BASIC_EXAMPLE | Basic example |
|
||
| 18.2. $INLINE_FORMS | Inline forms |
|
||
| 18.3. $HORIZONTAL_FORMS | Horizontal forms |
|
||
| 18.4. $FORMS_INPUTS | Inputs |
|
||
| 18.5. $FORMS_TEXTAREA | Textarea |
|
||
| 18.6. $FORMS_CHECKBOXES | Checkboxes |
|
||
| 18.7. $FORMS_INLINE_CHECKBOXES | Inline checkboxes |
|
||
| 18.8. $FORMS_RADIOS | Radios |
|
||
| 18.9. $FORMS_SELECTS | Selects |
|
||
| 18.10. $FORMS_STATIC_CONTROL | Static control |
|
||
| 18.11. $FORMS_DISABLED_CONTROLS | Disabled controls |
|
||
| 18.12. $FORMS_DISABLED_FIELDSET | Disabled fieldset |
|
||
| 18.13. $FORMS_VALIDATION_STATES_DEFAULT | Validation states - Default |
|
||
| 18.14. $FORMS_VALIDATION_STATES_DARK | Validation states - Dark |
|
||
| 18.15. $FORMS_VALIDATION_STATES_SIMPLE | Validation states - Simple |
|
||
| 18.16. $FORMS_OPTIONAL_ICONS | Optional icons |
|
||
| 18.17. $FORMS_HEIGHT_SIZING | Height sizing |
|
||
| 18.18. $FORMS_COLUMN_SIZING | Column sizing |
|
||
| 19. $INPUT_GROUPS | Input groups |
|
||
| 19.1. $INPUT_GROUPS_BASIC_EXAMPLE | Basic example |
|
||
| 19.2. $INPUT_GROUPS_SIZING | Input groups sizing |
|
||
| 19.3. $INPUT_GROUPS_CHECKBOXEX_AND_RADIO_ADDONS | Checkboxes and radio addons |
|
||
| 19.4. $INPUT_GROUPS_BUTTON_ADDONS | Button addons |
|
||
| 19.5. $INPUT_GROUPS_BUTTONS_WITH_DROPDOWNS | Buttons with dropdowns |
|
||
| 19.6. $INPUT_GROUPS_SEGMENTED_BUTTONS | Segmented buttons |
|
||
| 20. $PANELS | Panels |
|
||
| 20.1. $PANELS_BASIC_EXAMPLE | Basic example |
|
||
| 20.2. $PANELS_HEADER_COMPONENTS | Header components |
|
||
| 20.3. $PANELS_DEFAULT_COLORS | Default colors |
|
||
| 21. $WELLS | Wells |
|
||
| 21.1. $WELLS_DEFAULT | Default well |
|
||
| 21.2. $WELLS_OPTIONAL_CLASSES | Optional classes |
|
||
| 22. $POPOVERS | Popovers |
|
||
| 22.1. $DEFAULT_POPOVERS | Default popovers |
|
||
| 22.2. $POPOVER_STATES | Popover states |
|
||
| 23. $TOOLTIPS | Tooltips |
|
||
| 23.1. $DEFAULT_TOOLTIPS | Default tooltips |
|
||
| 23.2. $TOOLTIP_STATES | Tooltip states |
|
||
| 24. $MODALS | Modals |
|
||
| 24.1. $DEFAULT_MODALS | Default modals |
|
||
| 24.2. $MODALS_SIZES | Sizes |
|
||
| 24.3. $MODALS_BLURRED_BACKGROUND | Blurred background |
|
||
| 24.4. $MODALS_EFFECTS | Effects |
|
||
| 24.5. $MODALS_ALERTS | Alerts |
|
||
| 25. $ACCORDIONS | Accordions |
|
||
| 25.1. $ACCORDIONS_EXAMPLE | Example |
|
||
| 25.2. $ACCORDIONS_COLORS | Colors |
|
||
| 26. $NOTES | Notes |
|
||
| 26.1. $NOTES_DEFAULT | Default notes |
|
||
| 26.2. $NOTES_STATES | States |
|
||
| 27. $TEXT_COLORS | Text colors |
|
||
| 27.1. $TEXT_COLORS_EXAMPLES | Examples |
|
||
| 28. $JQUERY_UI | jQuery UI |
|
||
| 28.1. $JQUERY_UI_SLIDERS_DEFAULT | Default sliders |
|
||
| 28.2. $JQUERY_UI_SLIDERS_COLORS | Slider colors |
|
||
| 28.3. $JQUERY_UI_SLIDERS_RANGE | Range sliders |
|
||
| 28.4. $JQUERY_UI_ACCORDIONS | Accordions |
|
||
| 28.5. $JQUERY_UI_AUTOCOMPLETE | Autocomplete |
|
||
| 28.6. $JQUERY_UI_MULTILEVEL_MENUS | Multilevel menus |
|
||
| 28.7. $JQUERY_UI_SPINNERS | Spinners |
|
||
| 28.8. $JQUERY_UI_PROGRESS_BARS | Progress bars |
|
||
| 28.9. $JQUERY_UI_TABS | Tabs |
|
||
| 29. $JQUERY_UI_EXTRAS | jQuery UI Extras |
|
||
| 29.1. $JQUERY_UI_DATEPICKER | Datepicker example |
|
||
| 29.2. $JQUERY_UI_DATEPICKER_CUSTOM | Datepicker with multiple months and buttons |
|
||
| 29.3. $JQUERY_UI_TOOLTIPS | Tooltips |
|
||
| 30. $JQUERY_SELECT2 | jQuery Select2 |
|
||
| 30.1. $JQUERY_SELECT2_SINGLE_SELECT | Single select |
|
||
| 30.2. $JQUERY_SELECT2_MULTISELECT | Multiselect |
|
||
| 30.3. $JQUERY_SELECT2_EXTERNAL_SOURCE | External source |
|
||
| 30.4. $JQUERY_SELECT2_DISABLED_STATE | Disabled state |
|
||
| 31. $SWITCHERS | Switchers |
|
||
| 31.1. $SWITCHERS_EXAMPLE | Switcher examples |
|
||
| 31.2. $SWITCHERS_COLORS | Switcher colors |
|
||
| 31.3. $SWITCHERS_SIZES | Sizes |
|
||
| 31.4. $SWITCHERS_DISABLED_STATE | Disabled state |
|
||
| 32. $BOOTSTRAP_DATEPICKER | Bootstrap Datepicker |
|
||
| 32.1. $BOOTSTRAP_DATEPICKER_EXAMPLE | Example |
|
||
| 32.2. $BOOTSTRAP_DATEPICKER_AS_COMPONENT | As component |
|
||
| 32.3. $BOOTSTRAP_DATEPICKER_INLINE | Embedded / Inline |
|
||
| 32.4. $BOOTSTRAP_DATEPICKER_RANGE | Range |
|
||
| 33. $BOOTSTRAP_TIMEPICKER | Bootstrap Timepicker |
|
||
| 33.1. $BOOTSTRAP_TIMEPICKER_EXAMPLE | Example |
|
||
| 33.2. $BOOTSTRAP_TIMEPICKER_AS_COMPONENT | As component |
|
||
| 33.3. $BOOTSTRAP_TIMEPICKER_MODAL | Modal |
|
||
| 33.4. $BOOTSTRAP_TIMEPICKER_WITHOUT_TEMPLATE | Without template |
|
||
| 34. $BOOTSTRAP_DATEPAGINATOR | Bootstrap Datepaginator |
|
||
| 34.1. $BOOTSTRAP_DATEPAGINATOR_EXAMPLE | Example |
|
||
| 34.2. $BOOTSTRAP_DATEPAGINATOR_SIZES | Sizes |
|
||
| 35. $BOOTSTRAP_TAB_DROP | Bootstrap Tab drop |
|
||
| 35.1. $BOOTSTRAP_TAB_DROP_TABS | Tabs |
|
||
| 35.2. $BOOTSTRAP_TAB_DROP_PILLS | Pills |
|
||
| 36. $JQUERY_MINICOLORS | jQuery Minicolors |
|
||
| 36.1. $JQUERY_MINICOLORS_EXAMPLES | Examples |
|
||
| 36.2. $JQUERY_MINICOLORS_INLINE | Inline |
|
||
| 37. $JQUERY_MASKED_INPUTS | jQuery Masked Inputs |
|
||
| 37.1. $JQUERY_MASKED_INPUTS_EXAMPLES | Examples |
|
||
| 38. $JQUERY_CHARACTER_LIMIT | jQuery Character Limit |
|
||
| 38.1. $JQUERY_CHARACTER_LIMIT_EXAMPLES | Examples |
|
||
| 39. $JQUERY_AUTORESIZING_TEXTAREA | jQuery Autoresizing Textarea |
|
||
| 39.1. $JQUERY_AUTORESIZING_TEXTAREA_EXAMPLE | Example |
|
||
| 40. $JQUERY_EXPANDING_INPUTS | jQuery Expanding Inputs |
|
||
| 40.1. $JQUERY_EXPANDING_INPUTS_EXAMPLES | Examples |
|
||
| 40.2. $JQUERY_EXPANDING_INPUTS_SIZES | Sizes |
|
||
| 40.3. $JQUERY_EXPANDING_INPUTS_CALLBACKS | Callbacks |
|
||
| 41. $WIZARD | Wizard |
|
||
| 41.1. $WIZARD_EXAMPLE | Example |
|
||
| 41.2. $WIZARD_MODAL | Modal with wizard |
|
||
| 42. $BOOTSTRAP_X_EDITABLE | Bootstrap X-Editable |
|
||
| 42.1. $BOOTSTRAP_X_EDITABLE_EXAMPLES | Examples |
|
||
| 43. $JQUERY_VALIDATION | jQuery validation |
|
||
| 43.1. $JQUERY_VALIDATION_EXAMPLES | Examples |
|
||
| 44. $BOOTBOX | Bootbox |
|
||
| 44.1. $BOOTBOX_EXAMPLES | Examples |
|
||
| 45. $JQUERY_DATA_TABLES | jQuery DataTables |
|
||
| 45.1. $JQUERY_DATA_TABLES_EXAMPLE | Examples |
|
||
| 46. $JQUERY_GROWL_NOTIFICATIONS | jQuery Growl notifications |
|
||
| 46.1. $JQUERY_GROWL_NOTIFICATIONS_EXAMPLES | Examples |
|
||
| 47. $COUNTERS | Counters |
|
||
| 47.1. $COUNTERS_EXAMPLES | Examples |
|
||
| 47.2. $COUNTERS_SIZES | Examples |
|
||
| 48. $STYLED_FILE_INPUTS | Styled file inputs |
|
||
| 48.1. $STYLED_FILE_INPUTS_EXAMPLE | Example |
|
||
| 49. $DROPZONEJS | Dropzone.js |
|
||
| 49.1. $DROPZONEJS_EXAMPLE | Example |
|
||
| 50. $JQUERY_KNOB | jQuery Knob |
|
||
| 50.1. $JQUERY_KNOB_EXAMPLES | Examples |
|
||
| 51. $SUMMERNOTE_WYSIWYG_EDITOR | Summernote WYSIWYG-editor |
|
||
| 51.1. $SUMMERNOTE_WYSIWYG_EDITOR_EXAMPLE | Example |
|
||
| 52. $BOOTSTRAP_MARKDOWN | Bootstrap Markdown |
|
||
| 52.1. $BOOTSTRAP_MARKDOWN_EXAMPLE | Example |
|
||
| 53. $STYLED_CHECKBOXES_AND_RADIOS | Styled checkboxes and radios |
|
||
| 53.1. $STYLED_CHECKBOXES | Styled checkboxes |
|
||
| 53.2. $STYLED_RADIOS | Styled radios |
|
||
| 54. $JQUERY_SPARKLINES | jQuery Sparklines |
|
||
| 54.1. $JQUERY_SPARKLINES_EXAMPLES | Examples |
|
||
| 55. $JQUERY_EASY_PIE_CHART | jQuery Easy Pie Chart |
|
||
| 55.1. $JQUERY_EASY_PIE_CHART_EXAMPLE | Example |
|
||
| 56. $MORRISJS | Morris.js |
|
||
| 56.1. $MORRISJS_GRAPH | Graph |
|
||
| 56.2. $MORRISJS_BARS | Bars |
|
||
| 56.3. $MORRISJS_AREA | Area |
|
||
| 56.4. $MORRISJS_DONUT | Donut |
|
||
| 57. $JQUERY_FLOT_CHARTS | jQuery Flot charts |
|
||
| 57.1. $JQUERY_FLOT_CHARTS_GRAPH | Graph |
|
||
| 57.2. $JQUERY_FLOT_CHARTS_BARS | Bars |
|
||
| 57.3. $JQUERY_FLOT_CHARTS_PIE | Pie / Doughnut |
|
||
|
||
=========================================================================================================
|
||
|
||
-->
|
||
|
||
|
||
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
||
<!--[if IE 9]> <html class="ie9 gt-ie8"> <![endif]-->
|
||
<!--[if gt IE 9]><!--> <html class="gt-ie8 gt-ie9 not-ie"> <!--<![endif]-->
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<title>User Innterface - PixelAdmin</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
||
|
||
<!-- Open Sans font from Google CDN -->
|
||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300&subset=latin" rel="stylesheet" type="text/css">
|
||
|
||
<!-- Pixel Admin's stylesheets -->
|
||
<link href="assets/stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/stylesheets/pixel-admin.min.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/stylesheets/widgets.min.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/stylesheets/rtl.min.css" rel="stylesheet" type="text/css">
|
||
<link href="assets/stylesheets/themes.min.css" rel="stylesheet" type="text/css">
|
||
|
||
<!--[if lt IE 9]>
|
||
<script src="assets/javascripts/ie.min.js"></script>
|
||
<![endif]-->
|
||
|
||
<style>
|
||
.header-1,
|
||
.header-1:hover,
|
||
.header-2,
|
||
.header-2:hover {
|
||
text-align: none;
|
||
cursor: pointer;
|
||
text-decoration: none !important;
|
||
display: block;
|
||
z-index: 100000000;
|
||
border-top: 1px solid #eee;
|
||
margin: 0 -9px 0 -9px;
|
||
}
|
||
|
||
.header-1,
|
||
.header-1:hover {
|
||
color: #333 !important;
|
||
font-size: 18px;
|
||
font-weight: 300;
|
||
padding: 30px 18px 15px 18px;
|
||
background: #fafafa;
|
||
background: rgba(0,0,0,.02);
|
||
margin-bottom: -15px;
|
||
}
|
||
|
||
.header-2,
|
||
.header-2:hover {
|
||
text-transform: uppercase;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: #888 !important;
|
||
padding: 10px 18px 0 18px;
|
||
margin-bottom: 15px;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.header-1 + .header-2 {
|
||
margin-top: 10px;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.header-1 + .col-sm-12 {
|
||
margin-top: 15px;
|
||
padding-top: 15px;
|
||
border-top: 1px solid #eee;
|
||
margin-left: -9px;
|
||
margin-right: -9px;
|
||
padding-left: 18px;
|
||
padding-right: 18px;
|
||
width: auto !important;
|
||
float: none;
|
||
}
|
||
|
||
.row {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.uidemo-note {
|
||
margin: 0;
|
||
border-top: 1px solid #eee !important;
|
||
}
|
||
</style>
|
||
|
||
</head>
|
||
|
||
|
||
<!-- 1. $BODY ======================================================================================
|
||
|
||
Body
|
||
|
||
Classes:
|
||
* 'theme-{THEME NAME}'
|
||
* 'right-to-left' - Sets text direction to right-to-left
|
||
* 'main-menu-right' - Places the main menu on the right side
|
||
* 'no-main-menu' - Hides the main menu
|
||
* 'main-navbar-fixed' - Fixes the main navigation
|
||
* 'main-menu-fixed' - Fixes the main menu
|
||
* 'main-menu-animated' - Animate main menu
|
||
-->
|
||
<body class="theme-default main-menu-animated">
|
||
|
||
<script>var init = [];</script>
|
||
<!-- Demo script --> <script src="assets/demo/demo.js"></script> <!-- / Demo script -->
|
||
|
||
<div id="main-wrapper">
|
||
|
||
|
||
<!-- 2. $MAIN_NAVIGATION ===========================================================================
|
||
|
||
Main navigation
|
||
-->
|
||
<div id="main-navbar" class="navbar navbar-inverse" role="navigation">
|
||
<!-- Main menu toggle -->
|
||
<button type="button" id="main-menu-toggle"><i class="navbar-icon fa fa-bars icon"></i><span class="hide-menu-text">HIDE MENU</span></button>
|
||
|
||
<div class="navbar-inner">
|
||
<!-- Main navbar header -->
|
||
<div class="navbar-header">
|
||
|
||
<!-- Logo -->
|
||
<a href="index.html" class="navbar-brand">
|
||
<div><img alt="Pixel Admin" src="assets/images/pixel-admin/main-navbar-logo.png"></div>
|
||
PixelAdmin
|
||
</a>
|
||
|
||
<!-- Main navbar toggle -->
|
||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar-collapse"><i class="navbar-icon fa fa-bars"></i></button>
|
||
|
||
</div> <!-- / .navbar-header -->
|
||
|
||
<div id="main-navbar-collapse" class="collapse navbar-collapse main-navbar-collapse">
|
||
<div>
|
||
<ul class="nav navbar-nav">
|
||
<li>
|
||
<a href="#">Home</a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">First item</a></li>
|
||
<li><a href="#">Second item</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Third item</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul> <!-- / .navbar-nav -->
|
||
|
||
<div class="right clearfix">
|
||
<ul class="nav navbar-nav pull-right right-navbar-nav">
|
||
|
||
<!-- 3. $NAVBAR_ICON_BUTTONS =======================================================================
|
||
|
||
Navbar Icon Buttons
|
||
|
||
NOTE: .nav-icon-btn triggers a dropdown menu on desktop screens only. On small screens .nav-icon-btn acts like a hyperlink.
|
||
|
||
Classes:
|
||
* 'nav-icon-btn-info'
|
||
* 'nav-icon-btn-success'
|
||
* 'nav-icon-btn-warning'
|
||
* 'nav-icon-btn-danger'
|
||
-->
|
||
<li class="nav-icon-btn nav-icon-btn-danger dropdown">
|
||
<a href="#notifications" class="dropdown-toggle" data-toggle="dropdown">
|
||
<span class="label">5</span>
|
||
<i class="nav-icon fa fa-bullhorn"></i>
|
||
<span class="small-screen-text">Notifications</span>
|
||
</a>
|
||
|
||
<!-- NOTIFICATIONS -->
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#main-navbar-notifications').slimScroll({ height: 250 });
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="dropdown-menu widget-notifications no-padding" style="width: 300px">
|
||
<div class="notifications-list" id="main-navbar-notifications">
|
||
|
||
<div class="notification">
|
||
<div class="notification-title text-danger">SYSTEM</div>
|
||
<div class="notification-description"><strong>Error 500</strong>: Syntax error in index.php at line <strong>461</strong>.</div>
|
||
<div class="notification-ago">12h ago</div>
|
||
<div class="notification-icon fa fa-hdd-o bg-danger"></div>
|
||
</div> <!-- / .notification -->
|
||
|
||
<div class="notification">
|
||
<div class="notification-title text-info">STORE</div>
|
||
<div class="notification-description">You have <strong>9</strong> new orders.</div>
|
||
<div class="notification-ago">12h ago</div>
|
||
<div class="notification-icon fa fa-truck bg-info"></div>
|
||
</div> <!-- / .notification -->
|
||
|
||
<div class="notification">
|
||
<div class="notification-title text-default">CRON DAEMON</div>
|
||
<div class="notification-description">Job <strong>"Clean DB"</strong> has been completed.</div>
|
||
<div class="notification-ago">12h ago</div>
|
||
<div class="notification-icon fa fa-clock-o bg-default"></div>
|
||
</div> <!-- / .notification -->
|
||
|
||
<div class="notification">
|
||
<div class="notification-title text-success">SYSTEM</div>
|
||
<div class="notification-description">Server <strong>up</strong>.</div>
|
||
<div class="notification-ago">12h ago</div>
|
||
<div class="notification-icon fa fa-hdd-o bg-success"></div>
|
||
</div> <!-- / .notification -->
|
||
|
||
<div class="notification">
|
||
<div class="notification-title text-warning">SYSTEM</div>
|
||
<div class="notification-description"><strong>Warning</strong>: Processor load <strong>92%</strong>.</div>
|
||
<div class="notification-ago">12h ago</div>
|
||
<div class="notification-icon fa fa-hdd-o bg-warning"></div>
|
||
</div> <!-- / .notification -->
|
||
|
||
</div> <!-- / .notifications-list -->
|
||
<a href="#" class="notifications-link">MORE NOTIFICATIONS</a>
|
||
</div> <!-- / .dropdown-menu -->
|
||
</li>
|
||
<li class="nav-icon-btn nav-icon-btn-success dropdown">
|
||
<a href="#messages" class="dropdown-toggle" data-toggle="dropdown">
|
||
<span class="label">10</span>
|
||
<i class="nav-icon fa fa-envelope"></i>
|
||
<span class="small-screen-text">Income messages</span>
|
||
</a>
|
||
|
||
<!-- MESSAGES -->
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#main-navbar-messages').slimScroll({ height: 250 });
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="dropdown-menu widget-messages-alt no-padding" style="width: 300px;">
|
||
<div class="messages-list" id="main-navbar-messages">
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Robert Jang</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Michelle Bortz</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/4.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Timothy Owens</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Denise Steiner</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Robert Jang</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Robert Jang</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/3.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Michelle Bortz</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/4.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Timothy Owens</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/5.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Denise Steiner</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
<div class="message">
|
||
<img src="assets/demo/avatars/2.jpg" alt="" class="message-avatar">
|
||
<a href="#" class="message-subject">Lorem ipsum dolor sit amet.</a>
|
||
<div class="message-description">
|
||
from <a href="#">Robert Jang</a>
|
||
·
|
||
2h ago
|
||
</div>
|
||
</div> <!-- / .message -->
|
||
|
||
</div> <!-- / .messages-list -->
|
||
<a href="#" class="messages-link">MORE MESSAGES</a>
|
||
</div> <!-- / .dropdown-menu -->
|
||
</li>
|
||
<!-- /3. $END_NAVBAR_ICON_BUTTONS -->
|
||
|
||
<li>
|
||
<form class="navbar-form pull-left">
|
||
<input type="text" class="form-control" placeholder="Search">
|
||
</form>
|
||
</li>
|
||
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle user-menu" data-toggle="dropdown">
|
||
<img src="assets/demo/avatars/1.jpg">
|
||
<span>John Doe</span>
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#"><span class="label label-warning pull-right">New</span>Profile</a></li>
|
||
<li><a href="#"><span class="badge badge-primary pull-right">New</span>Account</a></li>
|
||
<li><a href="#"><i class="dropdown-icon fa fa-cog"></i> Settings</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="pages-signin.html"><i class="dropdown-icon fa fa-power-off"></i> Log Out</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul> <!-- / .navbar-nav -->
|
||
</div> <!-- / .right -->
|
||
</div>
|
||
</div> <!-- / #main-navbar-collapse -->
|
||
</div> <!-- / .navbar-inner -->
|
||
</div> <!-- / #main-navbar -->
|
||
<!-- /2. $END_MAIN_NAVIGATION -->
|
||
|
||
|
||
<!-- 4. $MAIN_MENU =================================================================================
|
||
|
||
Main menu
|
||
|
||
Notes:
|
||
* to make the menu item active, add a class 'active' to the <li>
|
||
example: <li class="active">...</li>
|
||
* multilevel submenu example:
|
||
<li class="mm-dropdown">
|
||
<a href="#"><span class="mm-text">Submenu item text 1</span></a>
|
||
<ul>
|
||
<li>...</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><span class="mm-text">Submenu item text 2</span></a>
|
||
<ul>
|
||
<li>...</li>
|
||
...
|
||
</ul>
|
||
</li>
|
||
...
|
||
</ul>
|
||
</li>
|
||
-->
|
||
<div id="main-menu" role="navigation">
|
||
<div id="main-menu-inner">
|
||
<div class="menu-content top" id="menu-content-demo">
|
||
<!-- Menu custom content demo
|
||
CSS: styles/pixel-admin-less/demo.less or styles/pixel-admin-scss/_demo.scss
|
||
Javascript: html/assets/demo/demo.js
|
||
-->
|
||
<div>
|
||
<div class="text-bg"><span class="text-slim">Welcome,</span> <span class="text-semibold">John</span></div>
|
||
|
||
<img src="assets/demo/avatars/1.jpg" alt="" class="">
|
||
<div class="btn-group">
|
||
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-envelope"></i></a>
|
||
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-user"></i></a>
|
||
<a href="#" class="btn btn-xs btn-primary btn-outline dark"><i class="fa fa-cog"></i></a>
|
||
<a href="#" class="btn btn-xs btn-danger btn-outline dark"><i class="fa fa-power-off"></i></a>
|
||
</div>
|
||
<a href="#" class="close">×</a>
|
||
</div>
|
||
</div>
|
||
<ul class="navigation">
|
||
<li>
|
||
<a href="index.html"><i class="menu-icon fa fa-dashboard"></i><span class="mm-text">Dashboard</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><i class="menu-icon fa fa-th"></i><span class="mm-text">Layouts</span><span class="label label-warning">Updated</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="layouts-grid.html"><span class="mm-text">Grid</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="layouts-main-menu.html"><i class="menu-icon fa fa-th-list"></i><span class="mm-text">Main menu</span><span class="label label-warning">Updated</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="stat-panels.html"><i class="menu-icon fa fa-tasks"></i><span class="mm-text">Stat panels</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="widgets.html"><i class="menu-icon fa fa-flask"></i><span class="mm-text">Widgets</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><i class="menu-icon fa fa-desktop"></i><span class="mm-text">UI elements</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="ui-buttons.html"><span class="mm-text">Buttons</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-typography.html"><span class="mm-text">Typography</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-tabs.html"><span class="mm-text">Tabs & Accordions</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-modals.html"><span class="mm-text">Modals</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-alerts.html"><span class="mm-text">Alerts & Tooltips</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-components.html"><span class="mm-text">Components</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-panels.html"><span class="mm-text">Panels</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-jqueryui.html"><span class="mm-text">jQuery UI</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-icons.html"><span class="mm-text">Icons</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="ui-utility-classes.html"><span class="mm-text">Utility classes</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><i class="menu-icon fa fa-check-square"></i><span class="mm-text">Form components</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="forms-layouts.html"><span class="mm-text">Layouts</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="forms-general.html"><span class="mm-text">General</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="forms-advanced.html"><span class="mm-text">Advanced</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="forms-pickers.html"><span class="mm-text">Pickers</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="forms-validation.html"><span class="mm-text">Validation</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="forms-editors.html"><span class="mm-text">Editors</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="tables.html"><i class="menu-icon fa fa-table"></i><span class="mm-text">Tables</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="charts.html"><i class="menu-icon fa fa-bar-chart-o"></i><span class="mm-text">Charts</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><i class="menu-icon fa fa-files-o"></i><span class="mm-text">Pages</span><span class="label label-success">16</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="pages-search.html"><span class="mm-text">Search results</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-pricing.html"><span class="mm-text">Plans & pricing</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-faq.html"><span class="mm-text">FAQ</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-profile.html"><span class="mm-text">Profile</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-timeline.html"><span class="mm-text">Timeline</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-signin.html"><span class="mm-text">Sign In</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-signup.html"><span class="mm-text">Sign Up</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-signin-alt.html"><span class="mm-text">Sign In Alt</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-signup-alt.html"><span class="mm-text">Sign Up Alt</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-invoice.html"><span class="mm-text">Invoice</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-404.html"><span class="mm-text">Error 404</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-500.html"><span class="mm-text">Error 500</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><i class="menu-icon fa fa-envelope"></i><span class="mm-text">Messages</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="pages-inbox.html"><span class="mm-text">Inbox</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-show-email.html"><span class="mm-text">Show message</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-new-email.html"><span class="mm-text">New message</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="pages-blank.html"><span class="mm-text">Blank page</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="complete-ui.html"><i class="menu-icon fa fa-briefcase"></i><span class="mm-text">Complete UI</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="color-builder.html"><i class="menu-icon fa fa-tint"></i><span class="mm-text">Color Builder</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a href="#"><i class="menu-icon fa fa-sitemap"></i><span class="mm-text">Menu levels</span><span class="badge badge-primary">6</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.1</span><span class="badge badge-danger">12</span><span class="label label-info">21</span></a>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.2</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 1.3</span><span class="label label-warning">5</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.1</span></a>
|
||
</li>
|
||
<li class="mm-dropdown">
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.2</span></a>
|
||
<ul>
|
||
<li class="mm-dropdown">
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 3.1</span></a>
|
||
<ul>
|
||
<li>
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 4.1</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 3.2</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a tabindex="-1" href="#"><span class="mm-text">Menu level 2.2</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul> <!-- / .navigation -->
|
||
<div class="menu-content">
|
||
<a href="pages-invoice.html" class="btn btn-primary btn-block btn-outline dark">Create Invoice</a>
|
||
</div>
|
||
</div> <!-- / #main-menu-inner -->
|
||
</div> <!-- / #main-menu -->
|
||
<!-- /4. $MAIN_MENU -->
|
||
|
||
|
||
<div id="content-wrapper">
|
||
|
||
<div class="alert alert-info alert-page">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
This page can be slow because it contains a lot of DOM elements and Javascript.
|
||
</div>
|
||
|
||
|
||
<!-- $PREDEFINED_COLORS ============================================================================
|
||
|
||
Javascript predefined colors
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$box = $('#ui-default-colors');
|
||
for (var i = 0, l = PixelAdmin.settings.consts.COLORS.length; i < l; i++) {
|
||
$box.append(
|
||
$('<div class="ui-default-color" style="background:' + PixelAdmin.settings.consts.COLORS[i] + '"><span>' + i + '</span>' + PixelAdmin.settings.consts.COLORS[i] + '</div>')
|
||
);
|
||
}
|
||
})
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<!-- Styles -->
|
||
<style>
|
||
.ui-default-color {
|
||
display: inline-block;
|
||
margin-right: 10px;
|
||
line-height: 30px;
|
||
font-size: 11px;
|
||
padding-right: 30px;
|
||
color: #fff;
|
||
margin-bottom: 10px;
|
||
}
|
||
.ui-default-color span {
|
||
display: inline-block;
|
||
height: 30px;
|
||
background: rgba(0, 0, 0, .3);
|
||
padding: 0 13px;
|
||
margin-right: 30px;
|
||
font-weight: 600;
|
||
}
|
||
.right-to-left .ui-default-color {
|
||
margin-left: 10px;
|
||
margin-right: 0;
|
||
padding-left: 30px;
|
||
padding-right: 0;
|
||
}
|
||
.right-to-left .ui-default-color span {
|
||
margin-left: 30px;
|
||
margin-right: 0;
|
||
}
|
||
</style>
|
||
<!-- / Styles -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-default-colors" href="#uidemo-default-colors" class="header-1" style="margin-top: -18px;">Javascript predefined colors</a>
|
||
</div>
|
||
<div class="row" style="border-top: 1px solid #eee; padding: 15px 10px; margin: 0 -18px">
|
||
<div class="col-sm-12">
|
||
<div class="note note-info">These colors are predefined in the "javascripts/sources/app.coffee" file. For example, to take a second color, insert in your javascript code: <code>PixelAdmin.settings.consts.COLORS[1]</code>.</div>
|
||
<div id="ui-default-colors"></div>
|
||
</div>
|
||
</div>
|
||
<!-- / $PREDEFINED_COLORS -->
|
||
|
||
|
||
<!-- 5. $LABELS_TAGS_BADGES ========================================================================
|
||
|
||
Labels, tags and badges
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-labels-tags-badges" href="#uidemo-labels-tags-badges" class="header-1" style="margin-top: -20px;">Labels, Tags and Badges</a>
|
||
</div>
|
||
|
||
<!-- 5.1. $LABELS ==================================================================================
|
||
|
||
Labels
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-labels" href="#uidemo-labels" class="header-2">Labels</a>
|
||
<div class="col-sm-12">
|
||
<a href="#" class="label">Default</a>
|
||
<a href="#" class="label label-primary">Primary</a>
|
||
<a href="#" class="label label-success">Success</a>
|
||
<a href="#" class="label label-warning">Warning</a>
|
||
<a href="#" class="label label-danger">Danger</a>
|
||
<a href="#" class="label label-info">Info</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5.2. $TAGS ====================================================================================
|
||
|
||
Tags
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tags" href="#uidemo-tags" class="header-2">Tags</a>
|
||
<div class="col-sm-12">
|
||
<a href="#" class="label label-tag">Default</a>
|
||
<a href="#" class="label label-primary label-tag">Primary</a>
|
||
<a href="#" class="label label-success label-tag">Success</a>
|
||
<a href="#" class="label label-warning label-tag">Warning</a>
|
||
<a href="#" class="label label-danger label-tag">Danger</a>
|
||
<a href="#" class="label label-info label-tag">Info</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 5.3. $BADGES ==================================================================================
|
||
|
||
Badges
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-badges" href="#uidemo-badges" class="header-2">Badges</a>
|
||
<div class="col-sm-12">
|
||
<a href="#" class="badge">Default</a>
|
||
<a href="#" class="badge badge-primary">Primary</a>
|
||
<a href="#" class="badge badge-success">Success</a>
|
||
<a href="#" class="badge badge-warning">Warning</a>
|
||
<a href="#" class="badge badge-danger">Danger</a>
|
||
<a href="#" class="badge badge-info">Info</a>
|
||
</div>
|
||
</div>
|
||
<!-- /5. $LABELS_TAGS_BADGES -->
|
||
|
||
<!-- 6. $BREADCRUMB ================================================================================
|
||
|
||
Breadcrumb
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-breadcrumb" href="#uidemo-breadcrumb" class="header-1">Breadcrumb</a>
|
||
</div>
|
||
|
||
<!-- 6.1. $DEFAULT_BREADCRUMB ======================================================================
|
||
|
||
Default breadcrumb
|
||
-->
|
||
<div class="row" style=" margin-bottom: 0;">
|
||
<a id="uidemo-breadcrumb-default" href="#uidemo-breadcrumb-default" class="header-2">Default breadcrumb</a>
|
||
<div class="col-sm-12">
|
||
<ul class="breadcrumb breadcrumb-no-padding">
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">Library</a></li>
|
||
<li class="active">Data</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6.2. $DARK_BACKGROUND_BREADCRUMB ==============================================================
|
||
|
||
Dark background breadcrumb
|
||
-->
|
||
<div class="row" style=" margin-bottom: 0;">
|
||
<a id="uidemo-breadcrumb-dark" href="#uidemo-breadcrumb-dark" class="header-2">Dark background breadcrumb</a>
|
||
<div class="col-sm-12">
|
||
<ul class="breadcrumb breadcrumb-dark" style="background: #478e9e">
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">Library</a></li>
|
||
<li class="active"><a href="#">Data</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 6.3. $PAGE_BREADCRUMB =========================================================================
|
||
|
||
Page breadcrumb
|
||
|
||
To use page breadcrumbs just append breadcrumb to the start of the #content-wrapper and add class .breadcrumb-page to the .breadcrumb
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
var self = this;
|
||
$('#page-breadcrumb-demo-btn').on('click', function () {
|
||
var $b = $('#page-breadcrumb-demo');
|
||
if ($b.is(':visible')) {
|
||
$b.css('display', 'none');
|
||
$(this).text('Add page breadcrumb');
|
||
} else {
|
||
// Display breadcrumb after alerts
|
||
var $cont = $('#' + self.plugins.alerts.getContainerId());
|
||
if ($cont.length) {
|
||
$cont.after($b);
|
||
} else {
|
||
$('#content-wrapper').prepend($b);
|
||
}
|
||
$b.css('display', 'block');
|
||
$(this).text('Remove page breadcrumb');
|
||
$('html,body').animate({ scrollTop: 0 }, 500);
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<!-- Template -->
|
||
<ul id="page-breadcrumb-demo" class="breadcrumb breadcrumb-page breadcrumb-dark" style="background: #478e9e; display: none;">
|
||
<li><a href="#">Home</a></li>
|
||
<li><a href="#">Library</a></li>
|
||
<li class="active"><a href="#">Data</a></li>
|
||
</ul>
|
||
<!-- / Template -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-breadcrumb-page" href="#uidemo-breadcrumb-page" class="header-2">Page breadcrumb</a>
|
||
<div class="col-sm-12">
|
||
<button id="page-breadcrumb-demo-btn" class="btn btn-small btn-primary">Add page breadcrumb</button>
|
||
</div>
|
||
</div>
|
||
<!-- /6. $BREADCRUMB -->
|
||
|
||
<!-- 7. $ALERTS ====================================================================================
|
||
|
||
Alerts
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-alerts" href="#uidemo-alerts" class="header-1">Alerts</a>
|
||
</div>
|
||
|
||
<!-- 7.1. $DEFAULT_ALERTS ==========================================================================
|
||
|
||
Default alerts
|
||
-->
|
||
<div class="row" style=" margin-bottom: 0;">
|
||
<a id="uidemo-alerts-default" href="#uidemo-alerts-default" class="header-2">Default alerts</a>
|
||
<div class="col-sm-12">
|
||
<div class="alert">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Warning!</strong> Best check yo self, you're not looking too good.
|
||
</div>
|
||
<div class="alert alert-danger">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Oh snap!</strong> Change a few things up and try submitting again.
|
||
</div>
|
||
<div class="alert alert-success">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Well done!</strong> You successfully read this important alert message.
|
||
</div>
|
||
<div class="alert alert-info">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 7.2. $DARK_ALERTS =============================================================================
|
||
|
||
Dark alerts
|
||
-->
|
||
<div class="row" style=" margin-bottom: 0;">
|
||
<a id="uidemo-alerts-dark" href="#uidemo-alerts-dark" class="header-2">Dark alerts</a>
|
||
<div class="col-sm-12">
|
||
<div class="alert alert-dark">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Warning!</strong> Best check yo self, you're not looking too good.
|
||
</div>
|
||
<div class="alert alert-danger alert-dark">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Oh snap!</strong> Change a few things up and try submitting again.
|
||
</div>
|
||
<div class="alert alert-success alert-dark">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Well done!</strong> You successfully read this important alert message.
|
||
</div>
|
||
<div class="alert alert-info alert-dark">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 7.3. $PAGE_ALERTS =============================================================================
|
||
|
||
Page alerts
|
||
|
||
To use page alerts just append alert to the start of the #content-wrapper and add class .alert-page to the .alert.
|
||
Or you can add page alerts programmatically by PixelAdmin.plugins.alerts plugin (see example)
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#page-alerts-demo').on('click', 'button', function () {
|
||
var $this = $(this);
|
||
// Go to the top
|
||
$('html,body').animate({ scrollTop: 0 }, 500);
|
||
// Wait while page is scrolling
|
||
setTimeout(function () {
|
||
if ($this.hasClass('page-alerts-clear-btn')) {
|
||
PixelAdmin.plugins.alerts.clear(
|
||
true, // animate
|
||
'pa_page_alerts_default' // namespace
|
||
);
|
||
} else {
|
||
var options = {
|
||
type: $this.attr('data-type'),
|
||
namespace: 'pa_page_alerts_default'
|
||
};
|
||
if ($this.hasClass('auto-close-alert'))
|
||
options['auto_close'] = 3; // seconds
|
||
PixelAdmin.plugins.alerts.add($this.attr('data-text'), options);
|
||
}
|
||
}, 800);
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-alerts-page" href="#uidemo-alerts-page" class="header-2">Page alerts</a>
|
||
<div id="page-alerts-demo" class="col-sm-12">
|
||
<button data-type="warning" data-text="<strong>Warning!</strong> Best check yo self, you're not looking too good." class="btn btn-small btn-warning">Add warning</button>
|
||
<button data-type="danger" data-text="<strong>Oh snap!</strong> Change a few things up and try submitting again." class="btn btn-small btn-danger">Add error</button>
|
||
<button data-type="success" data-text="<strong>Well done!</strong> You successfully read this important alert message." class="btn btn-small btn-success">Add success</button>
|
||
<button data-type="info" data-text="<strong>Heads up!</strong> This alert needs your attention, but it's not super important." class="btn btn-small btn-info">Add info</button>
|
||
<button data-type="warning" data-text="<strong>Warning!</strong> Best check yo self, you're not looking too good." class="btn btn-small btn-primary auto-close-alert">Auto closing alert</button>
|
||
<button class="btn btn-small page-alerts-clear-btn">Clear alerts</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 7.4. $PAGE_DARK_ALERTS ========================================================================
|
||
|
||
Page dark alerts
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#page-alerts-dark-demo').on('click', 'button', function () {
|
||
var $this = $(this);
|
||
// Go to the top
|
||
$('html,body').animate({ scrollTop: 0 }, 500);
|
||
// Wait while page is scrolling
|
||
setTimeout(function () {
|
||
if ($this.hasClass('page-alerts-clear-btn')) {
|
||
PixelAdmin.plugins.alerts.clear(
|
||
true, // animate
|
||
'pa_page_alerts_dark' // namespace
|
||
);
|
||
} else {
|
||
var options = {
|
||
type: $this.attr('data-type'),
|
||
namespace: 'pa_page_alerts_dark',
|
||
classes: 'alert-dark' // add custom classes
|
||
};
|
||
if ($this.hasClass('auto-close-alert'))
|
||
options['auto_close'] = 3; // seconds
|
||
PixelAdmin.plugins.alerts.add($this.attr('data-text'), options);
|
||
}
|
||
}, 800);
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-alerts-page-dark" href="#uidemo-alerts-page-dark" class="header-2">Page dark alerts</a>
|
||
<div id="page-alerts-dark-demo" class="col-sm-12">
|
||
<button data-type="warning" data-text="<strong>Warning!</strong> Best check yo self, you're not looking too good." class="btn btn-small btn-warning">Add warning</button>
|
||
<button data-type="danger" data-text="<strong>Oh snap!</strong> Change a few things up and try submitting again." class="btn btn-small btn-danger">Add error</button>
|
||
<button data-type="success" data-text="<strong>Well done!</strong> You successfully read this important alert message." class="btn btn-small btn-success">Add success</button>
|
||
<button data-type="info" data-text="<strong>Heads up!</strong> This alert needs your attention, but it's not super important." class="btn btn-small btn-info">Add info</button>
|
||
<button data-type="warning" data-text="<strong>Warning!</strong> Best check yo self, you're not looking too good." class="btn btn-small btn-primary auto-close-alert">Auto closing alert</button>
|
||
<button class="btn btn-small page-alerts-clear-btn">Clear alerts</button>
|
||
</div>
|
||
</div>
|
||
<!-- /7. $ALERTS -->
|
||
|
||
<!-- 8. $BUTTONS ===================================================================================
|
||
|
||
Buttons
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-buttons" href="#uidemo-buttons" class="header-1">Buttons</a>
|
||
</div>
|
||
|
||
<!-- 8.1. $DEFAULT_BUTTONS =========================================================================
|
||
|
||
Default buttons
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-buttons-default" href="#uidemo-buttons-default" class="header-2">Default buttons</a>
|
||
<div class="col-sm-12">
|
||
<button class="btn">Default</button>
|
||
<button class="btn btn-primary">Primary</button>
|
||
<button class="btn btn-info">Info</button>
|
||
<button class="btn btn-success">Success</button>
|
||
<button class="btn btn-warning">Warning</button>
|
||
<button class="btn btn-danger">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.2. $LARGE_BUTTONS ===========================================================================
|
||
|
||
Large buttons
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-buttons-large" href="#uidemo-buttons-large" class="header-2">Large buttons</a>
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-lg">Default</button>
|
||
<button class="btn btn-lg btn-primary">Primary</button>
|
||
<button class="btn btn-lg btn-info">Info</button>
|
||
<button class="btn btn-lg btn-success">Success</button>
|
||
<button class="btn btn-lg btn-warning">Warning</button>
|
||
<button class="btn btn-lg btn-danger">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.3. $SMALL_BUTTONS ===========================================================================
|
||
|
||
Small buttons
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-buttons-small" href="#uidemo-buttons-small" class="header-2">Small buttons</a>
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-sm">Default</button>
|
||
<button class="btn btn-sm btn-primary">Primary</button>
|
||
<button class="btn btn-sm btn-info">Info</button>
|
||
<button class="btn btn-sm btn-success">Success</button>
|
||
<button class="btn btn-sm btn-warning">Warning</button>
|
||
<button class="btn btn-sm btn-danger">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.4. $EXTRA_SMALL_BUTTONS =====================================================================
|
||
|
||
Extra small buttons
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-buttons-xsmall" href="#uidemo-buttons-xsmall" class="header-2">Extra small buttons</a>
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-xs">Default</button>
|
||
<button class="btn btn-xs btn-primary">Primary</button>
|
||
<button class="btn btn-xs btn-info">Info</button>
|
||
<button class="btn btn-xs btn-success">Success</button>
|
||
<button class="btn btn-xs btn-warning">Warning</button>
|
||
<button class="btn btn-xs btn-danger">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.5. $OUTLINE_BUTTONS =========================================================================
|
||
|
||
Outline buttons
|
||
-->
|
||
<div class="row" style="margin-bottom: 0">
|
||
<a id="uidemo-buttons-outline" href="#uidemo-buttons-outline" class="header-2">Outline buttons</a>
|
||
<div class="col-sm-12">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-outline">Default</button>
|
||
<button class="btn btn-primary btn-outline">Primary</button>
|
||
<button class="btn btn-info btn-outline">Info</button>
|
||
<button class="btn btn-success btn-outline">Success</button>
|
||
<button class="btn btn-warning btn-outline">Warning</button>
|
||
<button class="btn btn-danger btn-outline">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-lg btn-outline">Default</button>
|
||
<button class="btn btn-lg btn-primary btn-outline">Primary</button>
|
||
<button class="btn btn-lg btn-info btn-outline">Info</button>
|
||
<button class="btn btn-lg btn-success btn-outline">Success</button>
|
||
<button class="btn btn-lg btn-warning btn-outline">Warning</button>
|
||
<button class="btn btn-lg btn-danger btn-outline">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-sm btn-outline">Default</button>
|
||
<button class="btn btn-sm btn-primary btn-outline">Primary</button>
|
||
<button class="btn btn-sm btn-info btn-outline">Info</button>
|
||
<button class="btn btn-sm btn-success btn-outline">Success</button>
|
||
<button class="btn btn-sm btn-warning btn-outline">Warning</button>
|
||
<button class="btn btn-sm btn-danger btn-outline">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-xs btn-outline">Default</button>
|
||
<button class="btn btn-xs btn-primary btn-outline">Primary</button>
|
||
<button class="btn btn-xs btn-info btn-outline">Info</button>
|
||
<button class="btn btn-xs btn-success btn-outline">Success</button>
|
||
<button class="btn btn-xs btn-warning btn-outline">Warning</button>
|
||
<button class="btn btn-xs btn-danger btn-outline">Danger</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.6. $DARK_OUTLINE_BUTTONS ====================================================================
|
||
|
||
Dark outline buttons
|
||
-->
|
||
<div class="no-grid-gutter-h grid-gutter-padding-h" style="background: #444;">
|
||
<div class="row " style="margin-bottom: 0;">
|
||
<a id="uidemo-buttons-outline-dark" href="#uidemo-buttons-outline-dark" class="header-2" style="border-top: none;">Dark outline buttons</a>
|
||
<div class="col-sm-12">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-outline dark">Default</button>
|
||
<button class="btn btn-primary btn-outline dark">Primary</button>
|
||
<button class="btn btn-info btn-outline dark">Info</button>
|
||
<button class="btn btn-success btn-outline dark">Success</button>
|
||
<button class="btn btn-warning btn-outline dark">Warning</button>
|
||
<button class="btn btn-danger btn-outline dark">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-lg btn-outline dark">Default</button>
|
||
<button class="btn btn-lg btn-primary btn-outline dark">Primary</button>
|
||
<button class="btn btn-lg btn-info btn-outline dark">Info</button>
|
||
<button class="btn btn-lg btn-success btn-outline dark">Success</button>
|
||
<button class="btn btn-lg btn-warning btn-outline dark">Warning</button>
|
||
<button class="btn btn-lg btn-danger btn-outline dark">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-sm btn-outline dark">Default</button>
|
||
<button class="btn btn-sm btn-primary btn-outline dark">Primary</button>
|
||
<button class="btn btn-sm btn-info btn-outline dark">Info</button>
|
||
<button class="btn btn-sm btn-success btn-outline dark">Success</button>
|
||
<button class="btn btn-sm btn-warning btn-outline dark">Warning</button>
|
||
<button class="btn btn-sm btn-danger btn-outline dark">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-xs btn-outline dark">Default</button>
|
||
<button class="btn btn-xs btn-primary btn-outline dark">Primary</button>
|
||
<button class="btn btn-xs btn-info btn-outline dark">Info</button>
|
||
<button class="btn btn-xs btn-success btn-outline dark">Success</button>
|
||
<button class="btn btn-xs btn-warning btn-outline dark">Warning</button>
|
||
<button class="btn btn-xs btn-danger btn-outline dark">Danger</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.7. $FLAT_BUTTONS ============================================================================
|
||
|
||
Flat buttons
|
||
-->
|
||
<div class="row" style="margin-bottom: 0">
|
||
<a id="uidemo-buttons-flat" href="#uidemo-buttons-flat" class="header-2" style="border-top: none;">Flat buttons</a>
|
||
<div class="col-sm-12">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-flat">Default</button>
|
||
<button class="btn btn-primary btn-flat">Primary</button>
|
||
<button class="btn btn-info btn-flat">Info</button>
|
||
<button class="btn btn-success btn-flat">Success</button>
|
||
<button class="btn btn-warning btn-flat">Warning</button>
|
||
<button class="btn btn-danger btn-flat">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-lg btn-flat">Default</button>
|
||
<button class="btn btn-lg btn-primary btn-flat">Primary</button>
|
||
<button class="btn btn-lg btn-info btn-flat">Info</button>
|
||
<button class="btn btn-lg btn-success btn-flat">Success</button>
|
||
<button class="btn btn-lg btn-warning btn-flat">Warning</button>
|
||
<button class="btn btn-lg btn-danger btn-flat">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-sm btn-flat">Default</button>
|
||
<button class="btn btn-sm btn-primary btn-flat">Primary</button>
|
||
<button class="btn btn-sm btn-info btn-flat">Info</button>
|
||
<button class="btn btn-sm btn-success btn-flat">Success</button>
|
||
<button class="btn btn-sm btn-warning btn-flat">Warning</button>
|
||
<button class="btn btn-sm btn-danger btn-flat">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-xs btn-flat">Default</button>
|
||
<button class="btn btn-xs btn-primary btn-flat">Primary</button>
|
||
<button class="btn btn-xs btn-info btn-flat">Info</button>
|
||
<button class="btn btn-xs btn-success btn-flat">Success</button>
|
||
<button class="btn btn-xs btn-warning btn-flat">Warning</button>
|
||
<button class="btn btn-xs btn-danger btn-flat">Danger</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.8. $FLAT_OUTLINE_BUTTONS ====================================================================
|
||
|
||
Flat outline buttons
|
||
-->
|
||
<div class="row" style="margin-bottom: 0">
|
||
<a id="uidemo-buttons-flat-outline" href="#uidemo-buttons-flat-outline" class="header-2">Flat outline buttons</a>
|
||
<div class="col-sm-12">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-flat btn-outline">Default</button>
|
||
<button class="btn btn-primary btn-flat btn-outline">Primary</button>
|
||
<button class="btn btn-info btn-flat btn-outline">Info</button>
|
||
<button class="btn btn-success btn-flat btn-outline">Success</button>
|
||
<button class="btn btn-warning btn-flat btn-outline">Warning</button>
|
||
<button class="btn btn-danger btn-flat btn-outline">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-lg btn-flat btn-outline">Default</button>
|
||
<button class="btn btn-lg btn-primary btn-flat btn-outline">Primary</button>
|
||
<button class="btn btn-lg btn-info btn-flat btn-outline">Info</button>
|
||
<button class="btn btn-lg btn-success btn-flat btn-outline">Success</button>
|
||
<button class="btn btn-lg btn-warning btn-flat btn-outline">Warning</button>
|
||
<button class="btn btn-lg btn-danger btn-flat btn-outline">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-sm btn-flat btn-outline">Default</button>
|
||
<button class="btn btn-sm btn-primary btn-flat btn-outline">Primary</button>
|
||
<button class="btn btn-sm btn-info btn-flat btn-outline">Info</button>
|
||
<button class="btn btn-sm btn-success btn-flat btn-outline">Success</button>
|
||
<button class="btn btn-sm btn-warning btn-flat btn-outline">Warning</button>
|
||
<button class="btn btn-sm btn-danger btn-flat btn-outline">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-xs btn-flat btn-outline">Default</button>
|
||
<button class="btn btn-xs btn-primary btn-flat btn-outline">Primary</button>
|
||
<button class="btn btn-xs btn-info btn-flat btn-outline">Info</button>
|
||
<button class="btn btn-xs btn-success btn-flat btn-outline">Success</button>
|
||
<button class="btn btn-xs btn-warning btn-flat btn-outline">Warning</button>
|
||
<button class="btn btn-xs btn-danger btn-flat btn-outline">Danger</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.9. $ROUNDED_BUTTONS =========================================================================
|
||
|
||
Rounded buttons
|
||
-->
|
||
<div class="row" style="margin-bottom: 0">
|
||
<a id="uidemo-buttons-rounded" href="#uidemo-buttons-rounded" class="header-2">Rounded buttons</a>
|
||
<div class="col-sm-12">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-rounded">Default</button>
|
||
<button class="btn btn-primary btn-rounded">Primary</button>
|
||
<button class="btn btn-info btn-rounded">Info</button>
|
||
<button class="btn btn-success btn-rounded">Success</button>
|
||
<button class="btn btn-warning btn-rounded">Warning</button>
|
||
<button class="btn btn-danger btn-rounded">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-flat btn-rounded">Default</button>
|
||
<button class="btn btn-primary btn-flat btn-rounded">Primary</button>
|
||
<button class="btn btn-info btn-flat btn-rounded">Info</button>
|
||
<button class="btn btn-success btn-flat btn-rounded">Success</button>
|
||
<button class="btn btn-warning btn-flat btn-rounded">Warning</button>
|
||
<button class="btn btn-danger btn-flat btn-rounded">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-rounded btn-outline">Default</button>
|
||
<button class="btn btn-primary btn-rounded btn-outline">Primary</button>
|
||
<button class="btn btn-info btn-rounded btn-outline">Info</button>
|
||
<button class="btn btn-success btn-rounded btn-outline">Success</button>
|
||
<button class="btn btn-warning btn-rounded btn-outline">Warning</button>
|
||
<button class="btn btn-danger btn-rounded btn-outline">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-flat btn-outline btn-rounded">Default</button>
|
||
<button class="btn btn-primary btn-flat btn-outline btn-rounded">Primary</button>
|
||
<button class="btn btn-info btn-flat btn-outline btn-rounded">Info</button>
|
||
<button class="btn btn-success btn-flat btn-outline btn-rounded">Success</button>
|
||
<button class="btn btn-warning btn-flat btn-outline btn-rounded">Warning</button>
|
||
<button class="btn btn-danger btn-flat btn-outline btn-rounded">Danger</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.10. $DISABLED_BUTTONS =======================================================================
|
||
|
||
Disabled buttons
|
||
-->
|
||
<div class="row" style="margin-bottom: 0">
|
||
<a id="uidemo-buttons-disabled" href="#uidemo-buttons-disabled" class="header-2">Disabled buttons</a>
|
||
<div class="col-sm-12">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn disabled">Default</button>
|
||
<button class="btn btn-primary disabled">Primary</button>
|
||
<button class="btn btn-info disabled">Info</button>
|
||
<button class="btn btn-success disabled">Success</button>
|
||
<button class="btn btn-warning disabled">Warning</button>
|
||
<button class="btn btn-danger disabled">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-rounded disabled">Default</button>
|
||
<button class="btn btn-primary btn-rounded disabled">Primary</button>
|
||
<button class="btn btn-info btn-rounded disabled">Info</button>
|
||
<button class="btn btn-success btn-rounded disabled">Success</button>
|
||
<button class="btn btn-warning btn-rounded disabled">Warning</button>
|
||
<button class="btn btn-danger btn-rounded disabled">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-outline disabled">Default</button>
|
||
<button class="btn btn-primary btn-outline disabled">Primary</button>
|
||
<button class="btn btn-info btn-outline disabled">Info</button>
|
||
<button class="btn btn-success btn-outline disabled">Success</button>
|
||
<button class="btn btn-warning btn-outline disabled">Warning</button>
|
||
<button class="btn btn-danger btn-outline disabled">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-outline btn-rounded disabled">Default</button>
|
||
<button class="btn btn-primary btn-outline btn-rounded disabled">Primary</button>
|
||
<button class="btn btn-info btn-outline btn-rounded disabled">Info</button>
|
||
<button class="btn btn-success btn-outline btn-rounded disabled">Success</button>
|
||
<button class="btn btn-warning btn-outline btn-rounded disabled">Warning</button>
|
||
<button class="btn btn-danger btn-outline btn-rounded disabled">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-flat disabled">Default</button>
|
||
<button class="btn btn-primary btn-flat disabled">Primary</button>
|
||
<button class="btn btn-info btn-flat disabled">Info</button>
|
||
<button class="btn btn-success btn-flat disabled">Success</button>
|
||
<button class="btn btn-warning btn-flat disabled">Warning</button>
|
||
<button class="btn btn-danger btn-flat disabled">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-flat btn-rounded disabled">Default</button>
|
||
<button class="btn btn-primary btn-flat btn-rounded disabled">Primary</button>
|
||
<button class="btn btn-info btn-flat btn-rounded disabled">Info</button>
|
||
<button class="btn btn-success btn-flat btn-rounded disabled">Success</button>
|
||
<button class="btn btn-warning btn-flat btn-rounded disabled">Warning</button>
|
||
<button class="btn btn-danger btn-flat btn-rounded disabled">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-flat btn-outline disabled">Default</button>
|
||
<button class="btn btn-primary btn-flat btn-outline disabled">Primary</button>
|
||
<button class="btn btn-info btn-flat btn-outline disabled">Info</button>
|
||
<button class="btn btn-success btn-flat btn-outline disabled">Success</button>
|
||
<button class="btn btn-warning btn-flat btn-outline disabled">Warning</button>
|
||
<button class="btn btn-danger btn-flat btn-outline disabled">Danger</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<button class="btn btn-flat btn-outline btn-rounded disabled">Default</button>
|
||
<button class="btn btn-primary btn-flat btn-outline btn-rounded disabled">Primary</button>
|
||
<button class="btn btn-info btn-flat btn-outline btn-rounded disabled">Info</button>
|
||
<button class="btn btn-success btn-flat btn-outline btn-rounded disabled">Success</button>
|
||
<button class="btn btn-warning btn-flat btn-outline btn-rounded disabled">Warning</button>
|
||
<button class="btn btn-danger btn-flat btn-outline btn-rounded disabled">Danger</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.11. $STATE_BUTTONS ==========================================================================
|
||
|
||
State buttons
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#loading-example-btn').click(function () {
|
||
var btn = $(this);
|
||
btn.button('loading');
|
||
setTimeout(function () {
|
||
btn.button('reset');
|
||
}, 1500);
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-buttons-state" href="#uidemo-buttons-state" class="header-2">State buttons</a>
|
||
<div class="col-sm-12">
|
||
<button type="button" id="loading-example-btn" data-loading-text="Loading..." class="btn btn-primary">Loading state</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.12. $SINGLE_TOGGLE_BUTTONS ==================================================================
|
||
|
||
Single toggle buttons
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-buttons-single-toggle" href="#uidemo-buttons-single-toggle" class="header-2">Single toggle buttons</a>
|
||
<div class="col-sm-12">
|
||
<button type="button" class="btn btn-primary" data-toggle="button">Single toggle</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.13. $CHECKBOX_BUTTONS =======================================================================
|
||
|
||
Checkbox buttons
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-buttons-checkbox" href="#uidemo-buttons-checkbox" class="header-2">Checkbox buttons</a>
|
||
<div class="col-sm-12">
|
||
<div class="btn-group" data-toggle="buttons">
|
||
<label class="btn btn-primary">
|
||
<input type="checkbox"> Option 1
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="checkbox"> Option 2
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="checkbox"> Option 3
|
||
</label>
|
||
</div> <!-- / .btn-group -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.14. $RADIO_BUTTONS ==========================================================================
|
||
|
||
Radio buttons
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-buttons-radio" href="#uidemo-buttons-radio" class="header-2">Radio buttons</a>
|
||
<div class="col-sm-12">
|
||
<div class="btn-group" data-toggle="buttons">
|
||
<label class="btn btn-success">
|
||
<input type="radio" name="options" id="option1"> Option 1
|
||
</label>
|
||
<label class="btn btn-success">
|
||
<input type="radio" name="options" id="option2"> Option 2
|
||
</label>
|
||
<label class="btn btn-success">
|
||
<input type="radio" name="options" id="option3"> Option 3
|
||
</label>
|
||
</div> <!-- / .btn-group -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 8.15. $BUTTONS_WITH_LABEL =====================================================================
|
||
|
||
Buttons with label
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-buttons-w-label" href="#uidemo-buttons-w-label" class="header-2">Buttons with label</a>
|
||
<div class="col-sm-12">
|
||
<!-- Default buttons -->
|
||
<button class="btn btn-lg btn-labeled"><span class="btn-label icon fa fa-camera-retro"></span>Large</button>
|
||
<button class="btn btn-labeled btn-primary"><span class="btn-label icon fa fa-camera-retro"></span>Default</button>
|
||
<button class="btn btn-sm btn-labeled btn-success"><span class="btn-label icon fa fa-camera-retro"></span>Small</button>
|
||
<button class="btn btn-xs btn-labeled btn-danger"><span class="btn-label icon fa fa-camera-retro"></span>Extra small</button>
|
||
|
||
<br><br>
|
||
|
||
<!-- Outline buttons -->
|
||
<button class="btn btn-outline btn-lg btn-labeled"><span class="btn-label icon fa fa-camera-retro"></span>Large</button>
|
||
<button class="btn btn-outline btn-labeled btn-primary"><span class="btn-label icon fa fa-camera-retro"></span>Default</button>
|
||
<button class="btn btn-outline btn-sm btn-labeled btn-success"><span class="btn-label icon fa fa-camera-retro"></span>Small</button>
|
||
<button class="btn btn-outline btn-xs btn-labeled btn-danger"><span class="btn-label icon fa fa-camera-retro"></span>Extra small</button>
|
||
|
||
<br><br>
|
||
|
||
<!-- Flat buttons -->
|
||
<button class="btn btn-flat btn-lg btn-labeled"><span class="btn-label icon fa fa-camera-retro"></span>Large</button>
|
||
<button class="btn btn-flat btn-labeled btn-primary"><span class="btn-label icon fa fa-camera-retro"></span>Default</button>
|
||
<button class="btn btn-flat btn-sm btn-labeled btn-success"><span class="btn-label icon fa fa-camera-retro"></span>Small</button>
|
||
<button class="btn btn-flat btn-xs btn-labeled btn-danger"><span class="btn-label icon fa fa-camera-retro"></span>Extra small</button>
|
||
|
||
<br><br>
|
||
|
||
<!-- Rounded buttons -->
|
||
<button class="btn btn-rounded btn-lg btn-labeled"><span class="btn-label icon fa fa-camera-retro"></span>Large</button>
|
||
<button class="btn btn-rounded btn-labeled btn-primary"><span class="btn-label icon fa fa-camera-retro"></span>Default</button>
|
||
<button class="btn btn-rounded btn-sm btn-labeled btn-success"><span class="btn-label icon fa fa-camera-retro"></span>Small</button>
|
||
<button class="btn btn-rounded btn-xs btn-labeled btn-danger"><span class="btn-label icon fa fa-camera-retro"></span>Extra small</button>
|
||
|
||
<br><br>
|
||
|
||
<!-- Block buttons -->
|
||
<button class="btn btn-labeled btn-block"><span class="btn-label">Text label</span>Block button</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- /8. $BUTTONS -->
|
||
|
||
<!-- 9. $BUTTON_GROUPS =============================================================================
|
||
|
||
Button groups
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-button-groups" href="#uidemo-button-groups" class="header-1">Button groups</a>
|
||
</div>
|
||
|
||
<!-- Styles -->
|
||
<style>
|
||
.button-groups-sizes-demo .btn-toolbar { margin-bottom: 15px; }
|
||
.button-groups-sizes-demo .btn-toolbar:last-child { margin-bottom: 0; }
|
||
</style>
|
||
<!-- / Styles -->
|
||
|
||
<!-- 9.1. $DEFAULT_BUTTON_GROUPS ===================================================================
|
||
|
||
Default button groups
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-button-groups-default" href="#uidemo-button-groups-default" class="header-2">Default button groups</a>
|
||
<div class="col-sm-12 button-groups-sizes-demo">
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn">Left</button>
|
||
<button type="button" class="btn">Middle</button>
|
||
<button type="button" class="btn">Right</button>
|
||
<div class="btn-group">
|
||
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Dropdown link</a></li>
|
||
<li><a href="#">Dropdown link</a></li>
|
||
</ul>
|
||
</div>
|
||
</div> <!-- / .btn-group -->
|
||
</div> <!-- / .btn-toolbar -->
|
||
|
||
<!-- Outline buttons -->
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-outline">Left</button>
|
||
<button type="button" class="btn btn-outline">Middle</button>
|
||
<button type="button" class="btn btn-outline">Right</button>
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-outline dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Dropdown link</a></li>
|
||
<li><a href="#">Dropdown link</a></li>
|
||
</ul>
|
||
</div>
|
||
</div> <!-- / .btn-group -->
|
||
</div> <!-- / .btn-toolbar -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 9.2. $BUTTON_GROUPS_TOOLBAR ===================================================================
|
||
|
||
Button toolbar
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-button-groups-toolbar" href="#uidemo-button-groups-toolbar" class="header-2">Button toolbar</a>
|
||
<div class="col-sm-12 button-groups-sizes-demo">
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn">1</button>
|
||
<button type="button" class="btn">2</button>
|
||
<button type="button" class="btn">3</button>
|
||
<button type="button" class="btn">4</button>
|
||
</div>
|
||
<div class="btn-group">
|
||
<button type="button" class="btn">5</button>
|
||
<button type="button" class="btn">6</button>
|
||
<button type="button" class="btn">7</button>
|
||
</div>
|
||
<div class="btn-group">
|
||
<button type="button" class="btn">8</button>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-outline">1</button>
|
||
<button type="button" class="btn btn-outline">2</button>
|
||
<button type="button" class="btn btn-outline">3</button>
|
||
<button type="button" class="btn btn-outline">4</button>
|
||
</div>
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-outline">5</button>
|
||
<button type="button" class="btn btn-outline">6</button>
|
||
<button type="button" class="btn btn-outline">7</button>
|
||
</div>
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-outline">8</button>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 9.3. $BUTTON_GROUP_SIZES ======================================================================
|
||
|
||
Button group sizes
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-button-groups-sizes" href="#uidemo-button-groups-sizes" class="header-2">Button group sizes</a>
|
||
<div class="col-sm-12 button-groups-sizes-demo">
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group btn-group-lg">
|
||
<button type="button" class="btn">Left</button>
|
||
<button type="button" class="btn">Middle</button>
|
||
<button type="button" class="btn">Right</button>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn">Left</button>
|
||
<button type="button" class="btn">Middle</button>
|
||
<button type="button" class="btn">Right</button>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group btn-group-sm">
|
||
<button type="button" class="btn">Left</button>
|
||
<button type="button" class="btn">Middle</button>
|
||
<button type="button" class="btn">Right</button>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group btn-group-xs">
|
||
<button type="button" class="btn">Left</button>
|
||
<button type="button" class="btn">Middle</button>
|
||
<button type="button" class="btn">Right</button>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 9.4. $VERTICAL_BUTTON_GROUPS ==================================================================
|
||
|
||
Vertical button groups
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-button-groups-vertical" href="#uidemo-button-groups-vertical" class="header-2">Vertical button groups</a>
|
||
<div class="col-sm-12">
|
||
<div class="btn-group-vertical">
|
||
<button type="button" class="btn">Button</button>
|
||
<button type="button" class="btn">Button</button>
|
||
<div class="btn-group">
|
||
<button id="btnGroupVerticalDrop1" type="button" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
|
||
<li><a href="#">Dropdown link</a></li>
|
||
<li><a href="#">Dropdown link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
<button type="button" class="btn">Button</button>
|
||
<button type="button" class="btn">Button</button>
|
||
<div class="btn-group">
|
||
<button id="btnGroupVerticalDrop2" type="button" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
|
||
<li><a href="#">Dropdown link</a></li>
|
||
<li><a href="#">Dropdown link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
<div class="btn-group">
|
||
<button id="btnGroupVerticalDrop3" type="button" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
|
||
<li><a href="#">Dropdown link</a></li>
|
||
<li><a href="#">Dropdown link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
<div class="btn-group">
|
||
<button id="btnGroupVerticalDrop4" type="button" class="btn dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
|
||
<li><a href="#">Dropdown link</a></li>
|
||
<li><a href="#">Dropdown link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
</div> <!-- / .btn-group-vertical -->
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 9.5. $BUTTON_GROUP_COLORS =====================================================================
|
||
|
||
Button group colors
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-button-groups-colors" href="#uidemo-button-groups-colors" class="header-2">Button group colors</a>
|
||
<div class="col-sm-12 button-groups-sizes-demo">
|
||
<!-- Primary -->
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-primary">Left</button>
|
||
<button type="button" class="btn btn-primary">Middle</button>
|
||
<button type="button" class="btn btn-primary">Right</button>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
|
||
<!-- Danger -->
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-danger">Left</button>
|
||
<button type="button" class="btn btn-danger">Middle</button>
|
||
<button type="button" class="btn btn-danger">Right</button>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
|
||
<!-- Warning -->
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-warning">Left</button>
|
||
<button type="button" class="btn btn-warning">Middle</button>
|
||
<button type="button" class="btn btn-warning">Right</button>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
|
||
<!-- Success -->
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-success">Left</button>
|
||
<button type="button" class="btn btn-success">Middle</button>
|
||
<button type="button" class="btn btn-success">Right</button>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
|
||
<!-- Info -->
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-info">Left</button>
|
||
<button type="button" class="btn btn-info">Middle</button>
|
||
<button type="button" class="btn btn-info">Right</button>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
|
||
<!-- Mixed -->
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-primary">Left</button>
|
||
<button type="button" class="btn btn-warning">Middle</button>
|
||
<button type="button" class="btn btn-danger">Right</button>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 9.6. $BUTTON_GROUP_JUSTIFIED ==================================================================
|
||
|
||
Button group justified
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-button-groups-justified" href="#uidemo-button-groups-justified" class="header-2">Button group justified</a>
|
||
<div class="col-sm-12 button-groups-sizes-demo">
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group btn-group-justified btn-group-lg">
|
||
<a href="#" class="btn">Left</a>
|
||
<a href="#" class="btn">Middle</a>
|
||
<a href="#" class="btn">Right</a>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group btn-group-justified">
|
||
<a href="#" class="btn">Left</a>
|
||
<a href="#" class="btn">Middle</a>
|
||
<a href="#" class="btn">Right</a>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group btn-group-justified btn-group-sm">
|
||
<a href="#" class="btn">Left</a>
|
||
<a href="#" class="btn">Middle</a>
|
||
<a href="#" class="btn">Right</a>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
|
||
<div class="btn-toolbar" role="toolbar">
|
||
<div class="btn-group btn-group-justified btn-group-xs">
|
||
<a href="#" class="btn">Left</a>
|
||
<a href="#" class="btn">Middle</a>
|
||
<a href="#" class="btn">Right</a>
|
||
</div>
|
||
</div> <!-- / .btn-toolbar -->
|
||
</div>
|
||
</div>
|
||
<!-- /9. $BUTTON_GROUPS -->
|
||
|
||
<!-- 10. $BUTTON_DROPDOWNS =========================================================================
|
||
|
||
Button dropdowns
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-button-dropdowns" href="#uidemo-button-dropdowns" class="header-1">Button dropdowns</a>
|
||
</div>
|
||
|
||
<!-- 10.1. $SINGLE_BUTTON_DROPDOWNS ================================================================
|
||
|
||
Single button dropdowns
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-button-dropdowns-single" href="#uidemo-button-dropdowns-single" class="header-2">Single button dropdowns</a>
|
||
<div class="col-sm-12">
|
||
<div class="btn-toolbar">
|
||
|
||
<!-- Default -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Default <i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
|
||
<!-- Primary -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Primary <i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
|
||
<!-- Danger -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Danger <i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
|
||
<!-- Warning -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">Warning <i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
|
||
<!-- Success -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">Success <i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
|
||
<!-- Info -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Info <i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 10.2. $SPLIT_BUTTON_DROPDOWNS =================================================================
|
||
|
||
Split button dropdowns
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-button-dropdowns-split" href="#uidemo-button-dropdowns-split" class="header-2">Split button dropdowns</a>
|
||
<div class="col-sm-12">
|
||
<div class="btn-toolbar" style="margin: 0;">
|
||
<!-- Default -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn">Default</button>
|
||
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
|
||
<!-- Primary -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-primary">Primary</button>
|
||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
|
||
<!-- Danger -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-danger">Danger</button>
|
||
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
|
||
<!-- Warning -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-warning">Warning</button>
|
||
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
|
||
<!-- Success -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-success">Success</button>
|
||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
|
||
<!-- Info -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-info">Info</button>
|
||
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 10.3. $DROPDOWN_BUTTON_SIZES ==================================================================
|
||
|
||
Dropdown button sizes
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-button-dropdowns-sizes" href="#uidemo-button-dropdowns-sizes" class="header-2">Dropdown button sizes</a>
|
||
<div class="col-sm-12 button-groups-sizes-demo">
|
||
<!-- Buttons -->
|
||
<div class="btn-toolbar">
|
||
<div class="btn-group">
|
||
<button class="btn btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
|
||
Large button <i class="fa fa-caret-down"></i>
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
<div class="btn-group">
|
||
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
|
||
Default button <i class="fa fa-caret-down"></i>
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
<div class="btn-group">
|
||
<button class="btn btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
|
||
Small button <i class="fa fa-caret-down"></i>
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
<div class="btn-group">
|
||
<button class="btn btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
|
||
Extra small button <i class="fa fa-caret-down"></i>
|
||
</button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li class="dropdown-header">Some header</li>
|
||
<li><a href="#">Separated link123</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
</div>
|
||
<!-- / Buttons -->
|
||
|
||
<!-- Button groups -->
|
||
<div class="btn-toolbar">
|
||
<div class="btn-group btn-group-lg">
|
||
<button type="button" class="btn">Large button</button>
|
||
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
<div class="btn-group">
|
||
<button type="button" class="btn">Default button</button>
|
||
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
<div class="btn-group btn-group-sm">
|
||
<button type="button" class="btn">Small button</button>
|
||
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
<div class="btn-group btn-group-xs">
|
||
<button type="button" class="btn">Extra small button</button>
|
||
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
</div>
|
||
<!-- / Button groups -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 10.4. $DROPUP =================================================================================
|
||
|
||
Dropup
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-button-dropdowns-dropup" href="#uidemo-button-dropdowns-dropup" class="header-2">Dropup</a>
|
||
<div class="col-sm-12">
|
||
<div class="btn-toolbar">
|
||
<div class="btn-group dropup">
|
||
<button type="button" class="btn btn-default">Dropup</button>
|
||
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-up"></i></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
<div class="btn-group dropup">
|
||
<button type="button" class="btn btn-primary">Right dropup</button>
|
||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-up"></i></button>
|
||
<ul class="dropdown-menu pull-right">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul>
|
||
</div> <!-- / .btn-group -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /10. $BUTTON_DROPDOWNS -->
|
||
|
||
<!-- 11. $PROGRESS_BARS ============================================================================
|
||
|
||
Progress Bars
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-progress-bars" href="#uidemo-progress-bars" class="header-1">Progress Bars</a>
|
||
</div>
|
||
|
||
<!-- 11.1. $DEFAULT_PROGRESS_BARS ==================================================================
|
||
|
||
Default progress bars
|
||
-->
|
||
<div class="row" style="margin-bottom: 0">
|
||
<a id="uidemo-progress-bars-default" href="#uidemo-progress-bars-default" class="header-2">Default progress bars</a>
|
||
<div class="col-sm-12">
|
||
<div class="progress"><div class="progress-bar" style="width: 60%;"></div></div>
|
||
<div class="progress"><div class="progress-bar progress-bar-info" style="width: 60%;"></div></div>
|
||
<div class="progress"><div class="progress-bar progress-bar-success" style="width: 60%;"></div></div>
|
||
<div class="progress"><div class="progress-bar progress-bar-warning" style="width: 60%;"></div></div>
|
||
<div class="progress"><div class="progress-bar progress-bar-danger" style="width: 60%;"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 11.2. $STRIPED_PROGRESS_BARS ==================================================================
|
||
|
||
Striped progress bars
|
||
-->
|
||
<div class="row" style="margin-bottom: 0">
|
||
<a id="uidemo-progress-bars-striped" href="#uidemo-progress-bars-striped" class="header-2">Striped progress bars</a>
|
||
<div class="col-sm-12">
|
||
<div class="progress progress-striped"><div class="progress-bar" style="width: 60%;"></div></div>
|
||
<div class="progress progress-striped"><div class="progress-bar progress-bar-info" style="width: 60%;"></div></div>
|
||
<div class="progress progress-striped"><div class="progress-bar progress-bar-success" style="width: 60%;"></div></div>
|
||
<div class="progress progress-striped"><div class="progress-bar progress-bar-warning" style="width: 60%;"></div></div>
|
||
<div class="progress progress-striped"><div class="progress-bar progress-bar-danger" style="width: 60%;"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 11.3. $STRIPED_ANIMATED_PROGRESS_BARS =========================================================
|
||
|
||
Striped animated progress bars
|
||
-->
|
||
<div class="row" style="margin-bottom: 0">
|
||
<a id="uidemo-progress-bars-striped-animated" href="#uidemo-progress-bars-striped-animated" class="header-2">Striped animated progress bars</a>
|
||
<div class="col-sm-12">
|
||
<div class="progress progress-striped active"><div class="progress-bar" style="width: 60%;"></div></div>
|
||
<div class="progress progress-striped active"><div class="progress-bar progress-bar-info" style="width: 60%;"></div></div>
|
||
<div class="progress progress-striped active"><div class="progress-bar progress-bar-success" style="width: 60%;"></div></div>
|
||
<div class="progress progress-striped active"><div class="progress-bar progress-bar-warning" style="width: 60%;"></div></div>
|
||
<div class="progress progress-striped active"><div class="progress-bar progress-bar-danger" style="width: 60%;"></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 11.4. $STACKED_PROGRESS_BARS ==================================================================
|
||
|
||
Stacked progress bars
|
||
-->
|
||
<div class="row" style="margin-bottom: 0">
|
||
<a id="uidemo-progress-bars-stacked" href="#uidemo-progress-bars-stacked" class="header-2">Stacked progress bars</a>
|
||
<div class="col-sm-12">
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
|
||
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
|
||
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /11. $PROGRESS_BARS -->
|
||
|
||
<!-- 12. $DROPDOWNS ================================================================================
|
||
|
||
Dropdowns
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-dropdowns" href="#uidemo-dropdowns" class="header-1">Dropdowns</a>
|
||
</div>
|
||
|
||
<!-- Styles -->
|
||
<style>
|
||
.right-to-left .dropdowns-demo { float: right; }
|
||
</style>
|
||
<!-- / Styles -->
|
||
|
||
<!-- 12.1. $DEFAULT_DROPDOWNS ======================================================================
|
||
|
||
Default dropdowns
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-dropdowns-default" href="#uidemo-dropdowns-default" class="header-2">Default dropdowns</a>
|
||
<div class="col-sm-12">
|
||
<ul class="dropdown-menu dropdowns-demo" style="display: block; position: relative;">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 12.2. $DROPDOWN_COMPONENTS ====================================================================
|
||
|
||
Dropdown components
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-dropdowns-components" href="#uidemo-dropdowns-components" class="header-2">Dropdown components</a>
|
||
<div class="col-sm-12">
|
||
<ul class="dropdown-menu dropdowns-demo" style="display: block; position: relative;">
|
||
<li><a href="#"><span class="label label-success pull-right">34</span>Action</a></li>
|
||
<li><a href="#"><span class="badge badge-info pull-right">16</span>Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li class="dropdown-header">Dropdown header</li>
|
||
<li><a href="#"><i class="dropdown-icon fa fa-cloud"></i> With icon</a></li>
|
||
<li><a href="#">Last action</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- /12. $DROPDOWNS -->
|
||
|
||
<!-- 13. $TABS =====================================================================================
|
||
|
||
Tabs
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tabs" href="#uidemo-tabs" class="header-1">Tabs</a>
|
||
</div>
|
||
|
||
<!-- 13.1. $DEFAULT_TABS ===========================================================================
|
||
|
||
Default tabs
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tabs-default" href="#uidemo-tabs-default" class="header-2">Default tabs</a>
|
||
<div class="col-sm-12">
|
||
<ul id="uidemo-tabs-default-demo" class="nav nav-tabs">
|
||
<li class="active">
|
||
<a href="#uidemo-tabs-default-demo-home" data-toggle="tab">Home <span class="label label-success">12</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#uidemo-tabs-default-demo-profile" data-toggle="tab">Profile <span class="badge badge-primary">12</span></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#uidemo-tabs-default-demo-dropdown1" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#uidemo-tabs-default-demo-dropdown2" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li> <!-- / .dropdown -->
|
||
</ul>
|
||
|
||
<div class="tab-content tab-content-bordered">
|
||
<div class="tab-pane fade in active" id="uidemo-tabs-default-demo-home">
|
||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
|
||
</div> <!-- / .tab-pane -->
|
||
<div class="tab-pane fade" id="uidemo-tabs-default-demo-profile">
|
||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.</p>
|
||
</div> <!-- / .tab-pane -->
|
||
<div class="tab-pane fade" id="uidemo-tabs-default-demo-dropdown1">
|
||
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.</p>
|
||
</div> <!-- / .tab-pane -->
|
||
<div class="tab-pane fade" id="uidemo-tabs-default-demo-dropdown2">
|
||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.</p>
|
||
</div> <!-- / .tab-pane -->
|
||
</div> <!-- / .tab-content -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 13.2. $TAB_SIZES ==============================================================================
|
||
|
||
Tab sizes
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tabs-sizes" href="#uidemo-tabs-sizes" class="header-2">Tab sizes</a>
|
||
<div class="col-sm-12">
|
||
<!-- Small tabs -->
|
||
<ul class="nav nav-tabs nav-tabs-sm">
|
||
<li class="active">
|
||
<a href="#" data-toggle="tab">Home <span class="label label-success">12</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="tab">Profile <span class="badge badge-info">12</span></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li> <!-- / .dropdown -->
|
||
</ul> <!-- / .nav -->
|
||
<!-- / Small tabs -->
|
||
|
||
<!-- Extra small tabs -->
|
||
<ul class="nav nav-tabs nav-tabs-xs" style="margin-top: 20px">
|
||
<li class="active">
|
||
<a href="#" data-toggle="tab">Home <span class="label label-warning">12</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="tab">Profile <span class="badge badge-danger">12</span></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li> <!-- / .dropdown -->
|
||
</ul> <!-- / .nav -->
|
||
<!-- / Extra small tabs -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 13.3. $SIMPLE_TABS ============================================================================
|
||
|
||
Simple tabs
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tabs-simple" href="#uidemo-tabs-simple" class="header-2">Simple tabs</a>
|
||
<div class="col-sm-12">
|
||
<!-- Default tabs -->
|
||
<ul class="nav nav-tabs nav-tabs-simple">
|
||
<li class="active">
|
||
<a href="#" data-toggle="tab">Home <span class="label label-success">12</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="tab">Profile <span class="badge badge-info">12</span></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li> <!-- / .dropdown -->
|
||
</ul> <!-- / .nav -->
|
||
<!-- / Default tabs -->
|
||
|
||
<!-- Small tabs -->
|
||
<ul class="nav nav-tabs nav-tabs-simple nav-tabs-sm" style="margin-top: 20px">
|
||
<li class="active">
|
||
<a href="#" data-toggle="tab">Home <span class="label label-success">12</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="tab">Profile <span class="badge badge-info">12</span></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li> <!-- / .dropdown -->
|
||
</ul> <!-- / .nav -->
|
||
<!-- / Small tabs -->
|
||
|
||
<!-- Extra small tabs -->
|
||
<ul class="nav nav-tabs nav-tabs-simple nav-tabs-xs" style="margin-top: 20px">
|
||
<li class="active">
|
||
<a href="#" data-toggle="tab">Home <span class="label label-warning">12</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="tab">Profile <span class="badge badge-danger">12</span></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li> <!-- / .dropdown -->
|
||
</ul> <!-- / .nav -->
|
||
<!-- / Extra small tabs -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 13.4. $JUSTIFIED_TABS =========================================================================
|
||
|
||
Justified tabs
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tabs-justified" href="#uidemo-tabs-justified" class="header-2">Justified tabs</a>
|
||
<div class="col-sm-12">
|
||
|
||
<!-- Default tabs ============================================================== -->
|
||
|
||
<ul class="nav nav-tabs nav-justified">
|
||
<li class="active">
|
||
<a href="#" data-toggle="tab">Home <span class="label label-success">12</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="tab">Profile <span class="badge badge-info">12</span></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li> <!-- / .dropdown -->
|
||
</ul> <!-- / .nav -->
|
||
|
||
<!-- Small tabs -->
|
||
<ul class="nav nav-tabs nav-tabs-sm nav-justified" style="margin-top: 20px">
|
||
<li class="active">
|
||
<a href="#" data-toggle="tab">Home <span class="label label-success">12</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="tab">Profile <span class="badge badge-info">12</span></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li> <!-- / .dropdown -->
|
||
</ul> <!-- / .nav -->
|
||
<!-- / Small tabs -->
|
||
|
||
<!-- Extra small tabs -->
|
||
<ul class="nav nav-tabs nav-tabs-xs nav-justified" style="margin-top: 20px">
|
||
<li class="active">
|
||
<a href="#" data-toggle="tab">Home <span class="label label-warning">12</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="tab">Profile <span class="badge badge-danger">12</span></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li> <!-- / .dropdown -->
|
||
</ul> <!-- / .nav -->
|
||
<!-- / Extra small tabs -->
|
||
|
||
|
||
<!-- Simple tabs ============================================================== -->
|
||
|
||
<ul class="nav nav-tabs nav-tabs-simple nav-justified" style="margin-top: 20px">
|
||
<li class="active">
|
||
<a href="#" data-toggle="tab">Home <span class="label label-success">12</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="tab">Profile <span class="badge badge-info">12</span></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li> <!-- / .dropdown -->
|
||
</ul> <!-- / .nav -->
|
||
|
||
<!-- Small tabs -->
|
||
<ul class="nav nav-tabs nav-tabs-simple nav-tabs-sm nav-justified" style="margin-top: 20px">
|
||
<li class="active">
|
||
<a href="#" data-toggle="tab">Home <span class="label label-success">12</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="tab">Profile <span class="badge badge-info">12</span></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li> <!-- / .dropdown -->
|
||
</ul> <!-- / .nav -->
|
||
<!-- / Small tabs -->
|
||
|
||
<!-- Extra small tabs -->
|
||
<ul class="nav nav-tabs nav-tabs-simple nav-tabs-xs nav-justified" style="margin-top: 20px">
|
||
<li class="active">
|
||
<a href="#" data-toggle="tab">Home <span class="label label-warning">12</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="tab">Profile <span class="badge badge-danger">12</span></a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <i class="fa fa-caret-down"></i></a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#" data-toggle="tab">@fat</a></li>
|
||
<li><a href="#" data-toggle="tab">@mdo</a></li>
|
||
</ul>
|
||
</li> <!-- / .dropdown -->
|
||
</ul> <!-- / .nav -->
|
||
</div>
|
||
</div>
|
||
<!-- /13. $TABS -->
|
||
|
||
<!-- 14. $PILLS ====================================================================================
|
||
|
||
Pills
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-pills" href="#uidemo-pills" class="header-1">Pills</a>
|
||
</div>
|
||
|
||
<!-- 14.1. $DEFAULT_PILLS ==========================================================================
|
||
|
||
Default pills
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-pills-default" href="#uidemo-pills-default" class="header-2">Default pills</a>
|
||
<div class="col-sm-12">
|
||
<ul class="nav nav-pills">
|
||
<li class="active"><a href="#">Home<span class="label label-warning">14</span></a></li>
|
||
<li><a href="#">Help<span class="badge badge-danger">16</span></a></li>
|
||
<li class="dropdown">
|
||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||
Dropdown <i class="fa fa-caret-down"></i>
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul> <!-- / .dropdown-menu -->
|
||
</li> <!-- / .dropdown -->
|
||
</ul> <!-- / .nav -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 14.2. $STACKED_PILLS ==========================================================================
|
||
|
||
Stacked pills
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-pills-stacked" href="#uidemo-pills-stacked" class="header-2">Stacked pills</a>
|
||
<div class="col-sm-12">
|
||
<ul class="nav nav-pills nav-stacked">
|
||
<li class="active"><a href="#">Home<span class="label label-warning">14</span></a></li>
|
||
<li><a href="#">Help<span class="badge badge-danger">16</span></a></li>
|
||
<li class="dropdown">
|
||
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
||
Dropdown <i class="fa fa-caret-down"></i>
|
||
</a>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul> <!-- / .dropdown-menu -->
|
||
</li> <!-- / .dropdown -->
|
||
</ul> <!-- / .nav -->
|
||
</div>
|
||
</div>
|
||
<!-- /14. $PILLS -->
|
||
|
||
<!-- 15. $PAGINATION ===============================================================================
|
||
|
||
Pagination
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-pagination" href="#uidemo-pagination" class="header-1">Pagination</a>
|
||
</div>
|
||
|
||
<!-- Styles -->
|
||
<style>
|
||
.pagination-demo { margin-bottom: 0; }
|
||
.pagination-demo .pagination { margin-top: 0; }
|
||
.pagination-demo .pager { margin-top: 0; }
|
||
</style>
|
||
<!-- / Styles -->
|
||
|
||
<!-- 15.1. $DEFAULT_PAGINATION =====================================================================
|
||
|
||
Default pagination
|
||
-->
|
||
<div class="row pagination-demo">
|
||
<a id="uidemo-pagination-default" href="#uidemo-pagination-default" class="header-2">Default pagination</a>
|
||
<div class="col-sm-12">
|
||
<ul class="pagination">
|
||
<li><a href="#">«</a></li>
|
||
<li><a href="#">1</a></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>
|
||
</div>
|
||
|
||
<!-- 15.2. $PAGINATION_STATES ======================================================================
|
||
|
||
Disabled and active states
|
||
-->
|
||
<div class="row pagination-demo">
|
||
<a id="uidemo-pagination-states" href="#uidemo-pagination-states" class="header-2">Disabled and active states</a>
|
||
<div class="col-sm-12">
|
||
<ul class="pagination">
|
||
<li class="disabled"><a href="#">«</a></li>
|
||
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></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>
|
||
</div>
|
||
|
||
<!-- 15.3. $PAGINATION_SIZES =======================================================================
|
||
|
||
Pagination sizes
|
||
-->
|
||
<div class="row pagination-demo">
|
||
<a id="uidemo-pagination-sizes" href="#uidemo-pagination-sizes" class="header-2">Pagination sizes</a>
|
||
<div class="col-sm-12">
|
||
<div>
|
||
<ul class="pagination pagination-lg">
|
||
<li><a href="#">«</a></li>
|
||
<li><a href="#">1</a></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>
|
||
<div>
|
||
<ul class="pagination">
|
||
<li><a href="#">«</a></li>
|
||
<li><a href="#">1</a></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>
|
||
<div>
|
||
<ul class="pagination pagination-sm">
|
||
<li><a href="#">«</a></li>
|
||
<li><a href="#">1</a></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>
|
||
<div>
|
||
<ul class="pagination pagination-xs">
|
||
<li><a href="#">«</a></li>
|
||
<li><a href="#">1</a></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>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 15.4. $PAGINATION_PAGER =======================================================================
|
||
|
||
Pager
|
||
-->
|
||
<div class="row pagination-demo">
|
||
<a id="uidemo-pagination-pager" href="#uidemo-pagination-pager" class="header-2">Pager</a>
|
||
<div class="col-sm-12">
|
||
<ul class="pager">
|
||
<li class="disabled"><a href="#">← Older</a></li>
|
||
<li><a href="#">Newer →</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 15.5. $PAGINATION_ALIGNED_PAGER ===============================================================
|
||
|
||
Aligned pager links
|
||
-->
|
||
<div class="row pagination-demo">
|
||
<a id="uidemo-pagination-pager-aligned" href="#uidemo-pagination-pager-aligned" class="header-2">Aligned pager links</a>
|
||
<div class="col-sm-12">
|
||
<ul class="pager">
|
||
<li class="previous"><a href="#">← Older</a></li>
|
||
<li class="next"><a href="#">Newer →</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 16. $TABLES ===================================================================================
|
||
|
||
Tables
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tables" href="#uidemo-tables" class="header-1">Tables</a>
|
||
</div>
|
||
|
||
<!-- 16.1. $DEFAULT_TABLES =========================================================================
|
||
|
||
Default tables
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tables-default" href="#uidemo-tables-default" class="header-2">Default tables</a>
|
||
<div class="col-sm-12">
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 16.2. $STRIPED_TABLES =========================================================================
|
||
|
||
Striped tables
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tables-striped" href="#uidemo-tables-striped" class="header-2">Striped tables</a>
|
||
<div class="col-sm-12">
|
||
<table class="table table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 16.3. $BORDERED_TABLES ========================================================================
|
||
|
||
Bordered tables
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tables-bordered" href="#uidemo-tables-bordered" class="header-2">Bordered tables</a>
|
||
<div class="col-sm-12">
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 16.4. $HOVER_ROWS_TABLES ======================================================================
|
||
|
||
Hover rows tables
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tables-hover-rows" href="#uidemo-tables-hover-rows" class="header-2">Hover rows tables</a>
|
||
<div class="col-sm-12">
|
||
<table class="table table-hover">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 16.5. $CONDENSED_TABLES =======================================================================
|
||
|
||
Condensed tables
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tables-condensed" href="#uidemo-tables-condensed" class="header-2">Condensed tables</a>
|
||
<div class="col-sm-12">
|
||
<table class="table table-condensed">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 16.6. $TABLE_VARIATIONS =======================================================================
|
||
|
||
Table variations
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-table-variations" href="#uidemo-table-variations" class="header-2">Table variations</a>
|
||
<div class="col-sm-12">
|
||
|
||
<!-- Light table -->
|
||
<div class="table-light">
|
||
<div class="table-header">
|
||
<div class="table-caption">
|
||
Light Table
|
||
</div>
|
||
</div>
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="table-footer">
|
||
Footer
|
||
</div>
|
||
</div>
|
||
<!-- / Light table -->
|
||
|
||
<!-- Primary table -->
|
||
<div class="table-primary">
|
||
<div class="table-header">
|
||
<div class="table-caption">
|
||
Primary Table
|
||
</div>
|
||
</div>
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="table-footer">
|
||
Footer
|
||
</div>
|
||
</div>
|
||
<!-- / Primary table -->
|
||
|
||
<!-- Success table -->
|
||
<div class="table-success">
|
||
<div class="table-header">
|
||
<div class="table-caption">
|
||
Success Table
|
||
</div>
|
||
</div>
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="table-footer">
|
||
Footer
|
||
</div>
|
||
</div>
|
||
<!-- / Success table -->
|
||
|
||
<!-- Danger table -->
|
||
<div class="table-danger">
|
||
<div class="table-header">
|
||
<div class="table-caption">
|
||
Danger Table
|
||
</div>
|
||
</div>
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="table-footer">
|
||
Footer
|
||
</div>
|
||
</div>
|
||
<!-- / Danger table -->
|
||
|
||
<!-- Warning table -->
|
||
<div class="table-warning">
|
||
<div class="table-header">
|
||
<div class="table-caption">
|
||
Warning Table
|
||
</div>
|
||
</div>
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="table-footer">
|
||
Footer
|
||
</div>
|
||
</div>
|
||
<!-- / Warning table -->
|
||
|
||
<!-- Info table -->
|
||
<div class="table-info">
|
||
<div class="table-header">
|
||
<div class="table-caption">
|
||
Info Table
|
||
</div>
|
||
</div>
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="table-footer">
|
||
Footer
|
||
</div>
|
||
</div>
|
||
<!-- / Info table -->
|
||
</div>
|
||
</div>
|
||
<!-- /16. $TABLES -->
|
||
|
||
<!-- 17. $LIST_GROUPS ==============================================================================
|
||
|
||
List groups
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-list-groups" href="#uidemo-list-groups" class="header-1">List groups</a>
|
||
</div>
|
||
|
||
<!-- Style -->
|
||
<style>
|
||
.list-group-demo .list-group { margin-bottom: 0; }
|
||
</style>
|
||
<!-- / Style -->
|
||
|
||
<!-- 17.1. $DEFAULT_LIST_GROUPS ====================================================================
|
||
|
||
Default list groups
|
||
-->
|
||
<div class="row list-group-demo">
|
||
<a id="uidemo-list-groups-default" href="#uidemo-list-groups-default" class="header-2">Default list groups</a>
|
||
<div class="col-sm-12">
|
||
<ul class="list-group">
|
||
<li class="list-group-item">
|
||
<span class="badge badge-success">14</span>
|
||
Cras justo odio
|
||
</li> <!-- / .list-group-item -->
|
||
<li class="list-group-item">
|
||
<span class="badge badge-danger">2</span>
|
||
Dapibus ac facilisis in
|
||
</li> <!-- / .list-group-item -->
|
||
<li class="list-group-item">
|
||
<span class="badge badge-info">1</span>
|
||
Morbi leo risus
|
||
</li> <!-- / .list-group-item -->
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 17.2. $LIST_GROUPS_LINKED_ITEMS ===============================================================
|
||
|
||
Linked items
|
||
-->
|
||
<div class="row list-group-demo">
|
||
<a id="uidemo-list-groups-linked-items" href="#uidemo-list-groups-linked-items" class="header-2">Linked items</a>
|
||
<div class="col-sm-12">
|
||
<div class="list-group">
|
||
<a href="#" class="list-group-item">Cras justo odio<span class="badge badge-success">14</span></a>
|
||
<a href="#" class="list-group-item active">Dapibus ac facilisis in<span class="badge badge-danger">2</span></a>
|
||
<a href="#" class="list-group-item">Morbi leo risus<span class="badge badge-info">1</span></a>
|
||
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
|
||
<a href="#" class="list-group-item">Vestibulum at eros</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 17.3. $LIST_GROUPS_CUSTOM_CONTENT =============================================================
|
||
|
||
Custom content
|
||
-->
|
||
<div class="row list-group-demo">
|
||
<a id="uidemo-list-groups-custom-content" href="#uidemo-list-groups-custom-content" class="header-2">Custom content</a>
|
||
<div class="col-sm-12">
|
||
<div class="list-group">
|
||
<a href="#" class="list-group-item active">
|
||
<h4 class="list-group-item-heading">List group item heading</h4>
|
||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||
</a> <!-- / .list-group-item -->
|
||
<a href="#" class="list-group-item">
|
||
<h4 class="list-group-item-heading">List group item heading</h4>
|
||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||
</a> <!-- / .list-group-item -->
|
||
<a href="#" class="list-group-item">
|
||
<h4 class="list-group-item-heading">List group item heading</h4>
|
||
<p class="list-group-item-text">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
|
||
</a> <!-- / .list-group-item -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /17. $LIST_GROUPS -->
|
||
|
||
<!-- 18. $FORMS ====================================================================================
|
||
|
||
Forms
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms" href="#uidemo-forms" class="header-1">Forms</a>
|
||
</div>
|
||
|
||
<!-- 18.1. $FORMS_BASIC_EXAMPLE ====================================================================
|
||
|
||
Basic example
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-basic-example" href="#uidemo-forms-basic-example" class="header-2">Basic example</a>
|
||
<div class="col-sm-12">
|
||
<form>
|
||
<fieldset>
|
||
<legend>Legend</legend>
|
||
<div class="form-group">
|
||
<label for="exampleInputEmail">Email address</label>
|
||
<input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
|
||
</div> <!-- / .form-group -->
|
||
<div class="form-group">
|
||
<label for="exampleInputPassword">Password</label>
|
||
<input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
|
||
</div> <!-- / .form-group -->
|
||
<div class="form-group">
|
||
<label for="exampleInputFile">File input</label>
|
||
<input type="file" id="exampleInputFile">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div> <!-- / .form-group -->
|
||
<div class="checkbox">
|
||
<label>
|
||
<input type="checkbox"> Check me out
|
||
</label>
|
||
</div> <!-- / .checkbox -->
|
||
<button type="submit" class="btn btn-default">Submit</button>
|
||
</fieldset>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.2. $INLINE_FORMS ===========================================================================
|
||
|
||
Inline forms
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-inline" href="#uidemo-forms-inline" class="header-2">Inline forms</a>
|
||
<div class="col-sm-12">
|
||
<form class="form-inline" role="form">
|
||
<div class="form-group">
|
||
<label class="sr-only" for="exampleInputEmail2">Email address</label>
|
||
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
|
||
</div> <!-- / .form-group -->
|
||
<div class="form-group">
|
||
<label class="sr-only" for="exampleInputPassword2">Password</label>
|
||
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
|
||
</div> <!-- / .form-group -->
|
||
<div class="checkbox">
|
||
<label>
|
||
<input type="checkbox"> Remember me
|
||
</label>
|
||
</div> <!-- / .checkbox -->
|
||
<button type="submit" class="btn btn-default">Sign in</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.3. $HORIZONTAL_FORMS =======================================================================
|
||
|
||
Horizontal forms
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-horizontal" href="#uidemo-forms-horizontal" class="header-2">Horizontal forms</a>
|
||
<div class="col-sm-12">
|
||
<form class="form-horizontal">
|
||
<div class="form-group">
|
||
<label for="inputEmail2" class="col-sm-2 control-label">Email</label>
|
||
<div class="col-sm-10">
|
||
<input type="text" class="form-control" id="inputEmail2" placeholder="Email">
|
||
</div>
|
||
</div> <!-- / .form-group -->
|
||
<div class="form-group">
|
||
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
|
||
<div class="col-sm-10">
|
||
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div>
|
||
</div> <!-- / .form-group -->
|
||
<div class="form-group">
|
||
<label for="asdasdas" class="col-sm-2 control-label">Text</label>
|
||
<div class="col-sm-10">
|
||
<textarea class="form-control"></textarea>
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div>
|
||
</div> <!-- / .form-group -->
|
||
<div class="form-group">
|
||
<label class="col-sm-2 control-label">Text</label>
|
||
<div class="col-sm-10">
|
||
<div class="radio">
|
||
<label>
|
||
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
|
||
Option one is this and that—be sure to include why it's great
|
||
</label>
|
||
</div> <!-- / .radio -->
|
||
<div class="radio">
|
||
<label>
|
||
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||
Option two can be something else and selecting it will deselect option one
|
||
</label>
|
||
</div> <!-- / .radio -->
|
||
<div class="radio">
|
||
<label>
|
||
<input type="radio" name="optionsRadios" id="optionsRadios2-2" value="option2">
|
||
Option two can be something else and selecting it will deselect option one
|
||
</label>
|
||
</div> <!-- / .radio -->
|
||
</div> <!-- / .col-sm-10 -->
|
||
</div> <!-- / .form-group -->
|
||
<div class="form-group">
|
||
<div class="col-sm-offset-2 col-sm-10">
|
||
<div class="checkbox">
|
||
<label>
|
||
<input type="checkbox"> Remember me
|
||
</label>
|
||
</div> <!-- / .checkbox -->
|
||
</div>
|
||
</div> <!-- / .form-group -->
|
||
<div class="form-group" style="margin-bottom: 0;">
|
||
<div class="col-sm-offset-2 col-sm-10">
|
||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||
</div>
|
||
</div> <!-- / .form-group -->
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.4. $FORMS_INPUTS ===========================================================================
|
||
|
||
Inputs
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-inputs" href="#uidemo-forms-inputs" class="header-2">Inputs</a>
|
||
<div class="col-sm-12">
|
||
<input type="text" class="form-control" placeholder="Text input">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.5. $FORMS_TEXTAREA =========================================================================
|
||
|
||
Textarea
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-textarea" href="#uidemo-forms-textarea" class="header-2">Textarea</a>
|
||
<div class="col-sm-12">
|
||
<textarea class="form-control" rows="3"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.6. $FORMS_CHECKBOXES =======================================================================
|
||
|
||
Checkboxes
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-checkboxes" href="#uidemo-forms-checkboxes" class="header-2">Checkboxes</a>
|
||
<div class="col-sm-12">
|
||
<div class="checkbox" style="margin: 0;">
|
||
<label>
|
||
<input type="checkbox" value="">
|
||
Option one is this and that—be sure to include why it's great
|
||
</label>
|
||
</div> <!-- / .checkbox -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.7. $FORMS_INLINE_CHECKBOXES ================================================================
|
||
|
||
Inline checkboxes
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-checkboxes-inline" href="#uidemo-forms-checkboxes-inline" class="header-2">Inline checkboxes</a>
|
||
<div class="col-sm-12">
|
||
<label class="checkbox-inline">
|
||
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
|
||
</label>
|
||
<label class="checkbox-inline">
|
||
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
|
||
</label>
|
||
<label class="checkbox-inline">
|
||
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.8. $FORMS_RADIOS ===========================================================================
|
||
|
||
Radios
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-radios" href="#uidemo-forms-radios" class="header-2">Radios</a>
|
||
<div class="col-sm-12">
|
||
<div class="radio" style="margin-top: 0;">
|
||
<label>
|
||
<input type="radio" name="optionsRadios" value="option1" checked>
|
||
Option one is this and that—be sure to include why it's great
|
||
</label>
|
||
</div> <!-- / .radio -->
|
||
<div class="radio" style="margin-bottom: 0;">
|
||
<label>
|
||
<input type="radio" name="optionsRadios" value="option2">
|
||
Option two can be something else and selecting it will deselect option one
|
||
</label>
|
||
</div> <!-- / .radio -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.9. $FORMS_SELECTS ==========================================================================
|
||
|
||
Selects
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-selects" href="#uidemo-forms-selects" class="header-2">Selects</a>
|
||
<div class="col-sm-12">
|
||
<select class="form-control" style="margin-bottom: 15px;">
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
<option>5</option>
|
||
</select>
|
||
|
||
<select multiple class="form-control">
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
<option>5</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.10. $FORMS_STATIC_CONTROL ==================================================================
|
||
|
||
Static control
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-static-control" href="#uidemo-forms-static-control" class="header-2">Static control</a>
|
||
<div class="col-sm-12">
|
||
<form class="form-horizontal" role="form">
|
||
<div class="form-group">
|
||
<label class="col-sm-2 control-label">Email</label>
|
||
<div class="col-sm-10">
|
||
<p class="form-control-static">email@example.com</p>
|
||
</div>
|
||
</div> <!-- / .form-group -->
|
||
<div class="form-group">
|
||
<label for="inputPassword1" class="col-sm-2 control-label">Password</label>
|
||
<div class="col-sm-10">
|
||
<input type="password" class="form-control" id="inputPassword1" placeholder="Password">
|
||
</div>
|
||
</div> <!-- / .form-group -->
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.11. $FORMS_DISABLED_CONTROLS ===============================================================
|
||
|
||
Disabled controls
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-disabled-controls" href="#uidemo-forms-disabled-controls" class="header-2">Disabled controls</a>
|
||
<div class="col-sm-12">
|
||
<!-- Inputs -->
|
||
<input type="text" class="form-control" placeholder="Text input" style="margin-bottom: 15px;" disabled="disabled">
|
||
|
||
<!-- Textarea -->
|
||
<textarea class="form-control" rows="3" disabled="disabled"></textarea>
|
||
|
||
<!-- Checkboxes -->
|
||
<div class="checkbox">
|
||
<label>
|
||
<input type="checkbox" value="" disabled="disabled">
|
||
Option one is this and that—be sure to include why it's great
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Inline checkboxes -->
|
||
<div>
|
||
<label class="checkbox-inline">
|
||
<input type="checkbox" id="inlineCheckbox11" value="option1" disabled="disabled"> 1
|
||
</label>
|
||
<label class="checkbox-inline">
|
||
<input type="checkbox" id="inlineCheckbox21" value="option2" disabled="disabled"> 2
|
||
</label>
|
||
<label class="checkbox-inline">
|
||
<input type="checkbox" id="inlineCheckbox31" value="option3" disabled="disabled"> 3
|
||
</label>
|
||
</div>
|
||
|
||
<!-- Radios -->
|
||
<div>
|
||
<div class="radio">
|
||
<label>
|
||
<input type="radio" name="optionsRadios" id="optionsRadios11" value="option1" checked disabled="disabled">
|
||
Option one is this and that—be sure to include why it's great
|
||
</label>
|
||
</div>
|
||
<div class="radio">
|
||
<label>
|
||
<input type="radio" name="optionsRadios" id="optionsRadios21" value="option2" disabled="disabled">
|
||
Option two can be something else and selecting it will deselect option one
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Selects -->
|
||
<select class="form-control" style="margin-bottom: 15px;" disabled="disabled">
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
<option>5</option>
|
||
</select>
|
||
|
||
<!-- Multiple selects -->
|
||
<select multiple class="form-control" disabled="disabled">
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
<option>5</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.12. $FORMS_DISABLED_FIELDSET ===============================================================
|
||
|
||
Disabled fieldset
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-disabled-fieldset" href="#uidemo-forms-disabled-fieldset" class="header-2">Disabled fieldset</a>
|
||
<div class="col-sm-12">
|
||
<form role="form">
|
||
<fieldset disabled="disabled">
|
||
<div class="form-group">
|
||
<label for="disabledTextInput">Disabled input</label>
|
||
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
|
||
</div> <!-- / .form-group -->
|
||
<div class="form-group">
|
||
<label for="disabledSelect">Disabled select menu</label>
|
||
<select id="disabledSelect" class="form-control">
|
||
<option>Disabled select</option>
|
||
</select>
|
||
</div> <!-- / .form-group -->
|
||
<div class="checkbox">
|
||
<label>
|
||
<input type="checkbox"> Can't check this
|
||
</label>
|
||
</div> <!-- / .checkbox -->
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</fieldset>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.13. $FORMS_VALIDATION_STATES_DEFAULT =======================================================
|
||
|
||
Validation states - Default
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-vs-default" href="#uidemo-forms-vs-default" class="header-2">Validation states - Default</a>
|
||
<div class="col-sm-12">
|
||
<!-- Default help text -->
|
||
<div class="form-group">
|
||
<label class="control-label" for="inputDefault-41">Default input</label>
|
||
<input type="text" class="form-control" id="inputDefault-41">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div> <!-- / .form-group -->
|
||
|
||
<!-- Warning -->
|
||
<div class="form-group has-warning">
|
||
<label class="control-label" for="inputWarning-41">Input with warning</label>
|
||
<input type="text" class="form-control" id="inputWarning-41">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div> <!-- / .form-group -->
|
||
|
||
<!-- Error -->
|
||
<div class="form-group has-error">
|
||
<label class="control-label" for="inputError-41">Input with error</label>
|
||
<input type="text" class="form-control" id="inputError-41">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div> <!-- / .form-group -->
|
||
|
||
<!-- Success -->
|
||
<div class="form-group has-success">
|
||
<label class="control-label" for="inputSuccess-41">Input with success</label>
|
||
<input type="text" class="form-control" id="inputSuccess-41">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div> <!-- / .form-group -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.14. $FORMS_VALIDATION_STATES_DARK ==========================================================
|
||
|
||
Validation states - Dark
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-vs-dark" href="#uidemo-forms-vs-dark" class="header-2">Validation states - Dark</a>
|
||
<div class="col-sm-12">
|
||
<!-- Warning -->
|
||
<div class="form-group has-warning dark">
|
||
<label class="control-label" for="inputWarning-42">Input with warning</label>
|
||
<input type="text" class="form-control" id="inputWarning-42">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div> <!-- / .form-group -->
|
||
|
||
<!-- Error -->
|
||
<div class="form-group has-error dark">
|
||
<label class="control-label" for="inputError-42">Input with error</label>
|
||
<input type="text" class="form-control" id="inputError-42">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div> <!-- / .form-group -->
|
||
|
||
<!-- Success -->
|
||
<div class="form-group has-success dark">
|
||
<label class="control-label" for="inputSuccess-42">Input with success</label>
|
||
<input type="text" class="form-control" id="inputSuccess-42">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div> <!-- / .form-group -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.15. $FORMS_VALIDATION_STATES_SIMPLE ========================================================
|
||
|
||
Validation states - Simple
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-vs-simple" href="#uidemo-forms-vs-simple" class="header-2">Validation states - Simple</a>
|
||
<div class="col-sm-12">
|
||
<!-- Warning -->
|
||
<div class="form-group has-warning simple">
|
||
<label class="control-label" for="inputWarning-43">Input with warning</label>
|
||
<input type="text" class="form-control" id="inputWarning-43">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div> <!-- / .form-group -->
|
||
|
||
<!-- Error -->
|
||
<div class="form-group has-error simple">
|
||
<label class="control-label" for="inputError-43">Input with error</label>
|
||
<input type="text" class="form-control" id="inputError-43">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div> <!-- / .form-group -->
|
||
|
||
<!-- Info -->
|
||
<div class="form-group has-success simple">
|
||
<label class="control-label" for="inputSuccess-43">Input with success</label>
|
||
<input type="text" class="form-control" id="inputSuccess-43">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div> <!-- / .form-group -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.16. $FORMS_OPTIONAL_ICONS ==================================================================
|
||
|
||
Optional icons
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-optional-icons" href="#uidemo-forms-optional-icons" class="header-2">Optional icons</a>
|
||
<div class="col-sm-12">
|
||
<!-- Default -->
|
||
<div class="form-group has-feedback">
|
||
<label class="control-label" for="inputDefault2">Default input</label>
|
||
<input type="text" class="form-control" id="inputDefault2">
|
||
<span class="fa fa-comments form-control-feedback"></span>
|
||
</div> <!-- / .form-group -->
|
||
|
||
<!-- Success -->
|
||
<div class="form-group has-success has-feedback">
|
||
<label class="control-label" for="inputSuccess2">Input with success</label>
|
||
<input type="text" class="form-control" id="inputSuccess2">
|
||
<span class="fa fa-check-circle form-control-feedback"></span>
|
||
</div> <!-- / .form-group -->
|
||
|
||
<!-- Warning -->
|
||
<div class="form-group has-warning has-feedback">
|
||
<label class="control-label" for="inputWarning2">Input with warning</label>
|
||
<input type="text" class="form-control" id="inputWarning2">
|
||
<span class="fa fa-warning form-control-feedback"></span>
|
||
</div> <!-- / .form-group -->
|
||
|
||
<!-- Error -->
|
||
<div class="form-group has-error has-feedback">
|
||
<label class="control-label" for="inputError2">Input with error</label>
|
||
<input type="text" class="form-control" id="inputError2">
|
||
<span class="fa fa-times-circle form-control-feedback"></span>
|
||
</div> <!-- / .form-group -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.17. $FORMS_HEIGHT_SIZING ===================================================================
|
||
|
||
Height sizing
|
||
-->
|
||
<!-- Style -->
|
||
<style>
|
||
.form-controls-demo > * { margin-bottom: 15px; }
|
||
</style>
|
||
<!-- / Style -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-forms-height-sizing" href="#uidemo-forms-height-sizing" class="header-2">Height sizing</a>
|
||
<div class="col-sm-12">
|
||
<div class="form-controls-demo">
|
||
<input class="form-control input-lg" type="text" placeholder=".input-lg">
|
||
<input type="text" class="form-control" placeholder="Default input">
|
||
<input class="form-control input-sm" type="text" placeholder=".input-sm">
|
||
|
||
<select class="form-control input-lg">
|
||
<option value="">.input-lg</option>
|
||
</select>
|
||
|
||
<select class="form-control">
|
||
<option value="">Default select</option>
|
||
</select>
|
||
|
||
<select class="form-control input-sm" style="margin-bottom: 0;">
|
||
<option value="">.input-sm</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 18.18. $FORMS_COLUMN_SIZING ===================================================================
|
||
|
||
Column sizing
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-forms-column-sizing" href="#uidemo-forms-column-sizing" class="header-2">Column sizing</a>
|
||
<div class="col-sm-12">
|
||
<div class="row">
|
||
<div class="col-xs-2">
|
||
<input type="text" class="form-control" placeholder=".col-xs-2">
|
||
</div>
|
||
<div class="col-xs-3">
|
||
<input type="text" class="form-control" placeholder=".col-xs-3">
|
||
</div>
|
||
<div class="col-xs-4">
|
||
<input type="text" class="form-control" placeholder=".col-xs-4">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /18. $FORMS -->
|
||
|
||
<!-- 19. $INPUT_GROUPS =============================================================================
|
||
|
||
Input groups
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-input-groups" href="#uidemo-input-groups" class="header-1">Input groups</a>
|
||
</div>
|
||
|
||
<!-- Style -->
|
||
<style>
|
||
.input-groups-demo .input-group { margin-bottom: 15px; }
|
||
.input-groups-demo .input-group:last-child { margin-bottom: 0; }
|
||
</style>
|
||
<!-- / Style -->
|
||
|
||
<!-- 19.1. $INPUT_GROUPS_BASIC_EXAMPLE =============================================================
|
||
|
||
Basic example
|
||
-->
|
||
<div class="row input-groups-demo">
|
||
<a id="uidemo-input-groups-basic-example" href="#uidemo-input-groups-basic-example" class="header-2">Basic example</a>
|
||
<div class="col-sm-12">
|
||
<div class="input-group">
|
||
<span class="input-group-addon">@</span>
|
||
<input type="text" class="form-control" placeholder="Username">
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<input type="text" class="form-control">
|
||
<span class="input-group-addon">.00</span>
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<span class="input-group-addon">$</span>
|
||
<input type="text" class="form-control">
|
||
<span class="input-group-addon">.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 19.2. $INPUT_GROUPS_SIZING ====================================================================
|
||
|
||
Input groups sizing
|
||
-->
|
||
<div class="row input-groups-demo">
|
||
<a id="uidemo-input-groups-sizing" href="#uidemo-input-groups-sizing" class="header-2">Input groups sizing</a>
|
||
<div class="col-sm-12">
|
||
<div class="input-group input-group-lg">
|
||
<span class="input-group-addon">@</span>
|
||
<input type="text" class="form-control" placeholder="Username">
|
||
</div>
|
||
|
||
<div class="input-group">
|
||
<span class="input-group-addon">@</span>
|
||
<input type="text" class="form-control" placeholder="Username">
|
||
</div>
|
||
|
||
<div class="input-group input-group-sm">
|
||
<span class="input-group-addon">@</span>
|
||
<input type="text" class="form-control" placeholder="Username">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 19.3. $INPUT_GROUPS_CHECKBOXEX_AND_RADIO_ADDONS ===============================================
|
||
|
||
Checkboxes and radio addons
|
||
-->
|
||
<div class="row input-groups-demo">
|
||
<a id="uidemo-input-groups-checkboxes-radios" href="#uidemo-input-groups-checkboxes-radios" class="header-2">Checkboxes and radio addons</a>
|
||
<div class="col-sm-12">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="input-group">
|
||
<span class="input-group-addon">
|
||
<input type="checkbox">
|
||
</span>
|
||
<input type="text" class="form-control">
|
||
</div> <!-- / .input-group -->
|
||
</div> <!-- / .col-lg-6 -->
|
||
<div class="col-md-6">
|
||
<div class="input-group">
|
||
<span class="input-group-addon">
|
||
<input type="radio">
|
||
</span>
|
||
<input type="text" class="form-control">
|
||
</div> <!-- / .input-group -->
|
||
</div> <!-- / .col-lg-6 -->
|
||
</div> <!-- / .row -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 19.4. $INPUT_GROUPS_BUTTON_ADDONS =============================================================
|
||
|
||
Button addons
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-input-groups-buttons" href="#uidemo-input-groups-buttons" class="header-2">Button addons</a>
|
||
<div class="col-sm-12">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="input-group">
|
||
<span class="input-group-btn">
|
||
<button class="btn" type="button">Go!</button>
|
||
</span>
|
||
<input type="text" class="form-control">
|
||
</div> <!-- / .input-group -->
|
||
</div> <!-- / .col-lg-6 -->
|
||
<div class="col-md-6">
|
||
<div class="input-group">
|
||
<input type="text" class="form-control">
|
||
<span class="input-group-btn">
|
||
<button class="btn" type="button">Go!</button>
|
||
</span>
|
||
</div> <!-- / .input-group -->
|
||
</div> <!-- / .col-lg-6 -->
|
||
</div> <!-- / .row -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 19.5. $INPUT_GROUPS_BUTTONS_WITH_DROPDOWNS ====================================================
|
||
|
||
Buttons with dropdowns
|
||
-->
|
||
<div class="row input-groups-demo">
|
||
<a id="uidemo-input-groups-dropdowns" href="#uidemo-input-groups-dropdowns" class="header-2">Buttons with dropdowns</a>
|
||
<div class="col-sm-12">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="input-group">
|
||
<div class="input-group-btn">
|
||
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="fa fa-caret-down"></span></button>
|
||
<ul class="dropdown-menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul> <!-- / .dropdown-menu -->
|
||
</div> <!-- / .btn-group -->
|
||
<input type="text" class="form-control">
|
||
</div> <!-- / .input-group -->
|
||
</div> <!-- / .col-lg-6 -->
|
||
<div class="col-md-6">
|
||
<div class="input-group">
|
||
<input type="text" class="form-control">
|
||
<div class="input-group-btn">
|
||
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="fa fa-caret-down"></span></button>
|
||
<ul class="dropdown-menu pull-right">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul> <!-- / .dropdown-menu -->
|
||
</div> <!-- / .btn-group -->
|
||
</div> <!-- / .input-group -->
|
||
</div> <!-- / .col-lg-6 -->
|
||
</div> <!-- / .row -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 19.6. $INPUT_GROUPS_SEGMENTED_BUTTONS =========================================================
|
||
|
||
Segmented buttons
|
||
-->
|
||
<div class="row input-groups-demo">
|
||
<a id="uidemo-input-groups-segmented-buttons" href="#uidemo-input-groups-segmented-buttons" class="header-2">Segmented buttons</a>
|
||
<div class="col-sm-12">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="input-group">
|
||
<div class="input-group-btn">
|
||
<button type="button" class="btn btn-success" tabindex="-1">Action</button>
|
||
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||
<span class="fa fa-caret-down"></span>
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<ul class="dropdown-menu" role="menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul> <!-- / .dropdown-menu -->
|
||
</div>
|
||
<input type="text" class="form-control">
|
||
</div> <!-- /.input-group -->
|
||
</div> <!-- /.col-lg-6 -->
|
||
<div class="col-md-6">
|
||
<div class="input-group">
|
||
<input type="text" class="form-control">
|
||
<div class="input-group-btn">
|
||
<button type="button" class="btn btn-primary btn-outline" tabindex="-1">Action</button>
|
||
<button type="button" class="btn btn-primary btn-outline dropdown-toggle" data-toggle="dropdown" tabindex="-1">
|
||
<span class="fa fa-caret-down"></span>
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<ul class="dropdown-menu pull-right" role="menu">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul> <!-- / .dropdown-menu -->
|
||
</div> <!-- / .input-group-btn -->
|
||
</div> <!-- / .input-group -->
|
||
</div> <!-- / .col-lg-6 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /19. $FORMS -->
|
||
|
||
<!-- 20. $PANELS ===================================================================================
|
||
|
||
Panels
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-panels" href="#uidemo-panels" class="header-1">Panels</a>
|
||
</div>
|
||
|
||
<!-- 20.1. $PANELS_BASIC_EXAMPLE ===================================================================
|
||
|
||
Basic example
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-panels-basic-example" href="#uidemo-panels-basic-example" class="header-2">Basic example</a>
|
||
<div class="col-md-6">
|
||
|
||
<div class="panel">
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Simple header</span>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<!-- Default panel contents -->
|
||
<div class="panel-heading">
|
||
<span class="panel-title">With table</span>
|
||
</div>
|
||
|
||
<!-- Table -->
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>1</td>
|
||
<td>Mark</td>
|
||
<td>Otto</td>
|
||
<td>@mdo</td>
|
||
</tr>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>Jacob</td>
|
||
<td>Thornton</td>
|
||
<td>@fat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>3</td>
|
||
<td>Larry</td>
|
||
<td>the Bird</td>
|
||
<td>@twitter</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-md-6">
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title"><i class="panel-title-icon fa fa-flask"></i>With icon</span>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
<div class="panel-footer">Panel footer</div>
|
||
</div>
|
||
|
||
<div class="panel">
|
||
<!-- Default panel contents -->
|
||
<div class="panel-heading">
|
||
<span class="panel-title">With list groups</span>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
|
||
<!-- List group -->
|
||
<ul class="list-group">
|
||
<li class="list-group-item">Cras justo odio</li>
|
||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||
<li class="list-group-item">Morbi leo risus</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 20.2. $PANELS_HEADER_COMPONENTS ===============================================================
|
||
|
||
Header components
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-panels-header-components" href="#uidemo-panels-header-components" class="header-2">Header components</a>
|
||
<div class="col-md-6">
|
||
|
||
<!-- With tabs -->
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">With tabs</span>
|
||
<ul class="nav nav-tabs nav-tabs-xs">
|
||
<li class="active">
|
||
<a href="#" data-toggle="tab">Home</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="tab">Profile</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" data-toggle="tab">More</a>
|
||
</li>
|
||
</ul> <!-- / .nav -->
|
||
</div> <!-- / .panel-heading -->
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- With progress bar -->
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">With progress bar</span>
|
||
<div class="panel-heading-controls" style="width: 30%">
|
||
<div class="progress progress-striped active" style="width: 100%">
|
||
<div class="progress-bar progress-bar-danger" style="width: 60%;"></div>
|
||
</div>
|
||
</div> <!-- / .panel-heading-controls -->
|
||
</div> <!-- / .panel-heading -->
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- With pagination -->
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">With pagination</span>
|
||
<div class="panel-heading-controls">
|
||
<ul class="pagination pagination-xs">
|
||
<li><a href="#">«</a></li>
|
||
<li class="active"><a href="#">1</a></li>
|
||
<li><a href="#">2</a></li>
|
||
<li><a href="#">3</a></li>
|
||
<li><a href="#">»</a></li>
|
||
</ul> <!-- / .panel-heading-controls -->
|
||
</div> <!-- / .panel-heading-controls -->
|
||
</div> <!-- / .panel-heading -->
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- With text and button -->
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">With text</span>
|
||
<div class="panel-heading-controls">
|
||
<span class="panel-heading-text"><em>Just some text with <a href="#">link</a></em> <span style="color: #ccc">|</span> </span>
|
||
<button class="btn btn-xs">Button</button>
|
||
</div>
|
||
</div> <!-- / .panel-heading -->
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- With input group -->
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">With input group</span>
|
||
<div class="panel-heading-controls" style="width:30%">
|
||
<form action="">
|
||
<div class="input-group input-group-sm">
|
||
<input type="text" class="form-control" placeholder="Search..." name="s">
|
||
<span class="input-group-btn">
|
||
<button class="btn" type="submit">
|
||
<span class="fa fa-search"></span>
|
||
</button>
|
||
</span>
|
||
</div> <!-- / .input-group -->
|
||
</form>
|
||
</div> <!-- / .panel-heading-controls -->
|
||
</div> <!-- / .panel-heading -->
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- With switcher -->
|
||
<script>init.push(function () { $('#panel-switcher').switcher(); })</script>
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">With switcher</span>
|
||
<div class="panel-heading-controls">
|
||
<input type="checkbox" data-class="switcher-sm switcher-primary" id="panel-switcher" checked="checked">
|
||
</div> <!-- / .panel-heading-controls -->
|
||
</div> <!-- / .panel-heading -->
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
</div>
|
||
<div class="col-md-6">
|
||
|
||
<!-- With buttons -->
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">With buttons</span>
|
||
<div class="panel-heading-controls">
|
||
<button class="btn btn-xs btn-success btn-outline"><span class="fa fa-refresh"></span> Refresh</button>
|
||
<button class="btn btn-xs btn-danger btn-outline"><span class="fa fa-paperclip"></span></button>
|
||
<div class="btn-group btn-group-xs">
|
||
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown"><span class="fa fa-cog"></span> <span class="fa fa-caret-down"></span></button>
|
||
<ul class="dropdown-menu dropdown-menu-right">
|
||
<li><a href="#">Action</a></li>
|
||
<li><a href="#">Another action</a></li>
|
||
<li><a href="#">Something else here</a></li>
|
||
<li class="divider"></li>
|
||
<li class="dropdown-header">Some header</li>
|
||
<li><a href="#">Separated link</a></li>
|
||
</ul> <!-- / .dropdown-menu -->
|
||
</div> <!-- / .btn-group -->
|
||
</div> <!-- / .panel-heading-controls -->
|
||
</div> <!-- / .panel-heading -->
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- With labels and badges -->
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">With labels and badges</span>
|
||
<div class="panel-heading-controls">
|
||
<span class="label label-tag label-success">Tag</span>
|
||
<span class="label label-danger">Label</span>
|
||
<span class="badge badge-info">Badge</span>
|
||
</div>
|
||
</div> <!-- / .panel-heading -->
|
||
<div class="alert alert-page alert-success alert-dark">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Well done!</strong> You successfully read this important alert message.
|
||
</div> <!-- / .alert -->
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- With pager -->
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">With pager</span>
|
||
<div class="panel-heading-controls">
|
||
<ul class="pager pager-xs">
|
||
<li class="disabled"><a href="#">← Older</a></li>
|
||
<li><a href="#">Newer →</a></li>
|
||
</ul>
|
||
</div>
|
||
</div> <!-- / .panel-heading -->
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- With select box -->
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">With select box</span>
|
||
<div class="panel-heading-controls">
|
||
<select class="form-control input-sm">
|
||
<option value="1">Option 1</option>
|
||
<option value="2">Option 2</option>
|
||
<option value="3">Option 3</option>
|
||
</select>
|
||
</div> <!-- / .panel-heading-controls -->
|
||
</div> <!-- / .panel-heading -->
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- With icon -->
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">With icon</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div> <!-- / .panel-heading -->
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 20.3. $PANELS_DEFAULT_COLORS ==================================================================
|
||
|
||
Default colors
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-panels-colors" href="#uidemo-panels-colors" class="header-2">Default colors</a>
|
||
<div class="col-md-6">
|
||
|
||
<!-- Light danger -->
|
||
<div class="panel panel-danger">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Danger</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- Light colorful danger -->
|
||
<div class="panel panel-danger panel-body-colorful">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Danger</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
|
||
<!-- Light success -->
|
||
<div class="panel panel-success">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Success</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- Light colorful success -->
|
||
<div class="panel panel-success panel-body-colorful">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Success</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
|
||
<!-- Light warning -->
|
||
<div class="panel panel-warning">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Warning</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- Light colorful warning -->
|
||
<div class="panel panel-warning panel-body-colorful">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Warning</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
|
||
<!-- Light info -->
|
||
<div class="panel panel-info">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Info</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- Light colorful ingo -->
|
||
<div class="panel panel-info panel-body-colorful">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Info</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
|
||
<!-- Transparent -->
|
||
<div class="panel panel-transparent">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Transparent</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
</div>
|
||
<div class="col-md-6">
|
||
|
||
<!-- Dark danger -->
|
||
<div class="panel panel-danger panel-dark">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Danger</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- Dark colorful danger -->
|
||
<div class="panel panel-danger panel-dark panel-body-colorful">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Danger</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
|
||
<!-- Dark success -->
|
||
<div class="panel panel-success panel-dark">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Success</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- Dark colorful success -->
|
||
<div class="panel panel-success panel-dark panel-body-colorful">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Success</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
|
||
<!-- Dark warning -->
|
||
<div class="panel panel-warning panel-dark">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Warning</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- Dark colorful warning -->
|
||
<div class="panel panel-warning panel-dark panel-body-colorful">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Warning</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
|
||
<!-- Dark info -->
|
||
<div class="panel panel-info panel-dark">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Info</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
<!-- Dark colorful info -->
|
||
<div class="panel panel-info panel-dark panel-body-colorful">
|
||
<div class="panel-heading">
|
||
<span class="panel-title">Panel - Info</span>
|
||
<div class="panel-heading-controls">
|
||
<div class="panel-heading-icon"><i class="fa fa-inbox"></i></div>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
Panel body content
|
||
</div>
|
||
</div> <!-- / .panel -->
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- /20. $PANELS -->
|
||
|
||
<!-- 21. $WELLS ====================================================================================
|
||
|
||
Wells
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-wells" href="#uidemo-wells" class="header-1">Wells</a>
|
||
</div>
|
||
|
||
<!-- 21.1. $WELLS_DEFAULT ==========================================================================
|
||
|
||
Default well
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-wells-default" href="#uidemo-wells-default" class="header-2">Default well</a>
|
||
<div class="col-md-12">
|
||
<div class="well">Look, I'm in a well!</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 21.2. $WELLS_OPTIONAL_CLASSES =================================================================
|
||
|
||
Optional classes
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-wells-optional-classes" href="#uidemo-wells-optional-classes" class="header-2">Optional classes</a>
|
||
<div class="col-md-12">
|
||
<div class="well well-lg">Look, I'm in a well!</div>
|
||
<div class="well well-sm">Look, I'm in a well!</div>
|
||
</div>
|
||
</div>
|
||
<!-- /21. $WELLS -->
|
||
|
||
<!-- 22. $POPOVERS =================================================================================
|
||
|
||
Popovers
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-popovers" href="#uidemo-popovers" class="header-1">Popovers</a>
|
||
</div>
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('.popovers-demo button').popover();
|
||
});
|
||
</script>
|
||
<!-- Javascript -->
|
||
|
||
<!-- 22.1. $DEFAULT_POPOVERS =======================================================================
|
||
|
||
Default popovers
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-popovers-default" href="#uidemo-popovers-default" class="header-2">Default popovers</a>
|
||
<div class="col-md-12 popovers-demo">
|
||
<!-- On the right -->
|
||
<button type="button" class="btn" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Popover title">
|
||
Popover on right
|
||
</button>
|
||
|
||
<!-- On the top -->
|
||
<button type="button" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Popover title">
|
||
Popover on top
|
||
</button>
|
||
|
||
<!-- On the bottom -->
|
||
<button type="button" class="btn" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
||
sagittis lacus vel augue laoreet rutrum faucibus." data-title="Popover title">
|
||
Popover on bottom
|
||
</button>
|
||
|
||
<!-- On the left -->
|
||
<button type="button" class="btn" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Popover title">
|
||
Popover on left
|
||
</button>
|
||
|
||
<!-- Without title -->
|
||
<button type="button" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||
Without title
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 22.2. $POPOVER_STATES =========================================================================
|
||
|
||
Popover states
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-popovers-states" href="#uidemo-popovers-states" class="header-2">Popover states</a>
|
||
<div class="col-md-12 popovers-demo">
|
||
<!-- Light popovers -->
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<!-- Success -->
|
||
<button type="button" class="btn btn-success popover-success" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Success default">
|
||
Success default
|
||
</button>
|
||
|
||
<!-- Danger -->
|
||
<button type="button" class="btn btn-danger popover-danger" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Danger default">
|
||
Danger default
|
||
</button>
|
||
|
||
<!-- Warning -->
|
||
<button type="button" class="btn btn-warning popover-warning" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
||
sagittis lacus vel augue laoreet rutrum faucibus." data-title="Warning default">
|
||
Warning default
|
||
</button>
|
||
|
||
<!-- Info -->
|
||
<button type="button" class="btn btn-info popover-info" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Info default">
|
||
Info default
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- / Light popovers -->
|
||
|
||
<!-- Dark popovers -->
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<!-- Success -->
|
||
<button type="button" class="btn btn-success popover-success popover-dark" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Success dark">
|
||
Success dark
|
||
</button>
|
||
|
||
<!-- Danger -->
|
||
<button type="button" class="btn btn-danger popover-danger popover-dark" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Danger dark">
|
||
Danger dark
|
||
</button>
|
||
|
||
<!-- Warning -->
|
||
<button type="button" class="btn btn-warning popover-warning popover-dark" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
||
sagittis lacus vel augue laoreet rutrum faucibus." data-title="Warning dark">
|
||
Warning dark
|
||
</button>
|
||
|
||
<!-- Info -->
|
||
<button type="button" class="btn btn-info popover-info popover-dark" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Info dark">
|
||
Info dark
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- / Dark popovers -->
|
||
|
||
<!-- Light colorful popovers -->
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<!-- Success -->
|
||
<button type="button" class="btn btn-success popover-success popover-colorful" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Success default - Colorful">
|
||
Success default - Colorful
|
||
</button>
|
||
|
||
<!-- Danger -->
|
||
<button type="button" class="btn btn-danger popover-danger popover-colorful" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Danger default - Colorful">
|
||
Danger default - Colorful
|
||
</button>
|
||
|
||
<!-- Warning -->
|
||
<button type="button" class="btn btn-warning popover-warning popover-colorful" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
||
sagittis lacus vel augue laoreet rutrum faucibus." data-title="Warning default - Colorful">
|
||
Warning default - Colorful
|
||
</button>
|
||
|
||
<!-- Info -->
|
||
<button type="button" class="btn btn-info popover-info popover-colorful" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Info default - Colorful">
|
||
Info default - Colorful
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- / Light colorful popovers -->
|
||
|
||
<!-- Dark colorful popovers -->
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<!-- Success -->
|
||
<button type="button" class="btn btn-success popover-success popover-dark popover-colorful" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Success dark - Colorful">
|
||
Success dark - Colorful
|
||
</button>
|
||
|
||
<!-- Danger -->
|
||
<button type="button" class="btn btn-danger popover-danger popover-dark popover-colorful" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Danger dark - Colorful">
|
||
Danger dark - Colorful
|
||
</button>
|
||
|
||
<!-- Warning -->
|
||
<button type="button" class="btn btn-warning popover-warning popover-dark popover-colorful" data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
||
sagittis lacus vel augue laoreet rutrum faucibus." data-title="Warning dark - Colorful">
|
||
Warning dark - Colorful
|
||
</button>
|
||
|
||
<!-- Info -->
|
||
<button type="button" class="btn btn-info popover-info popover-dark popover-colorful" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-title="Info dark - Colorful">
|
||
Info dark - Colorful
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<!-- / Dark colorful popovers -->
|
||
</div>
|
||
</div>
|
||
<!-- /22. $POPOVERS -->
|
||
|
||
<!-- 23. $TOOLTIPS =================================================================================
|
||
|
||
Tooltips
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tooltips" href="#uidemo-tooltips" class="header-1">Tooltips</a>
|
||
</div>
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('.tooltips-demo button').tooltip();
|
||
});
|
||
</script>
|
||
<!-- Javascript -->
|
||
|
||
<!-- 23.1. $DEFAULT_TOOLTIPS =======================================================================
|
||
|
||
Default tooltips
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tooltips-default" href="#uidemo-tooltips-default" class="header-2">Default tooltips</a>
|
||
<div class="col-md-12 tooltips-demo">
|
||
<!-- On the left -->
|
||
<button type="button" class="btn" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
|
||
|
||
<!-- On the top -->
|
||
<button type="button" class="btn" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
|
||
|
||
<!-- On the bottom -->
|
||
<button type="button" class="btn" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
|
||
|
||
<!-- On the right -->
|
||
<button type="button" class="btn" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 23.2. $TOOLTIP_STATES =========================================================================
|
||
|
||
Tooltip states
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-tooltips-states" href="#uidemo-tooltips-states" class="header-2">Tooltip states</a>
|
||
<div class="col-md-12 tooltips-demo">
|
||
<!-- Success -->
|
||
<button type="button" class="btn btn-success tooltip-success" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Success Tooltip</button>
|
||
|
||
<!-- Danger -->
|
||
<button type="button" class="btn btn-danger tooltip-danger" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Danger Tooltip</button>
|
||
|
||
<!-- Warning -->
|
||
<button type="button" class="btn btn-warning tooltip-warning" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Warning Tooltip</button>
|
||
|
||
<!-- Info -->
|
||
<button type="button" class="btn btn-info tooltip-info" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Info Tooltip</button>
|
||
</div>
|
||
</div>
|
||
<!-- /23. $TOOLTIPS -->
|
||
|
||
<!-- 24. $MODALS ===================================================================================
|
||
|
||
Modals
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-modals" href="#uidemo-modals" class="header-1">Modals</a>
|
||
</div>
|
||
|
||
<!-- 24.1. $DEFAULT_MODALS =========================================================================
|
||
|
||
Default modals
|
||
-->
|
||
<!-- Modal -->
|
||
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
<h4>Text in a modal</h4>
|
||
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
|
||
|
||
<h4>Popover in a modal</h4>
|
||
<p>This <a href="#" role="button" class="btn btn-default popover-test" title="" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A Title">button</a> should trigger a popover on click.</p>
|
||
|
||
<h4>Tooltips in a modal</h4>
|
||
<p><a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="" data-original-title="Tooltip">that link</a> should have tooltips on hover.</p>
|
||
|
||
<hr>
|
||
|
||
<h4>Overflowing text to show scroll behavior</h4>
|
||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
|
||
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
|
||
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||
</div> <!-- / .modal-body -->
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
|
||
<button type="button" class="btn btn-primary">Save changes</button>
|
||
</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- /.modal -->
|
||
<!-- / Modal -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-modals-default" href="#uidemo-modals-default" class="header-2">Default modals</a>
|
||
<div class="col-md-12">
|
||
<!-- Button trigger modal -->
|
||
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 24.2. $MODALS_SIZES ===========================================================================
|
||
|
||
Sizes
|
||
-->
|
||
<!-- Small modal -->
|
||
<div id="modal-sizes-1" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
|
||
<div class="modal-dialog modal-sm">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h4 class="modal-title">Small modal</h4>
|
||
</div>
|
||
<div class="modal-body">...</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Small modal -->
|
||
|
||
<!-- Large modal -->
|
||
<div id="modal-sizes-2" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
|
||
</div>
|
||
<div class="modal-body">...</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Large modal -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-modals-sizes" href="#uidemo-modals-sizes" class="header-2">Sizes</a>
|
||
<div class="col-md-12">
|
||
<button class="btn" data-toggle="modal" data-target="#modal-sizes-1">Small modal</button>
|
||
<button class="btn" data-toggle="modal" data-target="#modal-sizes-2">Large modal</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 24.3. $MODALS_BLURRED_BACKGROUND ==============================================================
|
||
|
||
Blurred background
|
||
|
||
To enable blurred background effect just add class .modal-blur to the .modal
|
||
-->
|
||
<!-- Template -->
|
||
<div id="modal-blurred-bg" class="modal fade modal-blur" tabindex="-1" role="dialog" style="display: none;">
|
||
<div class="modal-dialog modal-sm">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal">×</button>
|
||
<h4 class="modal-title">Modal with blurred background</h4>
|
||
</div>
|
||
<div class="modal-body">...</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Template -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-modals-blurred-bg" href="#uidemo-modals-blurred-bg" class="header-2">Blurred background</a>
|
||
<div class="col-md-12">
|
||
<div class="note note-danger">Use this feature with caution because it can be slow and buggy on large pages.</div>
|
||
<button class="btn btn-success" data-toggle="modal" data-target="#modal-blurred-bg">Modal with blurred background</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- 24.4. $MODALS_EFFECTS =========================================================================
|
||
|
||
Effects
|
||
|
||
To use custom modal animations just add classes .animated and .{ANIMATION NAME} to .modal-dialog
|
||
-->
|
||
<!-- Template -->
|
||
<div id="uidemo-modals-effects-template" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
|
||
<div>
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<h4 class="modal-title">Small modal</h4>
|
||
</div>
|
||
<div class="modal-body">...</div>
|
||
</div><!-- / .modal-content -->
|
||
</div><!-- / .modal-dialog -->
|
||
</div>
|
||
<!-- / Template -->
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function() {
|
||
$('#uidemo-modals-effects-btn').on('click', function() {
|
||
var $modal = $('#uidemo-modals-effects-template').clone(true);
|
||
$modal.find('> div').addClass('modal-dialog modal-sm animated ' + $('#uidemo-modals-effects-select').find(":selected").attr('value'));
|
||
$modal.modal('show');
|
||
})
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-modals-effects" href="#uidemo-modals-effects" class="header-2">Effects</a>
|
||
<div class="col-md-3">
|
||
<select id="uidemo-modals-effects-select" class="form-control">
|
||
<optgroup label="Attention Seekers">
|
||
<option value="bounce">bounce</option>
|
||
<option value="flash">flash</option>
|
||
<option value="pulse">pulse</option>
|
||
<option value="shake">shake</option>
|
||
<option value="swing">swing</option>
|
||
<option value="tada">tada</option>
|
||
<option value="wobble">wobble</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Bouncing Entrances">
|
||
<option value="bounceIn">bounceIn</option>
|
||
<option value="bounceInDown">bounceInDown</option>
|
||
<option value="bounceInLeft">bounceInLeft</option>
|
||
<option value="bounceInRight">bounceInRight</option>
|
||
<option value="bounceInUp">bounceInUp</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Fading Entrances">
|
||
<option value="fadeIn">fadeIn</option>
|
||
<option value="fadeInDown">fadeInDown</option>
|
||
<option value="fadeInDownBig">fadeInDownBig</option>
|
||
<option value="fadeInLeft">fadeInLeft</option>
|
||
<option value="fadeInLeftBig">fadeInLeftBig</option>
|
||
<option value="fadeInRight">fadeInRight</option>
|
||
<option value="fadeInRightBig">fadeInRightBig</option>
|
||
<option value="fadeInUp">fadeInUp</option>
|
||
<option value="fadeInUpBig">fadeInUpBig</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Flippers">
|
||
<option value="flip">flip</option>
|
||
<option value="flipInX">flipInX</option>
|
||
<option value="flipInY">flipInY</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Lightspeed">
|
||
<option value="lightSpeedIn">lightSpeedIn</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Rotating Entrances">
|
||
<option value="rotateIn">rotateIn</option>
|
||
<option value="rotateInDownLeft">rotateInDownLeft</option>
|
||
<option value="rotateInDownRight">rotateInDownRight</option>
|
||
<option value="rotateInUpLeft">rotateInUpLeft</option>
|
||
<option value="rotateInUpRight">rotateInUpRight</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Sliders">
|
||
<option value="slideInDown">slideInDown</option>
|
||
<option value="slideInLeft">slideInLeft</option>
|
||
<option value="slideInRight">slideInRight</option>
|
||
</optgroup>
|
||
|
||
<optgroup label="Specials">
|
||
<option value="rollIn">rollIn</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-9">
|
||
<button class="btn" id="uidemo-modals-effects-btn">Show Modal</button>
|
||
<em>see <a href="http://daneden.github.io/animate.css/" target="_blank">http://daneden.github.io/animate.css/</a></em>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 24.5. $MODALS_ALERTS ==========================================================================
|
||
|
||
Alerts
|
||
-->
|
||
<!-- Success -->
|
||
<div id="uidemo-modals-alerts-success" class="modal modal-alert modal-success fade">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<i class="fa fa-check-circle"></i>
|
||
</div>
|
||
<div class="modal-title">Some alert title</div>
|
||
<div class="modal-body">Some alert text</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
|
||
</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Success -->
|
||
|
||
<!-- Danger -->
|
||
<div id="uidemo-modals-alerts-danger" class="modal modal-alert modal-danger fade">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<i class="fa fa-times-circle"></i>
|
||
</div>
|
||
<div class="modal-title">Some alert title</div>
|
||
<div class="modal-body">Some alert text</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-danger" data-dismiss="modal">OK</button>
|
||
</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Danger -->
|
||
|
||
<!-- Warning -->
|
||
<div id="uidemo-modals-alerts-warning" class="modal modal-alert modal-warning fade">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<i class="fa fa-warning"></i>
|
||
</div>
|
||
<div class="modal-title">Some alert title</div>
|
||
<div class="modal-body">Some alert text</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-warning" data-dismiss="modal">OK</button>
|
||
</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Warning -->
|
||
|
||
<!-- Info -->
|
||
<div id="uidemo-modals-alerts-info" class="modal modal-alert modal-info fade">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<i class="fa fa-info-circle"></i>
|
||
</div>
|
||
<div class="modal-title">Some alert title</div>
|
||
<div class="modal-body">Some alert text</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-info" data-dismiss="modal">OK</button>
|
||
</div>
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- / .modal -->
|
||
<!-- / Info -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-modals-alerts" href="#uidemo-modals-alerts" class="header-2">Alerts</a>
|
||
<div class="col-md-12">
|
||
<button class="btn btn-success" data-toggle="modal" data-target="#uidemo-modals-alerts-success">Success</button>
|
||
<button class="btn btn-danger" data-toggle="modal" data-target="#uidemo-modals-alerts-danger">Danger</button>
|
||
<button class="btn btn-warning" data-toggle="modal" data-target="#uidemo-modals-alerts-warning">Warning</button>
|
||
<button class="btn btn-info" data-toggle="modal" data-target="#uidemo-modals-alerts-info">Info</button>
|
||
</div>
|
||
</div>
|
||
<!-- /24. $MODALS -->
|
||
|
||
<!-- 25. $ACCORDIONS ===============================================================================
|
||
|
||
Accordions
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-accordions" href="#uidemo-accordions" class="header-1">Accordions</a>
|
||
</div>
|
||
|
||
<!-- 25.1. $ACCORDIONS_EXAMPLE =====================================================================
|
||
|
||
Example
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-accordions-example" href="#uidemo-accordions-example" class="header-2">Example</a>
|
||
<div class="col-md-12">
|
||
<div class="panel-group" id="accordion-example">
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-example" href="#collapseOne">
|
||
Collapsible Group Item #1
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseOne" class="panel-collapse in">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-example" href="#collapseTwo">
|
||
Collapsible Group Item #2
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseTwo" class="panel-collapse collapse">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-example" href="#collapseThree">
|
||
Collapsible Group Item #3
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseThree" class="panel-collapse collapse">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
</div> <!-- / .panel-group -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 25.2. $ACCORDIONS_COLORS ======================================================================
|
||
|
||
Colors
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-accordions-colors" href="#uidemo-accordions-colors" class="header-2">Colors</a>
|
||
<div class="col-md-12">
|
||
|
||
<!-- Success -->
|
||
<div class="panel-group panel-group-success" id="accordion-success-example">
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-success-example" href="#collapseOne-success">
|
||
Collapsible Group Item #1
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseOne-success" class="panel-collapse in">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-success-example" href="#collapseTwo-success">
|
||
Collapsible Group Item #2
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseTwo-success" class="panel-collapse collapse">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-success-example" href="#collapseThree-success">
|
||
Collapsible Group Item #3
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseThree-success" class="panel-collapse collapse">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
</div> <!-- / .panel-group -->
|
||
|
||
<!-- Danger -->
|
||
<div class="panel-group panel-group-danger" id="accordion-danger-example">
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-danger-example" href="#collapseOne-danger">
|
||
Collapsible Group Item #1
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseOne-danger" class="panel-collapse in">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-danger-example" href="#collapseTwo-danger">
|
||
Collapsible Group Item #2
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseTwo-danger" class="panel-collapse collapse">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-danger-example" href="#collapseThree-danger">
|
||
Collapsible Group Item #3
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseThree-danger" class="panel-collapse collapse">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
</div> <!-- / .panel-group -->
|
||
<!-- / Danger -->
|
||
|
||
<!-- Warning -->
|
||
<div class="panel-group panel-group-warning" id="accordion-warning-example">
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-warning-example" href="#collapseOne-warning">
|
||
Collapsible Group Item #1
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseOne-warning" class="panel-collapse in">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-warning-example" href="#collapseTwo-warning">
|
||
Collapsible Group Item #2
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseTwo-warning" class="panel-collapse collapse">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-warning-example" href="#collapseThree-warning">
|
||
Collapsible Group Item #3
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseThree-warning" class="panel-collapse collapse">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
</div> <!-- / .panel-group -->
|
||
<!-- / Warning -->
|
||
|
||
<!-- Info -->
|
||
<div class="panel-group panel-group-info" id="accordion-info-example">
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-info-example" href="#collapseOne-info">
|
||
Collapsible Group Item #1
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseOne-info" class="panel-collapse in">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-info-example" href="#collapseTwo-info">
|
||
Collapsible Group Item #2
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseTwo-info" class="panel-collapse collapse">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
|
||
<div class="panel">
|
||
<div class="panel-heading">
|
||
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-info-example" href="#collapseThree-info">
|
||
Collapsible Group Item #3
|
||
</a>
|
||
</div> <!-- / .panel-heading -->
|
||
<div id="collapseThree-info" class="panel-collapse collapse">
|
||
<div class="panel-body">
|
||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||
</div> <!-- / .panel-body -->
|
||
</div> <!-- / .collapse -->
|
||
</div> <!-- / .panel -->
|
||
</div> <!-- / .panel-group -->
|
||
<!-- / Info -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- /25. $ACCORDIONS -->
|
||
|
||
<!-- 26. $NOTES ====================================================================================
|
||
|
||
Notes
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-notes" href="#uidemo-notes" class="header-1">Notes</a>
|
||
</div>
|
||
|
||
<!-- 26.1. $NOTES_DEFAULT ==========================================================================
|
||
|
||
Default notes
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-notes-default" href="#uidemo-notes-default" class="header-2">Default notes</a>
|
||
<div class="col-md-12">
|
||
<div class="note">
|
||
<h4 class="note-title">Default note title</h4>
|
||
Default note text here.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 26.2. $NOTES_STATES ===========================================================================
|
||
|
||
States
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-notes-states" href="#uidemo-notes-states" class="header-2">States</a>
|
||
<div class="col-md-12">
|
||
<div class="note note-success">
|
||
<h4 class="note-title">Success note title</h4>
|
||
Success note text here.
|
||
</div>
|
||
|
||
<div class="note note-danger">
|
||
<h4 class="note-title">Danger note title</h4>
|
||
Danger note text here.
|
||
</div>
|
||
|
||
<div class="note note-warning">
|
||
<h4 class="note-title">Warning note title</h4>
|
||
Warning note text here.
|
||
</div>
|
||
|
||
<div class="note note-info">
|
||
<h4 class="note-title">Info note title</h4>
|
||
Info note text here.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /26. $NOTES -->
|
||
|
||
<!-- 27. $TEXT_COLORS ==============================================================================
|
||
|
||
Text colors
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-text-colors" href="#uidemo-text-colors" class="header-1">Text colors</a>
|
||
</div>
|
||
|
||
<!-- 27.1. $TEXT_COLORS_EXAMPLES ===================================================================
|
||
|
||
Examples
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-text-colors-examples" href="#uidemo-text-colors-examples" class="header-2">Examples</a>
|
||
<div class="col-md-12">
|
||
<p class="text-success">Some <strong>text</strong> <em>example</em> with <a href="#">link</a>.</p>
|
||
<p class="text-danger">Some <strong>text</strong> <em>example</em> with <a href="#">link</a>.</p>
|
||
<p class="text-warning">Some <strong>text</strong> <em>example</em> with <a href="#">link</a>.</p>
|
||
<p class="text-info">Some <strong>text</strong> <em>example</em> with <a href="#">link</a>.</p>
|
||
</div>
|
||
</div>
|
||
<!-- /27. $TEXT_COLORS -->
|
||
|
||
<!-- 28. $JQUERY_UI ================================================================================
|
||
|
||
jQuery UI
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui" href="#uidemo-jquery-ui" class="header-1">jQuery UI</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://jqueryui.com" target="_blank">http://jqueryui.com</a></div>
|
||
<div class="note note-warning uidemo-note">
|
||
jQuery UI horizontal sliders are not supporting right-to-left direction. To use horizontal sliders with right-to-left direction you need set <code>range: 'max'</code> option.
|
||
</div>
|
||
|
||
<!-- 28.1. $JQUERY_UI_SLIDERS_DEFAULT ==============================================================
|
||
|
||
Default sliders
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
var default_sliders_options = {
|
||
'range': 'min',
|
||
'min': 0,
|
||
'max': 100,
|
||
'value': 60
|
||
};
|
||
|
||
$('#ui-slider').slider(default_sliders_options);
|
||
|
||
$('#ui-slider-vertical').slider($.extend({ orientation: 'vertical' }, default_sliders_options));
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui-sliders" href="#uidemo-jquery-ui-sliders" class="header-2">Default sliders</a>
|
||
<div class="col-md-6">
|
||
<div id="ui-slider"></div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div id="ui-slider-vertical" style="height: 100px;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 28.2. $JQUERY_UI_SLIDERS_COLORS ===============================================================
|
||
|
||
Slider colors
|
||
-->
|
||
<!-- Styles -->
|
||
<style>
|
||
.ui-slider-colors-demo { margin-bottom: 20px; }
|
||
.ui-v-slider-colors-demo { float: left; margin-right: 20px; }
|
||
.right-to-left .ui-v-slider-colors-demo { float: right; margin-left: 20px; margin-right: 0; }
|
||
</style>
|
||
<!-- / Styles -->
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
var colorful_sliders_options = {
|
||
'range': 'min',
|
||
'min': 0,
|
||
'max': 100,
|
||
'value': 60
|
||
};
|
||
|
||
$('.ui-slider-colors-demo').slider(colorful_sliders_options);
|
||
|
||
$('.ui-v-slider-colors-demo').slider($.extend({ orientation: 'vertical' }, colorful_sliders_options));
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui-sliders-colors" href="#uidemo-jquery-ui-sliders-colors" class="header-2">Slider colors</a>
|
||
<div class="col-md-6">
|
||
<div class="ui-slider-success ui-slider-colors-demo"></div>
|
||
<div class="ui-slider-danger ui-slider-colors-demo"></div>
|
||
<div class="ui-slider-warning ui-slider-colors-demo"></div>
|
||
<div class="ui-slider-info ui-slider-colors-demo"></div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div style="height: 100px;" class="ui-slider-success ui-v-slider-colors-demo"></div>
|
||
<div style="height: 100px;" class="ui-slider-danger ui-v-slider-colors-demo"></div>
|
||
<div style="height: 100px;" class="ui-slider-warning ui-v-slider-colors-demo"></div>
|
||
<div style="height: 100px;" class="ui-slider-info ui-v-slider-colors-demo"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 28.3. $JQUERY_UI_SLIDERS_RANGE ================================================================
|
||
|
||
Range sliders
|
||
-->
|
||
<!-- Styles -->
|
||
<style>
|
||
.ui-slider-range-demo { margin-bottom: 20px; }
|
||
.ui-v-slider-range-demo { float: left; margin-right: 20px; }
|
||
.right-to-left .ui-v-slider-range-demo { float: right; margin-left: 20px; margin-right: 0; }
|
||
</style>
|
||
<!-- / Styles -->
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
var range_sliders_options = {
|
||
'range': true,
|
||
'min': 0,
|
||
'max': 500,
|
||
'values': [ 125, 300 ]
|
||
};
|
||
|
||
$('.ui-slider-range-demo').slider(range_sliders_options);
|
||
|
||
$('.ui-v-slider-range-demo').slider($.extend({ orientation: 'vertical' }, range_sliders_options));
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui-sliders-range" href="#uidemo-jquery-ui-range" class="header-2">Range sliders</a>
|
||
<div class="col-md-6">
|
||
<div class="ui-slider-range-demo"></div>
|
||
<div class="ui-slider-success ui-slider-range-demo"></div>
|
||
<div class="ui-slider-danger ui-slider-range-demo"></div>
|
||
<div class="ui-slider-warning ui-slider-range-demo"></div>
|
||
<div class="ui-slider-info ui-slider-range-demo"></div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div style="height: 100px;" class="ui-v-slider-range-demo"></div>
|
||
<div style="height: 100px;" class="ui-slider-success ui-v-slider-range-demo"></div>
|
||
<div style="height: 100px;" class="ui-slider-danger ui-v-slider-range-demo"></div>
|
||
<div style="height: 100px;" class="ui-slider-warning ui-v-slider-range-demo"></div>
|
||
<div style="height: 100px;" class="ui-slider-info ui-v-slider-range-demo"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 28.4. $JQUERY_UI_ACCORDIONS ===================================================================
|
||
|
||
Accordions
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$( "#ui-accordion" ).accordion({
|
||
heightStyle: "content",
|
||
header: "> div > h3"
|
||
}).sortable({
|
||
axis: "y",
|
||
handle: "h3",
|
||
stop: function( event, ui ) {
|
||
// IE doesn't register the blur when sorting
|
||
// so trigger focusout handlers to remove .ui-state-focus
|
||
ui.item.children( "h3" ).triggerHandler( "focusout" );
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui-accordions" href="#uidemo-jquery-ui-accordions" class="header-2">Sortable accordions</a>
|
||
<div class="col-md-12">
|
||
<div id="ui-accordion">
|
||
<div class="group">
|
||
<h3>Section 1</h3>
|
||
<div>
|
||
<p>
|
||
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
|
||
</p>
|
||
</div>
|
||
</div> <!-- / .group -->
|
||
<div class="group">
|
||
<h3>Section 2</h3>
|
||
<div>
|
||
<p>
|
||
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.
|
||
</p>
|
||
</div>
|
||
</div> <!-- / .group -->
|
||
<div class="group">
|
||
<h3>Section 3</h3>
|
||
<div>
|
||
<p>
|
||
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
|
||
</p>
|
||
<ul>
|
||
<li>List item one</li>
|
||
<li>List item two</li>
|
||
<li>List item three</li>
|
||
</ul>
|
||
</div>
|
||
</div> <!-- / .group -->
|
||
<div class="group">
|
||
<h3>Section 4</h3>
|
||
<div>
|
||
<p>
|
||
Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
|
||
</p>
|
||
<p>
|
||
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
|
||
</p>
|
||
</div>
|
||
</div> <!-- / .group -->
|
||
</div> <!-- / #ui-accordion -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 28.5. $JQUERY_UI_AUTOCOMPLETE =================================================================
|
||
|
||
Autocomplete
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$("#ui-autocomplete-city").autocomplete({
|
||
source: function(request, response) {
|
||
$.ajax({
|
||
url: "http://ws.geonames.org/searchJSON",
|
||
dataType: "jsonp",
|
||
data: {
|
||
featureClass: "P",
|
||
style: "full",
|
||
maxRows: 12,
|
||
name_startsWith: request.term,
|
||
username: 'pixeladmin' // replace it with your geonames' username
|
||
},
|
||
success: function(data) {
|
||
response($.map(data.geonames, function(item) {
|
||
return {
|
||
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
|
||
value: item.name
|
||
}
|
||
}));
|
||
}
|
||
});
|
||
},
|
||
minLength: 2,
|
||
select: function(event, ui) {
|
||
console.log(ui.item ?
|
||
"Selected: " + ui.item.label :
|
||
"Nothing selected, input was " + this.value);
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui-autocomplete" href="#uidemo-jquery-ui-autocomplete" class="header-2">Autocomplete</a>
|
||
<div class="col-md-12">
|
||
<input id="ui-autocomplete-city" class="form-control" placeholder="Type your city">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 28.6. $JQUERY_UI_MULTILEVEL_MENUS =============================================================
|
||
|
||
Multilevel menus
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function(){
|
||
$( "#ui-menu-demo" ).menu();
|
||
})
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui-multilevel-menus" href="#uidemo-jquery-ui-multilevel-menus" class="header-2">Multilevel menus</a>
|
||
<div class="col-md-12">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Show menu <i class="fa fa-caret-down"></i></button>
|
||
|
||
<ul id="ui-menu-demo" class="dropdown-menu">
|
||
<li class="disabled"><a href="#">Aberdeen</a></li>
|
||
<li><a href="#">Ada</a></li>
|
||
<li><a href="#"><i class="fa fa-cog"></i>Adamsville</a></li>
|
||
<li class="divider"></li>
|
||
<li class="dropdown-header">Some header</li>
|
||
<li><a href="#">Addyston</a></li>
|
||
<li>
|
||
<a href="#">Delphi</a>
|
||
<ul>
|
||
<li class="ui-state-disabled"><a href="#">Ada</a></li>
|
||
<li><a href="#">Saarland</a></li>
|
||
<li><a href="#">Salzburg</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#">Saarland</a></li>
|
||
<li>
|
||
<a href="#">Salzburg</a>
|
||
<ul>
|
||
<li>
|
||
<a href="#">Delphi</a>
|
||
<ul>
|
||
<li><a href="#">Ada</a></li>
|
||
<li><a href="#">Saarland</a></li>
|
||
<li><a href="#">Salzburg</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#">Delphi</a>
|
||
<ul>
|
||
<li><a href="#">Ada</a></li>
|
||
<li><a href="#">Saarland</a></li>
|
||
<li><a href="#">Salzburg</a></li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="#">Perch</a></li>
|
||
</ul>
|
||
</li>
|
||
<li class="ui-state-disabled"><a href="#">Amesville</a></li>
|
||
</ul> <!-- / .dropdown-menu -->
|
||
</div> <!-- / .btn-group -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 28.7. $JQUERY_UI_SPINNERS =====================================================================
|
||
|
||
Spinners
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function(){
|
||
$("#ui-spinner-demo").spinner();
|
||
|
||
$("#ui-spinner-disable-demo").click(function() {
|
||
if ($("#ui-spinner-demo").spinner("option", "disabled")) {
|
||
$("#ui-spinner-demo").spinner("enable");
|
||
} else {
|
||
$("#ui-spinner-demo").spinner("disable");
|
||
}
|
||
});
|
||
|
||
$( "#ui-spinner-toggle-demo").click(function() {
|
||
if ($("#ui-spinner-demo").data("ui-spinner")) {
|
||
$("#ui-spinner-demo").spinner("destroy");
|
||
} else {
|
||
$("#ui-spinner-demo").spinner();
|
||
}
|
||
});
|
||
|
||
$("#ui-spinner-getvalue-demo").click(function() {
|
||
alert($("#ui-spinner-demo").spinner("value"));
|
||
});
|
||
|
||
$("#ui-spinner-setvalue-demo").click(function() {
|
||
$("#ui-spinner-demo").spinner("value", 5);
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui-spinners" href="#uidemo-jquery-ui-spinners" class="header-2">Spinners</a>
|
||
<div class="col-md-12">
|
||
<p><input id="ui-spinner-demo" name="value" class="form-control"></p>
|
||
<div>
|
||
<button id="ui-spinner-disable-demo" class="btn">Toggle disable/enable</button>
|
||
<button id="ui-spinner-toggle-demo" class="btn">Toggle widget</button>
|
||
<button id="ui-spinner-getvalue-demo" class="btn">Get value</button>
|
||
<button id="ui-spinner-setvalue-demo" class="btn">Set value to 5</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 28.8. $JQUERY_UI_PROGRESS_BARS ================================================================
|
||
|
||
Progress bars
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function(){
|
||
$("#ui-progressbar-demo").progressbar({ value: 37 });
|
||
$("#ui-progressbar1-demo").progressbar({ value: 17 });
|
||
$("#ui-progressbar2-demo").progressbar({ value: 59 });
|
||
$("#ui-progressbar3-demo").progressbar({ value: 41 });
|
||
$("#ui-progressbar4-demo").progressbar({ value: 72 });
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<!-- Styles -->
|
||
<style>
|
||
.uidemo-jui-progress-bars-demo > div + div { margin-top: 15px; }
|
||
</style>
|
||
<!-- / Styles -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui-progress-bars" href="#uidemo-jquery-ui-progress-bars" class="header-2">Progress bars</a>
|
||
<div class="col-md-12 uidemo-jui-progress-bars-demo">
|
||
<div id="ui-progressbar-demo"></div>
|
||
<div id="ui-progressbar1-demo" class="ui-progressbar-warning"></div>
|
||
<div id="ui-progressbar2-demo" class="ui-progressbar-danger"></div>
|
||
<div id="ui-progressbar3-demo" class="ui-progressbar-success"></div>
|
||
<div id="ui-progressbar4-demo" class="ui-progressbar-info"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 28.9. $JQUERY_UI_TABS =========================================================================
|
||
|
||
Tabs
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function(){
|
||
var tabs = $( "#ui-tabs-demo" ).tabs({ active: 0 });
|
||
tabs.find(".ui-tabs-nav").sortable({
|
||
axis: "x",
|
||
stop: function() {
|
||
tabs.tabs( "refresh" );
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui-tabs" href="#uidemo-jquery-ui-tabs" class="header-2">Tabs</a>
|
||
<div class="col-md-12">
|
||
<div id="ui-tabs-demo">
|
||
<ul class="nav nav-tabs">
|
||
<li><a href="#ui-tabs-1-demo">Nunc tincidunt</a></li>
|
||
<li><a href="#ui-tabs-2-demo">Proin dolor <span class="label label-success">12</span></a></li>
|
||
<li><a href="#ui-tabs-3-demo">Aenean lacinia</a></li>
|
||
</ul> <!-- / .nav -->
|
||
<div class="tab-content tab-content-bordered">
|
||
<div id="ui-tabs-1-demo">
|
||
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
|
||
</div>
|
||
<div id="ui-tabs-2-demo">
|
||
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
|
||
</div>
|
||
<div id="ui-tabs-3-demo">
|
||
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
|
||
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id e titor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
|
||
</div>
|
||
</div> <!-- / .tab-content -->
|
||
</div> <!-- / .ui-tabs -->
|
||
</div>
|
||
</div>
|
||
<!-- /28. $JQUERY_UI -->
|
||
|
||
<!-- 29. $JQUERY_UI_EXTRAS =========================================================================
|
||
|
||
jQuery UI Extras
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui-extras" href="#uidemo-jquery-ui-extras" class="header-1">jQuery UI Extras</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">
|
||
jQuery UI extras includes datepicker and tooltips. Extras is disabled by default because it overrides plugins with the same name. To enable jQuery UI extras just uncomment <code><script src="assets/javascripts/jquery-ui-extras.min.js"></script></code> line at the end of the html file.<br><br> <button id="enable-jquery-ui-extras" class="btn btn-success btn-sm">Enable jQuery UI extras</button>
|
||
</div>
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
if (window.JQUERY_UI_EXTRAS_LOADED) {
|
||
$('#enable-jquery-ui-extras').attr('disabled', 'disabled');
|
||
} else {
|
||
$('#enable-jquery-ui-extras').click(function () {
|
||
$button = $(this);
|
||
$button.button('loading');
|
||
$.getScript('assets/javascripts/jquery-ui-extras.min.js', function () {
|
||
// Initialize datepickers and tooltips
|
||
initDatepickerDemo();
|
||
initDatepickerCustomDemo();
|
||
initTooltipsDemo();
|
||
$button.attr('disabled', 'disabled').text('jQuery UI extras is enabled');
|
||
});
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<!-- 29.1. $JQUERY_UI_DATEPICKER ===================================================================
|
||
|
||
Datepicker example
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
var initDatepickerDemo = function () {
|
||
if (window.JQUERY_UI_EXTRAS_LOADED) {
|
||
$('#ui-datepicker-demo').datepicker();
|
||
}
|
||
}
|
||
init.push(initDatepickerDemo);
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui-datepicker" href="#uidemo-jquery-ui-datepicker" class="header-2">Datepicker example</a>
|
||
<div class="col-md-12">
|
||
<input type="text" id="ui-datepicker-demo" class="form-control">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 29.2. $JQUERY_UI_DATEPICKER_CUSTOM ============================================================
|
||
|
||
Datepicker with multiple months and buttons
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
var initDatepickerCustomDemo = function () {
|
||
if (window.JQUERY_UI_EXTRAS_LOADED) {
|
||
$('#ui-datepicker-custom-demo').datepicker({
|
||
numberOfMonths: 3,
|
||
showButtonPanel: true
|
||
});
|
||
}
|
||
}
|
||
init.push(initDatepickerCustomDemo);
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui-datepicker-custom" href="#uidemo-jquery-ui-datepicker-custom" class="header-2">Datepicker with multiple months and buttons</a>
|
||
<div class="col-md-12">
|
||
<input type="text" id="ui-datepicker-custom-demo" class="form-control">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 29.3. $JQUERY_UI_TOOLTIPS =====================================================================
|
||
|
||
Tooltips
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
var initTooltipsDemo = function () {
|
||
if (window.JQUERY_UI_EXTRAS_LOADED) {
|
||
$('#jquery-ui-tooltips-demo').tooltip();
|
||
}
|
||
}
|
||
init.push(initTooltipsDemo);
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-ui-tooltips" href="#uidemo-jquery-ui-tooltips" class="header-2">Tooltips</a>
|
||
<div class="col-md-12" id="jquery-ui-tooltips-demo">
|
||
<div class="well">
|
||
<p><a href="#" title="That's what this widget is">Tooltips</a> can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
|
||
<p>But as it's not a native tooltip, it can be styled. Any themes built with <a href="http://themeroller.com" title="ThemeRoller: jQuery UI's theme builder application">ThemeRoller</a> will also style tooltips accordingly.</p>
|
||
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
|
||
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes." class="form-control input-sm"></p>
|
||
<p>Hover the field to see the tooltip.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /29. $JQUERY_UI_EXTRAS -->
|
||
|
||
<!-- 30. $JQUERY_SELECT2 ===========================================================================
|
||
|
||
jQuery Select2
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jquery-select2" href="#uidemo-jquery-select2" class="header-1">jQuery Select2</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://ivaynberg.github.io/select2/" target="_blank">http://ivaynberg.github.io/select2/</a></div>
|
||
|
||
<!-- 30.1. $JQUERY_SELECT2_SINGLE_SELECT ===========================================================
|
||
|
||
Single select
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$("#jquery-select2-example").select2({
|
||
allowClear: true,
|
||
placeholder: "Select a State"
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-select2-single" href="#uidemo-jquery-select2-single" class="header-2">Single select</a>
|
||
<div class="col-md-12">
|
||
<select id="jquery-select2-example" class="form-control">
|
||
<option></option>
|
||
<optgroup label="Alaskan/Hawaiian Time Zone">
|
||
<option value="AK">Alaska</option>
|
||
<option value="HI">Hawaii</option>
|
||
</optgroup>
|
||
<optgroup label="Pacific Time Zone">
|
||
<option value="CA">California</option>
|
||
<option value="NV">Nevada</option>
|
||
<option value="OR">Oregon</option>
|
||
<option value="WA">Washington</option>
|
||
</optgroup>
|
||
<optgroup label="Mountain Time Zone">
|
||
<option value="AZ">Arizona</option>
|
||
<option value="CO">Colorado</option>
|
||
<option value="ID">Idaho</option>
|
||
<option value="MT">Montana</option>
|
||
<option value="NE">Nebraska</option>
|
||
<option value="NM">New Mexico</option>
|
||
<option value="ND">North Dakota</option>
|
||
<option value="UT">Utah</option>
|
||
<option value="WY">Wyoming</option>
|
||
</optgroup>
|
||
<optgroup label="Central Time Zone">
|
||
<option value="AL">Alabama</option>
|
||
<option value="AR">Arkansas</option>
|
||
<option value="IL">Illinois</option>
|
||
<option value="IA">Iowa</option>
|
||
<option value="KS">Kansas</option>
|
||
<option value="KY">Kentucky</option>
|
||
<option value="LA">Louisiana</option>
|
||
<option value="MN">Minnesota</option>
|
||
<option value="MS">Mississippi</option>
|
||
<option value="MO">Missouri</option>
|
||
<option value="OK">Oklahoma</option>
|
||
<option value="SD">South Dakota</option>
|
||
<option value="TX">Texas</option>
|
||
<option value="TN">Tennessee</option>
|
||
<option value="WI">Wisconsin</option>
|
||
</optgroup>
|
||
<optgroup label="Eastern Time Zone">
|
||
<option value="CT">Connecticut</option>
|
||
<option value="DE">Delaware</option>
|
||
<option value="FL">Florida</option>
|
||
<option value="GA">Georgia</option>
|
||
<option value="IN">Indiana</option>
|
||
<option value="ME">Maine</option>
|
||
<option value="MD">Maryland</option>
|
||
<option value="MA">Massachusetts</option>
|
||
<option value="MI">Michigan</option>
|
||
<option value="NH">New Hampshire</option>
|
||
<option value="NJ">New Jersey</option>
|
||
<option value="NY">New York</option>
|
||
<option value="NC">North Carolina</option>
|
||
<option value="OH">Ohio</option>
|
||
<option value="PA">Pennsylvania</option>
|
||
<option value="RI">Rhode Island</option>
|
||
<option value="SC">South Carolina</option>
|
||
<option value="VT">Vermont</option>
|
||
<option value="VA">Virginia</option>
|
||
<option value="WV">West Virginia</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 30.2. $JQUERY_SELECT2_MULTISELECT =============================================================
|
||
|
||
Multiselect
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$("#jquery-select2-multiple").select2({
|
||
placeholder: "Select a State"
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-select2-multiselect" href="#uidemo-jquery-select2-multiselect" class="header-2">Multiselect</a>
|
||
<div class="col-md-12">
|
||
<select multiple="multiple" id="jquery-select2-multiple" class="form-control">
|
||
<optgroup label="Alaskan/Hawaiian Time Zone">
|
||
<option value="AK">Alaska</option>
|
||
<option value="HI">Hawaii</option>
|
||
</optgroup>
|
||
<optgroup label="Pacific Time Zone">
|
||
<option value="CA">California</option>
|
||
<option value="NV">Nevada</option>
|
||
<option value="OR">Oregon</option>
|
||
<option value="WA">Washington</option>
|
||
</optgroup>
|
||
<optgroup label="Mountain Time Zone">
|
||
<option value="AZ">Arizona</option>
|
||
<option value="CO">Colorado</option>
|
||
<option value="ID">Idaho</option>
|
||
<option value="MT">Montana</option>
|
||
<option value="NE">Nebraska</option>
|
||
<option value="NM">New Mexico</option>
|
||
<option value="ND">North Dakota</option>
|
||
<option value="UT">Utah</option>
|
||
<option value="WY">Wyoming</option>
|
||
</optgroup>
|
||
<optgroup label="Central Time Zone">
|
||
<option value="AL">Alabama</option>
|
||
<option value="AR">Arkansas</option>
|
||
<option value="IL">Illinois</option>
|
||
<option value="IA">Iowa</option>
|
||
<option value="KS">Kansas</option>
|
||
<option value="KY">Kentucky</option>
|
||
<option value="LA">Louisiana</option>
|
||
<option value="MN">Minnesota</option>
|
||
<option value="MS">Mississippi</option>
|
||
<option value="MO">Missouri</option>
|
||
<option value="OK">Oklahoma</option>
|
||
<option value="SD">South Dakota</option>
|
||
<option value="TX">Texas</option>
|
||
<option value="TN">Tennessee</option>
|
||
<option value="WI">Wisconsin</option>
|
||
</optgroup>
|
||
<optgroup label="Eastern Time Zone">
|
||
<option value="CT">Connecticut</option>
|
||
<option value="DE">Delaware</option>
|
||
<option value="FL">Florida</option>
|
||
<option value="GA">Georgia</option>
|
||
<option value="IN">Indiana</option>
|
||
<option value="ME">Maine</option>
|
||
<option value="MD">Maryland</option>
|
||
<option value="MA">Massachusetts</option>
|
||
<option value="MI">Michigan</option>
|
||
<option value="NH">New Hampshire</option>
|
||
<option value="NJ">New Jersey</option>
|
||
<option value="NY">New York</option>
|
||
<option value="NC">North Carolina</option>
|
||
<option value="OH">Ohio</option>
|
||
<option value="PA">Pennsylvania</option>
|
||
<option value="RI">Rhode Island</option>
|
||
<option value="SC">South Carolina</option>
|
||
<option value="VT">Vermont</option>
|
||
<option value="VA">Virginia</option>
|
||
<option value="WV">West Virginia</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 30.3. $JQUERY_SELECT2_EXTERNAL_SOURCE =========================================================
|
||
|
||
External source
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
function movieFormatResult(movie) {
|
||
var markup = "<table class='movie-result'><tr>";
|
||
if (movie.posters !== undefined && movie.posters.thumbnail !== undefined) {
|
||
markup += "<td class='movie-image' style='vertical-align: top'><img src='" + movie.posters.thumbnail + "' style='max-width: 60px; display: inline-block; margin-right: 10px; margin-left: 10px;' /></td>";
|
||
}
|
||
markup += "<td class='movie-info'><div class='movie-title' style='font-weight: 600; color: #000; margin-bottom: 6px;'>" + movie.title + "</div>";
|
||
if (movie.critics_consensus !== undefined) {
|
||
markup += "<div class='movie-synopsis'>" + movie.critics_consensus + "</div>";
|
||
}
|
||
else if (movie.synopsis !== undefined) {
|
||
markup += "<div class='movie-synopsis'>" + movie.synopsis + "</div>";
|
||
}
|
||
markup += "</td></tr></table>";
|
||
return markup;
|
||
}
|
||
|
||
function movieFormatSelection(movie) {
|
||
return movie.title;
|
||
}
|
||
|
||
init.push(function () {
|
||
$("#jquery-select2-external").select2({
|
||
placeholder: "Search for a movie",
|
||
minimumInputLength: 1,
|
||
ajax: { // instead of writing the function to execute the request we use Select2's convenient helper
|
||
url: "http://api.rottentomatoes.com/api/public/v1.0/movies.json",
|
||
dataType: 'jsonp',
|
||
data: function (term, page) {
|
||
return {
|
||
q: term, // search term
|
||
page_limit: 10,
|
||
apikey: "ju6z9mjyajq2djue3gbvv26t" // please do not use so this example keeps working
|
||
};
|
||
},
|
||
results: function (data, page) { // parse the results into the format expected by Select2.
|
||
// since we are using custom formatting functions we do not need to alter remote JSON data
|
||
return {results: data.movies};
|
||
}
|
||
},
|
||
initSelection: function(element, callback) {
|
||
// the input tag has a value attribute preloaded that points to a preselected movie's id
|
||
// this function resolves that id attribute to an object that select2 can render
|
||
// using its formatResult renderer - that way the movie name is shown preselected
|
||
var id=$(element).val();
|
||
if (id!=="") {
|
||
$.ajax("http://api.rottentomatoes.com/api/public/v1.0/movies/"+id+".json", {
|
||
data: {
|
||
apikey: "ju6z9mjyajq2djue3gbvv26t"
|
||
},
|
||
dataType: "jsonp"
|
||
}).done(function(data) { callback(data); });
|
||
}
|
||
},
|
||
formatResult: movieFormatResult, // omitted for brevity, see the source of this page
|
||
formatSelection: movieFormatSelection, // omitted for brevity, see the source of this page
|
||
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
|
||
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-select2-external" href="#uidemo-jquery-select2-external" class="header-2">External source</a>
|
||
<div class="col-md-12">
|
||
<input type="text" id="jquery-select2-external" class="form-control">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 30.4. $JQUERY_SELECT2_DISABLED_STATE ==========================================================
|
||
|
||
Disabled state
|
||
-->
|
||
<!-- Styles -->
|
||
<style>
|
||
#select2-disabled-examples > .select2-container {
|
||
margin-bottom: 15px;
|
||
}
|
||
</style>
|
||
<!-- / Styles -->
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$("#select2-disabled-examples select").select2({ placeholder: 'Select option...' });
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-select2-disabled" href="#uidemo-jquery-select2-disabled" class="header-2">Disabled state</a>
|
||
<div class="col-md-12" id="select2-disabled-examples">
|
||
<select class="form-control" disabled="disabled">
|
||
<option></option>
|
||
<option value="1">First option</option>
|
||
<option value="2">Second option</option>
|
||
<option value="3">Third option</option>
|
||
<option value="4">Fourth option</option>
|
||
<option value="5">Fourth option</option>
|
||
</select>
|
||
<select class="form-control" disabled="disabled">
|
||
<option value="1">First option</option>
|
||
<option value="2">Second option</option>
|
||
<option value="3" selected="selected">Third option</option>
|
||
<option value="4">Fourth option</option>
|
||
<option value="5">Fourth option</option>
|
||
</select>
|
||
<select multiple="multiple" class="form-control" disabled="disabled">
|
||
<option></option>
|
||
<option value="1">First option</option>
|
||
<option value="2">Second option</option>
|
||
<option value="3">Third option</option>
|
||
<option value="4">Fourth option</option>
|
||
<option value="5">Fourth option</option>
|
||
</select>
|
||
<select multiple="multiple" class="form-control" disabled="disabled">
|
||
<option value="1">First option</option>
|
||
<option value="2">Second option</option>
|
||
<option value="3" selected="selected">Third option</option>
|
||
<option value="4" selected="selected">Fourth option</option>
|
||
<option value="5">Fourth option</option>
|
||
</select>
|
||
<select class="form-control">
|
||
<option></option>
|
||
<option value="1">First option</option>
|
||
<option value="2">Second option</option>
|
||
<option value="3" disabled="disabled">Disabled option</option>
|
||
<option value="4">Fourth option</option>
|
||
<option value="5">Fourth option</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 30.5. $JQUERY_SELECT2_COLORS===================================================================
|
||
|
||
Colors
|
||
-->
|
||
<!-- Styles -->
|
||
<style>
|
||
#select2-colors-examples > div {
|
||
margin-bottom: 15px;
|
||
}
|
||
</style>
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$("#select2-colors-examples select").select2();
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jquery-select2-colors" href="#uidemo-jquery-select2-colors" class="header-2">Colors</a>
|
||
<div class="col-md-12" id="select2-colors-examples">
|
||
<!-- Primary -->
|
||
<div class="select2-primary">
|
||
<select multiple="multiple" class="form-control">
|
||
<option value="1" selected="selected">First option</option>
|
||
<option value="2">Second option</option>
|
||
<option value="3" selected="selected">Third option</option>
|
||
<option value="4" selected="selected">Fourth option</option>
|
||
<option value="5">Fifth option</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Success -->
|
||
<div class="select2-success">
|
||
<select multiple="multiple" class="form-control">
|
||
<option value="1" selected="selected">First option</option>
|
||
<option value="2">Second option</option>
|
||
<option value="3" selected="selected">Third option</option>
|
||
<option value="4" selected="selected">Fourth option</option>
|
||
<option value="5">Fifth option</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Warning -->
|
||
<div class="select2-warning">
|
||
<select multiple="multiple" class="form-control">
|
||
<option value="1" selected="selected">First option</option>
|
||
<option value="2">Second option</option>
|
||
<option value="3" selected="selected">Third option</option>
|
||
<option value="4" selected="selected">Fourth option</option>
|
||
<option value="5">Fifth option</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Danger -->
|
||
<div class="select2-danger">
|
||
<select multiple="multiple" class="form-control">
|
||
<option value="1" selected="selected">First option</option>
|
||
<option value="2">Second option</option>
|
||
<option value="3" selected="selected">Third option</option>
|
||
<option value="4" selected="selected">Fourth option</option>
|
||
<option value="5">Fifth option</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Info -->
|
||
<div class="select2-info">
|
||
<select multiple="multiple" class="form-control">
|
||
<option value="1" selected="selected">First option</option>
|
||
<option value="2">Second option</option>
|
||
<option value="3" selected="selected">Third option</option>
|
||
<option value="4" selected="selected">Fourth option</option>
|
||
<option value="5">Fifth option</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /30. $JQUERY_SELECT2 -->
|
||
|
||
<!-- 31. $SWITCHERS ================================================================================
|
||
|
||
Switchers
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-switchers" href="#uidemo-switchers" class="header-1">Switchers</a>
|
||
</div>
|
||
|
||
<!-- 31.1. $SWITCHERS_EXAMPLE ======================================================================
|
||
|
||
Switcher examples
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#switcher-example-1').switcher();
|
||
|
||
$('#switcher-example-2').switcher({
|
||
theme: 'square',
|
||
on_state_content: '<span class="fa fa-check"></span>',
|
||
off_state_content: '<span class="fa fa-times"></span>'
|
||
});
|
||
|
||
$('#switcher-example-3').switcher({
|
||
theme: 'modern'
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<!-- Style -->
|
||
<style>
|
||
#switchers-example .switcher {
|
||
margin-right: 15px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.right-to-left #switchers-example .switcher {
|
||
margin-left: 15px;
|
||
margin-right: 0;
|
||
}
|
||
</style>
|
||
<!-- / Style -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-switchers-example" href="#uidemo-switchers-example" class="header-2">Examples</a>
|
||
<div class="col-md-12" id="switchers-example">
|
||
<input type="checkbox" id="switcher-example-1">
|
||
<input type="checkbox" id="switcher-example-2" checked="checked">
|
||
<input type="checkbox" id="switcher-example-3">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 31.2. $SWITCHERS_COLORS =======================================================================
|
||
|
||
Switcher colors
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#switchers-colors-default > input').switcher();
|
||
$('#switchers-colors-square > input').switcher({ theme: 'square' });
|
||
$('#switchers-colors-modern > input').switcher({ theme: 'modern' });
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<!-- Style -->
|
||
<style>
|
||
#switchers-colors-default,
|
||
#switchers-colors-square {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
#switchers-colors-default .switcher,
|
||
#switchers-colors-square .switcher,
|
||
#switchers-colors-modern .switcher {
|
||
margin-right: 15px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.right-to-left #switchers-colors-default .switcher,
|
||
.right-to-left #switchers-colors-square .switcher,
|
||
.right-to-left #switchers-colors-modern .switcher {
|
||
margin-left: 15px;
|
||
margin-right: 0;
|
||
}
|
||
</style>
|
||
<!-- / Style -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-switchers-colors" href="#uidemo-switchers-colors" class="header-2">Switcher colors</a>
|
||
<div class="col-md-12">
|
||
<div id="switchers-colors-default">
|
||
<input type="checkbox" data-class="switcher-primary" checked="checked">
|
||
<input type="checkbox" data-class="switcher-success" checked="checked">
|
||
<input type="checkbox" data-class="switcher-warning" checked="checked">
|
||
<input type="checkbox" data-class="switcher-danger" checked="checked">
|
||
<input type="checkbox" data-class="switcher-info" checked="checked">
|
||
</div>
|
||
<div id="switchers-colors-square">
|
||
<input type="checkbox" data-class="switcher-primary" checked="checked">
|
||
<input type="checkbox" data-class="switcher-success" checked="checked">
|
||
<input type="checkbox" data-class="switcher-warning" checked="checked">
|
||
<input type="checkbox" data-class="switcher-danger" checked="checked">
|
||
<input type="checkbox" data-class="switcher-info" checked="checked">
|
||
</div>
|
||
<div id="switchers-colors-modern">
|
||
<input type="checkbox" data-class="switcher-primary" checked="checked">
|
||
<input type="checkbox" data-class="switcher-success" checked="checked">
|
||
<input type="checkbox" data-class="switcher-warning" checked="checked">
|
||
<input type="checkbox" data-class="switcher-danger" checked="checked">
|
||
<input type="checkbox" data-class="switcher-info" checked="checked">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 31.3. $SWITCHERS_SIZES ========================================================================
|
||
|
||
Sizes
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#switchers-sizes .switcher-example-default').switcher();
|
||
$('#switchers-sizes .switcher-example-square').switcher({ theme: 'square' });
|
||
$('#switchers-sizes .switcher-example-modern').switcher({ theme: 'modern' });
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<!-- Style -->
|
||
<style>
|
||
#switchers-sizes > div {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
#switchers-sizes .switcher {
|
||
margin-right: 15px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.right-to-left #switchers-sizes .switcher {
|
||
margin-left: 15px;
|
||
margin-right: 0;
|
||
}
|
||
</style>
|
||
<!-- / Style -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-switchers-sizes" href="#uidemo-switchers-sizes" class="header-2">Sizes</a>
|
||
<div class="col-md-12">
|
||
<div id="switchers-sizes">
|
||
<div>
|
||
<input type="checkbox" data-class="switcher-lg" class="switcher-example-default">
|
||
<input type="checkbox" data-class="switcher-lg" class="switcher-example-square">
|
||
<input type="checkbox" data-class="switcher-lg" class="switcher-example-modern">
|
||
</div>
|
||
<div>
|
||
<input type="checkbox" class="switcher-example-default">
|
||
<input type="checkbox" class="switcher-example-square">
|
||
<input type="checkbox" class="switcher-example-modern">
|
||
</div>
|
||
<div>
|
||
<input type="checkbox" data-class="switcher-sm" class="switcher-example-default">
|
||
<input type="checkbox" data-class="switcher-sm" class="switcher-example-square">
|
||
<input type="checkbox" data-class="switcher-sm" class="switcher-example-modern">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 31.4. $SWITCHERS_DISABLED_STATE ===============================================================
|
||
|
||
Disabled state
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#switcher-disabled-default').switcher();
|
||
$('#switcher-disabled-square').switcher({ theme: 'square' });
|
||
$('#switcher-disabled-modern').switcher({ theme: 'modern' });
|
||
|
||
$('#switcher-enable-all').click(function () {
|
||
$('#switchers-disabled input').switcher('enable');
|
||
});
|
||
|
||
$('#switcher-disable-all').click(function () {
|
||
$('#switchers-disabled input').switcher('disable');
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<!-- Style -->
|
||
<style>
|
||
#switchers-disabled > div {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
#switchers-disabled .switcher {
|
||
margin-right: 15px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.right-to-left #switchers-disabled .switcher {
|
||
margin-left: 15px;
|
||
margin-right: 0;
|
||
}
|
||
</style>
|
||
<!-- / Style -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-switchers-disabled" href="#uidemo-switchers-disabled" class="header-2">Disabled state</a>
|
||
<div class="col-md-12">
|
||
<div id="switchers-disabled">
|
||
<div>
|
||
<input type="checkbox" id="switcher-disabled-default" disabled="disabled">
|
||
<input type="checkbox" id="switcher-disabled-square" checked="checked" disabled="disabled">
|
||
<input type="checkbox" id="switcher-disabled-modern" disabled="disabled">
|
||
</div>
|
||
<div>
|
||
<button class="btn btn-success btn-sm" id="switcher-enable-all">Enable</button>
|
||
<button class="btn btn-danger btn-sm" id="switcher-disable-all">Disable</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /31. $SWITCHERS -->
|
||
|
||
<!-- 32. $BOOTSTRAP_DATEPICKER =====================================================================
|
||
|
||
Bootstrap Datepicker
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-bs-datepicker" href="#uidemo-bs-datepicker" class="header-1">Bootstrap Datepicker</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="https://github.com/eternicode/bootstrap-datepicker" target="_blank">https://github.com/eternicode/bootstrap-datepicker</a></div>
|
||
|
||
<!-- 32.1. $BOOTSTRAP_DATEPICKER_EXAMPLE ===========================================================
|
||
|
||
Example
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
var options = {
|
||
todayBtn: "linked",
|
||
orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto'
|
||
}
|
||
$('#bs-datepicker-example').datepicker(options);
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bs-datepicker-example" href="#uidemo-bs-datepicker-example" class="header-2">Example</a>
|
||
<div class="col-md-12">
|
||
<input type="text" class="form-control" id="bs-datepicker-example">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 32.2. $BOOTSTRAP_DATEPICKER_AS_COMPONENT ======================================================
|
||
|
||
As component
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#bs-datepicker-component').datepicker();
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bs-datepicker-component" href="#uidemo-bs-datepicker-component" class="header-2">As component</a>
|
||
<div class="col-md-12">
|
||
<div class="input-group date" id="bs-datepicker-component">
|
||
<input type="text" class="form-control"><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 32.3. $BOOTSTRAP_DATEPICKER_INLINE ============================================================
|
||
|
||
Embedded / Inline
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#bs-datepicker-inline').datepicker();
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bs-datepicker-inline" href="#uidemo-bs-datepicker-inline" class="header-2">Embedded / Inline</a>
|
||
<div class="col-md-12">
|
||
<div id="bs-datepicker-inline"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 32.4. $BOOTSTRAP_DATEPICKER_RANGE =============================================================
|
||
|
||
Range
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
var options = {
|
||
orientation: $('body').hasClass('right-to-left') ? "auto right" : 'auto auto'
|
||
}
|
||
$('#bs-datepicker-range').datepicker(options);
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bs-datepicker-range" href="#uidemo-bs-datepicker-range" class="header-2">Range</a>
|
||
<div class="col-md-12">
|
||
<div class="input-daterange input-group" id="bs-datepicker-range">
|
||
<input type="text" class="input-sm form-control" name="start" placeholder="Start date">
|
||
<span class="input-group-addon">to</span>
|
||
<input type="text" class="input-sm form-control" name="end" placeholder="End date">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /32. $BOOTSTRAP_DATEPICKER -->
|
||
|
||
<!-- 33. $BOOTSTRAP_TIMEPICKER =====================================================================
|
||
|
||
Bootstrap Timepicker
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-bs-timepicker" href="#uidemo-bs-timepicker" class="header-1">Bootstrap Timepicker</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://jdewit.github.io/bootstrap-timepicker/" target="_blank">http://jdewit.github.io/bootstrap-timepicker/</a></div>
|
||
|
||
<!-- 33.1. $BOOTSTRAP_TIMEPICKER_EXAMPLE ===========================================================
|
||
|
||
Example
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
var options = {
|
||
minuteStep: 5,
|
||
orientation: $('body').hasClass('right-to-left') ? { x: 'right', y: 'auto'} : { x: 'auto', y: 'auto'}
|
||
}
|
||
$('#bs-timepicker-example').timepicker(options);
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bs-timepicker-example" href="#uidemo-bs-timepicker-example" class="header-2">Example</a>
|
||
<div class="col-md-12">
|
||
<input type="text" class="form-control" id="bs-timepicker-example">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 33.2. $BOOTSTRAP_TIMEPICKER_AS_COMPONENT ======================================================
|
||
|
||
As component
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
var options = {
|
||
minuteStep: 1,
|
||
showSeconds: true,
|
||
showMeridian: false,
|
||
showInputs: false,
|
||
orientation: $('body').hasClass('right-to-left') ? { x: 'right', y: 'auto'} : { x: 'auto', y: 'auto'}
|
||
}
|
||
$('#bs-timepicker-component').timepicker(options);
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bs-timepicker-component" href="#uidemo-bs-timepicker-component" class="header-2">As component</a>
|
||
<div class="col-md-12">
|
||
<div class="input-group date">
|
||
<input type="text" class="form-control" id="bs-timepicker-component"><span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 33.3. $BOOTSTRAP_TIMEPICKER_MODAL =============================================================
|
||
|
||
Modal
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
var options = {
|
||
minuteStep: 5,
|
||
template: 'modal',
|
||
orientation: $('body').hasClass('right-to-left') ? { x: 'right', y: 'auto'} : { x: 'auto', y: 'auto'}
|
||
}
|
||
$('#bs-timepicker-modal').timepicker(options);
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bs-timepicker-modal" href="#uidemo-bs-timepicker-modal" class="header-2">Modal</a>
|
||
<div class="col-md-12">
|
||
<div class="input-group date">
|
||
<input type="text" class="form-control" id="bs-timepicker-modal"><span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 33.4. $BOOTSTRAP_TIMEPICKER_WITHOUT_TEMPLATE ==================================================
|
||
|
||
Without template
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
var options = {
|
||
template: false,
|
||
showInputs: false,
|
||
minuteStep: 5
|
||
}
|
||
$('#bs-timepicker-w-template').timepicker(options);
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bs-timepicker-w-template" href="#uidemo-bs-timepicker-w-template" class="header-2">Without template</a>
|
||
<div class="col-md-12">
|
||
<div class="has-feedback date">
|
||
<input type="text" class="form-control" id="bs-timepicker-w-template">
|
||
<span class="fa fa-clock-o form-control-feedback"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /33. $BOOTSTRAP_TIMEPICKER -->
|
||
|
||
<!-- 34. $BOOTSTRAP_DATEPAGINATOR ==================================================================
|
||
|
||
Bootstrap Datepaginator
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-bs-datepaginator" href="#uidemo-bs-datepaginator" class="header-1">Bootstrap Datepaginator</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://jondmiles.com/bootstrap-datepaginator/" target="_blank">http://jondmiles.com/bootstrap-datepaginator/</a></div>
|
||
|
||
<!-- 34.1. $BOOTSTRAP_DATEPAGINATOR_EXAMPLE ========================================================
|
||
|
||
Example
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
if (! $('html').hasClass('ie8')) {
|
||
$('#bs-datepaginator-example').datepaginator();
|
||
} else {
|
||
$('.ie8-note').attr('style', '');
|
||
}
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bs-datepaginator-example" href="#uidemo-bs-datepaginator-example" class="header-2">Example</a>
|
||
<div class="col-md-12">
|
||
<div id="bs-datepaginator-example"></div>
|
||
<div class="note note-danger ie8-note" style="display:none">Bootstrap-Datepaginator is disabled because it is extremely slow on IE8.</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 34.2. $BOOTSTRAP_DATEPAGINATOR_SIZES ==========================================================
|
||
|
||
Sizes
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
if (! $('html').hasClass('ie8')) {
|
||
$('#bs-datepaginator-small').datepaginator({ size: 'small' });
|
||
$('#bs-datepaginator-large').datepaginator({ size: 'large' });
|
||
} else {
|
||
$('.ie8-note').attr('style', '');
|
||
$('#bs-datepaginator-small').hide();
|
||
}
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<!-- Styles -->
|
||
<style>
|
||
#bs-datepaginator-small {
|
||
margin-bottom: 15px;
|
||
}
|
||
</style>
|
||
<!-- / Styles -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bs-datepaginator-sizes" href="#uidemo-bs-datepaginator-sizes" class="header-2">Sizes</a>
|
||
<div class="col-md-12">
|
||
<div id="bs-datepaginator-small"></div>
|
||
<div id="bs-datepaginator-large"></div>
|
||
<div class="note note-danger ie8-note" style="display:none">Bootstrap-Datepaginator is disabled because it is extremely slow on IE8.</div>
|
||
</div>
|
||
</div>
|
||
<!-- /34. $BOOTSTRAP_DATEPAGINATOR -->
|
||
|
||
<!-- 35. $BOOTSTRAP_TAB_DROP =======================================================================
|
||
|
||
Bootstrap Tab drop
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('ul.bs-tabdrop-example').tabdrop();
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bs-tabdrop" href="#uidemo-bs-tabdrop" class="header-1">Bootstrap Tab drop</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://www.eyecon.ro/bootstrap-tabdrop/" target="_blank">http://www.eyecon.ro/bootstrap-tabdrop/</a></div>
|
||
|
||
<!-- 35.1. $BOOTSTRAP_TAB_DROP_TABS ================================================================
|
||
|
||
Tabs
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-bs-tabdrop-tabs" href="#uidemo-bs-tabdrop-tabs" class="header-2">Tabs</a>
|
||
<div class="col-md-12">
|
||
<ul class="nav nav-tabs bs-tabdrop-example">
|
||
<li class="active"><a href="#bs-tabdrop-tab1" data-toggle="tab">Section 1</a></li>
|
||
<li><a href="#bs-tabdrop-tab2" data-toggle="tab">Section 2</a></li>
|
||
<li><a href="#bs-tabdrop-tab3" data-toggle="tab">Section 3</a></li>
|
||
<li><a href="#bs-tabdrop-tab4" data-toggle="tab">Section 4</a></li>
|
||
<li><a href="#bs-tabdrop-tab5" data-toggle="tab">Section 5</a></li>
|
||
<li><a href="#bs-tabdrop-tab6" data-toggle="tab">Section 6</a></li>
|
||
<li><a href="#bs-tabdrop-tab7" data-toggle="tab">Section 7</a></li>
|
||
<li><a href="#bs-tabdrop-tab8" data-toggle="tab">Section 8</a></li>
|
||
<li><a href="#bs-tabdrop-tab9" data-toggle="tab">Section 9</a></li>
|
||
<li><a href="#bs-tabdrop-tab10" data-toggle="tab">Section 10</a></li>
|
||
<li><a href="#bs-tabdrop-tab11" data-toggle="tab">Section 11</a></li>
|
||
<li><a href="#bs-tabdrop-tab12" data-toggle="tab">Section 12</a></li>
|
||
</ul>
|
||
<div class="tab-content tab-content-bordered">
|
||
<div class="tab-pane active" id="bs-tabdrop-tab1">
|
||
<p>I'm in Section 1.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-tab2">
|
||
<p>Howdy, I'm in Section 2.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-tab3">
|
||
<p>Howdy, I'm in Section 3.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-tab4">
|
||
<p>Howdy, I'm in Section 4.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-tab5">
|
||
<p>Howdy, I'm in Section 5.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-tab6">
|
||
<p>Howdy, I'm in Section 6.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-tab7">
|
||
<p>Howdy, I'm in Section 7.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-tab8">
|
||
<p>Howdy, I'm in Section 8.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-tab9">
|
||
<p>Howdy, I'm in Section 9.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-tab10">
|
||
<p>Howdy, I'm in Section 10.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-tab11">
|
||
<p>Howdy, I'm in Section 11.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-tab12">
|
||
<p>Howdy, I'm in Section 12.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 35.2. $BOOTSTRAP_TAB_DROP_PILLS ===============================================================
|
||
|
||
Pills
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-bs-tabdrop-pills" href="#uidemo-bs-tabdrop-pills" class="header-2">Pills</a>
|
||
<div class="col-md-12">
|
||
<ul class="nav nav-pills bs-tabdrop-example">
|
||
<li class="active"><a href="#bs-tabdrop-pill1" data-toggle="tab">Section 1</a></li>
|
||
<li><a href="#bs-tabdrop-pill2" data-toggle="tab">Section 2</a></li>
|
||
<li><a href="#bs-tabdrop-pill3" data-toggle="tab">Section 3</a></li>
|
||
<li><a href="#bs-tabdrop-pill4" data-toggle="tab">Section 4</a></li>
|
||
<li><a href="#bs-tabdrop-pill5" data-toggle="tab">Section 5</a></li>
|
||
<li><a href="#bs-tabdrop-pill6" data-toggle="tab">Section 6</a></li>
|
||
<li><a href="#bs-tabdrop-pill7" data-toggle="tab">Section 7</a></li>
|
||
<li><a href="#bs-tabdrop-pill8" data-toggle="tab">Section 8</a></li>
|
||
<li><a href="#bs-tabdrop-pill9" data-toggle="tab">Section 9</a></li>
|
||
<li><a href="#bs-tabdrop-pill10" data-toggle="tab">Section 10</a></li>
|
||
<li><a href="#bs-tabdrop-pill11" data-toggle="tab">Section 11</a></li>
|
||
<li><a href="#bs-tabdrop-pill12" data-toggle="tab">Section 12</a></li>
|
||
</ul>
|
||
<div class="tab-content">
|
||
<div class="tab-pane active" id="bs-tabdrop-pill1">
|
||
<p>I'm in Section 1.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-pill2">
|
||
<p>Howdy, I'm in Section 2.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-pill3">
|
||
<p>Howdy, I'm in Section 3.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-pill4">
|
||
<p>Howdy, I'm in Section 4.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-pill5">
|
||
<p>Howdy, I'm in Section 5.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-pill6">
|
||
<p>Howdy, I'm in Section 6.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-pill7">
|
||
<p>Howdy, I'm in Section 7.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-pill8">
|
||
<p>Howdy, I'm in Section 8.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-pill9">
|
||
<p>Howdy, I'm in Section 9.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-pill10">
|
||
<p>Howdy, I'm in Section 10.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-pill11">
|
||
<p>Howdy, I'm in Section 11.</p>
|
||
</div>
|
||
<div class="tab-pane" id="bs-tabdrop-pill12">
|
||
<p>Howdy, I'm in Section 12.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /35. $BOOTSTRAP_TAB_DROP -->
|
||
|
||
<!-- 36. $JQUERY_MINICOLORS ========================================================================
|
||
|
||
jQuery Minicolors
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jq-minicolors" href="#uidemo-jq-minicolors" class="header-1">jQuery Minicolors</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://labs.abeautifulsite.net/jquery-minicolors/" target="_blank">http://labs.abeautifulsite.net/jquery-minicolors/</a></div>
|
||
|
||
<!-- 36.1. $JQUERY_MINICOLORS_EXAMPLES =============================================================
|
||
|
||
Examples
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#minicolors-hue-demo').minicolors({
|
||
control: 'hue',
|
||
position: 'bottom left',
|
||
theme: 'bootstrap'
|
||
});
|
||
$('#minicolors-saturation-demo').minicolors({
|
||
control: 'saturation',
|
||
position: 'bottom right',
|
||
theme: 'bootstrap'
|
||
});
|
||
$('#minicolors-brightness-demo').minicolors({
|
||
control: 'brightness',
|
||
position: 'top left',
|
||
theme: 'bootstrap'
|
||
});
|
||
$('#minicolors-wheel-demo').minicolors({
|
||
control: 'wheel',
|
||
position: 'top right',
|
||
theme: 'bootstrap'
|
||
});
|
||
$('#minicolors-opacity-demo').minicolors({
|
||
control: 'wheel',
|
||
opacity: true,
|
||
theme: 'bootstrap'
|
||
});
|
||
$('#minicolors-hidden-demo').minicolors({ theme: 'bootstrap' });
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-minicolors-examples" href="#uidemo-jq-minicolors-examples" class="header-2">Examples</a>
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label for="minicolors-hue-demo">Hue (default)</label>
|
||
<input type="text" id="minicolors-hue-demo" class="form-control" value="#ff6161">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="minicolors-saturation-demo">Saturation</label>
|
||
<input type="text" id="minicolors-saturation-demo" class="form-control" value="#0088cc">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="minicolors-opacity-demo">Opacity</label>
|
||
<input type="text" id="minicolors-opacity-demo" class="form-control" value="#766fa8" data-opacity=".5">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-md-6">
|
||
<div class="form-group">
|
||
<label for="minicolors-brightness-demo">Brightness</label>
|
||
<input type="text" id="minicolors-brightness-demo" class="form-control" value="#00ffff">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="minicolors-wheel-demo">Wheel</label>
|
||
<input type="text" id="minicolors-wheel-demo" class="form-control" value="#ff99ee">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="minicolors-hidden-demo">Hidden Input</label>
|
||
<input type="hidden" id="minicolors-hidden-demo" class="form-control" value="#db913d">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 36.2. $JQUERY_MINICOLORS_INLINE ===============================================================
|
||
|
||
Inline
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#minicolors-inline-demo').minicolors({ theme: 'bootstrap', inline: true });
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-minicolors-inline" href="#uidemo-jq-minicolors-inline" class="header-2">Inline</a>
|
||
<div class="col-md-12">
|
||
<div class="form-group">
|
||
<input type="hidden" id="minicolors-inline-demo" class="form-control" value="#4fc8db">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /36. $JQUERY_MINICOLORS -->
|
||
|
||
<!-- 37. $JQUERY_MASKED_INPUTS =====================================================================
|
||
|
||
jQuery Masked Inputs
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jq-masked-inputs" href="#uidemo-jq-masked-inputs" class="header-1">jQuery Masked Inputs</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://digitalbush.com/projects/masked-input-plugin/" target="_blank">http://digitalbush.com/projects/masked-input-plugin/</a></div>
|
||
|
||
<!-- 37.1. $JQUERY_MASKED_INPUTS_EXAMPLES ==========================================================
|
||
|
||
Examples
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$("#masked-inputs-examples-date").mask("99/99/9999");
|
||
$("#masked-inputs-examples-phone").mask("(999) 999-9999");
|
||
$("#masked-inputs-examples-ssn").mask("999-99-9999");
|
||
$("#masked-inputs-examples-product-key").mask("a*-999-a999", {
|
||
placeholder: " ",
|
||
completed: function(){
|
||
alert("You typed the following: " + this.val());
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<!-- Styles -->
|
||
<style>
|
||
#masked-inputs-examples input {
|
||
margin-bottom: 15px;
|
||
}
|
||
</style>
|
||
<!-- / Styles -->
|
||
|
||
<div class="row" id="masked-inputs-examples">
|
||
<a id="uidemo-jq-masked-inputs-examples" href="#uidemo-jq-masked-inputs-examples" class="header-2">Examples</a>
|
||
<div class="col-md-6">
|
||
<input type="text" placeholder="Date: 99/99/9999" class="form-control" id="masked-inputs-examples-date">
|
||
<input type="text" placeholder="SSN: 999-99-9999" class="form-control" id="masked-inputs-examples-ssn">
|
||
</div>
|
||
<div class="col-md-6">
|
||
<input type="text" placeholder="Phone: (999) 999-9999" class="form-control" id="masked-inputs-examples-phone">
|
||
<input type="text" placeholder="Product Key: a*-999-a999" class="form-control" id="masked-inputs-examples-product-key">
|
||
</div>
|
||
</div>
|
||
<!-- /37. $JQUERY_MASKED_INPUTS -->
|
||
|
||
<!-- 38. $JQUERY_CHARACTER_LIMIT ===================================================================
|
||
|
||
jQuery Character Limit
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jq-character-limit" href="#uidemo-jq-character-limit" class="header-1">jQuery Character Limit</a>
|
||
</div>
|
||
|
||
<!-- 38.1. $JQUERY_CHARACTER_LIMIT_EXAMPLES ========================================================
|
||
|
||
Examples
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$("#character-limit-input").limiter(20, { label: '#character-limit-input-label' });
|
||
$("#character-limit-textarea").limiter(100, { label: '#character-limit-textarea-label' });
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<!-- Styles -->
|
||
<style>
|
||
#character-limit-input-label,
|
||
#character-limit-wo-label {
|
||
margin-bottom: 15px;
|
||
}
|
||
</style>
|
||
<!-- / Styles -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-character-limit-examples" href="#uidemo-jq-character-limit-examples" class="header-2">Examples</a>
|
||
<div class="col-md-12">
|
||
<input type="text" id="character-limit-input" class="form-control">
|
||
<div id="character-limit-input-label" class="limiter-label">Characters left: <span class="limiter-count"></span></div>
|
||
|
||
<textarea id="character-limit-textarea" rows="3" class="form-control"></textarea>
|
||
<div id="character-limit-textarea-label" class="limiter-label">Characters left: <span class="limiter-count"></span></div>
|
||
</div>
|
||
</div>
|
||
<!-- /38. $JQUERY_CHARACTER_LIMIT -->
|
||
|
||
<!-- 39. $JQUERY_AUTORESIZING_TEXTAREA =============================================================
|
||
|
||
jQuery Autoresizing Textarea
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jq-autoresizing-textarea" href="#uidemo-jq-autoresizing-textarea" class="header-1">jQuery Autoresizing Textarea</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://www.jacklmoore.com/autosize/" target="_blank">http://www.jacklmoore.com/autosize/</a></div>
|
||
|
||
<!-- 39.1. $JQUERY_AUTORESIZING_TEXTAREA_EXAMPLE ===================================================
|
||
|
||
Example
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$("#jq-autoresizing-textarea-example").autosize();
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-autoresizing-textarea-example" href="#uidemo-jq-autoresizing-textarea-example" class="header-2">Example</a>
|
||
<div class="col-md-12">
|
||
<textarea id="jq-autoresizing-textarea-example" rows="3" class="form-control"></textarea>
|
||
</div>
|
||
</div>
|
||
<!-- /39. $JQUERY_AUTORESIZING_TEXTAREA -->
|
||
|
||
<!-- 40. $JQUERY_EXPANDING_INPUTS ==================================================================
|
||
|
||
jQuery Expanding Inputs
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jq-expanding-inputs" href="#uidemo-jq-expanding-inputs" class="header-1">jQuery Expanding Inputs</a>
|
||
</div>
|
||
|
||
<!-- 40.1. $JQUERY_EXPANDING_INPUTS_EXAMPLES =======================================================
|
||
|
||
Examples
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$("#jq-expanding-input").expandingInput({
|
||
target: 'input[type="text"]',
|
||
hidden_content: '> div',
|
||
placeholder: 'Input example'
|
||
});
|
||
$("#jq-expanding-textarea").expandingInput({
|
||
target: 'textarea',
|
||
hidden_content: '> div',
|
||
placeholder: 'Textarea example'
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-expanding-inputs-examples" href="#uidemo-jq-expanding-inputs-examples" class="header-2">Examples</a>
|
||
<div class="col-md-6">
|
||
<div id="jq-expanding-input">
|
||
<input type="text" class="form-control">
|
||
<div class="expanding-input-hidden" style="margin-top: 10px;">
|
||
<label class="checkbox-inline"><input type="checkbox"> Checkbox</label>
|
||
<button class="btn btn-primary pull-right">Post comment</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div id="jq-expanding-textarea">
|
||
<textarea rows="3" class="form-control"></textarea>
|
||
<div class="expanding-input-hidden" style="margin-top: 10px;">
|
||
<label class="checkbox-inline"><input type="checkbox"> Checkbox</label>
|
||
<button class="btn btn-primary pull-right">Post comment</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 40.2. $JQUERY_EXPANDING_INPUTS_SIZES ==========================================================
|
||
|
||
Sizes
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$("#jq-expanding-input-sm").expandingInput({
|
||
target: 'input[type="text"]',
|
||
hidden_content: '> div',
|
||
placeholder: 'Small input'
|
||
});
|
||
$("#jq-expanding-input-default").expandingInput({
|
||
target: 'input[type="text"]',
|
||
hidden_content: '> div',
|
||
placeholder: 'Default input'
|
||
});
|
||
$("#jq-expanding-input-lg").expandingInput({
|
||
target: 'input[type="text"]',
|
||
hidden_content: '> div',
|
||
placeholder: 'Large input'
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-expanding-inputs-sizes" href="#uidemo-jq-expanding-inputs-sizes" class="header-2">Sizes</a>
|
||
<div class="col-md-4">
|
||
<div id="jq-expanding-input-sm">
|
||
<input type="text" class="form-control input-sm">
|
||
<div class="expanding-input-hidden">Hidden content</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div id="jq-expanding-input-default">
|
||
<input type="text" class="form-control">
|
||
<div class="expanding-input-hidden">Hidden content</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div id="jq-expanding-input-lg">
|
||
<input type="text" class="form-control input-lg">
|
||
<div class="expanding-input-hidden">Hidden content</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 40.3. $JQUERY_EXPANDING_INPUTS_CALLBACKS ======================================================
|
||
|
||
Callbacks
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$("#jq-expanding-input-callbacks").expandingInput({
|
||
target: 'textarea',
|
||
hidden_content: '> div',
|
||
placeholder: 'Resize textarea on expand',
|
||
onBeforeExpand: function () {
|
||
console.log('onBeforeExpand callback');
|
||
},
|
||
onAfterExpand: function () {
|
||
console.log('onAfterExpand callback');
|
||
this.$target.attr('rows', 4);
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-expanding-inputs-callbacks" href="#uidemo-jq-expanding-inputs-callbacks" class="header-2">Callbacks</a>
|
||
<div class="col-md-12">
|
||
<div id="jq-expanding-input-callbacks">
|
||
<textarea rows="1" class="form-control"></textarea>
|
||
<div class="expanding-input-hidden" style="margin-top: 10px;">
|
||
<button class="btn btn-primary pull-right">Post comment</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /40. $JQUERY_EXPANDING_INPUTS -->
|
||
|
||
<!-- 41. $WIZARD ===================================================================================
|
||
|
||
Wizard
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('.ui-wizard-example').pixelWizard({
|
||
onChange: function () {
|
||
console.log('Current step: ' + this.currentStep());
|
||
},
|
||
onFinish: function () {
|
||
// Disable changing step. To enable changing step just call this.unfreeze()
|
||
this.freeze();
|
||
console.log('Wizard is freezed');
|
||
console.log('Finished!');
|
||
}
|
||
});
|
||
|
||
$('.wizard-next-step-btn').click(function () {
|
||
$(this).parents('.ui-wizard-example').pixelWizard('nextStep');
|
||
});
|
||
|
||
$('.wizard-prev-step-btn').click(function () {
|
||
$(this).parents('.ui-wizard-example').pixelWizard('prevStep');
|
||
});
|
||
|
||
$('.wizard-go-to-step-btn').click(function () {
|
||
$(this).parents('.ui-wizard-example').pixelWizard('setCurrentStep', 2);
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-wizard" href="#uidemo-wizard" class="header-1">Wizard</a>
|
||
</div>
|
||
|
||
<!-- 41.1. $WIZARD_EXAMPLE =========================================================================
|
||
|
||
Example
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-wizard-example" href="#uidemo-wizard-example" class="header-2">Example</a>
|
||
<div class="col-md-12">
|
||
<div class="wizard ui-wizard-example">
|
||
<div class="wizard-wrapper">
|
||
<ul class="wizard-steps">
|
||
<li data-target="#wizard-example-step1" >
|
||
<span class="wizard-step-number">1</span>
|
||
<span class="wizard-step-caption">
|
||
Step 1
|
||
<span class="wizard-step-description">First step description</span>
|
||
</span>
|
||
</li
|
||
><li data-target="#wizard-example-step2"> <!-- ! Remove space between elements by dropping close angle -->
|
||
<span class="wizard-step-number">2</span>
|
||
<span class="wizard-step-caption">
|
||
Step 2
|
||
<span class="wizard-step-description">Second step description</span>
|
||
</span>
|
||
</li
|
||
><li data-target="#wizard-example-step3"> <!-- ! Remove space between elements by dropping close angle -->
|
||
<span class="wizard-step-number">3</span>
|
||
<span class="wizard-step-caption">
|
||
Step 3
|
||
<span class="wizard-step-description">Third step with long description. Lorem ipsum dolor sit amet</span>
|
||
</span>
|
||
</li
|
||
><li data-target="#wizard-example-step4"> <!-- ! Remove space between elements by dropping close angle -->
|
||
<span class="wizard-step-number">4</span>
|
||
<span class="wizard-step-caption">
|
||
Finish
|
||
</span>
|
||
</li>
|
||
</ul> <!-- / .wizard-steps -->
|
||
</div> <!-- / .wizard-wrapper -->
|
||
<div class="wizard-content panel">
|
||
<div class="wizard-pane" id="wizard-example-step1">
|
||
This is step 1<br><br>
|
||
<button class="btn btn-primary wizard-next-step-btn">Next</button>
|
||
</div> <!-- / .wizard-pane -->
|
||
<div class="wizard-pane" id="wizard-example-step2" style="display: none;">
|
||
This is step 2<br><br>
|
||
<button class="btn wizard-prev-step-btn">Prev</button>
|
||
<button class="btn btn-primary wizard-next-step-btn">Next</button>
|
||
</div> <!-- / .wizard-pane -->
|
||
<div class="wizard-pane" id="wizard-example-step3" style="display: none;">
|
||
This is step 3<br><br>
|
||
<button class="btn wizard-prev-step-btn">Prev</button>
|
||
<button class="btn btn-primary wizard-next-step-btn">Next</button>
|
||
</div> <!-- / .wizard-pane -->
|
||
<div class="wizard-pane" id="wizard-example-step4" style="display: none;">
|
||
Finish<br><br>
|
||
<button class="btn wizard-prev-step-btn">Prev</button>
|
||
<button class="btn btn-success wizard-go-to-step-btn">Go to Step 2</button>
|
||
<button class="btn btn-primary wizard-next-step-btn">Finish</button>
|
||
</div> <!-- / .wizard-pane -->
|
||
</div> <!-- / .wizard-content -->
|
||
</div> <!-- / .wizard -->
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 41.2. $WIZARD_MODAL ===========================================================================
|
||
|
||
Modal with wizard
|
||
-->
|
||
<!-- Modal -->
|
||
<div id="ui-wizard-modal" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="wizard ui-wizard-example">
|
||
<div class="wizard-wrapper">
|
||
<ul class="wizard-steps">
|
||
<li data-target="#wizard-example-step12" >
|
||
<span class="wizard-step-number">1</span>
|
||
<span class="wizard-step-caption">
|
||
Step 1
|
||
<span class="wizard-step-description">First step description</span>
|
||
</span>
|
||
</li
|
||
><li data-target="#wizard-example-step22"> <!-- ! Remove space between elements by dropping close angle -->
|
||
<span class="wizard-step-number">2</span>
|
||
<span class="wizard-step-caption">
|
||
Step 2
|
||
<span class="wizard-step-description">Second step description</span>
|
||
</span>
|
||
</li
|
||
><li data-target="#wizard-example-step32"> <!-- ! Remove space between elements by dropping close angle -->
|
||
<span class="wizard-step-number">3</span>
|
||
<span class="wizard-step-caption">
|
||
Step 3
|
||
<span class="wizard-step-description">Third step description</span>
|
||
</span>
|
||
</li
|
||
><li data-target="#wizard-example-step42"> <!-- ! Remove space between elements by dropping close angle -->
|
||
<span class="wizard-step-number">4</span>
|
||
<span class="wizard-step-caption">
|
||
Finish
|
||
</span>
|
||
</li>
|
||
</ul> <!-- / .wizard-steps -->
|
||
</div> <!-- / .wizard-wrapper -->
|
||
<div class="wizard-content">
|
||
<div class="wizard-pane" id="wizard-example-step12">
|
||
This is step 1<br><br>
|
||
<button class="btn btn-primary wizard-next-step-btn">Next</button>
|
||
</div> <!-- / .wizard-pane -->
|
||
<div class="wizard-pane" id="wizard-example-step22">
|
||
This is step 2<br><br>
|
||
<button class="btn wizard-prev-step-btn">Prev</button>
|
||
<button class="btn btn-primary wizard-next-step-btn">Next</button>
|
||
</div> <!-- / .wizard-pane -->
|
||
<div class="wizard-pane" id="wizard-example-step32">
|
||
This is step 3<br><br>
|
||
<button class="btn wizard-prev-step-btn">Prev</button>
|
||
<button class="btn btn-primary wizard-next-step-btn">Next</button>
|
||
</div> <!-- / .wizard-pane -->
|
||
<div class="wizard-pane" id="wizard-example-step42">
|
||
Finish<br><br>
|
||
<button class="btn wizard-prev-step-btn">Prev</button>
|
||
<button class="btn btn-success wizard-go-to-step-btn">Go to Step 2</button>
|
||
<button class="btn btn-primary wizard-next-step-btn">Finish</button>
|
||
</div> <!-- / .wizard-pane -->
|
||
</div> <!-- / .wizard-content -->
|
||
</div> <!-- / .wizard -->
|
||
</div> <!-- / .modal-content -->
|
||
</div> <!-- / .modal-dialog -->
|
||
</div> <!-- /.modal -->
|
||
<!-- / Modal -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-wizard-modal" href="#uidemo-wizard-modal" class="header-2">Modal with wizard</a>
|
||
<div class="col-md-12">
|
||
<button class="btn btn-info" data-toggle="modal" data-target="#ui-wizard-modal">Launch modal with wizard</button>
|
||
</div>
|
||
</div>
|
||
<!-- /41. $WIZARD -->
|
||
|
||
<!-- 42. $BOOTSTRAP_X_EDITABLE ===================================================================================
|
||
|
||
Bootstrap X-Editable
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-bs-x-editable" href="#uidemo-bs-x-editable" class="header-1">Bootstrap X-Editable</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://vitalets.github.io/x-editable/" target="_blank">http://vitalets.github.io/x-editable/</a></div>
|
||
|
||
<div class="note note-danger uidemo-note">NOTE: Twitter typeahead plugin is not supporting right-to-left direction.</div>
|
||
|
||
|
||
<!-- 42.1. $BOOTSTRAP_X_EDITABLE_EXAMPLES ==========================================================
|
||
|
||
Examples
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#bs-x-editable-username').editable({
|
||
type: 'text',
|
||
name: 'username',
|
||
title: 'Enter username'
|
||
});
|
||
|
||
$('#bs-x-editable-firstname').editable({
|
||
validate: function(value) {
|
||
if($.trim(value) == '') return 'This field is required';
|
||
}
|
||
});
|
||
|
||
$('#bs-x-editable-sex').editable({
|
||
prepend: "not selected",
|
||
source: [
|
||
{value: 1, text: 'Male'},
|
||
{value: 2, text: 'Female'}
|
||
],
|
||
display: function(value, sourceData) {
|
||
var colors = {"": "gray", 1: "green", 2: "blue"},
|
||
elem = $.grep(sourceData, function(o){return o.value == value;});
|
||
|
||
if(elem.length) {
|
||
$(this).text(elem[0].text).css("color", colors[value]);
|
||
} else {
|
||
$(this).empty();
|
||
}
|
||
}
|
||
});
|
||
|
||
$('#bs-x-editable-vacation').editable({
|
||
datepicker: {
|
||
todayBtn: 'linked'
|
||
}
|
||
});
|
||
|
||
$('#bs-x-editable-dob').editable();
|
||
|
||
$('#bs-x-editable-event').editable({
|
||
combodate: {
|
||
firstItem: 'name'
|
||
}
|
||
});
|
||
|
||
$('#bs-x-editable-comments').editable({
|
||
showbuttons: 'bottom'
|
||
});
|
||
|
||
$('#bs-x-editable-state2').editable({
|
||
value: 'California',
|
||
typeahead: {
|
||
name: 'state',
|
||
local: ["Alabama","Alaska","Arizona","Arkansas","California","Colorado","Connecticut","Delaware","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusetts","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Dakota","North Carolina","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennessee","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"]
|
||
}
|
||
});
|
||
|
||
$('#bs-x-editable-fruits').editable({
|
||
limit: 3,
|
||
source: [
|
||
{value: 1, text: 'banana'},
|
||
{value: 2, text: 'peach'},
|
||
{value: 3, text: 'apple'},
|
||
{value: 4, text: 'watermelon'},
|
||
{value: 5, text: 'orange'}
|
||
]
|
||
});
|
||
|
||
$('#bs-x-editable-tags').editable({
|
||
select2: {
|
||
tags: ['html', 'javascript', 'css', 'ajax'],
|
||
tokenSeparators: [",", " "]
|
||
}
|
||
});
|
||
|
||
var countries = [];
|
||
$.each({"BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria", "BA": "Bosnia and Herzegovina", "BB": "Barbados", "WF": "Wallis and Futuna", "BL": "Saint Bartelemey", "BM": "Bermuda", "BN": "Brunei Darussalam", "BO": "Bolivia", "BH": "Bahrain", "BI": "Burundi", "BJ": "Benin", "BT": "Bhutan", "JM": "Jamaica", "BV": "Bouvet Island", "BW": "Botswana", "WS": "Samoa", "BR": "Brazil", "BS": "Bahamas", "JE": "Jersey", "BY": "Belarus", "O1": "Other Country", "LV": "Latvia", "RW": "Rwanda", "RS": "Serbia", "TL": "Timor-Leste", "RE": "Reunion", "LU": "Luxembourg", "TJ": "Tajikistan", "RO": "Romania", "PG": "Papua New Guinea", "GW": "Guinea-Bissau", "GU": "Guam", "GT": "Guatemala", "GS": "South Georgia and the South Sandwich Islands", "GR": "Greece", "GQ": "Equatorial Guinea", "GP": "Guadeloupe", "JP": "Japan", "GY": "Guyana", "GG": "Guernsey", "GF": "French Guiana", "GE": "Georgia", "GD": "Grenada", "GB": "United Kingdom", "GA": "Gabon", "SV": "El Salvador", "GN": "Guinea", "GM": "Gambia", "GL": "Greenland", "GI": "Gibraltar", "GH": "Ghana", "OM": "Oman", "TN": "Tunisia", "JO": "Jordan", "HR": "Croatia", "HT": "Haiti", "HU": "Hungary", "HK": "Hong Kong", "HN": "Honduras", "HM": "Heard Island and McDonald Islands", "VE": "Venezuela", "PR": "Puerto Rico", "PS": "Palestinian Territory", "PW": "Palau", "PT": "Portugal", "SJ": "Svalbard and Jan Mayen", "PY": "Paraguay", "IQ": "Iraq", "PA": "Panama", "PF": "French Polynesia", "BZ": "Belize", "PE": "Peru", "PK": "Pakistan", "PH": "Philippines", "PN": "Pitcairn", "TM": "Turkmenistan", "PL": "Poland", "PM": "Saint Pierre and Miquelon", "ZM": "Zambia", "EH": "Western Sahara", "RU": "Russian Federation", "EE": "Estonia", "EG": "Egypt", "TK": "Tokelau", "ZA": "South Africa", "EC": "Ecuador", "IT": "Italy", "VN": "Vietnam", "SB": "Solomon Islands", "EU": "Europe", "ET": "Ethiopia", "SO": "Somalia", "ZW": "Zimbabwe", "SA": "Saudi Arabia", "ES": "Spain", "ER": "Eritrea", "ME": "Montenegro", "MD": "Moldova, Republic of", "MG": "Madagascar", "MF": "Saint Martin", "MA": "Morocco", "MC": "Monaco", "UZ": "Uzbekistan", "MM": "Myanmar", "ML": "Mali", "MO": "Macao", "MN": "Mongolia", "MH": "Marshall Islands", "MK": "Macedonia", "MU": "Mauritius", "MT": "Malta", "MW": "Malawi", "MV": "Maldives", "MQ": "Martinique", "MP": "Northern Mariana Islands", "MS": "Montserrat", "MR": "Mauritania", "IM": "Isle of Man", "UG": "Uganda", "TZ": "Tanzania, United Republic of", "MY": "Malaysia", "MX": "Mexico", "IL": "Israel", "FR": "France", "IO": "British Indian Ocean Territory", "FX": "France, Metropolitan", "SH": "Saint Helena", "FI": "Finland", "FJ": "Fiji", "FK": "Falkland Islands (Malvinas)", "FM": "Micronesia, Federated States of", "FO": "Faroe Islands", "NI": "Nicaragua", "NL": "Netherlands", "NO": "Norway", "NA": "Namibia", "VU": "Vanuatu", "NC": "New Caledonia", "NE": "Niger", "NF": "Norfolk Island", "NG": "Nigeria", "NZ": "New Zealand", "NP": "Nepal", "NR": "Nauru", "NU": "Niue", "CK": "Cook Islands", "CI": "Cote d'Ivoire", "CH": "Switzerland", "CO": "Colombia", "CN": "China", "CM": "Cameroon", "CL": "Chile", "CC": "Cocos (Keeling) Islands", "CA": "Canada", "CG": "Congo", "CF": "Central African Republic", "CD": "Congo, The Democratic Republic of the", "CZ": "Czech Republic", "CY": "Cyprus", "CX": "Christmas Island", "CR": "Costa Rica", "CV": "Cape Verde", "CU": "Cuba", "SZ": "Swaziland", "SY": "Syrian Arab Republic", "KG": "Kyrgyzstan", "KE": "Kenya", "SR": "Suriname", "KI": "Kiribati", "KH": "Cambodia", "KN": "Saint Kitts and Nevis", "KM": "Comoros", "ST": "Sao Tome and Principe", "SK": "Slovakia", "KR": "Korea, Republic of", "SI": "Slovenia", "KP": "Korea, Democratic People's Republic of", "KW": "Kuwait", "SN": "Senegal", "SM": "San Marino", "SL": "Sierra Leone", "SC": "Seychelles", "KZ": "Kazakhstan", "KY": "Cayman Islands", "SG": "Singapore", "SE": "Sweden", "SD": "Sudan", "DO": "Dominican Republic", "DM": "Dominica", "DJ": "Djibouti", "DK": "Denmark", "VG": "Virgin Islands, British", "DE": "Germany", "YE": "Yemen", "DZ": "Algeria", "US": "United States", "UY": "Uruguay", "YT": "Mayotte", "UM": "United States Minor Outlying Islands", "LB": "Lebanon", "LC": "Saint Lucia", "LA": "Lao People's Democratic Republic", "TV": "Tuvalu", "TW": "Taiwan", "TT": "Trinidad and Tobago", "TR": "Turkey", "LK": "Sri Lanka", "LI": "Liechtenstein", "A1": "Anonymous Proxy", "TO": "Tonga", "LT": "Lithuania", "A2": "Satellite Provider", "LR": "Liberia", "LS": "Lesotho", "TH": "Thailand", "TF": "French Southern Territories", "TG": "Togo", "TD": "Chad", "TC": "Turks and Caicos Islands", "LY": "Libyan Arab Jamahiriya", "VA": "Holy See (Vatican City State)", "VC": "Saint Vincent and the Grenadines", "AE": "United Arab Emirates", "AD": "Andorra", "AG": "Antigua and Barbuda", "AF": "Afghanistan", "AI": "Anguilla", "VI": "Virgin Islands, U.S.", "IS": "Iceland", "IR": "Iran, Islamic Republic of", "AM": "Armenia", "AL": "Albania", "AO": "Angola", "AN": "Netherlands Antilles", "AQ": "Antarctica", "AP": "Asia/Pacific Region", "AS": "American Samoa", "AR": "Argentina", "AU": "Australia", "AT": "Austria", "AW": "Aruba", "IN": "India", "AX": "Aland Islands", "AZ": "Azerbaijan", "IE": "Ireland", "ID": "Indonesia", "UA": "Ukraine", "QA": "Qatar", "MZ": "Mozambique"}, function(k, v) {
|
||
countries.push({id: k, text: v});
|
||
});
|
||
|
||
$('#bs-x-editable-country').editable({
|
||
source: countries,
|
||
select2: {
|
||
width: 200,
|
||
placeholder: 'Select country',
|
||
allowClear: true
|
||
}
|
||
});
|
||
|
||
$('#bs-x-editable-address').editable({
|
||
value: {
|
||
city: "Moscow",
|
||
street: "Lenina",
|
||
building: "12"
|
||
},
|
||
validate: function(value) {
|
||
if(value.city == '') return 'city is required!';
|
||
},
|
||
display: function(value) {
|
||
if(!value) {
|
||
$(this).empty();
|
||
return;
|
||
}
|
||
var html = '<b>' + $('<div>').text(value.city).html() + '</b>, ' + $('<div>').text(value.street).html() + ' st., bld. ' + $('<div>').text(value.building).html();
|
||
$(this).html(html);
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bs-x-editable-examples" href="#uidemo-bs-x-editable-examples" class="header-2">Examples</a>
|
||
<div class="col-md-12">
|
||
<table id="user" class="table table-bordered table-striped" style="clear: both">
|
||
<tbody>
|
||
<tr>
|
||
<td width="35%">Simple text field</td>
|
||
<td width="65%"><a href="#" id="bs-x-editable-username" data-type="text" data-pk="1" data-title="Enter username">superuser</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Empty text field, required</td>
|
||
<td><a href="#" id="bs-x-editable-firstname" data-type="text" data-pk="1" data-placement="right" data-placeholder="Required" data-title="Enter your firstname"></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Select, local array, custom display</td>
|
||
<td><a href="#" id="bs-x-editable-sex" data-type="select" data-pk="1" data-value="" data-title="Select sex"></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Datepicker</td>
|
||
<td><a href="#" id="bs-x-editable-vacation" data-type="date" data-viewformat="dd.mm.yyyy" data-pk="1" data-placement="right" data-title="When you want vacation to start?">25.02.2013</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Combodate (date)</td>
|
||
<td><a href="#" id="bs-x-editable-dob" data-type="combodate" data-value="1984-05-15" data-format="YYYY-MM-DD" data-viewformat="DD/MM/YYYY" data-template="D / MMM / YYYY" data-pk="1" data-title="Select Date of birth"></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Combodate (datetime)</td>
|
||
<td><a href="#" id="bs-x-editable-event" data-type="combodate" data-template="D MMM YYYY HH:mm" data-format="YYYY-MM-DD HH:mm" data-viewformat="MMM D, YYYY, HH:mm" data-pk="1" data-title="Setup event date and time"></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Textarea, buttons below. Submit by <i>ctrl+enter</i></td>
|
||
<td><a href="#" id="bs-x-editable-comments" data-type="textarea" data-pk="1" data-placeholder="Your comments here..." data-title="Enter comments">awesome user!</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Twitter typeahead.js</td>
|
||
<td><a href="#" id="bs-x-editable-state2" data-type="typeaheadjs" data-pk="1" data-placement="right" data-title="Start typing State.."></a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Checklist</td>
|
||
<td><a href="#" id="bs-x-editable-fruits" data-type="checklist" data-value="2,3" data-title="Select fruits"></a></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Select2 (tags mode)</td>
|
||
<td><a href="#" id="bs-x-editable-tags" data-type="select2" data-pk="1" data-title="Enter tags">html, javascript</a></td>
|
||
</tr>
|
||
<tr>
|
||
<td>Select2 (dropdown mode)</td>
|
||
<td><a href="#" id="bs-x-editable-country" data-type="select2" data-pk="1" data-value="BS" data-title="Select country"></a></td>
|
||
</tr>
|
||
|
||
<tr>
|
||
<td>Custom input, several fields</td>
|
||
<td><a href="#" id="bs-x-editable-address" data-type="address" data-pk="1" data-title="Please, fill address"></a></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
<!-- /42. $BOOTSTRAP_X_EDITABLE -->
|
||
|
||
<!-- 43. $JQUERY_VALIDATION ========================================================================
|
||
|
||
jQuery validation
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jq-validation" href="#uidemo-jq-validation" class="header-1">jQuery validation</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/" target="_blank">http://bassistance.de/jquery-plugins/jquery-plugin-validation/</a></div>
|
||
|
||
<!-- 43.1. $JQUERY_VALIDATION_EXAMPLES =============================================================
|
||
|
||
Examples
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$("#jq-validation-phone").mask("(999) 999-9999");
|
||
$('#jq-validation-select2').select2({ allowClear: true, placeholder: 'Select a country...' }).change(function(){
|
||
$(this).valid();
|
||
});
|
||
$('#jq-validation-select2-multi').select2({ placeholder: 'Select gear...' }).change(function(){
|
||
$(this).valid();
|
||
});
|
||
|
||
// Add phone validator
|
||
$.validator.addMethod(
|
||
"phone_format",
|
||
function(value, element) {
|
||
var check = false;
|
||
return this.optional(element) || /^\(\d{3}\)[ ]\d{3}\-\d{4}$/.test(value);
|
||
},
|
||
"Invalid phone number."
|
||
);
|
||
|
||
// Setup validation
|
||
$("#jq-validation-form").validate({
|
||
ignore: '.ignore, .select2-input',
|
||
focusInvalid: false,
|
||
rules: {
|
||
'jq-validation-email': {
|
||
required: true,
|
||
email: true
|
||
},
|
||
'jq-validation-password': {
|
||
required: true,
|
||
minlength: 6,
|
||
maxlength: 20
|
||
},
|
||
'jq-validation-password-confirmation': {
|
||
required: true,
|
||
minlength: 6,
|
||
equalTo: "#jq-validation-password"
|
||
},
|
||
'jq-validation-required': {
|
||
required: true
|
||
},
|
||
'jq-validation-url': {
|
||
required: true,
|
||
url: true
|
||
},
|
||
'jq-validation-phone': {
|
||
required: true,
|
||
phone_format: true
|
||
},
|
||
'jq-validation-select': {
|
||
required: true
|
||
},
|
||
'jq-validation-multiselect': {
|
||
required: true,
|
||
minlength: 2
|
||
},
|
||
'jq-validation-select2': {
|
||
required: true
|
||
},
|
||
'jq-validation-select2-multi': {
|
||
required: true,
|
||
minlength: 2
|
||
},
|
||
'jq-validation-text': {
|
||
required: true
|
||
},
|
||
'jq-validation-simple-error': {
|
||
required: true
|
||
},
|
||
'jq-validation-dark-error': {
|
||
required: true
|
||
},
|
||
'jq-validation-radios': {
|
||
required: true
|
||
},
|
||
'jq-validation-checkbox1': {
|
||
require_from_group: [1, 'input[name="jq-validation-checkbox1"], input[name="jq-validation-checkbox2"]']
|
||
},
|
||
'jq-validation-checkbox2': {
|
||
require_from_group: [1, 'input[name="jq-validation-checkbox1"], input[name="jq-validation-checkbox2"]']
|
||
},
|
||
'jq-validation-policy': {
|
||
required: true
|
||
}
|
||
},
|
||
messages: {
|
||
'jq-validation-policy': 'You must check it!'
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-validation-examples" href="#uidemo-jq-validation-examples" class="header-2">Examples</a>
|
||
<div class="col-md-12">
|
||
<form class="form-horizontal" id="jq-validation-form">
|
||
<div class="form-group">
|
||
<label for="jq-validation-email" class="col-sm-2 control-label">Email</label>
|
||
<div class="col-sm-10">
|
||
<input type="text" class="form-control" id="jq-validation-email" name="jq-validation-email" placeholder="Email">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="jq-validation-password" class="col-sm-2 control-label">Password</label>
|
||
<div class="col-sm-10">
|
||
<input type="password" class="form-control" id="jq-validation-password" name="jq-validation-password" placeholder="Password">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="jq-validation-password-confirmation" class="col-sm-2 control-label">Confirm password</label>
|
||
<div class="col-sm-10">
|
||
<input type="password" class="form-control" id="jq-validation-password-confirmation" name="jq-validation-password-confirmation" placeholder="Confirm password">
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="jq-validation-required" class="col-sm-2 control-label">Required</label>
|
||
<div class="col-sm-10">
|
||
<input type="text" class="form-control" id="jq-validation-required" name="jq-validation-required" placeholder="Required">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="jq-validation-url" class="col-sm-2 control-label">URL</label>
|
||
<div class="col-sm-10">
|
||
<input type="text" class="form-control" id="jq-validation-url" name="jq-validation-url" placeholder="Url">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="jq-validation-phone" class="col-sm-2 control-label">Phone</label>
|
||
<div class="col-sm-10">
|
||
<input type="text" class="form-control" id="jq-validation-phone" name="jq-validation-phone" placeholder="Phone: (999) 999-9999">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="jq-validation-select" class="col-sm-2 control-label">Select Box</label>
|
||
<div class="col-sm-10">
|
||
<select class="form-control" id="jq-validation-select" name="jq-validation-select">
|
||
<option value="">Select gear...</option>
|
||
<optgroup label="Climbing">
|
||
<option value="pitons">Pitons</option>
|
||
<option value="cams">Cams</option>
|
||
<option value="nuts">Nuts</option>
|
||
<option value="bolts">Bolts</option>
|
||
<option value="stoppers">Stoppers</option>
|
||
<option value="sling">Sling</option>
|
||
</optgroup>
|
||
<optgroup label="Skiing">
|
||
<option value="skis">Skis</option>
|
||
<option value="skins">Skins</option>
|
||
<option value="poles">Poles</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="jq-validation-multiselect" class="col-sm-2 control-label">Multiselect</label>
|
||
<div class="col-sm-10">
|
||
<select class="form-control" name="jq-validation-multiselect" id="jq-validation-multiselect" multiple="multiple">
|
||
<optgroup label="Climbing">
|
||
<option value="pitons">Pitons</option>
|
||
<option value="cams">Cams</option>
|
||
<option value="nuts">Nuts</option>
|
||
<option value="bolts">Bolts</option>
|
||
<option value="stoppers">Stoppers</option>
|
||
<option value="sling">Sling</option>
|
||
</optgroup>
|
||
<optgroup label="Skiing">
|
||
<option value="skis">Skis</option>
|
||
<option value="skins">Skins</option>
|
||
<option value="poles">Poles</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="jq-validation-select2" class="col-sm-2 control-label">Select2</label>
|
||
<div class="col-sm-10">
|
||
<select class="form-control" name="jq-validation-select2" id="jq-validation-select2">
|
||
<option></option>
|
||
<option value="AF">Afghanistan</option>
|
||
<option value="AX">Åland Islands</option>
|
||
<option value="AL">Albania</option>
|
||
<option value="DZ">Algeria</option>
|
||
<option value="AS">American Samoa</option>
|
||
<option value="AD">Andorra</option>
|
||
<option value="AO">Angola</option>
|
||
<option value="AI">Anguilla</option>
|
||
<option value="AQ">Antarctica</option>
|
||
<option value="AG">Antigua and Barbuda</option>
|
||
<option value="AR">Argentina</option>
|
||
<option value="AM">Armenia</option>
|
||
<option value="AW">Aruba</option>
|
||
<option value="AU">Australia</option>
|
||
<option value="AT">Austria</option>
|
||
<option value="AZ">Azerbaijan</option>
|
||
<option value="BS">Bahamas</option>
|
||
<option value="BH">Bahrain</option>
|
||
<option value="BD">Bangladesh</option>
|
||
<option value="BB">Barbados</option>
|
||
<option value="BY">Belarus</option>
|
||
<option value="BE">Belgium</option>
|
||
<option value="BZ">Belize</option>
|
||
<option value="BJ">Benin</option>
|
||
<option value="BM">Bermuda</option>
|
||
<option value="BT">Bhutan</option>
|
||
<option value="BO">Bolivia, Plurinational State of</option>
|
||
<option value="BA">Bosnia and Herzegovina</option>
|
||
<option value="BW">Botswana</option>
|
||
<option value="BV">Bouvet Island</option>
|
||
<option value="BR">Brazil</option>
|
||
<option value="IO">British Indian Ocean Territory</option>
|
||
<option value="BN">Brunei Darussalam</option>
|
||
<option value="BG">Bulgaria</option>
|
||
<option value="BF">Burkina Faso</option>
|
||
<option value="BI">Burundi</option>
|
||
<option value="KH">Cambodia</option>
|
||
<option value="CM">Cameroon</option>
|
||
<option value="CA">Canada</option>
|
||
<option value="CV">Cape Verde</option>
|
||
<option value="KY">Cayman Islands</option>
|
||
<option value="CF">Central African Republic</option>
|
||
<option value="TD">Chad</option>
|
||
<option value="CL">Chile</option>
|
||
<option value="CN">China</option>
|
||
<option value="CX">Christmas Island</option>
|
||
<option value="CC">Cocos (Keeling) Islands</option>
|
||
<option value="CO">Colombia</option>
|
||
<option value="KM">Comoros</option>
|
||
<option value="CG">Congo</option>
|
||
<option value="CD">Congo, the Democratic Republic of the</option>
|
||
<option value="CK">Cook Islands</option>
|
||
<option value="CR">Costa Rica</option>
|
||
<option value="CI">Côte d'Ivoire</option>
|
||
<option value="HR">Croatia</option>
|
||
<option value="CU">Cuba</option>
|
||
<option value="CY">Cyprus</option>
|
||
<option value="CZ">Czech Republic</option>
|
||
<option value="DK">Denmark</option>
|
||
<option value="DJ">Djibouti</option>
|
||
<option value="DM">Dominica</option>
|
||
<option value="DO">Dominican Republic</option>
|
||
<option value="EC">Ecuador</option>
|
||
<option value="EG">Egypt</option>
|
||
<option value="SV">El Salvador</option>
|
||
<option value="GQ">Equatorial Guinea</option>
|
||
<option value="ER">Eritrea</option>
|
||
<option value="EE">Estonia</option>
|
||
<option value="ET">Ethiopia</option>
|
||
<option value="FK">Falkland Islands (Malvinas)</option>
|
||
<option value="FO">Faroe Islands</option>
|
||
<option value="FJ">Fiji</option>
|
||
<option value="FI">Finland</option>
|
||
<option value="FR">France</option>
|
||
<option value="GF">French Guiana</option>
|
||
<option value="PF">French Polynesia</option>
|
||
<option value="TF">French Southern Territories</option>
|
||
<option value="GA">Gabon</option>
|
||
<option value="GM">Gambia</option>
|
||
<option value="GE">Georgia</option>
|
||
<option value="DE">Germany</option>
|
||
<option value="GH">Ghana</option>
|
||
<option value="GI">Gibraltar</option>
|
||
<option value="GR">Greece</option>
|
||
<option value="GL">Greenland</option>
|
||
<option value="GD">Grenada</option>
|
||
<option value="GP">Guadeloupe</option>
|
||
<option value="GU">Guam</option>
|
||
<option value="GT">Guatemala</option>
|
||
<option value="GG">Guernsey</option>
|
||
<option value="GN">Guinea</option>
|
||
<option value="GW">Guinea-Bissau</option>
|
||
<option value="GY">Guyana</option>
|
||
<option value="HT">Haiti</option>
|
||
<option value="HM">Heard Island and McDonald Islands</option>
|
||
<option value="VA">Holy See (Vatican City State)</option>
|
||
<option value="HN">Honduras</option>
|
||
<option value="HK">Hong Kong</option>
|
||
<option value="HU">Hungary</option>
|
||
<option value="IS">Iceland</option>
|
||
<option value="IN">India</option>
|
||
<option value="ID">Indonesia</option>
|
||
<option value="IR">Iran, Islamic Republic of</option>
|
||
<option value="IQ">Iraq</option>
|
||
<option value="IE">Ireland</option>
|
||
<option value="IM">Isle of Man</option>
|
||
<option value="IL">Israel</option>
|
||
<option value="IT">Italy</option>
|
||
<option value="JM">Jamaica</option>
|
||
<option value="JP">Japan</option>
|
||
<option value="JE">Jersey</option>
|
||
<option value="JO">Jordan</option>
|
||
<option value="KZ">Kazakhstan</option>
|
||
<option value="KE">Kenya</option>
|
||
<option value="KI">Kiribati</option>
|
||
<option value="KP">Korea, Democratic People's Republic of</option>
|
||
<option value="KR">Korea, Republic of</option>
|
||
<option value="KW">Kuwait</option>
|
||
<option value="KG">Kyrgyzstan</option>
|
||
<option value="LA">Lao People's Democratic Republic</option>
|
||
<option value="LV">Latvia</option>
|
||
<option value="LB">Lebanon</option>
|
||
<option value="LS">Lesotho</option>
|
||
<option value="LR">Liberia</option>
|
||
<option value="LY">Libyan Arab Jamahiriya</option>
|
||
<option value="LI">Liechtenstein</option>
|
||
<option value="LT">Lithuania</option>
|
||
<option value="LU">Luxembourg</option>
|
||
<option value="MO">Macao</option>
|
||
<option value="MK">Macedonia, the former Yugoslav Republic of</option>
|
||
<option value="MG">Madagascar</option>
|
||
<option value="MW">Malawi</option>
|
||
<option value="MY">Malaysia</option>
|
||
<option value="MV">Maldives</option>
|
||
<option value="ML">Mali</option>
|
||
<option value="MT">Malta</option>
|
||
<option value="MH">Marshall Islands</option>
|
||
<option value="MQ">Martinique</option>
|
||
<option value="MR">Mauritania</option>
|
||
<option value="MU">Mauritius</option>
|
||
<option value="YT">Mayotte</option>
|
||
<option value="MX">Mexico</option>
|
||
<option value="FM">Micronesia, Federated States of</option>
|
||
<option value="MD">Moldova, Republic of</option>
|
||
<option value="MC">Monaco</option>
|
||
<option value="MN">Mongolia</option>
|
||
<option value="ME">Montenegro</option>
|
||
<option value="MS">Montserrat</option>
|
||
<option value="MA">Morocco</option>
|
||
<option value="MZ">Mozambique</option>
|
||
<option value="MM">Myanmar</option>
|
||
<option value="NA">Namibia</option>
|
||
<option value="NR">Nauru</option>
|
||
<option value="NP">Nepal</option>
|
||
<option value="NL">Netherlands</option>
|
||
<option value="AN">Netherlands Antilles</option>
|
||
<option value="NC">New Caledonia</option>
|
||
<option value="NZ">New Zealand</option>
|
||
<option value="NI">Nicaragua</option>
|
||
<option value="NE">Niger</option>
|
||
<option value="NG">Nigeria</option>
|
||
<option value="NU">Niue</option>
|
||
<option value="NF">Norfolk Island</option>
|
||
<option value="MP">Northern Mariana Islands</option>
|
||
<option value="NO">Norway</option>
|
||
<option value="OM">Oman</option>
|
||
<option value="PK">Pakistan</option>
|
||
<option value="PW">Palau</option>
|
||
<option value="PS">Palestinian Territory, Occupied</option>
|
||
<option value="PA">Panama</option>
|
||
<option value="PG">Papua New Guinea</option>
|
||
<option value="PY">Paraguay</option>
|
||
<option value="PE">Peru</option>
|
||
<option value="PH">Philippines</option>
|
||
<option value="PN">Pitcairn</option>
|
||
<option value="PL">Poland</option>
|
||
<option value="PT">Portugal</option>
|
||
<option value="PR">Puerto Rico</option>
|
||
<option value="QA">Qatar</option>
|
||
<option value="RE">Réunion</option>
|
||
<option value="RO">Romania</option>
|
||
<option value="RU">Russian Federation</option>
|
||
<option value="RW">Rwanda</option>
|
||
<option value="BL">Saint Barthélemy</option>
|
||
<option value="SH">Saint Helena, Ascension and Tristan da Cunha</option>
|
||
<option value="KN">Saint Kitts and Nevis</option>
|
||
<option value="LC">Saint Lucia</option>
|
||
<option value="MF">Saint Martin (French part)</option>
|
||
<option value="PM">Saint Pierre and Miquelon</option>
|
||
<option value="VC">Saint Vincent and the Grenadines</option>
|
||
<option value="WS">Samoa</option>
|
||
<option value="SM">San Marino</option>
|
||
<option value="ST">Sao Tome and Principe</option>
|
||
<option value="SA">Saudi Arabia</option>
|
||
<option value="SN">Senegal</option>
|
||
<option value="RS">Serbia</option>
|
||
<option value="SC">Seychelles</option>
|
||
<option value="SL">Sierra Leone</option>
|
||
<option value="SG">Singapore</option>
|
||
<option value="SK">Slovakia</option>
|
||
<option value="SI">Slovenia</option>
|
||
<option value="SB">Solomon Islands</option>
|
||
<option value="SO">Somalia</option>
|
||
<option value="ZA">South Africa</option>
|
||
<option value="GS">South Georgia and the South Sandwich Islands</option>
|
||
<option value="ES">Spain</option>
|
||
<option value="LK">Sri Lanka</option>
|
||
<option value="SD">Sudan</option>
|
||
<option value="SR">Suriname</option>
|
||
<option value="SJ">Svalbard and Jan Mayen</option>
|
||
<option value="SZ">Swaziland</option>
|
||
<option value="SE">Sweden</option>
|
||
<option value="CH">Switzerland</option>
|
||
<option value="SY">Syrian Arab Republic</option>
|
||
<option value="TW">Taiwan, Province of China</option>
|
||
<option value="TJ">Tajikistan</option>
|
||
<option value="TZ">Tanzania, United Republic of</option>
|
||
<option value="TH">Thailand</option>
|
||
<option value="TL">Timor-Leste</option>
|
||
<option value="TG">Togo</option>
|
||
<option value="TK">Tokelau</option>
|
||
<option value="TO">Tonga</option>
|
||
<option value="TT">Trinidad and Tobago</option>
|
||
<option value="TN">Tunisia</option>
|
||
<option value="TR">Turkey</option>
|
||
<option value="TM">Turkmenistan</option>
|
||
<option value="TC">Turks and Caicos Islands</option>
|
||
<option value="TV">Tuvalu</option>
|
||
<option value="UG">Uganda</option>
|
||
<option value="UA">Ukraine</option>
|
||
<option value="AE">United Arab Emirates</option>
|
||
<option value="GB">United Kingdom</option>
|
||
<option value="US">United States</option>
|
||
<option value="UM">United States Minor Outlying Islands</option>
|
||
<option value="UY">Uruguay</option>
|
||
<option value="UZ">Uzbekistan</option>
|
||
<option value="VU">Vanuatu</option>
|
||
<option value="VE">Venezuela, Bolivarian Republic of</option>
|
||
<option value="VN">Viet Nam</option>
|
||
<option value="VG">Virgin Islands, British</option>
|
||
<option value="VI">Virgin Islands, U.S.</option>
|
||
<option value="WF">Wallis and Futuna</option>
|
||
<option value="EH">Western Sahara</option>
|
||
<option value="YE">Yemen</option>
|
||
<option value="ZM">Zambia</option>
|
||
<option value="ZW">Zimbabwe</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="jq-validation-select2-multi" class="col-sm-2 control-label">Select2 Multiple</label>
|
||
<div class="col-sm-10">
|
||
<select class="form-control" name="jq-validation-select2-multi" id="jq-validation-select2-multi" multiple="multiple">
|
||
<optgroup label="Climbing">
|
||
<option value="pitons">Pitons</option>
|
||
<option value="cams">Cams</option>
|
||
<option value="nuts">Nuts</option>
|
||
<option value="bolts">Bolts</option>
|
||
<option value="stoppers">Stoppers</option>
|
||
<option value="sling">Sling</option>
|
||
</optgroup>
|
||
<optgroup label="Skiing">
|
||
<option value="skis">Skis</option>
|
||
<option value="skins">Skins</option>
|
||
<option value="poles">Poles</option>
|
||
</optgroup>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="jq-validation-text" class="col-sm-2 control-label">Text</label>
|
||
<div class="col-sm-10">
|
||
<textarea class="form-control" name="jq-validation-text" id="jq-validation-text"></textarea>
|
||
<p class="help-block">Example block-level help text here.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- To use simple error template, just add '.simple' class to the .form-group -->
|
||
<div class="form-group simple">
|
||
<label for="jq-validation-simple-error" class="col-sm-2 control-label">Simple error</label>
|
||
<div class="col-sm-10">
|
||
<input type="text" class="form-control" id="jq-validation-simple-error" name="jq-validation-simple-error" placeholder="Required">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- To use dark error template, just add '.dark' class to the .form-group -->
|
||
<div class="form-group dark">
|
||
<label for="jq-validation-dark-error" class="col-sm-2 control-label">Dark error</label>
|
||
<div class="col-sm-10">
|
||
<input type="text" class="form-control" id="jq-validation-dark-error" name="jq-validation-dark-error" placeholder="Required">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-sm-2 control-label">Radios</label>
|
||
<div class="col-sm-10">
|
||
<div class="radio">
|
||
<label>
|
||
<input type="radio" name="jq-validation-radios" value="1">
|
||
Option one is this and that—be sure to include why it's great
|
||
</label>
|
||
</div>
|
||
<div class="radio">
|
||
<label>
|
||
<input type="radio" name="jq-validation-radios" value="2">
|
||
Option two can be something else and selecting it will deselect option one
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<div class="col-sm-offset-2 col-sm-10">
|
||
<div class="checkbox">
|
||
<label>
|
||
<input type="checkbox" name="jq-validation-checkbox1"> Checkbox 1
|
||
</label>
|
||
</div>
|
||
<div class="checkbox">
|
||
<label>
|
||
<input type="checkbox" name="jq-validation-checkbox2"> Checkbox 2
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<hr>
|
||
|
||
<div class="form-group">
|
||
<div class="col-sm-offset-2 col-sm-10">
|
||
<div class="checkbox">
|
||
<label>
|
||
<input type="checkbox" name="jq-validation-policy" id="jq-validation-policy"> Confirm policy
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<div class="col-sm-offset-2 col-sm-10">
|
||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<!-- /43. $JQUERY_VALIDATION -->
|
||
|
||
<!-- 44. $BOOTBOX ==================================================================================
|
||
|
||
Bootbox
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-bootbox" href="#uidemo-bootbox" class="header-1">Bootbox</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://bootboxjs.com" target="_blank">http://bootboxjs.com</a></div>
|
||
|
||
<!-- 44.1. $BOOTBOX_EXAMPLES =======================================================================
|
||
|
||
Examples
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#ui-bootbox-alert').on('click', function () {
|
||
bootbox.alert({
|
||
message: "Hello world!",
|
||
callback: function() {
|
||
alert("Hello world callback");
|
||
},
|
||
className: "bootbox-sm"
|
||
});
|
||
});
|
||
$('#ui-bootbox-confirm').on('click', function () {
|
||
bootbox.confirm({
|
||
message: "Are you sure?",
|
||
callback: function(result) {
|
||
alert("Confirm result: " + result);
|
||
},
|
||
className: "bootbox-sm"
|
||
});
|
||
});
|
||
$('#ui-bootbox-prompt').on('click', function () {
|
||
bootbox.prompt({
|
||
title: "What is your name?",
|
||
callback: function(result) {
|
||
if (result === null) {
|
||
alert("Prompt dismissed");
|
||
} else {
|
||
alert("Hi " + result + "!");
|
||
}
|
||
},
|
||
className: "bootbox-sm"
|
||
});
|
||
});
|
||
$('#ui-bootbox-custom').on('click', function () {
|
||
bootbox.dialog({
|
||
message: "I am a custom dialog",
|
||
title: "Custom title",
|
||
buttons: {
|
||
success: {
|
||
label: "Success!",
|
||
className: "btn-success",
|
||
callback: function() {
|
||
alert("great success");
|
||
}
|
||
},
|
||
danger: {
|
||
label: "Danger!",
|
||
className: "btn-danger",
|
||
callback: function() {
|
||
alert("uh oh, look out!");
|
||
}
|
||
},
|
||
main: {
|
||
label: "Click ME!",
|
||
className: "btn-primary",
|
||
callback: function() {
|
||
alert("Primary button");
|
||
}
|
||
}
|
||
},
|
||
className: "bootbox-sm"
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bootbox-examples" href="#uidemo-bootbox-examples" class="header-2">Examples</a>
|
||
<div class="col-md-12">
|
||
<button id="ui-bootbox-alert" class="btn btn-lg btn-warning">Alert</button>
|
||
<button id="ui-bootbox-confirm" class="btn btn-lg btn-danger">Confirm</button>
|
||
<button id="ui-bootbox-prompt" class="btn btn-lg btn-success">Prompt</button>
|
||
<button id="ui-bootbox-custom" class="btn btn-lg btn-info">Custom Dialog</button>
|
||
</div>
|
||
</div>
|
||
<!-- /44. $BOOTBOX -->
|
||
|
||
<!-- 45. $JQUERY_DATA_TABLES =======================================================================
|
||
|
||
jQuery DataTables
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jq-datatables" href="#uidemo-jq-datatables" class="header-1">jQuery DataTables</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://datatables.net" target="_blank">http://datatables.net</a></div>
|
||
|
||
<!-- 45.1. $JQUERY_DATA_TABLES_EXAMPLE =============================================================
|
||
|
||
Examples
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#jq-datatables-example').dataTable();
|
||
$('#jq-datatables-example_wrapper .table-caption').text('Some header text');
|
||
$('#jq-datatables-example_wrapper .dataTables_filter input').attr('placeholder', 'Search...');
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-datatables-examples" href="#uidemo-jq-datatables-examples" class="header-2">Examples</a>
|
||
<div class="col-md-12">
|
||
<div class="table-primary">
|
||
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="jq-datatables-example">
|
||
<thead>
|
||
<tr>
|
||
<th>Rendering engine</th>
|
||
<th>Browser</th>
|
||
<th>Platform(s)</th>
|
||
<th>Engine version</th>
|
||
<th>CSS grade</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="odd gradeX">
|
||
<td>Trident</td>
|
||
<td>Internet
|
||
Explorer 4.0</td>
|
||
<td>Win 95+</td>
|
||
<td class="center"> 4</td>
|
||
<td class="center">X</td>
|
||
</tr>
|
||
<tr class="even gradeC">
|
||
<td>Trident</td>
|
||
<td>Internet
|
||
Explorer 5.0</td>
|
||
<td>Win 95+</td>
|
||
<td class="center">5</td>
|
||
<td class="center">C</td>
|
||
</tr>
|
||
<tr class="odd gradeA">
|
||
<td>Trident</td>
|
||
<td>Internet
|
||
Explorer 5.5</td>
|
||
<td>Win 95+</td>
|
||
<td class="center">5.5</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="even gradeA">
|
||
<td>Trident</td>
|
||
<td>Internet
|
||
Explorer 6</td>
|
||
<td>Win 98+</td>
|
||
<td class="center">6</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="odd gradeA">
|
||
<td>Trident</td>
|
||
<td>Internet Explorer 7</td>
|
||
<td>Win XP SP2+</td>
|
||
<td class="center">7</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="even gradeA">
|
||
<td>Trident</td>
|
||
<td>AOL browser (AOL desktop)</td>
|
||
<td>Win XP</td>
|
||
<td class="center">6</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Firefox 1.0</td>
|
||
<td>Win 98+ / OSX.2+</td>
|
||
<td class="center">1.7</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Firefox 1.5</td>
|
||
<td>Win 98+ / OSX.2+</td>
|
||
<td class="center">1.8</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Firefox 2.0</td>
|
||
<td>Win 98+ / OSX.2+</td>
|
||
<td class="center">1.8</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Firefox 3.0</td>
|
||
<td>Win 2k+ / OSX.3+</td>
|
||
<td class="center">1.9</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Camino 1.0</td>
|
||
<td>OSX.2+</td>
|
||
<td class="center">1.8</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Camino 1.5</td>
|
||
<td>OSX.3+</td>
|
||
<td class="center">1.8</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Netscape 7.2</td>
|
||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
||
<td class="center">1.7</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Netscape Browser 8</td>
|
||
<td>Win 98SE+</td>
|
||
<td class="center">1.7</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Netscape Navigator 9</td>
|
||
<td>Win 98+ / OSX.2+</td>
|
||
<td class="center">1.8</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Mozilla 1.0</td>
|
||
<td>Win 95+ / OSX.1+</td>
|
||
<td class="center">1</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Mozilla 1.1</td>
|
||
<td>Win 95+ / OSX.1+</td>
|
||
<td class="center">1.1</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Mozilla 1.2</td>
|
||
<td>Win 95+ / OSX.1+</td>
|
||
<td class="center">1.2</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Mozilla 1.3</td>
|
||
<td>Win 95+ / OSX.1+</td>
|
||
<td class="center">1.3</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Mozilla 1.4</td>
|
||
<td>Win 95+ / OSX.1+</td>
|
||
<td class="center">1.4</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Mozilla 1.5</td>
|
||
<td>Win 95+ / OSX.1+</td>
|
||
<td class="center">1.5</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Mozilla 1.6</td>
|
||
<td>Win 95+ / OSX.1+</td>
|
||
<td class="center">1.6</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Mozilla 1.7</td>
|
||
<td>Win 98+ / OSX.1+</td>
|
||
<td class="center">1.7</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Mozilla 1.8</td>
|
||
<td>Win 98+ / OSX.1+</td>
|
||
<td class="center">1.8</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Seamonkey 1.1</td>
|
||
<td>Win 98+ / OSX.2+</td>
|
||
<td class="center">1.8</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Gecko</td>
|
||
<td>Epiphany 2.20</td>
|
||
<td>Gnome</td>
|
||
<td class="center">1.8</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Webkit</td>
|
||
<td>Safari 1.2</td>
|
||
<td>OSX.3</td>
|
||
<td class="center">125.5</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Webkit</td>
|
||
<td>Safari 1.3</td>
|
||
<td>OSX.3</td>
|
||
<td class="center">312.8</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Webkit</td>
|
||
<td>Safari 2.0</td>
|
||
<td>OSX.4+</td>
|
||
<td class="center">419.3</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Webkit</td>
|
||
<td>Safari 3.0</td>
|
||
<td>OSX.4+</td>
|
||
<td class="center">522.1</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Webkit</td>
|
||
<td>OmniWeb 5.5</td>
|
||
<td>OSX.4+</td>
|
||
<td class="center">420</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Webkit</td>
|
||
<td>iPod Touch / iPhone</td>
|
||
<td>iPod</td>
|
||
<td class="center">420.1</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Webkit</td>
|
||
<td>S60</td>
|
||
<td>S60</td>
|
||
<td class="center">413</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Presto</td>
|
||
<td>Opera 7.0</td>
|
||
<td>Win 95+ / OSX.1+</td>
|
||
<td class="center">-</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Presto</td>
|
||
<td>Opera 7.5</td>
|
||
<td>Win 95+ / OSX.2+</td>
|
||
<td class="center">-</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Presto</td>
|
||
<td>Opera 8.0</td>
|
||
<td>Win 95+ / OSX.2+</td>
|
||
<td class="center">-</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Presto</td>
|
||
<td>Opera 8.5</td>
|
||
<td>Win 95+ / OSX.2+</td>
|
||
<td class="center">-</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Presto</td>
|
||
<td>Opera 9.0</td>
|
||
<td>Win 95+ / OSX.3+</td>
|
||
<td class="center">-</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Presto</td>
|
||
<td>Opera 9.2</td>
|
||
<td>Win 88+ / OSX.3+</td>
|
||
<td class="center">-</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Presto</td>
|
||
<td>Opera 9.5</td>
|
||
<td>Win 88+ / OSX.3+</td>
|
||
<td class="center">-</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Presto</td>
|
||
<td>Opera for Wii</td>
|
||
<td>Wii</td>
|
||
<td class="center">-</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Presto</td>
|
||
<td>Nokia N800</td>
|
||
<td>N800</td>
|
||
<td class="center">-</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Presto</td>
|
||
<td>Nintendo DS browser</td>
|
||
<td>Nintendo DS</td>
|
||
<td class="center">8.5</td>
|
||
<td class="center">C/A<sup>1</sup></td>
|
||
</tr>
|
||
<tr class="gradeC">
|
||
<td>KHTML</td>
|
||
<td>Konqureror 3.1</td>
|
||
<td>KDE 3.1</td>
|
||
<td class="center">3.1</td>
|
||
<td class="center">C</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>KHTML</td>
|
||
<td>Konqureror 3.3</td>
|
||
<td>KDE 3.3</td>
|
||
<td class="center">3.3</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>KHTML</td>
|
||
<td>Konqureror 3.5</td>
|
||
<td>KDE 3.5</td>
|
||
<td class="center">3.5</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeX">
|
||
<td>Tasman</td>
|
||
<td>Internet Explorer 4.5</td>
|
||
<td>Mac OS 8-9</td>
|
||
<td class="center">-</td>
|
||
<td class="center">X</td>
|
||
</tr>
|
||
<tr class="gradeC">
|
||
<td>Tasman</td>
|
||
<td>Internet Explorer 5.1</td>
|
||
<td>Mac OS 7.6-9</td>
|
||
<td class="center">1</td>
|
||
<td class="center">C</td>
|
||
</tr>
|
||
<tr class="gradeC">
|
||
<td>Tasman</td>
|
||
<td>Internet Explorer 5.2</td>
|
||
<td>Mac OS 8-X</td>
|
||
<td class="center">1</td>
|
||
<td class="center">C</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Misc</td>
|
||
<td>NetFront 3.1</td>
|
||
<td>Embedded devices</td>
|
||
<td class="center">-</td>
|
||
<td class="center">C</td>
|
||
</tr>
|
||
<tr class="gradeA">
|
||
<td>Misc</td>
|
||
<td>NetFront 3.4</td>
|
||
<td>Embedded devices</td>
|
||
<td class="center">-</td>
|
||
<td class="center">A</td>
|
||
</tr>
|
||
<tr class="gradeX">
|
||
<td>Misc</td>
|
||
<td>Dillo 0.8</td>
|
||
<td>Embedded devices</td>
|
||
<td class="center">-</td>
|
||
<td class="center">X</td>
|
||
</tr>
|
||
<tr class="gradeX">
|
||
<td>Misc</td>
|
||
<td>Links</td>
|
||
<td>Text only</td>
|
||
<td class="center">-</td>
|
||
<td class="center">X</td>
|
||
</tr>
|
||
<tr class="gradeX">
|
||
<td>Misc</td>
|
||
<td>Lynx</td>
|
||
<td>Text only</td>
|
||
<td class="center">-</td>
|
||
<td class="center">X</td>
|
||
</tr>
|
||
<tr class="gradeC">
|
||
<td>Misc</td>
|
||
<td>IE Mobile</td>
|
||
<td>Windows Mobile 6</td>
|
||
<td class="center">-</td>
|
||
<td class="center">C</td>
|
||
</tr>
|
||
<tr class="gradeC">
|
||
<td>Misc</td>
|
||
<td>PSP browser</td>
|
||
<td>PSP</td>
|
||
<td class="center">-</td>
|
||
<td class="center">C</td>
|
||
</tr>
|
||
<tr class="gradeU">
|
||
<td>Other browsers</td>
|
||
<td>All others</td>
|
||
<td>-</td>
|
||
<td class="center">-</td>
|
||
<td class="center">U</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /45. $JQUERY_DATA_TABLES -->
|
||
|
||
<!-- 46. $JQUERY_GROWL_NOTIFICATIONS ===============================================================
|
||
|
||
jQuery Growl notifications
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jq-growl" href="#uidemo-jq-growl" class="header-1">jQuery Growl notifications</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://ksylvest.github.io/jquery-growl/" target="_blank">http://ksylvest.github.io/jquery-growl/</a></div>
|
||
|
||
<!-- 46.1. $JQUERY_GROWL_NOTIFICATIONS_EXAMPLES ====================================================
|
||
|
||
Examples
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#jq-growl-default').click(function () {
|
||
$.growl({ title: "Growl", message: "The kitten is awake!" });
|
||
});
|
||
$('#jq-growl-error').click(function () {
|
||
$.growl.error({ message: "The kitten is attacking!" });
|
||
});
|
||
$('#jq-growl-notice').click(function () {
|
||
$.growl.notice({ message: "The kitten is cute!" });
|
||
});
|
||
$('#jq-growl-warning').click(function () {
|
||
$.growl.warning({ message: "The kitten is ugly!" });
|
||
});
|
||
$('#jq-growl-small').click(function () {
|
||
$.growl({ title: "Growl", message: "The kitten is awake!", size: 'small' });
|
||
});
|
||
$('#jq-growl-large').click(function () {
|
||
$.growl({ title: "Growl", message: "The kitten is awake!", size: 'large' });
|
||
});
|
||
$('#jq-growl-static').click(function () {
|
||
$.growl({ title: "Growl", message: "The kitten is awake!", duration: 9999*9999 });
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-growl-examples" href="#uidemo-jq-growl-examples" class="header-2">Examples</a>
|
||
<div class="col-md-12">
|
||
<button id="jq-growl-default" class="btn">Default</button>
|
||
<button id="jq-growl-error" class="btn btn-danger">Error</button>
|
||
<button id="jq-growl-notice" class="btn btn-success">Notice</button>
|
||
<button id="jq-growl-warning" class="btn btn-warning">Warning</button> |
|
||
|
||
<button id="jq-growl-small" class="btn">Small</button>
|
||
<button id="jq-growl-large" class="btn">Large</button> |
|
||
|
||
<button id="jq-growl-static" class="btn">Static</button>
|
||
</div>
|
||
</div>
|
||
<!-- /46. $JQUERY_GROWL_NOTIFICATIONS -->
|
||
|
||
<!-- 47. $COUNTERS =================================================================================
|
||
|
||
Counters
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-counters" href="#uidemo-counters" class="header-1">Counters</a>
|
||
</div>
|
||
|
||
<!-- 47.1. $COUNTERS_EXAMPLES ======================================================================
|
||
|
||
Examples
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-counters-examples" href="#uidemo-counters-examples" class="header-2">Examples</a>
|
||
<div class="col-md-12">
|
||
<div class="counter"><span>765</span></div>
|
||
|
||
<div class="counter-separated">
|
||
<span>0</span>
|
||
<span>0</span>
|
||
<span>7</span>
|
||
<span>6</span>
|
||
<span>5</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 47.2. $COUNTERS_SIZES =========================================================================
|
||
|
||
Examples
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-counters-sizes" href="#uidemo-counters-sizes" class="header-2">Sizes</a>
|
||
<div class="col-md-12">
|
||
<div class="counter counter-lg"><span>765</span></div>
|
||
|
||
<div class="counter-separated counter-lg">
|
||
<span>0</span>
|
||
<span>0</span>
|
||
<span>7</span>
|
||
<span>6</span>
|
||
<span>5</span>
|
||
</div>
|
||
<br>
|
||
<div class="counter"><span>765</span></div>
|
||
|
||
<div class="counter-separated">
|
||
<span>0</span>
|
||
<span>0</span>
|
||
<span>7</span>
|
||
<span>6</span>
|
||
<span>5</span>
|
||
</div>
|
||
<br>
|
||
<div class="counter counter-sm"><span>765</span></div>
|
||
|
||
<div class="counter-separated counter-sm">
|
||
<span>0</span>
|
||
<span>0</span>
|
||
<span>7</span>
|
||
<span>6</span>
|
||
<span>5</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /47. $COUNTERS -->
|
||
|
||
<!-- 48. $STYLED_FILE_INPUTS =======================================================================
|
||
|
||
Styled file inputs
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-styled-finputs" href="#uidemo-styled-finputs" class="header-1">Styled file inputs</a>
|
||
</div>
|
||
|
||
<!-- 48.1. $STYLED_FILE_INPUTS_EXAMPLE =============================================================
|
||
|
||
Example
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#styled-finputs-example').pixelFileInput({ placeholder: 'No file selected...' });
|
||
})
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-styled-finputs-example" href="#uidemo-styled-finputs-example" class="header-2">Example</a>
|
||
<div class="col-md-12">
|
||
<input type="file" id="styled-finputs-example">
|
||
</div>
|
||
</div>
|
||
<!-- /48. $STYLED_FILE_INPUTS -->
|
||
|
||
<!-- 49. $DROPZONEJS ===============================================================================
|
||
|
||
Dropzone.js
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-dropzonejs" href="#uidemo-dropzonejs" class="header-1">Dropzone.js</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://www.dropzonejs.com" target="_blank">http://www.dropzonejs.com</a></div>
|
||
|
||
<!-- 49.1. $DROPZONEJS_EXAMPLE =====================================================================
|
||
|
||
Example
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$("#dropzonejs-example").dropzone({
|
||
url: "//dummy.html",
|
||
paramName: "file", // The name that will be used to transfer the file
|
||
maxFilesize: 0.5, // MB
|
||
|
||
addRemoveLinks : true,
|
||
dictResponseError: "Can't upload file!",
|
||
autoProcessQueue: false,
|
||
thumbnailWidth: 138,
|
||
thumbnailHeight: 120,
|
||
|
||
previewTemplate: '<div class="dz-preview dz-file-preview"><div class="dz-details"><div class="dz-filename"><span data-dz-name></span></div><div class="dz-size">File size: <span data-dz-size></span></div><div class="dz-thumbnail-wrapper"><div class="dz-thumbnail"><img data-dz-thumbnail><span class="dz-nopreview">No preview</span><div class="dz-success-mark"><i class="fa fa-check-circle-o"></i></div><div class="dz-error-mark"><i class="fa fa-times-circle-o"></i></div><div class="dz-error-message"><span data-dz-errormessage></span></div></div></div></div><div class="progress progress-striped active"><div class="progress-bar progress-bar-success" data-dz-uploadprogress></div></div></div>',
|
||
|
||
resize: function(file) {
|
||
var info = { srcX: 0, srcY: 0, srcWidth: file.width, srcHeight: file.height },
|
||
srcRatio = file.width / file.height;
|
||
if (file.height > this.options.thumbnailHeight || file.width > this.options.thumbnailWidth) {
|
||
info.trgHeight = this.options.thumbnailHeight;
|
||
info.trgWidth = info.trgHeight * srcRatio;
|
||
if (info.trgWidth > this.options.thumbnailWidth) {
|
||
info.trgWidth = this.options.thumbnailWidth;
|
||
info.trgHeight = info.trgWidth / srcRatio;
|
||
}
|
||
} else {
|
||
info.trgHeight = file.height;
|
||
info.trgWidth = file.width;
|
||
}
|
||
return info;
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-dropzonejs-example" href="#uidemo-dropzonejs-example" class="header-2">Example</a>
|
||
<div class="col-md-12">
|
||
<div id="dropzonejs-example" class="dropzone-box">
|
||
<div class="dz-default dz-message">
|
||
<i class="fa fa-cloud-upload"></i>
|
||
Drop files in here<br><span class="dz-text-small">or click to pick manually</span>
|
||
</div>
|
||
<form action="//dummy.html">
|
||
<div class="fallback">
|
||
<input name="file" type="file" multiple="" />
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /49. $DROPZONEJS -->
|
||
|
||
<!-- 50. $JQUERY_KNOB ==============================================================================
|
||
|
||
jQuery Knob
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jq-knob" href="#uidemo-jq-knob" class="header-1">jQuery Knob</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://anthonyterrien.com/knob/" target="_blank">http://anthonyterrien.com/knob/</a></div>
|
||
|
||
<!-- 50.1. $JQUERY_KNOB_EXAMPLES ===================================================================
|
||
|
||
Examples
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$(".knob-input-example").knob();
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<!-- Styles -->
|
||
<style>
|
||
.knob-input-block {
|
||
display: inline-block;
|
||
}
|
||
</style>
|
||
<!-- / Styles -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-knob-examples" href="#uidemo-jq-knob-examples" class="header-2">Examples</a>
|
||
<div class="col-md-12">
|
||
<div class="knob-input-block">
|
||
<input type="text" value="75" class="knob-input-example" data-width="80" data-height="80" data-fgColor="#6597ea" data-thickness=".2" data-angleOffset="180">
|
||
</div>
|
||
<div class="knob-input-block">
|
||
<input type="text" value="75" class="knob-input-example" data-width="80" data-height="80" data-displayPrevious="true" data-thickness=".2" data-min="-100" data-angleOffset="-125" data-angleArc="250" data-linecap="round" data-fgColor="#5ebd5e">
|
||
</div>
|
||
<div class="knob-input-block">
|
||
<input type="text" value="75" class="knob-input-example" data-width="100" data-height="100" data-thickness=".25" data-cursor="true" data-fgColor="#e5635f">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /50. $JQUERY_KNOB -->
|
||
|
||
<!-- 51. $SUMMERNOTE_WYSIWYG_EDITOR ================================================================
|
||
|
||
Summernote WYSIWYG-editor
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-summernote" href="#uidemo-summernote" class="header-1">Summernote WYSIWYG-editor</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://hackerwins.github.io/summernote/" target="_blank">http://hackerwins.github.io/summernote/</a></div>
|
||
|
||
<!-- 51.1. $SUMMERNOTE_WYSIWYG_EDITOR_EXAMPLE ======================================================
|
||
|
||
Example
|
||
-->
|
||
<!-- include codemirror (codemirror.css, codemirror.js, xml.js, formatting.js)-->
|
||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.min.css" />
|
||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/blackboard.min.css">
|
||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.min.css">
|
||
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.js"></script>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/mode/xml/xml.min.js"></script>
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/2.36.0/formatting.min.js"></script>
|
||
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
if (! $('html').hasClass('ie8')) {
|
||
$('#summernote-example').summernote({
|
||
height: 200,
|
||
tabsize: 2,
|
||
codemirror: {
|
||
theme: 'monokai'
|
||
}
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-summernote-example" href="#uidemo-summernote-example" class="header-2">Example</a>
|
||
<div class="col-md-12">
|
||
<textarea class="form-control" id="summernote-example" rows="5"><p>Seasons <b>coming up</b></p></textarea>
|
||
</div>
|
||
</div>
|
||
<!-- /51. $SUMMERNOTE_WYSIWYG_EDITOR -->
|
||
|
||
<!-- 52. $BOOTSTRAP_MARKDOWN =======================================================================
|
||
|
||
Bootstrap Markdown
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-bs-markdown" href="#uidemo-bs-markdown" class="header-1">Bootstrap Markdown</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://toopay.github.io/bootstrap-markdown/" target="_blank">http://toopay.github.io/bootstrap-markdown/</a></div>
|
||
|
||
<!-- 52.1. $BOOTSTRAP_MARKDOWN_EXAMPLE =============================================================
|
||
|
||
Example
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
if (! $('html').hasClass('ie8')) {
|
||
$("#bs-markdown-example").markdown({ iconlibrary: 'fa' });
|
||
}
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-bs-markdown-example" href="#uidemo-bs-markdown-example" class="header-2">Example</a>
|
||
<div class="col-md-12">
|
||
<div class="panel" style="padding: 15px 15px 0 15px">
|
||
<form>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<input name="title" type="text" placeholder="Title?" class="form-control">
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<textarea name="content" id="bs-markdown-example" class="form-control" rows="5"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<label class="checkbox-inline">
|
||
<input name="publish" type="checkbox"> Publish
|
||
</label>
|
||
<button type="submit" class="btn btn-success pull-right">Submit</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /52. $BOOTSTRAP_MARKDOWN -->
|
||
|
||
<!-- 53. $STYLED_CHECKBOXES_AND_RADIOS =============================================================
|
||
|
||
Styled checkboxes and radios
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-styled-chr" href="#uidemo-styled-chr" class="header-1">Styled checkboxes and radios</a>
|
||
</div>
|
||
|
||
<!-- 53.1. $STYLED_CHECKBOXES ======================================================================
|
||
|
||
Styled checkboxes
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#styled-ch-btn').on('click', function () {
|
||
var $c = $(this).parent().find('input[type="checkbox"]');
|
||
$c.each(function () {
|
||
var $p = $(this).parent(),
|
||
$el = $(this).detach().addClass('px'),
|
||
t = $p.text().trim();
|
||
|
||
$p.html('');
|
||
$p.append($el);
|
||
$p.append($('<span class="lbl">' + t + '</span>'));
|
||
});
|
||
$(this).remove();
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-styled-ch" href="#uidemo-styled-ch" class="header-2">Styled checkboxes</a>
|
||
<div class="col-md-12">
|
||
<!-- Checkbox styling -->
|
||
<p>
|
||
<label class="checkbox-inline">
|
||
<input type="checkbox" class="px">
|
||
<span class="lbl">One</span>
|
||
</label>
|
||
<label class="checkbox-inline">
|
||
<input type="checkbox" class="px" checked="checked">
|
||
<span class="lbl">Two</span>
|
||
</label>
|
||
<label class="checkbox-inline">
|
||
<input type="checkbox" class="px">
|
||
<span class="lbl">Three</span>
|
||
</label>
|
||
</p>
|
||
<hr>
|
||
<!-- Checkbox styling on button click -->
|
||
<p>
|
||
<label class="checkbox-inline"><input type="checkbox"> One</label>
|
||
<label class="checkbox-inline"><input type="checkbox" checked="checked"> Two</label>
|
||
<label class="checkbox-inline"><input type="checkbox"> Three</label>
|
||
<br><br>
|
||
<button class="btn btn-xs" id="styled-ch-btn">Add some magic</button>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 53.2. $STYLED_RADIOS ==========================================================================
|
||
|
||
Styled radios
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#styled-r-btn').on('click', function () {
|
||
var $r = $(this).parent().find('input[type="radio"]');
|
||
$r.each(function () {
|
||
var $p = $(this).parent(),
|
||
$el = $(this).detach().addClass('px'),
|
||
t = $p.text().trim();
|
||
|
||
$p.html('');
|
||
$p.append($el);
|
||
$p.append($('<span class="lbl">' + t + '</span>'));
|
||
});
|
||
$(this).remove();
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-styled-r" href="#uidemo-styled-r" class="header-2">Styled radios</a>
|
||
<div class="col-md-12">
|
||
<!-- Radio styling -->
|
||
<p>
|
||
<label class="radio">
|
||
<input type="radio" name="styled-r1" class="px">
|
||
<span class="lbl">One</span>
|
||
</label>
|
||
<label class="radio">
|
||
<input type="radio" name="styled-r1" class="px" checked="checked">
|
||
<span class="lbl">Two</span>
|
||
</label>
|
||
<label class="radio">
|
||
<input type="radio" name="styled-r1" class="px">
|
||
<span class="lbl">Three</span>
|
||
</label>
|
||
</p>
|
||
<hr>
|
||
<!-- Radio styling on button click -->
|
||
<p>
|
||
<label class="radio"><input type="radio" name="styled-r2"> One</label>
|
||
<label class="radio"><input type="radio" name="styled-r2" checked="checked"> Two</label>
|
||
<label class="radio"><input type="radio" name="styled-r2"> Three</label>
|
||
<button class="btn btn-xs" id="styled-r-btn">Add some magic</button>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- /53. $STYLED_CHECKBOXES_AND_RADIOS -->
|
||
|
||
<!-- 54. $JQUERY_SPARKLINES ========================================================================
|
||
|
||
jQuery Sparklines
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jq-sparklines" href="#uidemo-jq-sparklines" class="header-1">jQuery Sparklines</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://omnipotent.net/jquery.sparkline/" target="_blank">http://omnipotent.net/jquery.sparkline/</a></div>
|
||
|
||
<!-- 54.1. $JQUERY_SPARKLINES_EXAMPLES =============================================================
|
||
|
||
Examples
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#sparkline-btn').click(function () {
|
||
$(this).remove();
|
||
$('#sparkline-line').sparkline();
|
||
|
||
// Bar charts using inline values
|
||
$('.sparkline-bar').sparkline('html', {
|
||
type: 'bar'
|
||
});
|
||
|
||
// Composite line charts, the second using values supplied via javascript
|
||
$('#sparkline-compositeline').sparkline('html', {
|
||
fillColor: false,
|
||
changeRangeMin: 0,
|
||
chartRangeMax: 10
|
||
});
|
||
$('#sparkline-compositeline').sparkline([4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7], {
|
||
composite: true,
|
||
fillColor: false,
|
||
lineColor: 'red',
|
||
changeRangeMin: 0,
|
||
chartRangeMax: 10
|
||
});
|
||
|
||
// Discrete charts
|
||
$('#sparkline-discrete').sparkline('html', {
|
||
type: 'discrete',
|
||
lineColor: 'blue',
|
||
thresholdColor: 'red',
|
||
thresholdValue: 4
|
||
});
|
||
|
||
// Tri-state charts using inline values
|
||
$('#sparkline-tristate').sparkline('html', {
|
||
type: 'tristate'
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-sparklines-examples" href="#uidemo-jq-sparklines-examples" class="header-2">Examples</a>
|
||
<div class="col-md-12">
|
||
<div style="margin-bottom: 10px;"><button id="sparkline-btn" class="btn">Initialize charts</button></div>
|
||
<span id="sparkline-line">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
|
||
<span class="sparkline-bar">-3,1,2,0,3,-1</span>
|
||
<span class="sparkline-bar">0:2,2:4,4:2,4:1</span>
|
||
<span id="sparkline-compositeline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
|
||
<span id="sparkline-discrete">4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5</span>
|
||
<span id="sparkline-tristate">1,1,0,1,-1,-1,1,-1,0,0,1,1</span>
|
||
</div>
|
||
</div>
|
||
<!-- /54. $JQUERY_SPARKLINES -->
|
||
|
||
<!-- 55. $JQUERY_EASY_PIE_CHART ====================================================================
|
||
|
||
jQuery Easy Pie Chart
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jq-epie-chart" href="#uidemo-jq-epie-chart" class="header-1">jQuery Easy Pie Chart</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://rendro.github.io/easy-pie-chart/" target="_blank">http://rendro.github.io/easy-pie-chart/</a></div>
|
||
|
||
<!-- 55.1. $JQUERY_EASY_PIE_CHART_EXAMPLE ==========================================================
|
||
|
||
Example
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#easy-pie-chart-btn').click(function () {
|
||
$(this).remove();
|
||
$('#jq-epie-chart').easyPieChart({
|
||
easing: 'easeOutBounce',
|
||
onStep: function(from, to, percent) {
|
||
$(this.el).find('.pie-chart-label').text(Math.round(percent) + '%');
|
||
}
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-epie-chart-example" href="#uidemo-jq-epie-chart-example" class="header-2">Example</a>
|
||
<div class="col-md-12">
|
||
<div style="margin-bottom: 10px;"><button id="easy-pie-chart-btn" class="btn">Initialize chart</button></div>
|
||
<span class="pie-chart" data-percent="86" id="jq-epie-chart">
|
||
<span class="pie-chart-label"></span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<!-- /55. $JQUERY_EASY_PIE_CHART -->
|
||
|
||
<!-- 56. $MORRISJS =================================================================================
|
||
|
||
Morris.js
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-morrisjs" href="#uidemo-morrisjs" class="header-1">Morris.js</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://www.oesmith.co.uk/morris.js/" target="_blank">http://www.oesmith.co.uk/morris.js/</a></div>
|
||
|
||
<!-- 56.1. $MORRISJS_GRAPH =========================================================================
|
||
|
||
Graph
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#hero-graph-btn').click(function () {
|
||
$(this).remove();
|
||
var tax_data = [
|
||
{"period": "2011 Q3", "licensed": 3407, "sorned": 660},
|
||
{"period": "2011 Q2", "licensed": 3351, "sorned": 629},
|
||
{"period": "2011 Q1", "licensed": 3269, "sorned": 618},
|
||
{"period": "2010 Q4", "licensed": 3246, "sorned": 661},
|
||
{"period": "2009 Q4", "licensed": 3171, "sorned": 676},
|
||
{"period": "2008 Q4", "licensed": 3155, "sorned": 681},
|
||
{"period": "2007 Q4", "licensed": 3226, "sorned": 620},
|
||
{"period": "2006 Q4", "licensed": 3245, "sorned": null},
|
||
{"period": "2005 Q4", "licensed": 3289, "sorned": null}
|
||
];
|
||
Morris.Line({
|
||
element: 'hero-graph',
|
||
data: tax_data,
|
||
xkey: 'period',
|
||
ykeys: ['licensed', 'sorned'],
|
||
labels: ['Licensed', 'Off the road'],
|
||
lineColors: PixelAdmin.settings.consts.COLORS,
|
||
lineWidth: 2,
|
||
pointSize: 4,
|
||
gridLineColor: '#cfcfcf',
|
||
resize: true
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-morrisjs-graph" href="#uidemo-morrisjs-graph" class="header-2">Graph</a>
|
||
<div class="col-md-12">
|
||
<div style="margin-bottom: 10px;"><button id="hero-graph-btn" class="btn">Initialize graph</button></div>
|
||
<div class="graph-container">
|
||
<div id="hero-graph" class="graph"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 56.2. $MORRISJS_BARS ==========================================================================
|
||
|
||
Bars
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#hero-bar-btn').click(function () {
|
||
$(this).remove();
|
||
Morris.Bar({
|
||
element: 'hero-bar',
|
||
data: [
|
||
{ device: 'iPhone', geekbench: 136 },
|
||
{ device: 'iPhone 3G', geekbench: 137 },
|
||
{ device: 'iPhone 3GS', geekbench: 275 },
|
||
{ device: 'iPhone 4', geekbench: 380 },
|
||
{ device: 'iPhone 4S', geekbench: 655 },
|
||
{ device: 'iPhone 5', geekbench: 1571 }
|
||
],
|
||
xkey: 'device',
|
||
ykeys: ['geekbench'],
|
||
labels: ['Geekbench'],
|
||
barRatio: 0.4,
|
||
xLabelAngle: 35,
|
||
hideHover: 'auto',
|
||
barColors: PixelAdmin.settings.consts.COLORS,
|
||
gridLineColor: '#cfcfcf',
|
||
resize: true
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-morrisjs-bars" href="#uidemo-morrisjs-bars" class="header-2">Bars</a>
|
||
<div class="col-md-12">
|
||
<div style="margin-bottom: 10px;"><button id="hero-bar-btn" class="btn">Initialize graph</button></div>
|
||
<div class="graph-container">
|
||
<div id="hero-bar" class="graph"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 56.3. $MORRISJS_AREA ==========================================================================
|
||
|
||
Area
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#hero-area-btn').click(function () {
|
||
$(this).remove();
|
||
Morris.Area({
|
||
element: 'hero-area',
|
||
data: [
|
||
{ period: '2010 Q1', iphone: 2666, ipad: null, itouch: 2647 },
|
||
{ period: '2010 Q2', iphone: 2778, ipad: 2294, itouch: 2441 },
|
||
{ period: '2010 Q3', iphone: 4912, ipad: 1969, itouch: 2501 },
|
||
{ period: '2010 Q4', iphone: 3767, ipad: 3597, itouch: 5689 },
|
||
{ period: '2011 Q1', iphone: 6810, ipad: 1914, itouch: 2293 },
|
||
{ period: '2011 Q2', iphone: 5670, ipad: 4293, itouch: 1881 },
|
||
{ period: '2011 Q3', iphone: 4820, ipad: 3795, itouch: 1588 },
|
||
{ period: '2011 Q4', iphone: 15073, ipad: 5967, itouch: 5175 },
|
||
{ period: '2012 Q1', iphone: 10687, ipad: 4460, itouch: 2028 },
|
||
{ period: '2012 Q2', iphone: 8432, ipad: 5713, itouch: 1791 }
|
||
],
|
||
xkey: 'period',
|
||
ykeys: ['iphone', 'ipad', 'itouch'],
|
||
labels: ['iPhone', 'iPad', 'iPod Touch'],
|
||
hideHover: 'auto',
|
||
lineColors: PixelAdmin.settings.consts.COLORS,
|
||
fillOpacity: 0.3,
|
||
behaveLikeLine: true,
|
||
lineWidth: 2,
|
||
pointSize: 4,
|
||
gridLineColor: '#cfcfcf',
|
||
resize: true
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-morrisjs-area" href="#uidemo-morrisjs-area" class="header-2">Area</a>
|
||
<div class="col-md-12">
|
||
<div style="margin-bottom: 10px;"><button id="hero-area-btn" class="btn">Initialize graph</button></div>
|
||
<div class="graph-container">
|
||
<div id="hero-area" class="graph"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 56.4. $MORRISJS_DONUT =========================================================================
|
||
|
||
Donut
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#hero-donut-btn').click(function () {
|
||
$(this).remove();
|
||
Morris.Donut({
|
||
element: 'hero-donut',
|
||
data: [
|
||
{ label: 'Jam', value: 25 },
|
||
{ label: 'Frosted', value: 40 },
|
||
{ label: 'Custard', value: 25 },
|
||
{ label: 'Sugar', value: 10 }
|
||
],
|
||
colors: PixelAdmin.settings.consts.COLORS,
|
||
resize: true,
|
||
labelColor: '#888',
|
||
formatter: function (y) { return y + "%" }
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-morrisjs-donut" href="#uidemo-morrisjs-donut" class="header-2">Donut</a>
|
||
<div class="col-md-12">
|
||
<div style="margin-bottom: 10px;"><button id="hero-donut-btn" class="btn">Initialize graph</button></div>
|
||
<div class="graph-container">
|
||
<div id="hero-donut" class="graph"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- /56. $MORRISJS -->
|
||
|
||
<!-- 57. $JQUERY_FLOT_CHARTS =======================================================================
|
||
|
||
jQuery Flot charts
|
||
-->
|
||
<div class="row">
|
||
<a id="uidemo-jq-flot" href="#uidemo-jq-flot" class="header-1">jQuery Flot charts</a>
|
||
</div>
|
||
|
||
<div class="note note-info uidemo-note">More info and examples at <a href="http://www.flotcharts.org/" target="_blank">http://www.flotcharts.org/</a></div>
|
||
|
||
<!-- 57.1. $JQUERY_FLOT_CHARTS_GRAPH ===============================================================
|
||
|
||
Graph
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#jq-flot-graph-btn').click(function () {
|
||
$(this).remove();
|
||
// Visits Chart Data
|
||
var visitsChartData = [{
|
||
label: 'Visits',
|
||
data: [
|
||
[6, 1300], [7, 1600], [8, 1900], [9, 2100], [10, 2500], [11, 2200], [12, 2000], [13, 1950], [14, 1900], [15, 2000]
|
||
]
|
||
}, {
|
||
label: 'Returning Visits',
|
||
data: [
|
||
[6, 500], [7, 600], [8, 550], [9, 600], [10, 800], [11, 900], [12, 800], [13, 850], [14, 830], [15, 1000]
|
||
],
|
||
filledPoints: true // Fill points
|
||
}];
|
||
|
||
// Init Chart
|
||
$('#jq-flot-graph').pixelPlot(visitsChartData, {
|
||
series: {
|
||
points: {
|
||
show: true
|
||
},
|
||
lines: {
|
||
show: true
|
||
}
|
||
},
|
||
xaxis: {
|
||
tickDecimals: 2
|
||
},
|
||
yaxis: {
|
||
tickSize: 1000
|
||
}
|
||
}, {
|
||
height: 205,
|
||
tooltipText: "y + ' visitors at ' + x + ':00'"
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-flot-graph" href="#uidemo-jq-flot-graph" class="header-2">Graph</a>
|
||
<div class="col-md-12">
|
||
<div style="margin-bottom: 10px;"><button id="jq-flot-graph-btn" class="btn">Initialize graph</button></div>
|
||
<div id="jq-flot-graph"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 57.2. $JQUERY_FLOT_CHARTS_BARS ================================================================
|
||
|
||
Bars
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#jq-flot-bars-btn').click(function () {
|
||
$(this).remove();
|
||
// Visits Chart Data
|
||
var visitsChartData = [{
|
||
label: 'Visits',
|
||
data: [
|
||
[6, 1300], [7, 1600], [8, 1900], [9, 2100], [10, 2500], [11, 2200], [12, 2000], [13, 1950], [14, 1900], [15, 2000]
|
||
]
|
||
}, {
|
||
label: 'Returning Visits',
|
||
data: [
|
||
[6, 500], [7, 600], [8, 550], [9, 600], [10, 800], [11, 900], [12, 800], [13, 850], [14, 830], [15, 1000]
|
||
],
|
||
filledPoints: true // Fill points
|
||
}];
|
||
|
||
// Init Chart
|
||
$('#jq-flot-bars').pixelPlot(visitsChartData, {
|
||
series: {
|
||
bars: {
|
||
show: true,
|
||
barWidth: .9,
|
||
align: 'center'
|
||
}
|
||
},
|
||
xaxis: { tickDecimals: 2 },
|
||
yaxis: { tickSize: 1000 }
|
||
}, {
|
||
height: 205,
|
||
tooltipText: "y + ' visitors at ' + x + '.00h'"
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-flot-bars" href="#uidemo-jq-flot-bars" class="header-2">Bars</a>
|
||
<div class="col-md-12">
|
||
<div style="margin-bottom: 10px;"><button id="jq-flot-bars-btn" class="btn">Initialize graph</button></div>
|
||
<div id="jq-flot-bars"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 57.3. $JQUERY_FLOT_CHARTS_PIE =================================================================
|
||
|
||
Pie / Doughnut
|
||
-->
|
||
<!-- Javascript -->
|
||
<script>
|
||
init.push(function () {
|
||
$('#jq-flot-pie-btn').click(function () {
|
||
$(this).remove();
|
||
// Doughnut Chart Data
|
||
var doughnutChartData = [{
|
||
label: "Series1", data: 50
|
||
}, {
|
||
label: "Series2", data: 30
|
||
}, {
|
||
label: "Series3", data: 90
|
||
}, {
|
||
label: "Series4", data: 70
|
||
}, {
|
||
label: "Series5", data: 80
|
||
}, {
|
||
label: "Series6", data: 110
|
||
}, {
|
||
label: "Series9", data: 90
|
||
}];
|
||
|
||
// Init Chart
|
||
$('#jq-flot-pie').pixelPlot(doughnutChartData, {
|
||
series: {
|
||
pie: {
|
||
show: true,
|
||
radius: 1,
|
||
innerRadius: 0.5,
|
||
label: {
|
||
show: true,
|
||
radius: 3 / 4,
|
||
formatter: function (label, series) {
|
||
return '<div style="font-size:14px;text-align:center;padding:2px;color:white;">' + Math.round(series.percent) + '%</div>';
|
||
},
|
||
background: { opacity: 0 }
|
||
}
|
||
}
|
||
}
|
||
}, {
|
||
height: 205
|
||
});
|
||
});
|
||
});
|
||
</script>
|
||
<!-- / Javascript -->
|
||
|
||
<div class="row">
|
||
<a id="uidemo-jq-flot-pie" href="#uidemo-jq-flot-pie" class="header-2">Pie / Doughnut</a>
|
||
<div class="col-md-12">
|
||
<div style="margin-bottom: 10px;"><button id="jq-flot-pie-btn" class="btn">Initialize graph</button></div>
|
||
<div id="jq-flot-pie"></div>
|
||
</div>
|
||
</div>
|
||
<!-- /57. $JQUERY_FLOT_CHARTS -->
|
||
|
||
</div> <!-- / #content-wrapper -->
|
||
<div id="main-menu-bg"></div>
|
||
</div> <!-- / #main-wrapper -->
|
||
|
||
<!-- Get jQuery from Google CDN -->
|
||
<!--[if !IE]> -->
|
||
<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">'+"<"+"/script>"); </script>
|
||
<!-- <![endif]-->
|
||
<!--[if lte IE 9]>
|
||
<script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">'+"<"+"/script>"); </script>
|
||
<![endif]-->
|
||
|
||
|
||
<!-- Pixel Admin's javascripts -->
|
||
<script src="assets/javascripts/bootstrap.min.js"></script>
|
||
<script src="assets/javascripts/pixel-admin.min.js"></script>
|
||
|
||
<!-- jQuery UI extras (includes datepicker and tooltips) -->
|
||
<!-- <script src="assets/javascripts/jquery-ui-extras.min.js"></script> -->
|
||
|
||
<!-- Used for X-Editable demo only. You can remove this lines -->
|
||
<script src="assets/javascripts/jquery.mockjax.js"></script>
|
||
<script src="assets/javascripts/demo-mock.js"></script>
|
||
<!---->
|
||
|
||
<script type="text/javascript">
|
||
init.push(function () {
|
||
$('body').on('click', '.header-1, .header-2', function () {
|
||
$('html,body').animate({ scrollTop: $($(this).attr('href')).offset().top - $('#main-navbar').outerHeight() }, 1000);
|
||
return false;
|
||
});
|
||
});
|
||
|
||
window.PixelAdmin.start(init);
|
||
</script>
|
||
|
||
</body>
|
||
</html> |