Twitter Bootstrap Cheatsheet: Grid System, Tables, Forms, and Buttons, Study notes of Linux skills

This cheatsheet provides an overview of twitter bootstrap's grid system, tables, forms, and buttons. It covers the use of dropdowns in buttons and tabs, responsive grid layouts, table classes, form types and controls, and button classes. Twitter bootstrap is an open-source front-end framework licensed under the apache license v2.0.

Typology: Study notes

2021/2022

Uploaded on 08/05/2022

jacqueline_nel
jacqueline_nel 🇧🇪

4.4

(242)

3.2K documents

1 / 1

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
Dropdowns use in buttons, tabs, nav
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.
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>
Tables For, you guessed it, tabular data
<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
<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>
Buttons push it, push it real good
<a class="btn
btn-primary
btn-info
btn-success
btn-warning
btn-danger
btn-inverse
btn-large|-small|-mini
disabled"
>Push it!</a>
<i class="icon-search
icon-white
"></i>
Icons by Glyphicons
<a class="btn dropdown-toggle"
data-toggle="dropdown"
href="#">
Action <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>

Partial preview of the text

Download Twitter Bootstrap Cheatsheet: Grid System, Tables, Forms, and Buttons and more Study notes Linux skills in PDF only on Docsity!

Dropdowns use in buttons, tabs, nav

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.

Twitter Bootstrap Cheatsheet

Grid 12 columns with a responsive twist

... ...

Tables For, you guessed it, tabular data

… …

… …

Forms four types of forms

Legend text

Name

Option

Can’t touch this Supporting inline help text

Supporting help text

Save

Buttons push it, push it real good

Push it!

Icons by Glyphicons

Action