Twitter Bootstrap Cheatsheet Grid 12 columns with a responsive twist Icons by Glyphicons <div class="row"> <div class="span1..12">...</div> <div class="span4 offset1..12">...</div> </div> <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> Forms four types of forms <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> <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.
© Copyright 2024