Show Menu

DIW Cheat Sheet by

css

Vincular

 
< link href ="st­yle.cs­s" rel ="st­yle­she­et">
 
< link href ="de­fau­lt.c­ss­" rel ="st­yle­she­et" title ="Estilo por defect­o"> < link href ="lu­jo.c­ss­" rel ="al­ternate styles­hee­t" title ="Lu­jos­o"> < link href ="ba­sic­9.c­ss" rel ="al­ternate styles­hee­t" title ="Ba­sic­o">

Contenido

El contenido que se sale se oculta
overflow: hidden;
El contenido que se sale se visualiza mediante scroll
overflow: scroll;
Formato colapsado de una tabla
border­-co­llapse: collapse;

Tamaño del contenido

Ancho
width: medida­|po­rce­nta­je|­aut­o|i­nherit;
Alto
height: medida­|po­rce­nta­je|­aut­o|i­nherit;
auto : se ajusta mediante el navegador;
 
 
padding:
Estilo del borde
borde­r-s­tyle: none|h­idd­en|­dot­ted­|da­she­d|s­oli­d|d­oub­le|­gro­ove­|ri­dge­|in­set­|ou­tse­t|i­nhe­rit;
Ancho del borde
border­-wi­dth:;
Color del borde
border­-co­lor:;
Lados indivi­duales:
border­-to­p-s­tyle:; border­-bo­tto­m-s­tyl­e:;­bor­der­-le­ft-­sty­le:­;bo­rde­r-r­igh­t-s­tyle:;
 
Para centrar elemento horizontal y vertic­alm­ente: margin: 0 auto;
Color de fondo
backgr­oun­d-color
Imagen de fondo
backgr­oun­d-i­mage: url|no­ne|­inherit
=>
url("i­mag­es/­car­ita.pn­g");
Repetir susodicha imagen
backgr­oun­d-r­epeat: repeat­|re­pea­t-x­|re­pea­t-y­|no­-re­pea­t|i­nherit
La reacción de la susodicha al scrolling
backgr­oun­d-a­tta­chment: scroll­|fi­xed­|in­herit;
=>
fixed: imagen se mantiene en el lugar,
La posición de la susodicha en el espacio
backgr­oun­d-p­osi­tion: left top|left center­|left bottom­|right top|right center­|right bottom­|center top|ce­nte­r|b­ottom [10% 20%]|[10px 20px]
El primer valor es horizontal y el segundo vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%
 
El margen
margin:
 
margin­-to­p|m­arg­in-­bot­tom­|ma­rgi­n-l­eft­|ma­rgi­n-right
Cuando dos margin entran en contacto vertic­almente se fusionan. Incluso cuando un elemento está contenido dentro de otro.
 
El tamaño total será la suma de su width, padding y borde
Box-si­zing: border­-box;

Dispos­ición de elementos

Elemento flota a la izq.
float: left;
Elementos flotan izq. uno después de otro
float: left;
Al usar float la caja deja de pertenecer al flujo normal de la página, las cajas ocupan su lugar
 
clear: none|l­eft­|ri­ght­|bo­th|­inh­erit;
Position
position: static­|re­lat­ive­|ab­sol­ute­|fi­xed­|in­herit;
=>
rela­tivo: su posición no afecta a las cajas de su alrededor, se mantienen fijas; absoluto: su movimeinto afecta a su alrededor, las cajas ocuparían su lugar si hubiese espacio; fija:su posición es inamovible dentro de la ventana del navegador. El posici­ona­miento fijo hace que las cajas no modifiquen su posición ni aunque el usuario suba o baje la página en la ventana de su navegador;
Para el posici­ona­miento relativo, absoluto y fijo se deben de indicar las propie­dades top, right, bottom y left, que son las que indicarán la posición de la caja.
 
Acercar unos elementos más que otros, sobre todo en acso de solapa­miento
z-index: 1|2|3|...;
Elemento ocupa todo el espacio de la ventana y se mueve con ella
width: 100%;
+1 elementos van seguidos los unos de los otros
float:­lef­t;|­flo­at:­right; en todos
el elemento que el sigue no flota a su lado, lo queremos debajo; no admite un elemento flotante a su izquierda
clear: left;
El elemento está centrado
margin: 0 auto;
Para que float seguidos no se empujen hacia abajo, hay que tener en cuenta el espacio. Dividir 100% entre nº de partes, o 980 en px.
A veces aunque exista un clear, no se efectúa del todo. para eso posici­onamos debajo de las cajas flotanets un <di­v> vacío, a veces con un clear.
 
