This is a sample styleguide for Bootstrap that was generated using Styledown, a styleguide generator. They were taken from inline comments in the CSS.
.form-group
- for grouping things. Individual form controls automatically receive some global styling. All textual
<input>
,
<textarea>
, and
<select>
elements with
.form-control
are set to
width: 100%;
by default. Wrap labels and controls in .form-group for optimum spacing.
<div class="form-group">
<label>Email address</label>
<input placeholder="hi@gmail.com" class="form-control" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" placeholder="Password" class="form-control" />
</div>
.form-inline
- Great for forms that only occupy one line for whatever reason.
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">@</div>
<input placeholder="Email" class="form-control" />
</div>
</div>
<div class="form-group">
<input placeholder="Password" type="password" class="form-control" />
</div>
<button class="btn btn-default">Sign in</button>
</form>
.input-group
- Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use
.input-group
with an
.input-group-addon
to prepend or append elements to a single
.form-control
.
<div class="input-group">
<div class="input-group-addon">@</div>
<input placeholder="Username" class="form-control" />
</div>
<br/>
<div class="input-group">
<input type="text" class="form-control" />
<div class="input-group-addon">.00</div>
</div>
<br/>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" />
<div class="input-group-addon">.00</div>
</div>
.list-group
- List groups are a flexible and powerful component for displaying not only simple lists of elements, but complex ones with custom content.
<ul class="list-group">
<li class="list-group-item">Apple</li>
<li class="list-group-item">Orange</li>
<li class="list-group-item">Banana</li>
<li class="list-group-item">Grape</li>
</ul>
.list-group
with
span.badge
- Add the badges component to any list group item and it will automatically be positioned on the right.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>Apple</li>
<li class="list-group-item">
<span class="badge">8</span>Orange</li>
<li class="list-group-item">Banana</li>
<li class="list-group-item">
<span class="badge">1</span>Grape</li>
</ul>
.panel
- By default, all the .panel does is apply some basic border and padding to contain some content.
<div class="panel panel-default">
<div class="panel-body">Basic panel example</div>
</div>
.panel-heading
- Easily add a heading container to your panel with
.panel-heading
.
<div class="panel panel-default">
<div class="panel-heading">Without a title</div>
<div class="panel-body">Basic panel example</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">Basic panel example</div>
</div>
.nav-tabs
- Note that it requires a
.nav
base class.
<ul class="nav nav-tabs">
<li class="active">
<a>Home</a>
</li>
<li>
<a>Messages</a>
</li>
<li>
<a>Search</a>
</li>
</ul>
.nav-pills
- Note that it requires a
.nav
base class.
<ul class="nav nav-pills">
<li class="active">
<a>Home</a>
</li>
<li>
<a>Messages</a>
</li>
<li>
<a>Search</a>
</li>
</ul>
.nav-pills.nav-stacked
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a>Home</a>
</li>
<li>
<a>Messages</a>
</li>
<li>
<a>Search</a>
</li>
</ul>
.alert
- Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin.
<div class="alert alert-success">
<strong>Well done!</strong>Things are going well.</div>
<div class="alert alert-info">
<strong>Heads up!</strong>You're a wonderful person.</div>
.pagination
- Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
.pager
- by default, it centers links.
.label
- Used for labelling things that need labels.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>