Blame |
Last modification |
View Log
| Download
| RSS feed
<div class="row">
<div class="col-md-6">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption font-red-sunglo">
<i class="icon-settings font-red-sunglo"></i>
<span class="caption-subject bold uppercase"> Default Form
</span>
</div>
<div class="actions">
<div class="btn-group">
<a class="btn btn-sm green dropdown-toggle" href="javascript:;" data-toggle="dropdown"> Actions
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="javascript:;">
<i class="fa fa-pencil"></i> Edit
</a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-trash-o"></i> Delete
</a>
</li>
<li>
<a href="javascript:;">
<i class="fa fa-ban"></i> Ban
</a>
</li>
<li class="divider"> </li>
<li>
<a href="javascript:;"> Make admin
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="portlet-body form">
<form role="form">
<div class="form-body">
<div class="form-group">
<label>Email Address
</label>
<div class="input-group">
<span class="input-group-addon">
<i class="fa fa-envelope"></i>
</span>
<input type="text" class="form-control" placeholder="Email Address"> </div>
</div>
<div class="form-group">
<label>Circle Input
</label>
<div class="input-group">
<span class="input-group-addon input-circle-left">
<i class="fa fa-envelope"></i>
</span>
<input type="text" class="form-control input-circle-right" placeholder="Email Address"> </div>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password
</label>
<div class="input-group">
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<span class="input-group-addon">
<i class="fa fa-user font-red"></i>
</span>
</div>
</div>
<div class="form-group">
<label>Left Icon
</label>
<div class="input-icon">
<i class="fa fa-bell-o font-green"></i>
<input type="text" class="form-control" placeholder="Left icon"> </div>
</div>
<div class="form-group">
<label>Left Icon(.input-sm)
</label>
<div class="input-icon input-icon-sm">
<i class="fa fa-bell-o"></i>
<input type="text" class="form-control input-sm" placeholder="Left icon"> </div>
</div>
<div class="form-group">
<label>Left Icon(.input-lg)
</label>
<div class="input-icon input-icon-lg">
<i class="fa fa-bell-o"></i>
<input type="text" class="form-control input-lg" placeholder="Left icon"> </div>
</div>
<div class="form-group">
<label>Right Icon
</label>
<div class="input-icon right">
<i class="fa fa-microphone fa-spin font-blue"></i>
<input type="text" class="form-control" placeholder="Right icon"> </div>
</div>
<div class="form-group">
<label>Right Icon(.input-sm)
</label>
<div class="input-icon input-icon-sm right">
<i class="fa fa-bell-o"></i>
<input type="text" class="form-control input-sm" placeholder="Left icon"> </div>
</div>
<div class="form-group">
<label>Right Icon(.input-lg)
</label>
<div class="input-icon input-icon-lg right">
<i class="fa fa-bell-o font-green"></i>
<input type="text" class="form-control input-lg" placeholder="Left icon"> </div>
</div>
<div class="form-group">
<label>Circle Input
</label>
<div class="input-icon right">
<i class="fa fa-microphone"></i>
<input type="text" class="form-control input-circle" placeholder="Right icon"> </div>
</div>
<div class="form-group">
<label>Input with Icon
</label>
<div class="input-group input-icon right">
<span class="input-group-addon">
<i class="fa fa-envelope font-purple"></i>
</span>
<i class="fa fa-exclamation tooltips" data-original-title="Invalid email." data-container="body"></i>
<input id="email" class="input-error form-control" type="text" value=""> </div>
</div>
<div class="form-group">
<label>Input With Spinner
</label>
<input class="form-control spinner" type="text" placeholder="Process something" /> </div>
<div class="form-group">
<label>Static Control
</label>
<p class="form-control-static"> email@example.com
</p>
</div>
<div class="form-group">
<label>Disabled
</label>
<input type="text" class="form-control" placeholder="Disabled" disabled> </div>
<div class="form-group">
<label>Readonly
</label>
<input type="text" class="form-control" placeholder="Readonly" readonly> </div>
<div class="form-group">
<label>Dropdown
</label>
<select class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Multiple Select
</label>
<select multiple class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Textarea
</label>
<textarea class="form-control" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleInputFile1">File input
</label>
<input type="file" id="exampleInputFile1">
<p class="help-block"> some help text here.
</p>
</div>
<div class="form-group">
<label>Checkboxes
</label>
<div class="mt-checkbox-list">
<label class="mt-checkbox"> Checkbox 1
<input type="checkbox" value="1" name="test" />
<span></span>
</label>
<label class="mt-checkbox"> Checkbox 2
<input type="checkbox" value="1" name="test" />
<span></span>
</label>
<label class="mt-checkbox"> Checkbox 3
<input type="checkbox" value="1" name="test" />
<span></span>
</label>
</div>
</div>
<div class="form-group">
<label>Outline Checkboxes
</label>
<div class="mt-checkbox-list">
<label class="mt-checkbox mt-checkbox-outline"> Checkbox 1
<input type="checkbox" value="1" name="test" />
<span></span>
</label>
<label class="mt-checkbox mt-checkbox-outline"> Checkbox 2
<input type="checkbox" value="1" name="test" />
<span></span>
</label>
<label class="mt-checkbox mt-checkbox-outline"> Checkbox 3
<input type="checkbox" value="1" name="test" />
<span></span>
</label>
</div>
</div>
<div class="form-group">
<label>Inline Checkboxes
</label>
<div class="mt-checkbox-inline">
<label class="mt-checkbox">
<input type="checkbox" id="inlineCheckbox1" value="option1"> Checkbox 1
<span></span>
</label>
<label class="mt-checkbox">
<input type="checkbox" id="inlineCheckbox2" value="option2"> Checkbox 2
<span></span>
</label>
<label class="mt-checkbox mt-checkbox-disabled">
<input type="checkbox" id="inlineCheckbox3" value="option3" disabled> Disabled
<span></span>
</label>
</div>
</div>
<div class="form-group">
<label>Radios
</label>
<div class="mt-radio-list">
<label class="mt-radio"> Radio 1
<input type="radio" value="1" name="test" />
<span></span>
</label>
<label class="mt-radio"> Radio 2
<input type="radio" value="1" name="test" />
<span></span>
</label>
<label class="mt-radio"> Radio 3
<input type="radio" value="1" name="test" />
<span></span>
</label>
</div>
</div>
<div class="form-group">
<label>Outline Radios
</label>
<div class="mt-radio-list">
<label class="mt-radio mt-radio-outline"> Radio 1
<input type="radio" value="1" name="test" />
<span></span>
</label>
<label class="mt-radio mt-radio-outline"> Radio 2
<input type="radio" value="1" name="test" />
<span></span>
</label>
<label class="mt-radio mt-radio-outline"> Radio 3
<input type="radio" value="1" name="test" />
<span></span>
</label>
</div>
</div>
<div class="form-group">
<label>Inline Radio
</label>
<div class="mt-radio-inline">
<label class="mt-radio">
<input type="radio" name="optionsRadios" id="optionsRadios4" value="option1" checked> Option 1
<span></span>
</label>
<label class="mt-radio">
<input type="radio" name="optionsRadios" id="optionsRadios5" value="option2"> Option 2
<span></span>
</label>
<label class="mt-radio">
<input type="radio" name="optionsRadios" id="optionsRadios6" value="option3" disabled> Disabled
<span></span>
</label>
</div>
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn blue">Submit
</button>
<button type="button" class="btn default">Cancel
</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-6">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="icon-social-dribbble font-blue-sharp"></i>
<span class="caption-subject font-blue-sharp bold uppercase">Input Height Sizing
</span>
</div>
<div class="actions">
<a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
<i class="icon-cloud-upload"></i>
</a>
<a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
<i class="icon-wrench"></i>
</a>
<a class="btn btn-circle btn-icon-only btn-default" href="javascript:;">
<i class="icon-trash"></i>
</a>
</div>
</div>
<div class="portlet-body form">
<form role="form">
<div class="form-body">
<div class="form-group">
<label>Large Input
</label>
<input type="text" class="form-control input-lg" placeholder="input-lg"> </div>
<div class="form-group">
<label>Large Input Group
</label>
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@
</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1"> </div>
</div>
<div class="form-group">
<label>Large Input Default Group
</label>
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn green" type="button">Go!
</button>
</span>
</div>
<!-- /input-group -->
</div>
<div class="form-group">
<label>Default Input
</label>
<input type="text" class="form-control" placeholder=""> </div>
<div class="form-group">
<label>Default Input Group
</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
<span class="input-group-addon" id="sizing-addon1">@
</span>
</div>
</div>
<div class="form-group">
<label>Default Input Button Group
</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn red" type="button">Go!
</button>
</span>
</div>
<!-- /input-group -->
</div>
<div class="form-group">
<label>Small Input
</label>
<input type="text" class="form-control input-sm" placeholder="input-sm"> </div>
<div class="form-group">
<label>Small Input Group
</label>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon1">@
</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1"> </div>
</div>
<div class="form-group">
<label>Small Input Default Group
</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn green" type="button">Go!
</button>
</span>
</div>
<!-- /input-group -->
</div>
<div class="form-group">
<label>Large Select
</label>
<select class="form-control input-lg">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Default Select
</label>
<select class="form-control">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
<div class="form-group">
<label>Small Select
</label>
<select class="form-control input-sm">
<option>Option 1
</option>
<option>Option 2
</option>
<option>Option 3
</option>
<option>Option 4
</option>
<option>Option 5
</option>
</select>
</div>
</div>
<div class="form-actions right">
<button type="button" class="btn default">Cancel
</button>
<button type="submit" class="btn green">Submit
</button>
</div>
</form>
</div>
</div>
</div>
</div>