Twitter Bootstrap Cheat Sheet
ADVERTISEMENT
1Twitter Bootstrap Cheatsheet
Grid
Icons
12 columns with a responsive twist
by Glyphicons
<div class="row">
<i
class="icon-search
<div class="span1..12">...</div>
icon-white
<div
class="span4
offset1..12">...</div>
"></i>
</div>
Tables
Buttons
For, you guessed it, tabular data
push it, push it real good
<table
class="table
<a
class="btn
table-striped
btn-primary
table-bordered
btn-info
table-condensed">
btn-success
<thead>
btn-warning
<tr>
btn-danger
<th>…</th>
btn-inverse
<th>…</th>
btn-large|-small|-mini
</tr>
disabled"
</thead>
>Push it!</a>
<tbody>
<tr>
Dropdowns
use in buttons, tabs, nav
<td>…</td>
<a
class="btn dropdown-toggle"
<td>…</td>
data-toggle="dropdown"
</tr>
href="#">
</tbody>
Action <span class="caret"></span>
</table>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
Forms
four types of forms
<form class="form-vertical|form-horizontal|form-inline|form-search">
<fieldset>
<legend>Legend
text</legend>
<div
class="control-group
error|warning|success">
<label class="control-label">Name</label>
<div class="controls">
<input
type="text"
class="input-mini|-small|-medium|-large|-xlarge|-xxlarge
span1..12 disabled
">
<label class="checkbox|radio">
<input type="checkbox|radio"> Option
</label>
<span
class="uneditable-input">Can’t touch
this</span>
<span
class="help-inline">Supporting inline help
text</span>
<p
class="help-block">Supporting help
text</p>
</div>
</div>
<div class="form-actions">
<button
class="btn
btn-primary">Save</button>
</div>
</fieldset>
</form>
Twitter Bootstrap is licensed under the Apache License v2.0.
This cheatsheet is brought to you by Dresssed, premium themes for Rails based on Bootstrap.
ADVERTISEMENT
0 votes
Related Articles
Related forms
Related Categories
Parent category: Education