Bootstrap Skeleton

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

by nikunj2512

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
<div id="bottom-header">
<div class="mouseOver">
<div id="add" >
    <div id="u286" class="ax_shape" style="cursor: pointer;">
                  <div id="u287" class="text">
                    <span style="font-family: 'Comic Sans MS Regular', 'Comic Sans MS';" class="add">Add </span>
                  </div>
                </div>
    <div id="u288" class="ax_image">
                  <img id="u288_img" class="img " src="img/u288.png">
                </div>
        </div>
</div>
</div>
    
<div id="sliding-form">
<form role="form" class="sliding-form" method="get">
<fieldset>
<legend>Add Chassis</legend>

  <div class="form-group control-group">
    <input type="text" class="form-control control-group" id="displayNameInput"  name="displayNameInput" placeholder="Display Name">
  </div>

  <div class="form-group control-group">
    <input type="text" class="form-control control-group" id="ipAddressInput" name="ipAddressInput" placeholder="iLO Chassis Manager IP Address">
  </div>

  <div class="form-group control-group">
    <input type="text" class="form-control control-group" id="usernameInput" name="usernameInput" placeholder="iLO Chassis Manager Userame">
  </div>
  <div class="form-group control-group">
    <input type="password" class="form-control control-group" id="passwordInput" name="passwordInput" placeholder="iLO Chassis Manager Password">
  </div>


  <div class="checkbox control-group">
    <label for="provisioningInput">
       Allocate all Cartridges for provisioning
    </label>
      <input type="checkbox" value="true" name="provisioningInput" id="provisioningInput" class="control-group">
  </div>
    <div class="form-actions">
    <div class="progress-bar pull-left" style="display: none">
        <p style="color:green; font-size:x-small;"><img src="../img/progress_bar.gif"/>Discovering...</p>
    </div>
   <div...

CSS

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

.container {
    margin-top: 10px;
}

#u286 {
  position:absolute;
  left:34px;
  width:60px;
  height:25px;
}

#u287 {
  position:absolute;
  left:22px;
  top:6px;
  width:36px;
  word-wrap:break-word;
}
#u288 {
  position:absolute;
  left:37px;
  width:14px;
  height:14px;
  right: 2px;
}
#u288_img {
  position:absolute;
  left:0px;
  top:9px;
  width:14px;
  height:14px;
}



.mouseOver { background:#fff; }
.mouseOver:hover .ax_shape { border:1px solid #000000; font-weight: 700; }


#sliding-form {
display:none;
background-color: #fff;
border: 1px solid #000;
width: 45%;
position: relative;
top: 30px;
margin-left: 30px;
}

.sliding-form {
padding: 20px; 
width: 90%
}

.sliding-form legend{
    border-bottom-color: #000;

}

JavaScript

$(document).ready(function () {
        $('#add').click(function () {
            if ($('#sliding-form').is(":hidden")) {
                $('#sliding-form').slideDown('slow');
            } else {
                $('#sliding-form').slideUp('slow');
            }
        });
    });
    $('#cancelButton').click(function () {
        $('#sliding-form').slideUp('slow');
        $("label.error").hide();
        $(".has-error").removeClass("has-error");
    });


    $('#addButton').click(function () {

            $('.sliding-form').submit();



    });