Bootstrap Skeleton 2.0

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by Shobhit Sharma

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.1/bootstrap.min.js"></script>
<form id="myform">
  <br />
  <br />
  <fieldset id="radio_test" class="radio btn-group">
    <input type="radio" id="radio_test0" name="radio_test" value="1"/>
    <label id="lbl-radio_test0" for="radio_test0">Yes</label>
    <input type="radio" id="radio_test1" name="radio_test" value="2" checked="checked"/>
    <label id="lbl-radio_test1" for="radio_test1">No</label>
  </fieldset>
  <br />
  <br />
  <fieldset id="radio2_test" class="radio btn-group">
    <input type="radio" id="radio2_test0" name="radio2_test" value="1"/>
    <label id="lbl-radio2_test0" for="radio2_test0">Yes</label>
    <input type="radio" id="radio2_test1" name="radio2_test" value="0" checked="checked"/>
    <label id="lbl-radio2_test1" for="radio2_test1">No</label>
  </fieldset>
  <br />
  <br />
  <select name="styles"  id="styles">
    <option value="pink" >Pink</option>
    <option value="orange" selected="selected">Orange</option>
  </select>
  <br />
  <br />
  <select name="layout"  id="layout">
    <option value="layout1" >Layout 1</option>
    <option value="layout2" selected="selected">Layout 2</option>
  </select>
  <br />
  <br />
  <textarea name="text_area" id="text_area" cols="50" rows="8">Some default text</textarea>
  <br />
  <br />
  <b>Simple radio test</b>
  <fieldset id="simple_radio" class="simple_radio">
    <input type="radio" id="simple_radio0" name="simple_radio" value="1"/>
    <label id="lbl-simple_radio0" for="simple_radio0">Yes</label>
    <input type="radio" id="simple_radio1" name="simple_radio" value="0" checked="checked"/>
    <label id="lbl-simple_radio1" for="simple_radio1">No</label>
  </fieldset>
  <br />
  <br />
  <label class="checkbox inline">
    <input type="checkbox" id="inlineCheckbox1" value="option1">
    1 </label>
  <label class="checkbox inline">
    <input type="checkbox" id="inlineCheckbox2" value="option2">
    2 </label>
  <label...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

#myform{
    margin:20px;
    padding:20px;
}
.radio,
.checkbox {
    min-height: 18px;
    padding-left: 18px;
}
.radio input[type="radio"],
.checkbox input[type="checkbox"] {
    float: left;
    margin-left: -18px;
}
.controls > .radio:first-child,
.controls > .checkbox:first-child {
    padding-top: 5px;
}
.radio.inline,
.checkbox.inline {
    display: inline-block;
    padding-top: 5px;
    margin-bottom: 0;
    vertical-align: middle;
}
.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
    margin-left: 10px;
}
.radio.btn-group input[type=radio] {
    display: none;
}
.radio.btn-group > label:first-of-type {
    margin-left: 0;
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    border-top-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 4px;
}

JavaScript

$(document).ready(function() {


    // I CANOT CHANGE/EDIT/REMOVE THIS SNIPP HERE , MUST STAY AS IS
    // Turn radios into btn-group
    $('.radio.btn-group label').addClass('btn');
    $(".btn-group label:not(.active)").click(function() {
        var label = $(this);
        var input = $('#' + label.attr('for'));

        if (!input.prop('checked')) {
            label.closest('.btn-group').find("label").removeClass('active btn-success btn-danger btn-primary');
            if (input.val() == '') {
                label.addClass('active btn-primary');
            } else if (input.val() == 0) {
                label.addClass('active btn-danger');
            } else {
                label.addClass('active btn-success');
            }
            input.prop('checked', true);
        }
    });
    $(".btn-group input[checked=checked]").each(function() {
        if ($(this).val() == '') {
            $("label[for=" + $(this).attr('id') + "]").addClass('active btn-primary');
        } else if ($(this).val() == 0) {
            $("label[for=" + $(this).attr('id') + "]").addClass('active btn-danger');
        } else {
            $("label[for=" + $(this).attr('id') + "]").addClass('active btn-success');
        }
    });
})



// FROM HERE IS CHANGABLE
function resetRadioGroup(groupname) {
switch($("input[name='"+groupname+"']:eq(1)").val()) {
    case '' : var css='btn-primary'; break;
    case '0': var css='btn-danger'; break;
    default : var css='btn-success'; break;
}
$("input[name='"+groupname+"']").next().removeClass('active btn-success');
$("input[name='"+groupname+"']:eq(1)").prop("checked", true).next().addClass('active '+css);
}
    
$('#reset_form').click(function() {
    $('#myform')[0].reset();
    resetRadioGroup('radio_test');
    resetRadioGroup('radio2_test');
})