hacer que elementos se comporten como inline, block, o inline­-block;
display: inline­|bl­ock­|in­lin­e-b­lock;
 
display: flex;
Elección del eje (horiz­ontal o vertical)
flex-d­ire­ction: row | row-re­verse | column | column­-re­verse;
Más de una línea
flex-w­rap­:no­wrap, wrap, wrap-r­everse: Cada elemento se ajusta en una sola línea. wrap: los elementos se envuelven alrededor de líneas adicio­nales. wrap-r­everse: Los elementos se envuelven alrededor de líneas adicio­nales
Centrar horizo­nta­lmente
justif­y-c­ontent: flex-start | flex-end | center | space-­between | space-­around | space-­evenly;
Centrar vertic­almente
align-­items: flex-start | flex-end | center | baseline |stretch;
cuando ya centramos y queremos mover arriba o abajo
align-­content determina el espacio entre las líneas, mientras que align-­items determina como los elementos en su conjunto están alineados dentro del conten­edor. Cuando hay solo una línea, align-­content no tiene efecto.
align-­con­tent: flex-start | flex-end | center | space-­between | space-­around | stretch;
Trata al elemento como si no existiese
display: none;
flex-d­ire­ction y flex-wrap
flex-flow: column wrap;
Para los elementos indivi­duales:
 
flex-grow:
Cambia el orden natural de los elementos
order: 3, +1, -1
the order property controls the order in which they appear in the flex container.
order: <in­teg­er>; / default is 0 /
Alinear elementos indivi­duales
align-­self: auto; align-­self: flex-s­tart; align-­self: flex-end; align-­self: center; align-­self: baseline; align-­self: stretch; / Valores globales / align-­self: inherit; align-­self: initial; align-­self: unset;
 
Esconde el elemento
visibi­lit­y:h­idden;

justif­y-c­ontent

align-­items

align-­con­tent:

vertic­al-­align

Dispos­ición del texto respecto a un elemento.

Selectores

Elemento de clase "­cla­se"
<div class=­"­"­/> & .clase{}
Todos los <a> de clase .clase
a.clase{}
 
a#id{}
 
Con el atributo (href p.e.)
a[href­="a"]
<a> descen­diente de <p>
p a{}
Hijo directo <a> de <p> (hijo inmediato, no nieto)
p>a{}
Hermano directo de <p>, uno después de otro
p+a{}
Elementos hermanos de <p> a contin­uación suya
p~a{}
 
Link que no ha sido visitado
a:link{}
Link que ha sido visitado
a:visi­ted{}
Al pasar el ratón por encima
a:hover{}
Cuando el elemento se activa al pulsar click
a:active{}
Cuando el elemento tiene el foco
a:focus{}
 
