942 lines
40 KiB
HTML
942 lines
40 KiB
HTML
<div class="animated fadeIn">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
3d Switch
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-3d switch-primary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-3d switch-secondary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-3d switch-success">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-3d switch-warning">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-3d switch-info">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-3d switch-danger">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch default
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-default switch-primary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-secondary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-success">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-warning">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-info">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-danger">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch default - pills
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-default switch-pill switch-primary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-secondary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-success">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-warning">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-info">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-danger">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch outline
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-default switch-primary-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-secondary-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-success-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-warning-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-info-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-danger-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch outline - pills
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-default switch-pill switch-primary-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-secondary-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-success-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-warning-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-info-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-danger-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch outline alternative
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-default switch-primary-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-secondary-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-success-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-warning-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-info-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-danger-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch outline alternative - pills
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-default switch-pill switch-primary-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-secondary-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-success-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-warning-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-info-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-default switch-pill switch-danger-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch with text
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-text switch-primary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-secondary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-success">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-warning">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-info">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-danger">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch with text - pills
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-text switch-pill switch-primary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-secondary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-success">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-warning">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-info">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-danger">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch with text outline
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-text switch-primary-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-secondary-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-success-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-warning-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-info-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-danger-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch with text outline - pills
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-text switch-pill switch-primary-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-secondary-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-success-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-warning-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-info-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-danger-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch with text outline alternative
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-text switch-primary-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-secondary-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-success-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-warning-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-info-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-danger-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch with text outline alternative - pills
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-text switch-pill switch-primary-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-secondary-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-success-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-warning-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-info-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-text switch-pill switch-danger-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="On" data-off="Off"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch with icon
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-icon switch-primary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-secondary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-success">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-warning">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-info">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-danger">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch with icon - pills
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-icon switch-pill switch-primary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-secondary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-success">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-warning">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-info">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-danger">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch with icon outline
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-icon switch-primary-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-secondary-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-success-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-warning-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-info-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-danger-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch with icon outline - pills
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-icon switch-pill switch-primary-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-secondary-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-success-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-warning-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-info-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-danger-outline">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch with icon outline alternative
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-icon switch-primary-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-secondary-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-success-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-warning-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-info-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-danger-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Switch with icon outline alternative - pills
|
|
</div>
|
|
<div class="card-block">
|
|
<label class="switch switch-icon switch-pill switch-primary-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-secondary-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-success-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-warning-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-info-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
|
|
<label class="switch switch-icon switch-pill switch-danger-outline-alt">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label" data-on="#xf00c" data-off="#xf00d"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
<div class="col-md-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
Sizes
|
|
</div>
|
|
<div class="card-block p-0">
|
|
<table class="table table-hover table-striped table-align-middle mb-0">
|
|
<thead>
|
|
<th>Size</th>
|
|
<th>Example</th>
|
|
<th>CSS Class</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
Large
|
|
</td>
|
|
<td>
|
|
<label class="switch switch-lg switch-3d switch-primary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
Add following class
|
|
<code>.switch-lg</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Normal
|
|
</td>
|
|
<td>
|
|
<label class="switch switch-3d switch-primary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
-
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Small
|
|
</td>
|
|
<td>
|
|
<label class="switch switch-sm switch-3d switch-primary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
Add following class
|
|
<code>.switch-sm</code>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Extra small
|
|
</td>
|
|
<td>
|
|
<label class="switch switch-xs switch-3d switch-primary">
|
|
<input type="checkbox" class="switch-input" checked>
|
|
<span class="switch-label"></span>
|
|
<span class="switch-handle"></span>
|
|
</label>
|
|
</td>
|
|
<td>
|
|
Add following class
|
|
<code>.switch-sm</code>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--/.col-->
|
|
</div>
|
|
<!--/.row-->
|
|
</div>
|