masonjo bootstrap

Esta é uma pré-visualização de arquivo. Entre para ver o arquivo original

Bootstrap Cheat Sheet
by John Mason (masonjo) via cheatography.com/18871/cs/1992/
Rows - Grid System
Rows are in .container or .conta ​ine ​r-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-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 .h3
.h4 .h5 .h6
.small <sm ​all> .lead
@font- ​siz ​e-base | @line- ​hei ​ght ​-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-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)
Forms
NEED TO DO
Buttons
<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>
Button Classes
.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"
Labels
.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>
By John Mason (masonjo)
cheatography.com/masonjo/
www.e-rehab.com
 
Published 29th April, 2014.
Last updated 1st June, 2014.
Page 1 of 3.
 
Sponsored by CrosswordCheats.com
Learn to solve cryptic crosswords!
http://crosswordcheats.com
Bootstrap Cheat Sheet
by John Mason (masonjo) via cheatography.com/18871/cs/1992/
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>
 
By John Mason (masonjo)
cheatography.com/masonjo/
www.e-rehab.com
 
Published 29th April, 2014.
Last updated 1st June, 2014.
Page 2 of 3.
 
Sponsored by CrosswordCheats.com
Learn to solve cryptic crosswords!
http://crosswordcheats.com
Bootstrap Cheat Sheet
by John Mason (masonjo) via cheatography.com/18871/cs/1992/
Tables
.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
Tags
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
 
Tags (cont)
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>
 
By John Mason (masonjo)
cheatography.com/masonjo/
www.e-rehab.com
 
Published 29th April, 2014.
Last updated 1st June, 2014.
Page 3 of 3.
 
Sponsored by CrosswordCheats.com
Learn to solve cryptic crosswords!
http://crosswordcheats.com
	Bootstrap Cheat Sheet - Page 1
	Rows - Grid System
	Using Grid Mixin HTML
	Images
	Columns
	Typography
	Forms
	Resets, Offsets, Pushes, Pulls
	Buttons
	Align
	Button Classes
	Text Helpers
	Grid Variables
	Lists
	Using Grid Mixin CSS
	Labels
	Descri­ptions
	Badge
	Bootstrap Cheat Sheet - Page 2
	Alerts
	Bootstrap Cheat Sheet - Page 3
	Tables
	Rows or Cells
	Tags