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"> |
ContenidoEl 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 contenidoAncho | 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 elementosElemento 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; |
vertical-alignDisposición del texto respecto a un elemento.
SelectoresElemento 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ágenesInsertar 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 textoImportar 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; |
TextoAlineación del texto | text-align: left | right | center | justify | inherit ; |
EfectosSombra 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);
|
BootstrapAjustar 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="..."> |
Bootstrap GrillasLas "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 TabsTabs | <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 carouselbá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 paginationiconos | <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 manualmenteNos 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 BotonesCrear 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
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets