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
 
border­-style: 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­nherit;
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("im­age­s/c­ari­ta.p­ng­");
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;
=>
relativo: 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­­mag­­es­/­c­ar­­ita.pn­­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;
  
-webki­t-b­ord­er-­radius: 42px; 	-moz-b­ord­er-­radius: 42px; 	border­-ra­dius: 42px;
Fondo gradiente
 
backgr­ound: 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ágenes
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 elementos/ @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">
 

Metadata

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

Favourited By

charaf ess 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
          Five ways to center DIV element in CSS Cheat Sheet