DIW Cheat Sheet

Vincular

	< link href ="style.css" rel ="stylesheet">
	< link href ="default.css" rel ="stylesheet" title ="Estilo por defecto"> < link href ="lujo.css" rel ="alternate stylesheet" title ="Lujoso"> < link href ="basic9.css" rel ="alternate stylesheet" title ="Basico">

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-collapse: collapse;

Tamaño del contenido

Ancho	width: medida\|porcentaje\|auto\|inherit;
Alto	height: medida\|porcentaje\|auto\|inherit;
auto : se ajusta mediante el navegador;

	padding:
Estilo del borde	`border-style: none\|hidden\|dotted\|dashed\|solid\|double\|groove\|ridge\|inset\|outset\|inherit;`
Ancho del borde	border-width:;
Color del borde	border-color:;
Lados individuales:	border-top-style:; border-bottom-style:;border-left-style:;border-right-style:;

Para centrar elemento horizontal y verticalmente: `margin: 0 auto;`
Color de fondo	background-color
Imagen de fondo	background-image: url\|none\|inherit
=>	url("images/carita.png");
Repetir susodicha imagen	background-repeat: repeat\|repeat-x\|repeat-y\|no-repeat\|inherit
La reacción de la susodicha al scrolling	background-attachment: scroll\|fixed\|inherit;
=>	fixed: imagen se mantiene en el lugar,
La posición de la susodicha en el espacio	background-position: left top\|left center\|left bottom\|right top\|right center\|right bottom\|center top\|center\|bottom [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-top\|margin-bottom\|margin-left\|margin-right
^{Cuando dos margin entran en contacto verticalmente 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-sizing: border-box;

Disposició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\|left\|right\|both\|inherit;
Position	position: static\|relative\|absolute\|fixed\|inherit;
=>	^{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 posicionamiento 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 posicionamiento relativo, absoluto y fijo se deben de indicar las propiedades 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 solapamiento	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:left;\|float: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 posicionamos debajo de las cajas flotanets un <div> vacío, a veces con un clear.

hacer que elementos se comporten como inline, block, o inline-block;	display: inline\|block\|inline-block;

display: flex;
Elección del eje (horizontal o vertical)	flex-direction: row \| row-reverse \| column \| column-reverse;
Más de una línea	flex-wrap:nowrap, wrap, wrap-reverse: Cada elemento se ajusta en una sola línea. wrap: los elementos se envuelven alrededor de líneas adicionales. wrap-reverse: Los elementos se envuelven alrededor de líneas adicionales
Centrar horizontalmente	justify-content: flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly;
Centrar verticalmente	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 contenedor. Cuando hay solo una línea, align-content no tiene efecto.	align-content: flex-start \| flex-end \| center \| space-between \| space-around \| stretch;
Trata al elemento como si no existiese	display: none;
flex-direction y flex-wrap	flex-flow: column wrap;
Para los elementos individuales:
	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: <integer>; / default is 0 /
Alinear elementos individuales	align-self: auto; align-self: flex-start; 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	visibility:hidden;

https://flexboxfroggy.com/#es

justify-content

align-items

align-content:

vertical-align

Disposición del texto respecto a un elemento.

Selectores

Elemento de clase "clase"	<div class=""/> & .clase{}
Todos los <a> de clase .clase	a.clase{}
	a#id{}

Con el atributo (href p.e.)	a[href="a"]
<a> descendiente 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 continuación suya	p~a{}

Link que no ha sido visitado	a:link{}
Link que ha sido visitado	a:visited{}
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-child(n)
Los hijos directos de, no nietos <p>	p:nth-child(1){
Todos los <p> pares	p:nth-child(2n){}
Todos los <p> impares	p:nth-child(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::first-line{}
La primera letra de cada párrafo	::first-letter
ponerle antes del texto	::before
ponerle después del texto	::after
	::selection
A los <p> pares de la clase “especial” hijos directos del <div> con id=”pie”	div #pie > p.especial:nth-child(2n) {}

	/ #pie p:nth-child(1) selecciona el primer hijo p aunque no es #pie, pero su npadre sí -> hereda id/

Imágenes

Insertar imagen	content: url(../imagenes/pingui.png);

Fondos
Imagen de fondo	background-image: url\|none\|inherit
=>	url("images/carita.png");
Repetir susodicha imagen	background-repeat: repeat\|repeat-x\|repeat-y\|no-repeat\|inherit;
La reacción de la susodicha al scrolling	background-attachment: scroll\|fixed\|inherit;
=>	fixed: imagen se mantiene en el lugar
La posición de la susodicha en el espacio	background-position: left top\|left center\|left bottom\|right top\|right center\|right bottom\|center top\|center\|bottom [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	`background-image : url(flores.gif), url(papel.gif) ; background-position : right bottom, left top ; background-repeat : no-repeat, repeat ; background-size : 100px 80px ;`
`La última imagen se posicionará debajo de la anterior`
El tamaño de un fondo	background-size: []\|contain\|cover;
=>	`contain: se ajsuta al tamaño, cover: muestra tamaño real de la imagen`
background : url(img_flower.jpg) no-repeat center fixed ; background-size : cover ;*
background-origin:	border-box\|padding-box\|content-box;
=>	desde esquina superior izquierda
background-clip:	border-box\|padding-box\|content-box;

List dot	list-style-type: disc \| circle \| square \| decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-latin \| upper-latin \| armenian \| georgian \| lower-alpha \| upper-alpha \| none \| inherit
	list-style-image: url("images/flecha.png");

Fuente y texto

Importar fuentes de Google Fonts	<head><link href="https://fonts.googleapis.com/css?family=Notable\|Noto+Serif+JP" rel="stylesheet"></head>
Usar fuentes descargadas localmente	`@font-face { font-family : Los80; src : url ('fonts/80db.ttf'); body { font-family : Los80; }`
=>	Por cada fuente un @font-face{}

Indicar una fuente	a { font-family: 'Noto Serif JP'; }
" ", si no funciona coge la siguiente	a { font-family: 'Noto Serif JP', Arial; }
" "	font-family: 'Chicle', cursive;
Tamaño de la fuente	font-size: 10px\|2cm\|2mm\|2in\|2pt\|2pc\|2em\|2ex\|2px;
Cambiar el color	color: red\|rgba(167, 240, 122, 0.52)\|#CCCCC;
Cursiva, negrita, itálica	font-style: normal\|italic\|oblique\|initial\|inherit;
Mayúsculas pequeñas	font-variant: normal\|small-caps\|initial\|inherit;
Grosor de fuente	font-weight: normal\|bold\|bolder\|lighter\|number\|initial\|inherit\|100(...);

Sombra de la fuente	text-shadow: 2px 2px 0px rgba(237, 150, 150, 1);
Espacio entre líneas	line-height: 40px\|1.6\|0.5cm\|10%;
Subrayado de texto	text-decoration: none\|underline\|overline\|line-through\|blink;
Overline no es eclusivo de underline...
Transformar a may., min., o capitalize	text-transform : capitalize \| uppercase \| lowercase \| none \| inherit;
Sangrado/ tabulación del texto en primera línea	text-indent : 20px;
Espaciado entre letras	letter-spacing : .2em;
Esoaciado entre palabras	word-spacing : .5em;

Texto

Alineación del texto

text-align: left | right | center | justify | inherit ;

Efectos

Sombra en caja	box-shadow: 3px 3px 4px 0px rgba( 255, 87, 51, 0.75);
Bordes redondeados	`border-top-left-radius: 42px; border-top-right-radius: 26px; border-bottom-right-radius: 90px; border-bottom-left-radius: 67px;`
	`-webkit-border-radius: 42px; -moz-border-radius: 42px; border-radius: 42px;`
Fondo gradiente	`background: rgb(255, 87, 51); background: -moz-linear-gradient(55deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%); background: -webkit-linear-gradient(55deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%); background: -o-linear-gradient(55deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%); background: -ms-linear-gradient(55deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%); background: linear-gradient(145deg, rgb(255, 87, 51) 0%, rgb(144, 12, 63) 100%);`
	background: linear-gradient(to bottom right, #ff8930, #f296ff); background: -prefix-linear-gradient(left top,#593be2, #f296ff);
Botones	color: rgb(255, 255, 255); font-size: 18px; padding: 20px; text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.8); -webkit-border-radius: 90px; -moz-border-radius: 90px; border-radius: 90px; background: rgb(142, 110, 181); background: -moz-linear-gradient(90deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); background: -webkit-linear-gradient(90deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); background: -o-linear-gradient(90deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); background: -ms-linear-gradient(90deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); background: linear-gradient(0deg, rgb(142, 110, 181) 30%, rgb(142, 131, 234) 70%); -webkit-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.75); box-shadow: 0px 2px 1px rgba(50, 50, 50, 0.75);

Distribución flexbox

Bootstrap

Ajustar el ancho del área de usuario al ancho del dispositivo	<meta name="viewport" content="width=device-width, initial-scale=1.0">
Vincular a plantillas online	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
Vincular a plantillas localmente (css)	<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
Vincular otros para funcionamiento	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
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-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="button" class="btn btn-outline-primary">Primary</button>
Tamaño de botón	<button type="button" class="btn btn-primary btn-lg">Large button</button>
	<button type="button" class="btn btn-primary btn-sm">Small button</button>
Botones que ocupan el ancho del padre	<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
Botones que asemejan estar pulsados	<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Link</a>
Botones que asemejan ser inactivos	<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
Botones inactivos con <a>	<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a> <a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
Botones activados	<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off"> Activado </button>
Listas
	<ul class="list-group">
	<li class="list-group-item">Cras justo odio</li>
Estlo activo o disabled	<li class="list-group-item active">Cras justo odio</li> <li class="list-group-item disabled">Dapibus ac facilisis in</li>
Lista con <a>	<div class="list-group"> <a href="#" class="list-group-item list-group-item-action active">
Lista con <button>	<div class="list-group"> <button type="button" class="list-group-item list-group-item-action active"> Cras justo odio </button>
Listas sin esquinas o bordes	<ul class="list-group list-group-flush"> <li class="list-group-item">Cras justo odio</li>
Listas con colores de clases contetxuales	<li class="list-group-item list-group-item-primary">This is a primary list group item</li
Listas con colores de clases contextuales activas	<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a>
Listas con badges o contadores de actividad	<ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio <span class="badge badge-primary badge-pill">14</span> </li>
Contenido HTML dentro de una lista	<div class="list-group"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a>
List-tabs	<div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a> <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a> <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a> <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a> </div> </div> <div class="col-8"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div> <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div> <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div> <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div> </div> </div> </div>
flex
Usar display: flex; se usan en el elemento padre	<div class="d-flex p-2">I'm a flexbox container!</div>
	.flex-row
	.flex-row-reverse
	.flex-column
	d-flex justify-content-start, d-flex justify-content-end, d-flex justify-content-center, d-flex justify-content-between, d-flex justify-content-around
	d-flex align-items-start, d-flex align-items-end, d-flex align-items-center,d-flex align-items-baseline, d-flex align-items-stretch
	align-self-start,align-self-end, align-self-center, align-self-baseline, align-self-stretch
Llenar hijos de flex	<div class="d-flex bd-highlight"> <div class="p-2 flex-fill bd-highlight">Flex item</div>
grow de hijos de flex	<div class="d-flex bd-highlight"> <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
Imágenes
Imagen tamaño del padre	<img src="..." class="img-fluid" alt="Responsive image">
Hacer thumbnails	<img src="..." alt="..." class="img-thumbnail">
Imagen redondeada	<img src="..." class="rounded
Centrar imágenes, alinearlas	<img src="img2.png" class="rounded float-left" alt="..."> <img src="img2.png" class="rounded float-right" alt="..."> <img src="img2.png" class="rounded mx-auto d-block" alt="..."> <div class="text-center"> <img src="img2.png" class="rounded" alt="...">

https://getbootstrap.com/docs/4.0/utilities/flex/ https://getbootstrap.com/docs/4.0/utilities/spacing/

Bootstrap Grillas

Las "filas" 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 seleccionado, si está en línea con otro elemento tienen que sumar 12
Para un tamaño para todos los display, especificamos 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	<nav>
	<div class="nav nav-tabs" id="nav-tab" role="tablist">
	<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Pestaña activa</a>
	<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Una imagen</a>
	<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
	</div> </nav>
Contenido de las tabs	<div class="tab-content" id="nav-tabContent">
	<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"></div>
	<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
	<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>

Bootstrap tablas

	<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td>Larry</td> <td>the Bird</td> <td>@twitter</td> </tr> </tbody> </table>
	<table class="table table-dark">
	<thead class="thead-dark">
	<thead class="thead-light">
	<table class="table table-striped">
	<table class="table table-striped table-dark">
	<table class="table table-bordered">
	<table class="table table-bordered table-dark">
	<table class="table table-hover">
	<table class="table table-hover table-dark">
	<table class="table table-sm">
	<table class="table table-sm table-dark">
	<tr class="table-active">...</tr> <tr class="table-primary">...</tr> <td class="table-active">...</td>
	<tr class="bg-primary">...</tr> <td class="bg-primary">...</td>
	<table class="table"> <caption>List of users</caption> <thead>

Bootstrap Listas

<ul class="list-group">, <li class="list-group-item">	<ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>
	<li class="list-group-item active">Cras justo odio</li>
	<li class="list-group-item disabled">Cras justo odio</li>
actionable, no soporta disabled	<div class="list-group"> <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a> <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a> <a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a> </div>
actionable	<div class="list-group"> <button type="button" class="list-group-item list-group-item-action active"> Cras justo odio </button> <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button> <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button> <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button> <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button> </div>
no borders	<ul class="list-group list-group-flush">
Contextual classes	<li class="list-group-item list-group-item-primary">This is a primary list group item</li> <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
Contextual classes	<a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a> <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
badge	<ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> Cras justo odio <span class="badge badge-primary badge-pill">14</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Dapibus ac facilisis in <span class="badge badge-primary badge-pill">2</span> </li> <li class="list-group-item d-flex justify-content-between align-items-center"> Morbi leo risus <span class="badge badge-primary badge-pill">1</span> </li> </ul>
contenido	div class="list-group"> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small>3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small>Donec id elit non mi porta.</small> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a> <a href="#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">List group item heading</h5> <small class="text-muted">3 days ago</small> </div> <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> <small class="text-muted">Donec id elit non mi porta.</small> </a> </div>
javascript	<div class="row"> <div class="col-4"> <div class="list-group" id="list-tab" role="tablist"> <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a> <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a> <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a> <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a> </div> </div> <div class="col-8"> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div> <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div> <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div> <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div> </div> </div> </div>
con data-attributes	<!-- List group --> <div class="list-group" id="myList" role="tablist"> <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a> </div>
con data-attributes	<!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="home" role="tabpanel">...</div> <div class="tab-pane" id="profile" role="tabpanel">...</div> <div class="tab-pane" id="messages" role="tabpanel">...</div> <div class="tab-pane" id="settings" role="tabpanel">...</div> </div>
fade	<div class="tab-pane fade" id="profile" role="tabpanel">...</div>

Bootstrap carousel

básico	<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> </div>
control	div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
indicadores	<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src="..." alt="First slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Second slide"> </div> <div class="carousel-item"> <img class="d-block w-100" src="..." alt="Third slide"> </div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
captions	<div class="carousel-item"> <img src="..." alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>...</h5> <p>...</p> </div> </div>

Bootstrap modal

	<!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button>
	<!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>
	<div class="modal-dialog modal-dialog-centered" role="document">
smol and large	<!-- Large modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button> <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ... </div> </div> </div> <!-- Small modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button> <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> ... </div> </div> </div>

Bootstrap pagination

iconos	<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"> <a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span> <span class="sr-only">Previous</span> </a> </li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"> <a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span> <span class="sr-only">Next</span> </a> </li> </ul> </nav>
	<li class="page-item disabled">
	<li class="page-item active">
	<nav aria-label="..."> <ul class="pagination"> <li class="page-item disabled"> <span class="page-link">Previous</span> </li>
grande	<nav aria-label="..."> <ul class="pagination pagination-lg"> <li class="page-item disabled">
pequeño	<nav aria-label="..."> <ul class="pagination pagination-sm"> <li class="page-item disabled">
alineado	<nav aria-label="Page navigation example"> <ul class="pagination justify-content-center">
	<nav aria-label="Page navigation example"> <ul class="pagination justify-content-end">

Modificar ancho manualmente

Nos permite fijar manualmente el tamaño, que se atañe a las características que le pongamos dentro	@media (min-width: tamaño-pixels) {
Cuando la pantalla sea 700px o menos, hace x	@media (max-width: 700px){}
Controlar elementos según ancho	/Para contorlar la altura de los elementos/ @media (max-width: 800px){ #menu{ height: 50px; } #contenido{ height: 630px; margin-top: 30px; } a{} }

Bootstrap Botones

Crear botones

<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-light">Light</button> <button type="button" class="btn btn-dark">Dark</button>

<a class="btn btn-primary" href="#" role="button">Link</a> <button class="btn btn-primary" type="submit">Button</button> <input class="btn btn-primary" type="button" value="Input"> <input class="btn btn-primary" type="submit" value="Submit"> <input class="btn btn-primary" type="reset" value="Reset">

Created By

lasago

Metadata

Languages: español (Spanish)

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

Favourited By

Comments

No comments yet. Add yours below!

Add a Comment

Related Cheat Sheets

CSS2 Cheat Sheet

CSS UNITS CHEATSHEET Keyboard Shortcuts

Five ways to center DIV element in CSS Cheat Sheet

DIW Cheat Sheet by lasago

Vincular

Contenido

Tamaño del contenido

Disposición de elementos

justify-content

align-items

align-content:

vertical-align

Selectores

Imágenes

Fuente y texto

Texto

Efectos

Distribución flexbox

Bootstrap

Bootstrap Grillas

Bootstrap Nav Tabs

Bootstrap tablas

Bootstrap Listas

Bootstrap carousel

Bootstrap modal

Bootstrap pagination

Modificar ancho manualmente

Bootstrap Botones

Created By

Metadata

Favourited By

Comments

Add a Comment

Related Cheat Sheets

Latest Cheat Sheet

Random Cheat Sheet

About Cheatography

Behind the Scenes

Recent Cheat Sheet Activity

Please Disable Your Ad Blocker

DIW Cheat Sheet by lasago

Vincular

Contenido

Tamaño del contenido

Dispos­ición de elementos

justif­y-c­ontent

align-­items

align-­con­tent:

vertic­al-­align

Selectores

Imágenes

Fuente y texto

Texto

Efectos

Distri­bución flexbox

Bootstrap

Bootstrap Grillas

Bootstrap Nav Tabs

Bootstrap tablas

Bootstrap Listas

Bootstrap carousel

Bootstrap modal

Bootstrap pagination

Modificar ancho manual­mente

Bootstrap Botones

Created By

Metadata

Favourited By

Comments

Add a Comment

Related Cheat Sheets

Latest Cheat Sheet

Random Cheat Sheet

About Cheatography

Behind the Scenes

Recent Cheat Sheet Activity

Please Disable Your Ad Blocker

Disposición de elementos

justify-content

align-items

align-content:

vertical-align

Distribución flexbox

Modificar ancho manualmente