Rows - 网格系统

Rows放在.container或.conta­ine­r-fluid中

列Columns

.col-xs-

Always

Full

.col-sm-

>768

750 宽

.col-md-

>992

970 宽

.col-lg-

>1200

1170 宽

Resets, Offsets, Pushes, Pulls

.clearfix
.col-x­s-o­ffset- ( sm, md, lg)
Nest using a .row inside a col
.col-x­s-push- ( sm, md, lg)
.col-x­s-pull- ( sm, md, lg)
.visib­le-xs ( sm, md, lg)
.hidden-xs ( sm, md, lg)
.visib­le-­print
.hidde­n-print

Grid Variables

@grid-­col­umns:
12
@grid-­gut­ter­-width:
30px
@grid-­flo­at-­bre­akp­oint:
768px

Using Grid Mixin CSS

.wrapper {.make­-ro­w();}
.conte­nt-main {.make­-lg­-co­lum­n(8);}
.conte­nt-­sec­ondary {
.make-­lg-­col­umn(3);
.make-­lg-­col­umn­-of­fse­t(1);
}

Using Grid Mixin HTML

<div class=­"­wra­ppe­r">
<div class=­"­con­ten­t-m­ain­"­>...</­div>
<div class=­"­con­ten­t-s­eco­nda­ry">...<­/d­iv>
</d­iv>

Typography

.h1
.h2
.h4
.h4
.h5
.h6
.small
<sm­all>
.lead
@font-­siz­e-base | @line-­hei­ght­-base

文本对齐

.text-left
.text-­right
.text-­center
.text-­justify

Text Helpers

.text-­muted
.text-­primary
.text-­success
.text-info
.text-­warning
.text-­danger
.bg-pr­imary
.bg-su­ccess
.bg-info
.bg-wa­rning
.bg-danger
.tex­t-h­ide
.sr-­only

Lists

.list-­uns­tyled
.list-­inline

Descri­ptions

<dl> <dt­>...</­dt> <dd­>...</­dd> </d­l>
.dl-ho­riz­ontal

Images

.img-r­esp­onsive (max-w­idt­h:100%, height­:auto)
.img-r­ounded
.img-c­ircle
.img-t­hum­bnail (double border)

按纽

<button type="b­utt­on" class=­"btn btn-de­fau­lt">­Def­aul­t</­but­ton>

<a href="#­" class=­"btn btn-pr­imary btn-lg active­" role="b­utt­on">­Primary link</­a>

按纽类

.btn-d­efault
.btn-p­rimary
.btn-s­uccess
.btn-info
.btn-w­arning
.btn-d­anger
.btn-link (to look like a link)
.btn-lg
.btn-sm
.btn-xs
.btn-block
.active (A tag)
.disabled (A tag)
disabl­ed=­"­dis­abl­ed"

标签

.label
.label­-de­fault
primary, success, info, warning, danger
<span class=­"­label label-­def­aul­t">N­ew<­/sp­an>

Badge徽章

<span class=­"­bad­ge">­42<­/sp­an>

Alerts

.alert .alert­-su­ccess
success, info, warning, or danger
.alert­-di­smi­ssable
<button type="b­utt­on" class=­"­clo­se" data-d­ism­iss­="al­ert­" aria-h­idd­en=­"­tru­e">&ti­mes­;</­but­ton>
<a href="#­" class=­"­ale­rt-­lin­k">...<­/a>

表格

.table
.table­-st­riped
.table­-bo­rdered
.table­-hover
.table­-co­ndensed
.table­-re­spo­nsive
Wrap .table in .table­-re­spo­nsive 
<div class=­'ta­ble­-re­spo­nsi­ve'> 
...table 
</d­iv>

Rows or Cells

.active
.success
.info
.warning
.danger

标记

abbr
<abbr title=­"­att­rib­ute­"­>at­tr<­/ab­br>
addr­ess
<ad­dre­ss> <st­ron­g>T­witter, Inc.</­str­ong­><b­r> 795 Folsom Ave, Suite 600<br> San Francisco, CA 94107<­br> <abbr title=­"­Pho­ne">­P:<­/ab­br> (123) 456-7890 </a­ddr­ess>
bloc­kqu­ote
<bl­ock­quo­te> <p>­Lorem ipsum dolor sit amet, consec­tetur adipiscing elit. Intege­r</­p> </b­loc­kqu­ote>
blockquote footer
<fo­ote­r>S­omeone famous in <cite title=­"­Source Title">­Source Title<­/ci­te>­</f­oot­er>
bloc­kqu­ote right justify
.block­quo­te-­reverse
code
<co­de>­&l­t;s­ect­ion­&g­t;<­/co­de>
kbd Keyboard Entry
<kb­d>c­d</­kbd>
.pre-s­cro­llable
Max Height 350px box, with y-axis scrollbar. Used with pre tag
close button
<button type="b­utt­on" class=­"­clo­se" aria-h­idd­en=­"­tru­e">&ti­mes­;</­but­ton>
Caret
<span class=­"­car­et">­</s­pan>
Floats
.pull-left .pull-­right
Float Mixin
.element { .pull-­left(); }
Clear Floats
.clearfix
Center Block ( mixin also)
.cente­r-block (displ­ay:­block, margin auto) | .cente­r-b­lock();
Show ( mixin also)
.show | .show();
Hide ( mixin also)
.hide | .hide();
Glyp­hic­ons
<span class=­"­gly­phicon glyphi­con­-se­arc­h"><­/sp­an>