|
< 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">
|
|
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;
|
|
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;
|
|
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;
|
|
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/
|
|
|
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");
|
|
|
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;
|
|
Alineación del texto
|
text-align: left | right | center | justify | inherit ;
|
|
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); |
|
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="...">
|
|
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
|
|
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>
|
<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>
|
|
<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>
|
|
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>
|
|
<!-- 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>
|
|
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">
|
|
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{} }
|
|
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">
|
No comments yet.
Cheatography n. The art of mapping complex subjects into clear, instantly navigable reference guides.
