Boot css 2.3 eg form layout
by manoj
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<h1>Formulate</h1>
</div>
<div class="span4 pull-right"> </div>
</div>
<div class="row-fluid">
<form class="well span12">
<div class="row-fluid">
<div class="span12">
<label>Formula Name</label>
<input type="text" class="span8">
</div>
<div class="span8"> </div>
</div>
<div class="row-fluid">
<div class="span3">
<label>My Label</label>
</div>
<div class="span3">
<div class="input-prepend">
<span class="add-on">@</span>
<input type="text" class="input-block-level"/>
</div>
</div>
<div class="span3">+</div>
<div class="span3">
<select class="input-block-level">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<label>My Label</label>
</div>
<div class="span3">
<div class="input-prepend">
<span class="add-on">@</span>
<input type="text" class="input-medium">
</div>
</div>
<div class="span3">+</div>
<div class="span3">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<label>My Label</label>
</div>
<div class="span3">
<div class="input-prepend">
<span class="add-on">@</span>
<input type="text" class="input-medium">
</div>
</div>
<div class="span3">+</div>
<div class="span3">
<select>
<option>Option 1</option>
...
JavaScript
jQuery(function($) {
$(window).resize(function() {
$(".input-prepend, .input-append").each(function(index, group) {
var input = $("input", group).css('width', '');
$(".add-on, .btn", group).each(function() {
input.css('width', '-=' + $(this).outerWidth());
});
});
}).trigger('resize');
});