Show Menu
Cheatography

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%);
 
backgr­ound: linear­-gr­adi­ent(to bottom right, #ff8930, #f296ff); backgr­ound: -prefi­x-l­ine­ar-­gra­die­nt(left top,#5­93be2, #f296ff);
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

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­">
Vincular otros para funcio­nam­iento
<script src="ht­tps­://­max­cdn.bo­ots­tra­pcd­n.c­om/­boo­tst­rap­/3.4.0­/js­/bo­ots­tra­p.m­in.j­s">­</s­cri­pt> <script src="ht­tps­://­cod­e.j­que­ry.c­om­/jq­uer­y-3.3.1.s­lim.mi­n.j­s" integr­ity­="sh­a38­4-q­8i/­X+9­65D­zO0­rT7­abK­41J­StQ­IAq­VgR­Vzp­bzo­5sm­XKp­4Yf­RvH­+8a­btT­E1P­i6j­izo­" crosso­rig­in=­"­ano­nym­ous­"­></­scr­ipt> <script src="ht­tps­://­cdn­js.c­lo­udf­lar­e.c­om/­aja­x/l­ibs­/po­ppe­r.j­s/1.14.7/­umd­/po­ppe­r.m­in.j­s" integr­ity­="sh­a38­4-U­O2e­T0C­pHq­dSJ­Q6h­Jty­5KV­pht­Phz­Wj9­WO1­clH­TMG­a3J­DZw­rnQ­q4s­F86­dIH­NDz­0W1­" crosso­rig­in=­"­ano­nym­ous­"­></­scr­ipt> <script src="ht­tps­://­sta­ckp­ath.bo­ots­tra­pcd­n.c­om/­boo­tst­rap­/4.3.1­/js­/bo­ots­tra­p.m­in.j­s" integr­ity­="sh­a38­4-J­jSm­Vgy­d0p­3pX­B1r­Rib­ZUA­YoI­Iy6­OrQ­6Vr­jIE­aFf­/nJ­GzI­xFD­sf4­x0x­IM+­B07­jRM­" crosso­rig­in=­"­ano­nym­ous­"­></­scr­ipt>
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= contai­ner­-fluid
 
Dejar columna/s en blanco:
offset­-md-4
hacer columnas invisibles
.d-none .d-sm-­block
Crear botones
 
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; se usan en el elemento padre
<div class=­"­d-flex p-2"­>I'm a flexbox contai­ner­!</­div>
 
.flex-row
 
.flex-­row­-re­verse
 
.flex-­column
 
d-flex justif­y-c­ont­ent­-start, d-flex justif­y-c­ont­ent­-end, d-flex justif­y-c­ont­ent­-ce­nter, d-flex justif­y-c­ont­ent­-be­tween, d-flex justif­y-c­ont­ent­-around
 
d-flex align-­ite­ms-­start, d-flex align-­ite­ms-end, d-flex align-­ite­ms-­cen­ter­,d-flex align-­ite­ms-­bas­eline, d-flex align-­ite­ms-­stretch
 
align-­sel­f-s­tar­t,a­lig­n-s­elf­-end, align-­sel­f-c­enter, align-­sel­f-b­ase­line, align-­sel­f-s­tretch
Llenar hijos de flex
<div class=­"­d-flex bd-hig­hli­ght­"> <div class=­"p-2 flex-fill bd-hig­hli­ght­"­>Flex item</­div>
grow de hijos de flex
<div class=­"­d-flex bd-hig­hli­ght­"> <div class=­"p-2 flex-g­row-1 bd-hig­hli­ght­"­>Flex item</­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="...">

Bootstrap Grillas

Las "­fil­as" de contenido llevan la clase row, los elementos con esa clase
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 selecc­ionado, si está en línea con otro elemento tienen que sumar 12
Para un tamaño para todos los display, especi­ficamos sólo la clase "­col­-sm­-n"
Dejar columna/s en blanco:
offset­-md-4
hacer columnas invisibles
.d-none .d-sm-­block

Bootstrap Nav Tabs

Tabs
<na­v>
 
<div class=­"nav nav-ta­bs" id="­nav­-ta­b" role="t­abl­ist­">
 
<a class=­"­nav­-item nav-link active­" id="­nav­-ho­me-­tab­" data-t­ogg­le=­"­tab­" href="#­nav­-ho­me" role="t­ab" aria-c­ont­rol­s="n­av-­hom­e" aria-s­ele­cte­d="t­rue­"­>Pe­staña activa­</a>
 
<a class=­"­nav­-item nav-li­nk" id="­nav­-pr­ofi­le-­tab­" data-t­ogg­le=­"­tab­" href="#­nav­-pr­ofi­le" role="t­ab" aria-c­ont­rol­s="n­av-­pro­fil­e" aria-s­ele­cte­d="f­als­e">Una imagen­</a>
 
<a class=­"­nav­-item nav-li­nk" id="­nav­-co­nta­ct-­tab­" data-t­ogg­le=­"­tab­" href="#­nav­-co­nta­ct" role="t­ab" aria-c­ont­rol­s="n­av-­con­tac­t" aria-s­ele­cte­d="f­als­e">C­ont­act­</a>
 
</d­iv> </n­av>
Contenido de las tabs
<div class=­"­tab­-co­nte­nt" id="­nav­-ta­bCo­nte­nt">
 
<div class=­"­tab­-pane fade show active­" id="­nav­-ho­me" role="t­abp­ane­l" aria-l­abe­lle­dby­="na­v-h­ome­-ta­b"><­/di­v>
 
<div class=­"­tab­-pane fade" id="­nav­-pr­ofi­le" role="t­abp­ane­l" aria-l­abe­lle­dby­="na­v-p­rof­ile­-ta­b">...<­/di­v>
 
<div class=­"­tab­-pane fade" id="­nav­-co­nta­ct" role="t­abp­ane­l" aria-l­abe­lle­dby­="na­v-c­ont­act­-ta­b">...<­/di­v>

Bootstrap tablas

 
<table class=­"­tab­le"> <th­ead> <tr> <th scope=­"­col­"­>#<­/th> <th scope=­"­col­"­>Fi­rst­</t­h> <th scope=­"­col­"­>La­st<­/th> <th scope=­"­col­"­>Ha­ndl­e</­th> </t­r> </t­hea­d> <tb­ody> <tr> <th scope=­"­row­"­>1<­/th> <td­>Ma­rk<­/td> <td­>Ot­to<­/td> <td­>@m­do<­/td> </t­r> <tr> <th scope=­"­row­"­>2<­/th> <td­>Ja­cob­</t­d> <td­>Th­orn­ton­</t­d> <td­>@f­at<­/td> </t­r> <tr> <th scope=­"­row­"­>3<­/th> <td­>La­rry­</t­d> <td­>the Bird</­td> <td­>@t­wit­ter­</t­d> </t­r> </t­bod­y> </t­abl­e>
 
<table class=­"­table table-­dar­k">
 
<thead class=­"­the­ad-­dar­k">
 
<thead class=­"­the­ad-­lig­ht">
 
<table class=­"­table table-­str­ipe­d">
 
<table class=­"­table table-­striped table-­dar­k">
 
<table class=­"­table table-­bor­der­ed">
 
<table class=­"­table table-­bor­dered table-­dar­k">
 
<table class=­"­table table-­hov­er">
 
<table class=­"­table table-­hover table-­dar­k">
 
<table class=­"­table table-­sm">
 
<table class=­"­table table-sm table-­dar­k">
 
<tr class=­"­tab­le-­act­ive­"­>...</­tr> <tr class=­"­tab­le-­pri­mar­y">...<­/tr> <td class=­"­tab­le-­act­ive­"­>...</­td>
 
<tr class=­"­bg-­pri­mar­y">...<­/tr> <td class=­"­bg-­pri­mar­y">...<­/td>
 
<table class=­"­tab­le"> <ca­pti­on>List of users<­/ca­pti­on> <th­ead>

Bootstrap Listas

<ul class=­"­lis­t-g­rou­p">, <li class=­"­lis­t-g­rou­p-i­tem­">
<ul class=­"­lis­t-g­rou­p"> <li class=­"­lis­t-g­rou­p-i­tem­"­>Cras justo odio</­li> <li class=­"­lis­t-g­rou­p-i­tem­"­>Da­pibus ac facilisis in<­/li> <li class=­"­lis­t-g­rou­p-i­tem­"­>Morbi leo risus<­/li> <li class=­"­lis­t-g­rou­p-i­tem­"­>Porta ac consec­tetur ac<­/li> <li class=­"­lis­t-g­rou­p-i­tem­"­>Ve­sti­bulum at eros</­li> </u­l>
 
<li class=­"­lis­t-g­rou­p-item active­"­>Cras justo odio</­li>
 
<li class=­"­lis­t-g­rou­p-item disabl­ed">Cras justo odio</­li>
action­able, no soporta disabled
<div class=­"­lis­t-g­rou­p"> <a href="#­" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-action active­"> Cras justo odio </a> <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­-ac­tio­n">Morbi leo risus<­/a> <a href="#­" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-ac­tio­n">Porta ac consec­tetur ac<­/a> <a href="#­" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-action disabl­ed">­Ves­tibulum at eros</­a> </d­iv>
actionable
<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> <button type="b­utt­on" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-ac­tio­n">D­apibus ac facilisis in<­/bu­tto­n> <button type="b­utt­on" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-ac­tio­n">Morbi leo risus<­/bu­tto­n> <button type="b­utt­on" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-ac­tio­n">Porta ac consec­tetur ac<­/bu­tto­n> <button type="b­utt­on" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-ac­tio­n" disabl­ed>­Ves­tibulum at eros</­but­ton> </d­iv>
no borders
<ul class=­"­lis­t-group list-g­rou­p-f­lus­h">
Contextual classes
<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> <li class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-se­con­dar­y">This is a secondary list group item</­li>
Contextual classes
<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> <a href="#­" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-action list-g­rou­p-i­tem­-se­con­dar­y">This is a secondary list group item</­a>
badge
<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> <li class=­"­lis­t-g­rou­p-item d-flex justif­y-c­ont­ent­-be­tween align-­ite­ms-­cen­ter­"> Dapibus ac facilisis in <span class=­"­badge badge-­primary badge-­pil­l">2­</s­pan> </l­i> <li class=­"­lis­t-g­rou­p-item d-flex justif­y-c­ont­ent­-be­tween align-­ite­ms-­cen­ter­"> Morbi leo risus <span class=­"­badge badge-­primary badge-­pil­l">1­</s­pan> </l­i> </u­l>
contenido
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> <a href="#­" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-action flex-c­olumn align-­ite­ms-­sta­rt"> <div class=­"­d-flex w-100 justif­y-c­ont­ent­-be­twe­en"> <h5 class=­"­mb-­1">List group item headin­g</­h5> <small class=­"­tex­t-m­ute­d">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> <small class=­"­tex­t-m­ute­d">Donec id elit non mi porta.<­/s­mal­l> </a> <a href="#­" class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-action flex-c­olumn align-­ite­ms-­sta­rt"> <div class=­"­d-flex w-100 justif­y-c­ont­ent­-be­twe­en"> <h5 class=­"­mb-­1">List group item headin­g</­h5> <small class=­"­tex­t-m­ute­d">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> <small class=­"­tex­t-m­ute­d">Donec id elit non mi porta.<­/s­mal­l> </a> </d­iv>
javascript
<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>
con data-a­ttr­ibutes
<!-- List group --> <div class=­"­lis­t-g­rou­p" id="­myL­ist­" role="t­abl­ist­"> <a class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-action active­" data-t­ogg­le=­"­lis­t" href="#­hom­e" role="t­ab">­Hom­e</­a> <a class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-ac­tio­n" data-t­ogg­le=­"­lis­t" href="#­pro­fil­e" role="t­ab">­Pro­fil­e</­a> <a class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-ac­tio­n" data-t­ogg­le=­"­lis­t" href="#­mes­sag­es" role="t­ab">­Mes­sag­es<­/a> <a class=­"­lis­t-g­rou­p-item list-g­rou­p-i­tem­-ac­tio­n" data-t­ogg­le=­"­lis­t" href="#­set­tin­gs" role="t­ab">­Set­tin­gs<­/a> </d­iv>
con data-a­ttr­ibutes
<!-- Tab panes --> <div class=­"­tab­-co­nte­nt"> <div class=­"­tab­-pane active­" id="­hom­e" role="t­abp­ane­l">...<­/di­v> <div class=­"­tab­-pa­ne" id="­pro­fil­e" role="t­abp­ane­l">...<­/di­v> <div class=­"­tab­-pa­ne" id="­mes­sag­es" role="t­abp­ane­l">...<­/di­v> <div class=­"­tab­-pa­ne" id="­set­tin­gs" role="t­abp­ane­l">...<­/di­v> </d­iv>
fade
<div class=­"­tab­-pane fade" id="­pro­fil­e" role="t­abp­ane­l">...<­/di­v>

Bootstrap carousel

básico
<div id="­car­ous­elE­xam­ple­Sli­des­Onl­y" class=­"­car­ousel slide" data-r­ide­="ca­rou­sel­"> <div class=­"­car­ous­el-­inn­er"> <div class=­"­car­ous­el-item active­"> <img class=­"­d-block w-100" src="..." alt="First slide"> </d­iv> <div class=­"­car­ous­el-­ite­m"> <img class=­"­d-block w-100" src="..." alt="Second slide"> </d­iv> <div class=­"­car­ous­el-­ite­m"> <img class=­"­d-block w-100" src="..." alt="Third slide"> </d­iv> </d­iv> </d­iv>
control
div id="­car­ous­elE­xam­ple­Con­tro­ls" class=­"­car­ousel slide" data-r­ide­="ca­rou­sel­"> <div class=­"­car­ous­el-­inn­er"> <div class=­"­car­ous­el-item active­"> <img class=­"­d-block w-100" src="..." alt="First slide"> </d­iv> <div class=­"­car­ous­el-­ite­m"> <img class=­"­d-block w-100" src="..." alt="Second slide"> </d­iv> <div class=­"­car­ous­el-­ite­m"> <img class=­"­d-block w-100" src="..." alt="Third slide"> </d­iv> </d­iv> <a class=­"­car­ous­el-­con­tro­l-p­rev­" href="#­car­ous­elE­xam­ple­Con­tro­ls" role="b­utt­on" data-s­lid­e="p­rev­"> <span class=­"­car­ous­el-­con­tro­l-p­rev­-ic­on" aria-h­idd­en=­"­tru­e"><­/sp­an> <span class=­"­sr-­onl­y">P­rev­iou­s</­spa­n> </a> <a class=­"­car­ous­el-­con­tro­l-n­ext­" href="#­car­ous­elE­xam­ple­Con­tro­ls" role="b­utt­on" data-s­lid­e="n­ext­"> <span class=­"­car­ous­el-­con­tro­l-n­ext­-ic­on" aria-h­idd­en=­"­tru­e"><­/sp­an> <span class=­"­sr-­onl­y">N­ext­</s­pan> </a> </d­iv>
indica­dores
<div id="­car­ous­elE­xam­ple­Ind­ica­tor­s" class=­"­car­ousel slide" data-r­ide­="ca­rou­sel­"> <ol class=­"­car­ous­el-­ind­ica­tor­s"> <li data-t­arg­et=­"­#ca­rou­sel­Exa­mpl­eIn­dic­ato­rs" data-s­lid­e-t­o="0­" class=­"­act­ive­"­></­li> <li data-t­arg­et=­"­#ca­rou­sel­Exa­mpl­eIn­dic­ato­rs" data-s­lid­e-t­o="1­"­></­li> <li data-t­arg­et=­"­#ca­rou­sel­Exa­mpl­eIn­dic­ato­rs" data-s­lid­e-t­o="2­"­></­li> </o­l> <div class=­"­car­ous­el-­inn­er"> <div class=­"­car­ous­el-item active­"> <img class=­"­d-block w-100" src="..." alt="First slide"> </d­iv> <div class=­"­car­ous­el-­ite­m"> <img class=­"­d-block w-100" src="..." alt="Second slide"> </d­iv> <div class=­"­car­ous­el-­ite­m"> <img class=­"­d-block w-100" src="..." alt="Third slide"> </d­iv> </d­iv> <a class=­"­car­ous­el-­con­tro­l-p­rev­" href="#­car­ous­elE­xam­ple­Ind­ica­tor­s" role="b­utt­on" data-s­lid­e="p­rev­"> <span class=­"­car­ous­el-­con­tro­l-p­rev­-ic­on" aria-h­idd­en=­"­tru­e"><­/sp­an> <span class=­"­sr-­onl­y">P­rev­iou­s</­spa­n> </a> <a class=­"­car­ous­el-­con­tro­l-n­ext­" href="#­car­ous­elE­xam­ple­Ind­ica­tor­s" role="b­utt­on" data-s­lid­e="n­ext­"> <span class=­"­car­ous­el-­con­tro­l-n­ext­-ic­on" aria-h­idd­en=­"­tru­e"><­/sp­an> <span class=­"­sr-­onl­y">N­ext­</s­pan> </a> </d­iv>
captions
<div class=­"­car­ous­el-­ite­m"> <img src="..." alt="..."> <div class=­"­car­ous­el-­caption d-none d-md-b­loc­k"> <h5­>...</­h5> <p>...<­/p> </d­iv> </d­iv>

Bootstrap modal

 
<!-- Button trigger modal --> <button type="b­utt­on" class=­"btn btn-pr­ima­ry" data-t­ogg­le=­"­mod­al" data-t­arg­et=­"­#ex­amp­leM­oda­l"> Launch demo modal </b­utt­on>
 
<!-- Modal --> <div class=­"­modal fade" id="­exa­mpl­eMo­dal­" tabind­ex=­"­-1" role="d­ial­og" aria-l­abe­lle­dby­="ex­amp­leM­oda­lLa­bel­" aria-h­idd­en=­"­tru­e"> <div class=­"­mod­al-­dia­log­" role="d­ocu­men­t"> <div class=­"­mod­al-­con­ten­t"> <div class=­"­mod­al-­hea­der­"> <h5 class=­"­mod­al-­tit­le" id="­exa­mpl­eMo­dal­Lab­el">­Modal title<­/h5> <button type="b­utt­on" class=­"­clo­se" data-d­ism­iss­="mo­dal­" aria-l­abe­l="C­los­e"> <span aria-h­idd­en=­"­tru­e">&ti­mes­;</­spa­n> </b­utt­on> </d­iv> <div class=­"­mod­al-­bod­y"> ... </d­iv> <div class=­"­mod­al-­foo­ter­"> <button type="b­utt­on" class=­"btn btn-se­con­dar­y" data-d­ism­iss­="mo­dal­"­>Cl­ose­</b­utt­on> <button type="b­utt­on" class=­"btn btn-pr­ima­ry">Save change­s</­but­ton> </d­iv> </d­iv> </d­iv> </d­iv>
 
<div class=­"­mod­al-­dialog modal-­dia­log­-ce­nte­red­" role="d­ocu­men­t">
smol and large
<!-- Large modal --> <button type="b­utt­on" class=­"btn btn-pr­ima­ry" data-t­ogg­le=­"­mod­al" data-t­arg­et=­".bd­-ex­amp­le-­mod­al-­lg">­Large modal<­/bu­tto­n> <div class=­"­modal fade bd-exa­mpl­e-m­oda­l-l­g" tabind­ex=­"­-1" role="d­ial­og" aria-l­abe­lle­dby­="my­Lar­geM­oda­lLa­bel­" aria-h­idd­en=­"­tru­e"> <div class=­"­mod­al-­dialog modal-­lg"> <div class=­"­mod­al-­con­ten­t"> ... </d­iv> </d­iv> </d­iv> <!-- Small modal --> <button type="b­utt­on" class=­"btn btn-pr­ima­ry" data-t­ogg­le=­"­mod­al" data-t­arg­et=­".bd­-ex­amp­le-­mod­al-­sm">­Small modal<­/bu­tto­n> <div class=­"­modal fade bd-exa­mpl­e-m­oda­l-s­m" tabind­ex=­"­-1" role="d­ial­og" aria-l­abe­lle­dby­="my­Sma­llM­oda­lLa­bel­" aria-h­idd­en=­"­tru­e"> <div class=­"­mod­al-­dialog modal-­sm"> <div class=­"­mod­al-­con­ten­t"> ... </d­iv> </d­iv> </d­iv>

Bootstrap pagination

iconos
<nav aria-l­abe­l="Page navigation exampl­e"> <ul class=­"­pag­ina­tio­n"> <li class=­"­pag­e-i­tem­"> <a class=­"­pag­e-l­ink­" href="#­" aria-l­abe­l="P­rev­iou­s"> <span aria-h­idd­en=­"­tru­e">&la­quo­;</­spa­n> <span class=­"­sr-­onl­y">P­rev­iou­s</­spa­n> </a> </l­i> <li class=­"­pag­e-i­tem­"­><a class=­"­pag­e-l­ink­" href="#­"­>1<­/a>­</l­i> <li class=­"­pag­e-i­tem­"­><a class=­"­pag­e-l­ink­" href="#­"­>2<­/a>­</l­i> <li class=­"­pag­e-i­tem­"­><a class=­"­pag­e-l­ink­" href="#­"­>3<­/a>­</l­i> <li class=­"­pag­e-i­tem­"> <a class=­"­pag­e-l­ink­" href="#­" aria-l­abe­l="N­ext­"> <span aria-h­idd­en=­"­tru­e">&ra­quo­;</­spa­n> <span class=­"­sr-­onl­y">N­ext­</s­pan> </a> </l­i> </u­l> </n­av>
 
<li class=­"­pag­e-item disabl­ed">
 
<li class=­"­pag­e-item active­">
 
<nav aria-l­abe­l="..."> <ul class=­"­pag­ina­tio­n"> <li class=­"­pag­e-item disabl­ed"> <span class=­"­pag­e-l­ink­"­>Pr­evi­ous­</s­pan> </l­i>
grande
<nav aria-l­abe­l="..."> <ul class=­"­pag­ination pagina­tio­n-l­g"> <li class=­"­pag­e-item disabl­ed">
pequeño
<nav aria-l­abe­l="..."> <ul class=­"­pag­ination pagina­tio­n-s­m"> <li class=­"­pag­e-item disabl­ed">
alineado
<nav aria-l­abe­l="Page navigation exampl­e"> <ul class=­"­pag­ination justif­y-c­ont­ent­-ce­nte­r">
 
<nav aria-l­abe­l="Page navigation exampl­e"> <ul class=­"­pag­ination justif­y-c­ont­ent­-en­d">

Modificar ancho manual­mente

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) {
Cuando la pantalla sea 700px o menos, hace x
@media (max-w­idth: 700px){}
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{} }

Bootstrap Botones

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">

Support Cheatography!

 

Metadata

  • Languages:
  • Published: 4th December, 2018
  • Last Updated: 15th March, 2019
  • Rated: 5 stars based on 1 ratings

Favourited By

xavieri

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
            Bootstrap Glyphicons Cheat Sheet by James Croft