Scribd
Upload
205 views

Bootstrap Cheatsheet

This document provides a summary of key components in Twitter Bootstrap including: - A grid system for laying out content in 12 columns that is responsive - Icons from Glyphicons that can be used and styled - Tables for tabular data with striped and bordered styling options - Buttons that can be styled in different colors, sizes and states - Dropdowns that can be used in buttons, tabs and navigation - Four types of forms including vertical, horizontal, inline and search forms

Uploaded by

svdmfgbc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
205 views

Bootstrap Cheatsheet

This document provides a summary of key components in Twitter Bootstrap including: - A grid system for laying out content in 12 columns that is responsive - Icons from Glyphicons that can be used and styled - Tables for tabular data with striped and bordered styling options - Buttons that can be styled in different colors, sizes and states - Dropdowns that can be used in buttons, tabs and navigation - Four types of forms including vertical, horizontal, inline and search forms

Uploaded by

svdmfgbc
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Twitter Bootstrap Cheatsheet

Grid 12 columns with a responsive twist


<div class="row"> <div class="span1..12">...</div> <div class="span4 offset1..12">...</div> </div>

Icons by Glyphicons
<i class="icon-search icon-white "></i>

Tables For, you guessed it, tabular data Buttons push it, push it real good
<table class="table table-striped table-bordered table-condensed"> <thead> <tr> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> </table> <a class="btn btn-primary btn-info btn-success btn-warning btn-danger btn-inverse btn-large|-small|-mini disabled" >Push it!</a>

Dropdowns use in buttons, tabs, nav


<a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Action <span class="caret"></span> </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">Cant 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.

You might also like