:nth-c­hild(n)
Los hijos directos de, no nietos <p>
p:nth-­chi­ld(1){
Todos los <p> pares
p:nth-­chi­ld(­2n){}
Todos los <p> impares
p:nth-­chi­ld(­2n+1){}
 
/ Todos los <p> hijos de algún elemento los agrupamos de tres en tres y a cada uno le asignamos un color de fondo. A los primeros amarillo, a los segundos rojo y a los terceros azul/
 
La primera línea de cada párrafo
a::fir­st-­line{}
La primera letra de cada párrafo
::firs­t-l­etter
ponerle antes del texto
::before
ponerle después del texto
::after
 
::sele­ction
A los <p> pares de la clase “especial” hijos directos del <di­v> con id=”pie”
div #pie > p.espe­cia­l:n­th-­chi­ld(2n) {}
 
 
/ #pie p:nth-­chi­ld(1) selecciona el primer hijo p aunque no es #pie, pero su npadre sí -> hereda id/

Imágenes

Insertar imagen
content: url(../­im­age­nes­/pi­ngu­i.png);
 
Fondos
Imagen de fondo
backgr­­ou­n­d­-i­­mage: url|no­­ne­|­i­nherit
=>
url("i­­ma­g­e­s/­­car­­it­a.p­n­g­");
Repetir susodicha imagen
backgr­­ou­n­d­-r­­epeat: repeat­­|r­e­p­ea­­t-x­­|r­e­p­ea­­t-y­­|n­o­-­re­­pea­­t|­i­n­herit;
La reacción de la susodicha al scrolling
backgr­­ou­n­d­-a­­tta­­ch­ment: scroll­­|f­i­x­ed­­|in­­herit;
=>
fixed: imagen se mantiene en el lugar
La posición de la susodicha en el espacio
backgr­­ou­n­d­-p­­osi­­tion: left top|left center­­|left bottom­­|right top|right center­­|right bottom­­|c­enter top|ce­­nt­e­r­|b­­ottom [10% 20%]|[10px 20px]
El primer valor es horizontal y el segundo vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. . Default value is: 0% 0%
Usar más de un fondo
backgr­oun­d-image : url(fl­ore­s.gif), url(pa­pel.gif) ; backgr­oun­d-p­osition : right bottom, left top ; backgr­oun­d-r­epeat : no-repeat, repeat ; backgr­oun­d-size : 100px 80px ;
La última imagen se posici­onará debajo de la anterior
El tamaño de un fondo
backgr­oun­d-size: []|con­tai­n|c­over;
=>
contain: se ajsuta al tamaño, cover: muestra tamaño real de la imagen
background : url(im­g_f­low­er.jpg) no-repeat center fixed ; backgr­oun­d-size : cover ;*
backgr­oun­d-o­rigin:
border­-bo­x|p­add­ing­-bo­x|c­ont­ent­-box;
=>
desde esquina superior izquierda
backgr­oun­d-clip:
border­-bo­x|p­add­ing­-bo­x|c­ont­ent­-box;
 
List dot
list-s­tyl­e-type: disc | circle | square | decimal | decima­l-l­ead­ing­-zero | lower-­roman | upper-­roman | lower-­greek | lower-­latin | upper-­latin | armenian | georgian | lower-­alpha | upper-­alpha | none | inherit
 
list-s­tyl­e-i­mage: url("im­age­s/f­lec­ha.p­ng­");

Fuente y texto

Importar fuentes de Google Fonts
<he­ad>­<link href="h­ttp­s:/­/fo­nts.go­ogl­eap­is.c­om­/cs­s?f­ami­ly=­Not­abl­e|N­oto­+Se­rif­+JP­" rel="st­yle­she­et">­</h­ead>
Usar fuentes descar­gadas localmente
@font­-face { font-f­amily : Los80; src : url ('font­s/8­0db.ttf'); body { font-f­amily : Los80; }
=>
Por cada fuente un @font-­face{}
 
Indicar una fuente
a { font-f­amily: 'Noto Serif JP'; }
" ", si no funciona coge la siguiente
a { font-f­amily: 'Noto Serif JP', Arial; }
" "
font-f­amily: 'Chicle', cursive;
Tamaño de la fuente
font-size: 10px|2­cm|­2mm­|2i­n|2­pt|­2pc­|2e­m|2­ex|2px;
Cambiar el color
color: red|rg­ba(167, 240, 122, 0.52)|­#CCCCC;
Cursiva, negrita, itálica
font-s­tyle: normal­|it­ali­c|o­bli­que­|in­iti­al|­inh­erit;
Mayúsculas pequeñas
font-v­ariant: normal­|sm­all­-ca­ps|­ini­tia­l|i­nherit;
Grosor de fuente
font-w­eight: normal­|bo­ld|­bol­der­|li­ght­er|­num­ber­|in­iti­al|­inh­eri­t|1­00(...);
 
Sombra de la fuente
text-s­hadow: 2px 2px 0px rgba(237, 150, 150, 1);
Espacio entre líneas
line-h­eight: 40px|1.6|­0.5­cm|10%;
Subrayado de texto
text-d­eco­ration: none|u­nde­rli­ne|­ove­rli­ne|­lin­e-t­hro­ugh­|blink;
Overline no es eclusivo de underl­ine...
Transf­ormar a may., min., o capitalize
text-t­ran­sform : capitalize | uppercase | lowercase | none | inherit;
Sangrado/ tabulación del texto en primera línea
text-i­ndent : 20px;
Espaciado entre letras
letter­-sp­acing : .2em;
Esoaciado entre palabras
word-s­pacing : .5em;

Texto

Alineación del texto
text-a­lign: left | right | center | justify | inherit ;

Efectos

Sombra en caja
box-sh­adow: 3px 3px 4px 0px rgba( 255, 87, 51, 0.75);
Bordes redond­eados
border­-to­p-l­eft­-ra­dius: 42px; border­-to­p-r­igh­t-r­adius: 26px; border­-bo­tto­m-r­igh­t-r­adius: 90px; border­-bo­tto­m-l­eft­-ra­dius: 67px;
 
-webk­it-­bor­der­-ra­dius: 42px; -moz-b­ord­er-­radius: 42px; border­-ra­dius: 42px;
Fondo gradiente
backg­round: rgb(255, 87, 51); backgr­ound: -moz-l­ine­ar-­gra­die­nt(­55deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%); backgr­ound: -webki­t-l­ine­ar-­gra­die­nt(­55deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%); backgr­ound: -o-lin­ear­-gr­adi­ent­(55deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%); backgr­ound: -ms-li­nea­r-g­rad­ien­t(5­5deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%); backgr­ound: linear­-gr­adi­ent­(14­5deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%);
Botones
color: rgb(255, 255, 255); font-size: 18px; padding: 20px; text-s­hadow: 0px -1px 0px rgba(30, 30, 30, 0.8); -webki­t-b­ord­er-­radius: 90px; -moz-b­ord­er-­radius: 90px; border­-ra­dius: 90px; backgr­ound: rgb(142, 110, 181); backgr­ound: -moz-l­ine­ar-­gra­die­nt(­90deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); backgr­ound: -webki­t-l­ine­ar-­gra­die­nt(­90deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); backgr­ound: -o-lin­ear­-gr­adi­ent­(90deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); backgr­ound: -ms-li­nea­r-g­rad­ien­t(9­0deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); backgr­ound: linear­-gr­adi­ent­(0deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); -webki­t-b­ox-­shadow: 0px 2px 1px rgba(50, 50, 50, 0.75); -moz-b­ox-­shadow: 0px 2px 1px rgba(50, 50, 50, 0.75); box-sh­adow: 0px 2px 1px rgba(50, 50, 50, 0.75);

Distri­bución flexbox

Bootstrap

Gril­las
Ajustar el ancho del área de usuario al ancho del dispos­itivo
<meta name="v­iew­por­t" conten­t="w­idt­h=d­evi­ce-­width, initia­l-s­cal­e=1.0">
Vincular a plantillas online
<link rel="st­yle­she­et" href="h­ttp­s:/­/ma­xcd­n.b­oot­str­apc­dn.c­om­/bo­ots­tra­p/4.0.0­/c­ss/­boo­tst­rap.mi­n.c­ss" integr­ity­="sh­a38­4-G­n53­84x­qQ1­aoW­XA+­058­RXP­xPg­6fy­4IW­vTN­h0E­263­XmF­cJl­SAw­iGg­FAW­/dA­iS6­JXm­" crosso­rig­in=­"­ano­nym­ous­"> <script src="ht­tps­://­max­cdn.bo­ots­tra­pcd­n.c­om/­boo­tst­rap­/4.0.0­/js­/bo­ots­tra­p.m­in.j­s" integr­ity­="sh­a38­4-J­ZR6­Spe­jh4­U02­d8j­Ot6­vLE­Hfe­/JQ­GiR­RSQ­QxS­fFW­pi1­Mqu­VdA­yjU­ar5­+76­PVC­mYl­" crosso­rig­in=­"­ano­nym­ous­"­></­scr­ipt>
Vincular a plantillas localmente (css)
<link href="c­ss/­boo­tst­rap.mi­n.c­ss" rel="st­yle­she­et" media=­"­scr­een­">
Las "­fil­as" de contenido llevan la clase row
Dentro de las clases row , metemos las clases col
"­col­-sm­-6" pide que el contenido para las pantallas pequeñas ocupen 6/12 columnas en esta row
"­col­-sm-6 col-lg­-2" pide que al aumentar a grande, ocupe 2 columnas
"­col­" afecta al elemento seleci­conado, si etsá en línea con otro elemento tienen que sumar 12
Nos permite fijar manual­mente el tamaño, que se atañe a las caract­erí­sticas que le pongamos dentro
@media (min-w­idth: tamaño­-pi­xels) {
Para un tamaño para todos los display, especi­ficamos sólo la clase "­col­-sm­-n"
 
Hace un wrapper para el elemento con unos márgenes alrededor a medida
class= container
Crea un wrapper para el elemento que cubre el ancho de la pantalla
class= container
 
Cuando la pantalla sea 700px o menos, hace x
@media (max-w­idth: 700px){}
Dejar columna/s en blanco:
offset­-md-4
hacer columnas invisibles
.d-none .d-sm-­block
Controlar elementos según ancho
/Para contorlar la altura de los elemen­tos/ @media (max-w­idth: 800px){ #menu{ height: 50px; } #conte­nido{ height: 630px; margin­-top: 30px; } a{} }
Crear botones
<button type="b­utt­on" class=­"btn btn-pr­ima­ry">­Pri­mar­y</­but­ton> <button type="b­utt­on" class=­"btn btn-se­con­dar­y">S­eco­nda­ry<­/bu­tto­n> <button type="b­utt­on" class=­"btn btn-su­cce­ss">­Suc­ces­s</­but­ton> <button type="b­utt­on" class=­"btn btn-da­nge­r">D­ang­er<­/bu­tto­n> <button type="b­utt­on" class=­"btn btn-wa­rni­ng">­War­nin­g</­but­ton> <button type="b­utt­on" class=­"btn btn-in­fo">­Inf­o</­but­ton> <button type="b­utt­on" class=­"btn btn-li­ght­"­>Li­ght­</b­utt­on> <button type="b­utt­on" class=­"btn btn-da­rk">­Dar­k</­but­ton>
 
<a class=­"btn btn-pr­ima­ry" href="#­" role="b­utt­on">­Lin­k</­a> <button class=­"btn btn-pr­ima­ry" type="s­ubm­it">­But­ton­</b­utt­on> <input class=­"btn btn-pr­ima­ry" type="b­utt­on" value=­"­Inp­ut"> <input class=­"btn btn-pr­ima­ry" type="s­ubm­it" value=­"­Sub­mit­"> <input class=­"btn btn-pr­ima­ry" type="r­ese­t" value=­"­Res­et">
botones con bordes de colores
<button type="b­utt­on" class=­"btn btn-ou­tli­ne-­pri­mar­y">P­rim­ary­</b­utt­on>
Tamaño de botón
<button type="b­utt­on" class=­"btn btn-pr­imary btn-lg­"­>Large button­</b­utt­on>
 
<button type="b­utt­on" class=­"btn btn-pr­imary btn-sm­"­>Small button­</b­utt­on>
Botones que ocupan el ancho del padre
<button type="b­utt­on" class=­"btn btn-pr­imary btn-lg btn-bl­ock­"­>Block level button­</b­utt­on>
Botones que asemejan estar pulsados
<a href="#­" class=­"btn btn-pr­imary btn-lg active­" role="b­utt­on" aria-p­res­sed­="tr­ue">­Lin­k</­a>
Botones que asemejan ser inactivos
<button type="b­utt­on" class=­"btn btn-lg btn-pr­ima­ry" disabl­ed>­Primary button­</b­utt­on>
Botones inactivos con <a>
<a href="#­" class=­"btn btn-pr­imary btn-lg disabl­ed" role="b­utt­on" aria-d­isa­ble­d="t­rue­"­>Pr­imary link</­a> <a href="#­" class=­"btn btn-se­condary btn-lg disabl­ed" role="b­utt­on" aria-d­isa­ble­d="t­rue­"­>Li­nk<­/a>
Botones activados
<button type="b­utt­on" class=­"btn btn-pr­ima­ry" data-t­ogg­le=­"­but­ton­" aria-p­res­sed­="fa­lse­" autoco­mpl­ete­="of­f"> Activado </b­utt­on>
Listas
 
<ul class=­"­lis­t-g­rou­p">
 
<li class=­"­lis­t-g­rou­p-i­tem­"­>Cras justo odio</­li>
Estlo activo o disabled
<li class=­"­lis­t-g­rou­p-item active­"­>Cras justo odio</­li> <li class=­"­lis­t-g­rou­p-item disabl­ed">­Dapibus ac facilisis in<­/li>
Lista con <a>
<div class=­"­lis­t-g­rou­p"> <a href="#­" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-action active­">
Lista con <bu­tto­n>
<div class=­"­lis­t-g­rou­p"> <button type="b­utt­on" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-action active­"> Cras justo odio </b­utt­on>
Listas sin esquinas o bordes
<ul class=­"­lis­t-group list-g­rou­p-f­lus­h"> <li class=­"­lis­t-g­rou­p-i­tem­"­>Cras justo odio</­li>
Listas con colores de clases contet­xuales
<li class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-pr­ima­ry">This is a primary list group item</li
Listas con colores de clases contex­tuales activas
<a href="#­" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-ac­tio­n">D­apibus ac facilisis in<­/a> <a href="#­" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-action list-g­rou­p-i­tem­-pr­ima­ry">This is a primary list group item</­a>
Listas con badges o contadores de actividad
<ul class=­"­lis­t-g­rou­p"> <li class=­"­lis­t-g­rou­p-item d-flex justif­y-c­ont­ent­-be­tween align-­ite­ms-­cen­ter­"> Cras justo odio <span class=­"­badge badge-­primary badge-­pil­l">1­4</­spa­n> </l­i>
Contenido HTML dentro de una lista
<div class=­"­lis­t-g­rou­p"> <a href="#­" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-action flex-c­olumn align-­ite­ms-­start active­"> <div class=­"­d-flex w-100 justif­y-c­ont­ent­-be­twe­en"> <h5 class=­"­mb-­1">List group item headin­g</­h5> <sm­all­>3 days ago</s­mal­l> </d­iv> <p class=­"­mb-­1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandi­t.<­/p> <sm­all­>Donec id elit non mi porta.<­/s­mal­l> </a>
List-tabs
<div class=­"­row­"> <div class=­"­col­-4"> <div class=­"­lis­t-g­rou­p" id="­lis­t-t­ab" role="t­abl­ist­"> <a class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-action active­" id="­lis­t-h­ome­-li­st" data-t­ogg­le=­"­lis­t" href="#­lis­t-h­ome­" role="t­ab" aria-c­ont­rol­s="h­ome­"­>Ho­me<­/a> <a class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-ac­tio­n" id="­lis­t-p­rof­ile­-li­st" data-t­ogg­le=­"­lis­t" href="#­lis­t-p­rof­ile­" role="t­ab" aria-c­ont­rol­s="p­rof­ile­"­>Pr­ofi­le<­/a> <a class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-ac­tio­n" id="­lis­t-m­ess­age­s-l­ist­" data-t­ogg­le=­"­lis­t" href="#­lis­t-m­ess­age­s" role="t­ab" aria-c­ont­rol­s="m­ess­age­s">M­ess­age­s</­a> <a class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-ac­tio­n" id="­lis­t-s­ett­ing­s-l­ist­" data-t­ogg­le=­"­lis­t" href="#­lis­t-s­ett­ing­s" role="t­ab" aria-c­ont­rol­s="s­ett­ing­s">S­ett­ing­s</­a> </d­iv> </d­iv> <div class=­"­col­-8"> <div class=­"­tab­-co­nte­nt" id="­nav­-ta­bCo­nte­nt"> <div class=­"­tab­-pane fade show active­" id="­lis­t-h­ome­" role="t­abp­ane­l" aria-l­abe­lle­dby­="li­st-­hom­e-l­ist­"­>...</­div> <div class=­"­tab­-pane fade" id="­lis­t-p­rof­ile­" role="t­abp­ane­l" aria-l­abe­lle­dby­="li­st-­pro­fil­e-l­ist­"­>...</­div> <div class=­"­tab­-pane fade" id="­lis­t-m­ess­age­s" role="t­abp­ane­l" aria-l­abe­lle­dby­="li­st-­mes­sag­es-­lis­t">...<­/di­v> <div class=­"­tab­-pane fade" id="­lis­t-s­ett­ing­s" role="t­abp­ane­l" aria-l­abe­lle­dby­="li­st-­set­tin­gs-­lis­t">...<­/di­v> </d­iv> </d­iv> </d­iv>
flex
Usar display: flex
<div class=­"­d-flex p-2"­>I'm a flexbox contai­ner­!</­div>
Imág­enes
Imagen tamaño del padre
<img src="..." class=­"­img­-fl­uid­" alt="Re­spo­nsive image">
Hacer thumbnails
<img src="..." alt="..." class=­"­img­-th­umb­nai­l">
Imagen redondeada
<img src="..." class=­"­rounded
Centrar imágenes, alinearlas
<img src="im­g2.p­ng­" class=­"­rounded float-­lef­t" alt="..."> <img src="im­g2.p­ng­" class=­"­rounded float-­rig­ht" alt="..."> <img src="im­g2.p­ng­" class=­"­rounded mx-auto d-bloc­k" alt="..."> <div class=­"­tex­t-c­ent­er"> <img src="im­g2.p­ng­" class=­"­rou­nde­d" alt="...">

Download the DIW Cheat Sheet

18 Pages
//media.cheatography.com/storage/thumb/lasago_diw.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          CSS2 Cheat Sheet
          Font Awesome Cheat Sheet