|
@@ -305,7 +305,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="title_right">
|
|
|
- <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
|
|
|
+ <div class="col-md-5 col-sm-5 col-12 form-group pull-right top_search">
|
|
|
<div class="input-group">
|
|
|
<input type="text" class="form-control" placeholder="Search for...">
|
|
|
<span class="input-group-btn">
|
|
@@ -317,12 +317,12 @@
|
|
|
</div>
|
|
|
<div class="clearfix"></div>
|
|
|
<div class="row">
|
|
|
- <div class="col-md-12 col-sm-12 col-xs-12">
|
|
|
+ <div class="col-md-12 col-sm-12 col-12">
|
|
|
<div class="x_panel">
|
|
|
<div class="x_title">
|
|
|
- <h2>Form Design
|
|
|
+ <h4>Form Design
|
|
|
<small>different form elements</small>
|
|
|
- </h2>
|
|
|
+ </h4>
|
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
|
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
|
|
</li>
|
|
@@ -349,45 +349,45 @@
|
|
|
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12"
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12"
|
|
|
for="first-name">First
|
|
|
Name <span class="required">*</span>
|
|
|
</label>
|
|
|
- <div class="col-md-6 col-sm-6 col-xs-12">
|
|
|
+ <div class="col-md-6 col-sm-6 col-12">
|
|
|
<input type="text" id="first-name" required="required"
|
|
|
- class="form-control col-md-7 col-xs-12">
|
|
|
+ class="form-control col-md-7 col-12">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12"
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12"
|
|
|
for="last-name">Last
|
|
|
Name <span class="required">*</span>
|
|
|
</label>
|
|
|
- <div class="col-md-6 col-sm-6 col-xs-12">
|
|
|
+ <div class="col-md-6 col-sm-6 col-12">
|
|
|
<input type="text" id="last-name" name="last-name"
|
|
|
required="required"
|
|
|
- class="form-control col-md-7 col-xs-12">
|
|
|
+ class="form-control col-md-7 col-12">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
<label for="middle-name"
|
|
|
- class="control-label col-md-3 col-sm-3 col-xs-12">Middle
|
|
|
+ class="control-label col-md-3 col-sm-3 col-12">Middle
|
|
|
Name / Initial</label>
|
|
|
- <div class="col-md-6 col-sm-6 col-xs-12">
|
|
|
+ <div class="col-md-6 col-sm-6 col-12">
|
|
|
<input id="middle-name"
|
|
|
- class="form-control col-md-7 col-xs-12"
|
|
|
+ class="form-control col-md-7 col-12"
|
|
|
type="text" name="middle-name">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Gender</label>
|
|
|
- <div class="col-md-6 col-sm-6 col-xs-12">
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Gender</label>
|
|
|
+ <div class="col-md-6 col-sm-6 col-12">
|
|
|
<div id="gender" class="btn-group" data-toggle="buttons">
|
|
|
<label class="btn btn-default"
|
|
|
data-toggle-class="btn-primary"
|
|
@@ -409,14 +409,14 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Date Of
|
|
|
Birth
|
|
|
<span
|
|
|
class="required">*</span>
|
|
|
</label>
|
|
|
- <div class="col-md-6 col-sm-6 col-xs-12">
|
|
|
+ <div class="col-md-6 col-sm-6 col-12">
|
|
|
<input id="birthday"
|
|
|
- class="date-picker form-control col-md-7 col-xs-12"
|
|
|
+ class="date-picker form-control col-md-7 col-12"
|
|
|
required="required" type="text">
|
|
|
</div>
|
|
|
</div>
|
|
@@ -424,7 +424,7 @@
|
|
|
<div class="ln_solid"></div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
|
|
|
+ <div class="col-md-6 col-sm-6 col-12 col-md-offset-3">
|
|
|
<button class="btn btn-primary" type="button">Cancel
|
|
|
</button>
|
|
|
<button class="btn btn-primary" type="reset">Reset</button>
|
|
@@ -441,12 +441,12 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
|
- <div class="col-md-6 col-xs-12">
|
|
|
+ <div class="col-md-6 col-12">
|
|
|
<div class="x_panel">
|
|
|
<div class="x_title">
|
|
|
- <h2>Form Design
|
|
|
+ <h4>Form Design
|
|
|
<small>different form elements</small>
|
|
|
- </h2>
|
|
|
+ </h4>
|
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
|
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
|
|
</li>
|
|
@@ -470,7 +470,7 @@
|
|
|
<br/>
|
|
|
<div class="form-horizontal form-label-left input_mask">
|
|
|
<div class="row">
|
|
|
- <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
|
|
|
+ <div class="col-md-6 col-sm-6 col-12 form-group has-feedback">
|
|
|
<input type="text" class="form-control has-feedback-left"
|
|
|
id="inputSuccess2"
|
|
|
placeholder="First Name">
|
|
@@ -478,14 +478,14 @@
|
|
|
aria-hidden="true"></span>
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
|
|
|
+ <div class="col-md-6 col-sm-6 col-12 form-group has-feedback">
|
|
|
<input type="text" class="form-control" id="inputSuccess3"
|
|
|
placeholder="Last Name">
|
|
|
<span class="fa fa-user form-control-feedback right"
|
|
|
aria-hidden="true"></span>
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
|
|
|
+ <div class="col-md-6 col-sm-6 col-12 form-group has-feedback">
|
|
|
<input type="text" class="form-control has-feedback-left"
|
|
|
id="inputSuccess4"
|
|
|
placeholder="Email">
|
|
@@ -493,7 +493,7 @@
|
|
|
aria-hidden="true"></span>
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
|
|
|
+ <div class="col-md-6 col-sm-6 col-12 form-group has-feedback">
|
|
|
<input type="text" class="form-control" id="inputSuccess5"
|
|
|
placeholder="Phone">
|
|
|
<span class="fa fa-phone form-control-feedback right"
|
|
@@ -502,9 +502,9 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Default
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Default
|
|
|
Input</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<input type="text" class="form-control"
|
|
|
placeholder="Default Input">
|
|
|
</div>
|
|
@@ -512,9 +512,9 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Disabled
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Disabled
|
|
|
Input </label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<input type="text" class="form-control" disabled="disabled"
|
|
|
placeholder="Disabled Input">
|
|
|
</div>
|
|
@@ -522,9 +522,9 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Read-Only
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Read-Only
|
|
|
Input</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<input type="text" class="form-control" readonly="readonly"
|
|
|
placeholder="Read-Only Input">
|
|
|
</div>
|
|
@@ -532,13 +532,13 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Date Of
|
|
|
Birth
|
|
|
<span
|
|
|
class="required">*</span>
|
|
|
</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
- <input class="date-picker form-control col-md-7 col-xs-12"
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
+ <input class="date-picker form-control col-md-7 col-12"
|
|
|
required="required" type="text">
|
|
|
</div>
|
|
|
</div>
|
|
@@ -546,7 +546,7 @@
|
|
|
<div class="ln_solid"></div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12 col-md-offset-3">
|
|
|
<button type="button" class="btn btn-primary">Cancel
|
|
|
</button>
|
|
|
<button class="btn btn-primary" type="reset">Reset</button>
|
|
@@ -561,7 +561,7 @@
|
|
|
</div>
|
|
|
<div class="x_panel">
|
|
|
<div class="x_title">
|
|
|
- <h2>Star Rating</h2>
|
|
|
+ <h4>Star Rating</h4>
|
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
|
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
|
|
</li>
|
|
@@ -582,9 +582,9 @@
|
|
|
<div class="clearfix"></div>
|
|
|
</div>
|
|
|
<div class="x_content">
|
|
|
- <h4>Star Ratings
|
|
|
+ <h5>Star Ratings
|
|
|
<small> Hover and click on a star</small>
|
|
|
- </h4>
|
|
|
+ </h5>
|
|
|
<div>
|
|
|
<div class="starrr stars"></div>
|
|
|
You gave a rating of <span class="stars-count">0</span> star(s)
|
|
@@ -599,9 +599,9 @@
|
|
|
|
|
|
<div class="x_panel">
|
|
|
<div class="x_title">
|
|
|
- <h2>Registration Form
|
|
|
+ <h4>Registration Form
|
|
|
<small>Click to validate</small>
|
|
|
- </h2>
|
|
|
+ </h4>
|
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
|
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
|
|
</li>
|
|
@@ -688,12 +688,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="col-md-6 col-xs-12">
|
|
|
+ <div class="col-md-6 col-12">
|
|
|
<div class="x_panel">
|
|
|
<div class="x_title">
|
|
|
- <h2>Form Basic Elements
|
|
|
+ <h4>Form Basic Elements
|
|
|
<small>different form elements</small>
|
|
|
- </h2>
|
|
|
+ </h4>
|
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
|
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
|
|
</li>
|
|
@@ -719,9 +719,9 @@
|
|
|
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Default
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Default
|
|
|
Input</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<input type="text" class="form-control"
|
|
|
placeholder="Default Input">
|
|
|
</div>
|
|
@@ -729,9 +729,9 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Disabled
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Disabled
|
|
|
Input </label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<input type="text" class="form-control" disabled="disabled"
|
|
|
placeholder="Disabled Input">
|
|
|
</div>
|
|
@@ -739,9 +739,9 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Read-Only
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Read-Only
|
|
|
Input</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<input type="text" class="form-control" readonly="readonly"
|
|
|
placeholder="Read-Only Input">
|
|
|
</div>
|
|
@@ -749,12 +749,12 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Date Of
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Date Of
|
|
|
Birth
|
|
|
<span
|
|
|
class="required">*</span>
|
|
|
</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<textarea class="form-control" rows="3"
|
|
|
placeholder="Date Of Birth"></textarea>
|
|
|
</div>
|
|
@@ -762,8 +762,8 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Password</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Password</label>
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<input type="password" class="form-control"
|
|
|
value="passwordonetwo">
|
|
|
</div>
|
|
@@ -771,8 +771,8 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">AutoComplete</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">AutoComplete</label>
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<input type="text" name="country"
|
|
|
id="autocomplete-custom-append"
|
|
|
class="form-control col-md-10"/>
|
|
@@ -781,8 +781,8 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Select</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Select</label>
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<select class="form-control">
|
|
|
<option>Choose option</option>
|
|
|
<option>Option one</option>
|
|
@@ -795,9 +795,9 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Select
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Select
|
|
|
Custom</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<select class="select2_single form-control" tabindex="-1">
|
|
|
<option></option>
|
|
|
<option value="AK">Alaska</option>
|
|
@@ -833,9 +833,9 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Select
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Select
|
|
|
Grouped</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<select class="select2_group form-control">
|
|
|
<optgroup label="Alaskan/Hawaiian Time Zone">
|
|
|
<option value="AK">Alaska</option>
|
|
@@ -903,9 +903,9 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Select
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Select
|
|
|
Multiple</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<select class="select2_multiple form-control"
|
|
|
multiple="multiple">
|
|
|
<option>Choose option</option>
|
|
@@ -921,9 +921,9 @@
|
|
|
</div>
|
|
|
<div class="control-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Input
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Input
|
|
|
Tags</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<input id="tags_1" type="text" class="tags form-control"
|
|
|
value="social, adverts, sales"/>
|
|
|
<div id="suggestions-container"
|
|
@@ -933,14 +933,14 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="col-md-3 col-sm-3 col-xs-12 control-label">Checkboxes
|
|
|
+ <label class="col-md-3 col-sm-3 col-12 control-label">Checkboxes
|
|
|
and
|
|
|
radios
|
|
|
<br>
|
|
|
<small class="text-navy">Normal Bootstrap elements</small>
|
|
|
</label>
|
|
|
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<div class="checkbox">
|
|
|
<label>
|
|
|
<input type="checkbox" value=""> Option one. select
|
|
@@ -981,14 +981,14 @@
|
|
|
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="col-md-3 col-sm-3 col-xs-12 control-label">Checkboxes
|
|
|
+ <label class="col-md-3 col-sm-3 col-12 control-label">Checkboxes
|
|
|
and
|
|
|
radios
|
|
|
<br>
|
|
|
<small class="text-navy">Normal Bootstrap elements</small>
|
|
|
</label>
|
|
|
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<div class="checkbox">
|
|
|
<label>
|
|
|
<input type="checkbox" class="flat"
|
|
@@ -1046,8 +1046,8 @@
|
|
|
</div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Switch</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Switch</label>
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<div class="">
|
|
|
<label>
|
|
|
<input type="checkbox" class="js-switch" checked/>
|
|
@@ -1081,7 +1081,7 @@
|
|
|
<div class="ln_solid"></div>
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12 col-md-offset-3">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12 col-md-offset-3">
|
|
|
<button type="button" class="btn btn-primary">Cancel
|
|
|
</button>
|
|
|
<button type="reset" class="btn btn-primary">Reset</button>
|
|
@@ -1097,12 +1097,12 @@
|
|
|
</div>
|
|
|
|
|
|
|
|
|
- <div class="col-md-6 col-sm-12 col-xs-12">
|
|
|
+ <div class="col-md-6 col-sm-12 col-12">
|
|
|
<div class="x_panel">
|
|
|
<div class="x_title">
|
|
|
- <h2>Form Buttons
|
|
|
+ <h4>Form Buttons
|
|
|
<small>Sessions</small>
|
|
|
- </h2>
|
|
|
+ </h4>
|
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
|
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
|
|
</li>
|
|
@@ -1194,12 +1194,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
- <div class="col-md-12 col-sm-12 col-xs-12">
|
|
|
+ <div class="col-md-12 col-sm-12 col-12">
|
|
|
<div class="x_panel">
|
|
|
<div class="x_title">
|
|
|
- <h2>Text areas
|
|
|
+ <h4>Text areas
|
|
|
<small>Sessions</small>
|
|
|
- </h2>
|
|
|
+ </h4>
|
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
|
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
|
|
</li>
|
|
@@ -1347,10 +1347,10 @@
|
|
|
|
|
|
<div class="form-group">
|
|
|
<div class="row">
|
|
|
- <label class="control-label col-md-3 col-sm-3 col-xs-12">Resizable
|
|
|
+ <label class="control-label col-md-3 col-sm-3 col-12">Resizable
|
|
|
Text
|
|
|
area</label>
|
|
|
- <div class="col-md-9 col-sm-9 col-xs-12">
|
|
|
+ <div class="col-md-9 col-sm-9 col-12">
|
|
|
<textarea class="resizable_textarea form-control"
|
|
|
placeholder="This text area automatically resizes its height as you fill in more text courtesy of autosize-master it out..."></textarea>
|
|
|
</div>
|
|
@@ -1362,9 +1362,9 @@
|
|
|
</div>
|
|
|
<div class="x_panel">
|
|
|
<div class="x_title">
|
|
|
- <h2>Form Input Grid
|
|
|
+ <h4>Form Input Grid
|
|
|
<small>form input</small>
|
|
|
- </h2>
|
|
|
+ </h4>
|
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
|
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
|
|
</li>
|
|
@@ -1387,119 +1387,119 @@
|
|
|
|
|
|
<div class="row">
|
|
|
|
|
|
- <div class="col-md-12 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-12 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-12" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-6 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-6 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-6" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-6 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-6 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-6" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
- <div class="col-md-4 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-4 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-4" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-4 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-4 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-4" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-4 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-4 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-4" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
- <div class="col-md-3 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-3 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-3" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-3 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-3 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-3" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-3 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-3 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-3" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-3 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-3 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-3" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
- <div class="col-md-2 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-2 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-2" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-2 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-2 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-2" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-2 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-2 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-2" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-2 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-2 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-2" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-2 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-2 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-2" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-2 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-2 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-2" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
|
|
|
- <div class="col-md-1 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-1 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-1" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-1 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-1 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-1" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-1 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-1 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-1" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-1 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-1 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-1" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-1 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-1 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-1" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-1 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-1 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-1" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-1 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-1 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-1" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-1 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-1 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-1" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-1 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-1 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-1" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-1 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-1 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-1" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-1 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-1 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-1" class="form-control">
|
|
|
</div>
|
|
|
|
|
|
- <div class="col-md-1 col-sm-12 col-xs-12 form-group">
|
|
|
+ <div class="col-md-1 col-sm-12 col-12 form-group">
|
|
|
<input type="text" placeholder=".col-md-1" class="form-control">
|
|
|
</div>
|
|
|
</div>
|
|
@@ -1510,9 +1510,9 @@
|
|
|
|
|
|
<div class="x_panel">
|
|
|
<div class="x_title">
|
|
|
- <h2>Form Design
|
|
|
+ <h4>Form Design
|
|
|
<small>different form elements</small>
|
|
|
- </h2>
|
|
|
+ </h4>
|
|
|
<ul class="nav navbar-right panel_toolbox">
|
|
|
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
|
|
|
</li>
|
|
@@ -1534,7 +1534,7 @@
|
|
|
<div class="x_content">
|
|
|
<br/>
|
|
|
|
|
|
- <h4>Horizontal labels</h4>
|
|
|
+ <h5>Horizontal labels</h5>
|
|
|
<p class="font-gray-dark">
|
|
|
Using the grid system you can control the position of the labels. The form
|
|
|
example
|
|
@@ -1552,7 +1552,7 @@
|
|
|
</label>
|
|
|
<div class="col-md-7">
|
|
|
<input type="text" id="first-name2" required="required"
|
|
|
- class="form-control col-md-7 col-xs-12">
|
|
|
+ class="form-control col-md-7 col-12">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -1564,14 +1564,14 @@
|
|
|
<div class="col-md-7">
|
|
|
<input type="text" id="last-name2" name="last-name"
|
|
|
required="required"
|
|
|
- class="form-control col-md-7 col-xs-12">
|
|
|
+ class="form-control col-md-7 col-12">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
|
|
|
|
|
|
- <h4>Vertical labels</h4>
|
|
|
+ <h5>Vertical labels</h5>
|
|
|
<p class="font-gray-dark">
|
|
|
For making labels vertical you have two options, either use the apropiate
|
|
|
grid
|
|
@@ -1591,7 +1591,7 @@
|
|
|
</form>
|
|
|
</div>
|
|
|
|
|
|
- <h4>Inline Form </h4>
|
|
|
+ <h5>Inline Form </h5>
|
|
|
<p class="font-gray-dark">
|
|
|
Add .form-inline to your form (which doesn't have to be a <form>) for
|
|
|
left-aligned
|