Rows - Grid System
|
Rows are in .container or .container-fluid
|
Columns
|
.col-xs-
|
Always
|
Full
|
|
.col-sm-
|
>768
|
750 wide
|
|
.col-md-
|
>992
|
970 wide
|
|
.col-lg-
|
>1200
|
1170 wide
|
Resets, Offsets, Pushes, Pulls
|
.clearfix
|
|
.col-xs-offset- (sm, md, lg)
|
|
Nest using a .row inside a col
|
|
.col-xs-push- (sm, md, lg)
|
|
.col-xs-pull- (sm, md, lg)
|
|
.visible-xs (sm, md, lg)
|
|
.hidden-xs (sm, md, lg)
|
|
.visible-print
|
|
.hidden-print
|
Grid Variables
|
@grid-columns:
|
12
|
|
@grid-gutter-width:
|
30px
|
|
@grid-float-breakpoint:
|
768px
|
Using Grid Mixin CSS
|
.wrapper {.make-row();}
.content-main {.make-lg-column(8);}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
|
Using Grid Mixin HTML
|
<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>
|
|
|
Typography
|
.h1
|
.h2
|
.h3
|
|
.h4
|
.h5
|
.h6
|
|
.small
|
<small>
|
.lead
|
@font-size-base | @line-height-base
Align
|
.text-left
|
.text-right
|
|
.text-center
|
.text-justify
|
Text Helpers
|
.text-muted
|
.text-primary
|
|
.text-success
|
.text-info
|
|
.text-warning
|
.text-danger
|
|
.bg-primary
|
.bg-success
|
|
.bg-info
|
.bg-warning
|
|
.bg-danger
|
|
.text-hide
|
.sr-only
|
Lists
|
.list-unstyled
|
.list-inline
|
Descriptions
|
<dl> <dt>...</dt> <dd>...</dd> </dl>
|
|
.dl-horizontal
|
Images
|
.img-responsive (max-width:100%, height:auto)
|
|
.img-rounded
|
|
.img-circle
|
|
.img-thumbnail (double border)
|
|
|
Buttons
|
<button type="button" class="btn btn-default">Default</button>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
|
Button Classes
|
.btn-default
|
.btn-primary
|
|
.btn-success
|
.btn-info
|
|
.btn-warning
|
.btn-danger
|
|
.btn-link (to look like a link)
|
|
.btn-lg
|
.btn-sm
|
|
.btn-xs
|
.btn-block
|
|
.active (A tag)
|
.disabled (A tag)
|
|
disabled="disabled"
|
Labels
|
.label
|
.label-default
|
|
primary, success, info, warning, danger
|
<span class="label label-default">New</span>
Badge
|
<span class="badge">42</span>
|
Alerts
|
.alert .alert-success
|
|
success, info, warning, or danger
|
|
.alert-dismissable
|
|
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
|
|
<a href="#" class="alert-link">...</a>
|
Tables
|
.table
|
.table-striped
|
|
.table-bordered
|
.table-hover
|
|
.table-condensed
|
|
.table-responsive
|
Wrap .table in .table-responsive
<div class='table-responsive'>
...table
</div>
Rows or Cells
|
.active
|
.success
|
.info
|
|
.warning
|
.danger
|
Tags
|
abbr
<abbr title="attribute">attr</abbr>
|
|
address
<address> <strong>Twitter, Inc.</strong><br> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<br> <abbr title="Phone">P:</abbr> (123) 456-7890 </address>
|
|
blockquote
<blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer</p> </blockquote>
|
|
blockquote footer
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
|
|
blockquote right justify
.blockquote-reverse
|
|
code
<code><section></code>
|
|
kbd Keyboard Entry
<kbd>cd</kbd>
|
|
.pre-scrollable
Max Height 350px box, with y-axis scrollbar. Used with pre tag
|
|
close button
<button type="button" class="close" aria-hidden="true">×</button>
|
|
Caret
<span class="caret"></span>
|
|
Floats
.pull-left .pull-right
|
|
Float Mixin
.element { .pull-left(); }
|
|
Clear Floats
.clearfix
|
|
Center Block (mixin also)
.center-block (display:block, margin auto) | .center-block();
|
|
Show (mixin also)
.show | .show();
|
|
Hide (mixin also)
.hide | .hide();
|
|
Glyphicons
<span class="glyphicon glyphicon-search"></span>
|
|