Bootstrap Skeleton
This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.
HTML
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://rawgit.com/montrezorro/bootstrap-checkbox/master/js/bootstrap-checkbox.js"></script>
<link rel="stylesheet" href="https://rawgit.com/montrezorro/bootstrap-checkbox/master/css/bootstrap-checkbox.css">
<div class="form-group">
<div class="col-sm-12 divider">
<br><label><input type="checkbox" class="checkbox selectAll" value="">Select All</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-12 ">
<label><input type="checkbox" class="checkbox" value="">CHS Informed Consent Form</label>
</div>
<hr/>
<div class="col-sm-12">
<label><input type="checkbox" class="checkbox" value="">Order Sets</label>
</div>
<div class="col-sm-12">
<label><input type="checkbox" class="checkbox" value="">Carboplatin Teaching Sheet</label>
</div>
<div class="col-sm-12">
<label><input type="checkbox" class="checkbox" value="">Bevacizumab Teaching Sheet</label>
</div>
<div class="col-sm-12">
<label><input type="checkbox" class="checkbox" value="">CHS Specialty Pharmacy Sheet</label>
</div>
<div class="col-sm-12">
<label><input type="checkbox" class="checkbox" value="">Calendar</label>
</div>
<div class="col-sm-12">
<label><input type="checkbox" class="checkbox" value="">Healthcare Provider Contact Form</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<button type="submit" class="btn btn-default submit">Generate Super Pack</button>
</div>
</div>
CSS
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
JavaScript
$('.checkbox').checkbox({
buttonStyle: 'btn-link',
buttonStyleChecked: 'btn-inverse',
uncheckedClass: 'icon-check-empty',
});
$(".selectAll").click(function () {
$('input:checkbox').not(this).checkbox({checked: this.checked});
});