The official docs at http://getbootstrap.com/ are quite good. The sections on CSS, Components, and Javascript are all useful. This is just a collection of quick pointers for starting out. When in doubt consult the real documentation.
Fannie has a whole lot of forms. This is the most basic way to write a form field:
<div class="form-group">
<label>Field Name</label>
<input type="text" name="field-name" class="form-control" />
</div>
The form-control class provides the rounded edges and general look/feel.
The form-group puts some whitespace around the field. The input box will
be as wide as the container and the label will be above the input box.
There are a couple ways to create a horizontal form. The first is using form-inline. This will auto size elements to fit. Line breaks will happen if lines get too long. Usually form-groups are kept together unless the group is itself extremely long.
<p>
<div class="form-inline">
<div class="form-group">
<label>Field 1</label>
<input type="text" name="field1" class="form-control" />
</div>
<div class="form-group">
<label>Field 2</label>
<input type="text" name="field2" class="form-control" />
</div>
</div>
</p>
Otherwise, you can use the grid system to lay out rows and columns precisely. Width classes can be applied directly to labels but not to inputs. Again form-group adds whitespace between rows. Using form-horizontal and control-label together right-aligns the labels.
<p>
<div class="row form-group form-horizontal">
<label class="col-sm-2 control-label">Field 1</label>
<div class="col-sm-4">
<input type="text" name="field1" class="form-control" />
</div>
<label class="col-sm-2 control-label">Field 2</label>
<div class="col-sm-4">
<input type="text" name="field2" class="form-control" />
</div>
</div>
<div class="row form-group form-horizontal">
<label class="col-sm-2 control-label">Field 3</label>
<div class="col-sm-4">
<input type="text" name="field3" class="form-control" />
</div>
<label class="col-sm-2 control-label">Field 4</label>
<div class="col-sm-4">
<input type="text" name="field4" class="form-control" />
</div>
</div>
</p>
You can attach text directly to an input using the input-group and input-group-addon classes. I find it works best if the input-group element has no other classes. Often that means an extra <div> layer but conflicting rules can cause really confusing output otherwise.
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" name="money-field" class="form-control" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<input type="text" name="percent-field" class="form-control" />
<span class="input-group-addon">%</span>
</div>
</div>
Buttons are created using btn and btn-default classes. Button elements should always be given a type attribute. Examples:
<button type="submit" class="btn btn-default">Submit Button</button> <button type="button" class="btn btn-default">Not Submit Button</button> <a href="" class="btn btn-default">Button Shaped Link</a>
Miscellaneous form notes: the input-sm class makes a form control smaller; input-lg makes a form control bigger. Adding a required attribute to a form control is enforced by most browsers. A placeholder attribute puts in filler text until the input gets focus. If you need a bit of spacing/padding/margin on an element, wrapping it in paragraph tags (<p>) often works.
Bootstrap will zero out cellspacing and cellpadding on tables. With tables used for content-alignment the effect isn't always bad. On actual tabluar data, especially with borders, it looks pretty hideous. Adding the class table will apply Bootstrap's default styling. Adding table-bordered or table-striped does exactly what it sounds like. Boostrap really, really wants to make tables 100% width. That actually makes a fair amount of sense in terms of scaling with different screen sizes and usually is not worth fighting with.
Bootstrap does contextual colors well. Adding alert classes generally makes elements colorful. Examples:
<div class="alert alert-success">The alert-success color</div> <div class="alert alert-danger">The alert-danger color</div>
The FanniePage class provides a javascript function for adding alerts dynamically: showBootstrapAlert(selector, severity, message) where selector is a jQuery selector specifiying where the alert should go, severity is one of the color keywords such as success or danger, and message is the content of the alert.
showBootstrapAlert('div#some-id', 'success', 'The operation succeeded');