Get rid of native look n' feel with our very own custom checkboxes written purely in CSS. These are retina compatible and available in all Bootstrap's contextual classes (ex: .check-primary)
example :
<div class="checkbox check-default">
<input type="checkbox" checked="checked" value="1" id="checkbox1">
<label for="checkbox1">Keep Me Signed in</label>
</div>
<div class="checkbox check-success ">
<input type="checkbox" checked="checked" value="1" id="checkbox2">
<label for="checkbox2">I agree</label>
</div>
<div class="checkbox check-primary">
<input type="checkbox" checked="checked" value="1" id="checkbox3">
<label for="checkbox3">Mark</label>
</div>
<div class="checkbox check-info">
<input type="checkbox" checked="checked" value="1" id="checkbox4">
<label for="checkbox4">Steve Jobs</label>
</div>
<div class="checkbox check-warning">
<input type="checkbox" checked="checked" value="1" id="checkbox5">
<label for="checkbox5">Action</label>
</div>
<div class="checkbox check-danger">
<input type="checkbox" checked="checked" value="1" id="checkbox6">
<label for="checkbox6">Mark as read</label>
</div>Bored with traditional boxed shape check boxes? Here is a circle one simply add the class .checkbox-circle to change it
example :
<div class="checkbox check-default checkbox-circle">
<input type="checkbox" checked="checked" value="1" id="checkbox7">
<label for="checkbox7">Keep Me Signed in</label>
</div>
<div class="checkbox check-success checkbox-circle">
<input type="checkbox" checked="checked" value="1" id="checkbox8">
<label for="checkbox8">I agree</label>
</div>
<div class="checkbox check-primary checkbox-circle">
<input type="checkbox" checked="checked" value="1" id="checkbox9">
<label for="checkbox9">Mark</label>
</div>These act the same way as normal HTML check boxes. Here are some states that
example :
<div class="checkbox check-success">
<input type="checkbox" disabled="disabled" value="check1" name="check" id="check1">
<label for="check1">Checkbox No. 1</label>
</div>
<div class="checkbox check-success">
<input type="checkbox" disabled="disabled" checked="checked" value="check2" name="check" id="check2">
<label for="check2">Checkbox No. 2</label>
</div>Do not delete the label element which is placed next to each radio. Leave it blank if you don't want it to hold any text
example :
<div class="radio radio-default">
<input type="radio" checked="checked" value="yes" name="radio1" id="radio1Yes">
<label for="radio1Yes">Agree</label>
<input type="radio" value="no" name="radio1" id="radio1No">
<label for="radio1No">Disagree</label>
</div>
<div class="radio radio-success">
<input type="radio" checked="checked" value="yes" name="radio2" id="radio2Yes">
<label for="radio2Yes">Male</label>
<input type="radio" value="no" name="radio2" id="radio2No">
<label for="radio2No">Female</label>
</div>
<div class="radio radio-primary">
<input type="radio" checked="checked" value="yes" name="radio3" id="radio3Yes">
<label for="radio3Yes">High</label>
<input type="radio" value="no" name="radio3" id="radio3No">
<label for="radio3No">Low</label>
</div>
<div class="radio radio-info">
<input type="radio" checked="checked" value="yes" name="radio4" id="radio4Yes">
<label for="radio4Yes">HTML</label>
<input type="radio" value="no" name="radio4" id="radio4No">
<label for="radio4No">JS</label>
</div>
<div class="radio radio-warning">
<input type="radio" checked="checked" value="yes" name="radio5" id="radio5Yes">
<label for="radio5Yes">Chrome</label>
<input type="radio" value="no" name="radio5" id="radio5No">
<label for="radio5No">Firefox</label>
</div>
<div class="radio radio-danger">
<input type="radio" checked="checked" value="yes" name="radio6" id="radio6Yes">
<label for="radio6Yes">iOS</label>
<input type="radio" value="no" name="radio6" id="radio6No">
<label for="radio6No">Android</label>
</div>Use of different color opacity helps to destigues between different states such as disable
example :
<div class="radio radio-primary">
<input type="radio" disabled="disabled" value="Disabled" name="Disabled" id="Disabled">
<label for="Disabled">Disabled</label>
<input type="radio" disabled="disabled" checked="checked" value="ADisabled" name="ADisabled" id="ADisabled">
<label for="ADisabled">Disabled</label>
</div>These are powered by Switchery jQuery plugin. Follow these steps to initialize a sliding toggle in your page
Please refer to Switchery Documentation to learn about plugin options
Include the stylesheet switchery.min.css inside the <head>. Please view Stylesheet inclusion guideline rules
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/switchery/css/switchery.min.css">Include the required javascript files inside the <body> before core template script inclusions. Please view jQuery plugin inclusion guideline rules
<script type="text/javascript" src="assets/plugins/switchery/js/switchery.min.js"></script>Create an ordinary checkbox control with a unique classname
<input type="checkbox" class="switchery" checked />
<input type="checkbox" class="switchery" />
Apply the plugin to your desired element
When initializing the plugin, it is recommended that you only use the hex codes of Pages contextual colors to maintain consistency.
Make sure you place the following script below all the pre-requisites mentioned in the Step two above.
example :
<script>
var elems = Array.prototype.slice.call(document.querySelectorAll('.switchery'));
// Success color: #10CFBD
elems.forEach(function(html) {
var switchery = new Switchery(html, {color: '#10CFBD'});
});
</script>
Add the following markup
<input type="checkbox" class="js-switch" ng-model="Model" ui-switch="{color: '#10cfbd'}" checked="checked" />These are also know as auto-fill input boxes that fills up while you type. This is powered by Bootstrap typhead, you can view there official documentation here
Include the required javascript files inside the <body> before core template script inclusions, if they are not there already. Please view jQuery plugin inclusion guideline rules
<script src="assets/plugins/bootstrap-typehead/typeahead.bundle.min.js"></script>
<script src="assets/plugins/bootstrap-typehead/typeahead.jquery.min.js"></script>Create a simple textbox field and give it an ID so you can initialize in your JS file
<div class="form-group">
<input class="typeahead form-control" id="mytyphead" type="text" placeholder="States of USA">
</div>
<form class="" role="form">
<div class="form-group form-group-default required typehead" id="sample-three">
<label>Countries</label>
<input class="typeahead form-control" id="mytyphead" type="text" placeholder="States of USA">
</div>
</form>
Initialize your typehead with the ID you use
var countries = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: 'https://pages.revox.io/json/countries-list.json'
});
// passing in `null` for the `options` arguments will result in the default
// options being used
$('#mytyphead').typeahead(null, {
name: 'countries',
source: countries
});
Default select depends on classie.js. Make sure it's included inside the <body> before core template script inclusions. Please view jQuery plugin inclusion guideline rules
<script src="assets/plugins/classie/classie.js" type="text/javascript"></script>Add .cs-select and .cs-skin-slide to any <select> control to add a cool animation effect
example :
<select class="cs-select cs-skin-slide" data-init-plugin="cs-select">
<option value="Web-safe">Web-safe</option>
<option value="Helvetica">Helvetica</option>
<option value="SegeoUI">SegeoUI</option>
</select>Pages uses Select2 jQuery plugin for advance selects with search facility. Follow these steps to initialize the plugin
Include the stylesheet select2.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-select2/select2.css">Include the required javascript files inside the <body> before core template script inclusions, if they are not there already. Please view jQuery plugin inclusion guideline rules
<script src="assets/plugins/bootstrap-select2/select2.min.js" type="text/javascript"></script>Append data attribute data-init-plugin="select2" to initialize any <select> automatically with basic options. Avoid auto-initializing when you want to have advance options
<form role="form">
<div class="form-group">
<!-- Using data-init-plugin='select2' automatically initializes a basic Select2 -->
<select class="full-width" data-init-plugin="select2">
<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>
</select>
</div>
<div class="form-group">
<!-- Element intended to use with advance options -->
<input type="hidden" id="mySelect2" class="full-width">
</div>
</form>
Apply the plugin to your desired element
Make sure you place the following script below all the pre-requisites mentioned in the Step two above.
example :
<script>
$(document).ready(function() {
// Avoid applying plugin to <select> with data-init-plugin="select2"
// Only apply on elements that don't have data-init-plugin="select2"
$("#mySelect2").select2({
placeholder: "Select a type",
data: [{
id: 0,
text: 'enhancement'
}, {
id: 1,
text: 'bug'
}, {
id: 2,
text: 'duplicate'
}]
});
});
</script>Add following markup to your page
<ui-select ng-model="person.selected" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
<ui-select-choices repeat="item in people | filter: $select.search">
<div ng-bind-html="trustAsHtml((item.name | highlight: $select.search))"></div>
<small ng-bind-html="trustAsHtml((item.email | highlight: $select.search))"></small>
</ui-select-choices>
</ui-select>Datepicker controls in Pages are powered by Bootstrap Datepicker plugin.
Please refer to Bootstrap Datepicker Documentation to learn about plugin options
Include the stylesheet datepicker3.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-datepicker/css/datepicker3.css">Include the relevant javascript files inside the <body> before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules
<script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js">Add the markup
<div id="myDatepicker" class="input-group date">
<input type="text" class="form-control">
<span class="input-group-addon"><i class="fa fa-calendar"></i>
</span>
</div>Apply the plugin.
Make sure you place the following script below all the pre-requisites mentioned in the Step two above.
example :
<script>
$(document).ready(function() {
$('#myDatepicker').datepicker();
});
</script>Allows the user to enter fixed width input while conforming to a character format. Powered by jQuery Masked Input plugin.
Please refer to jQuery Masked Input Documentation to learn about plugin options
Include the javascript file inside the
<body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules
<script src="assets/plugins/jquery-inputmask/jquery.inputmask.min.js" type="text/javascript">Add the markup.
<input type="text" id="phone" class="form-control">
Apply the plugin.
Make sure you place the following script below all the pre-requisites mentioned in the Step two above.
example :
<script>
$(document).ready(function() {
$("#phone").mask("(999) 999-9999");
});
</script>autoNumeric is a jQuery plugin that automatically formats currency and numbers as you type on form inputs.
Please refer to jQuery autoNumeric Documentation to learn about plugin options
Include the javascript file inside the
<body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules
<script src="assets/plugins/jquery-autonumeric/autoNumeric.js" type="text/javascript">Add the markup.
<input type="text" data-a-dec="." data-a-sep="," class="autonumeric form-control">
Apply the plugin.
Make sure you place the following script below all the pre-requisites mentioned in the Step two above.
example :
<script>
$(document).ready(function() {
$('.autonumeric').autoNumeric('init');
});
</script>Give your users a rich text editing experience with these simple and fully-fledged WYSIWYG editors
Please refer to Bootstrap wysihtml5 Documentation to learn about plugin options
Include the stylesheet bootstrap3-wysihtml5.min.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules
<link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap3-wysihtml5/bootstrap3-wysihtml5.min.css">
Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules
<script src="assets/plugins/bootstrap3-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>Add the markup.
<textarea id="wysiwyg5" class="wysiwyg" placeholder="Enter text ..." style="height:250px"></textarea>
Apply the plugin.
Make sure you place the following script below all the pre-requisites mentioned in the Step two above.
example :
<script>
$(document).ready(function() {
$('#wysiwyg5').wysihtml5();
});
</script><div class="wysiwyg5-wrapper b-a b-grey">
<textarea id="wysiwyg5" class="wysiwyg demo-form-wysiwyg" placeholder="Enter text ..." ui-jq="wysihtml5" ui-options="{
html: true,
stylesheets: ['pages/css/editor.css']
}"></textarea>
</div>Please refer to Summernote Documentation to learn about plugin options
Include the stylesheet summernote.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/summernote/css/summernote.css">
Include the javascript file inside the <body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules
<script type="text/javascript" src="assets/plugins/summernote/js/summernote.min.js"></script>Add the markup.
<div id="summernote">Hello Summernote</div>
Apply the plugin.
Make sure you place the following script below all the pre-requisites mentioned in the Step two above.
example :
<script>
$(document).ready(function() {
$('#summernote').summernote();
});
</script>jQuery tags input plugin is based on Twitter Bootstrap.
Please refer to jQuery tags input Documentation to learn about plugin options
Include the stylesheet bootstrap-tagsinput.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules
<link type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-tag/bootstrap-tagsinput.css">
Include the javascript file inside the
<body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules
<script src="assets/plugins/bootstrap-tag/bootstrap-tagsinput.min.js" type="text/javascript"></script>Add the markup.
<input id="#tagsinput" type="text" value="Amsterdam,Washington" data-role="tagsinput" />
Apply the plugin.
Make sure you place the following script below all the pre-requisites mentioned in the Step two above.
example :
<script>
$(document).ready(function() {
$('#tagsinput').tagsinput({
typeahead: {
source: ['Amsterdam', 'Washington', 'Sydney', 'Beijing', 'Cairo']
}
});
});
</script>DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews.
Please refer to DropzoneJS Documentation to learn about plugin options
Include the stylesheet dropzone.css inside the <head> if it's not there already. Please view Stylesheet inclusion guideline rules
<link type="text/css" rel="stylesheet" href="assets/plugins/dropzone/css/dropzone.css">
Include the javascript file inside the
<body>before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules
<script src="assets/plugins/dropzone/dropzone.min.js" type="text/javascript"></script>Add .dropzone to initialize dropzone plugin with default options.
example :
<form action="/file-upload" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>