Boot

Bootstrap 4
Contenedores (Containers)
Bootstrap viene con tres contenedores diferentes:
.container, que establece un max-width en cada punto de interrupción de respuesta
.container-fluid, que está width: 100% en todos los puntos de interrupción
.container-{breakpoint}, que es width: 100% hasta el punto de interrupción especificado
Contenedores responsivos
Los contenedores receptivos son nuevos en Bootstrap v4.4. Le permiten especificar una
clase que tiene un ancho del 100% hasta que se alcanza el punto de interrupción
especificado, después de lo cual aplicamos max-width para cada uno de los puntos de
interrupción más altos. Por ejemplo, .container-sm es 100% de ancho para iniciar hasta que
el sm se alcanza punto de interrupción, donde se ampliará con md, lg y xl.
<div class="container-sm">100% wide until small breakpoint</div>

<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
Sistema de columnas (Grid System)

El sistema de cuadrícula de Bootstrap utiliza una serie de contenedores, filas y columnas
para diseñar y alinear el contenido. Está construido con flexbox y es totalmente receptivo.
así es como funciona:
 Los contenedores proporcionan un medio para centrar y rellenar horizontalmente el

contenido de su sitio. Úselo .containerpara un ancho de píxel receptivo o .container-
fluidpara width: 100%todos los tamaños de vista y dispositivo.
 Las filas son envoltorios de columnas. Cada columna tiene una
horizontal padding(llamada canalón) para controlar el espacio entre
ellas. Esto paddingluego se contrarresta en las filas con márgenes negativos. De esta
manera, todo el contenido de sus columnas se alinea visualmente en el lado
izquierdo.
 En un diseño de cuadrícula, el contenido debe colocarse dentro de las columnas y
solo las columnas pueden ser hijos inmediatos de las filas.
 Gracias a flexbox, las columnas de la cuadrícula sin una especificación widthse
distribuirán automáticamente como columnas de igual ancho. Por ejemplo, cuatro
instancias de .col-smcada una tendrá automáticamente un 25% de ancho desde el
punto de interrupción pequeño y hacia arriba. Consulte la sección de columnas de
diseño automático para obtener más ejemplos.
 Las clases de columna indican la cantidad de columnas que le gustaría usar de las
12 posibles por fila. Entonces, si desea tres columnas de igual ancho, puede
usar .col-4.
 Las columnas widthse establecen en porcentajes, por lo que siempre son fluidas y
tienen un tamaño relativo a su elemento principal.
 Las columnas tienen horizontales paddingpara crear los medianiles entre columnas
individuales, sin embargo, puede eliminar de las marginfilas y paddingde las
columnas con .no-guttersen .row.
 Para que la cuadrícula responda, hay cinco puntos de interrupción de la cuadrícula,
uno para cada punto de interrupción de respuesta : todos los puntos de interrupción
(extra pequeños), pequeños, medianos, grandes y extra grandes.
 Los puntos de interrupción de la cuadrícula se basan en consultas de medios de
ancho mínimo, lo que significa que se aplican a ese punto de interrupción y a todos
los que están por encima de él (por ejemplo, se .col-sm-4aplica a dispositivos
pequeños, medianos, grandes y extragrandes, pero no al primer xspunto de
interrupción).
 Puede usar clases de cuadrícula predefinidas (como .col-4) o mixins de Sass para un
marcado más semántico.
Tipografía
Encabezados
Todos los encabezados HTML, <h1>hasta <h6>, están disponibles.
<h1>h1. Bootstrap heading</h1>

Elementos de texto en línea

Diseño de elementos HTML5 en línea comunes.
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the
document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
Tamaños de fuente receptivos

A partir de la v4.3.0, Bootstrap se envía con la opción de habilitar tamaños de fuente
receptivos, lo que permite que el texto se escale de manera más natural en todos los
tamaños de dispositivos y ventanas gráficas. RFS se puede habilitar cambiando la $enable-
responsive-font-sizesvariable Sass truey volviendo a compilar Bootstrap.
Para soportar RFS , usamos un mixin Sass para reemplazar nuestras font-size

propiedades normales . Los tamaños de fuente receptivos se compilarán en calc() funciones
con una combinación de unidades de ventana gráfica para permitir el comportamiento de
escalamiento receptivo.
Imágenes
Imágenes receptivas
Las imágenes en Bootstrap responden con .img-fluid. max-width: 100%;y height: auto;se aplican
a la imagen para que se adapte al elemento principal.
<img src="..." class="img-fluid" alt="Responsive image">

Miniaturas de imágenes
Además de nuestras utilidades de radio de borde , puede utilizar .img-thumbnailpara dar a
una imagen una apariencia de borde redondeado de 1 px.
<img src="..." alt="..." class="img-thumbnail">
Alinear imágenes
Alinee las imágenes con las clases flotantes auxiliares o las clases de alineación de
texto . blockLas imágenes de nivel se pueden centrar utilizando la .mx-autoclase de utilidad
margin .
<img src="..." class="rounded float-left" alt="...">

<img src="..." class="rounded float-right" alt="...">
<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>
Fotografía
Si está utilizando el <picture>elemento para especificar varios <source>elementos para un
específico <img>, asegúrese de agregar las .img-*clases <img>a la <picture>etiqueta y no a
la etiqueta.
<picture>
<source srcset="..." type="image/svg+xml">
<img src="..." class="img-fluid img-thumbnail" alt="...">
</picture>
Tablas
Opciones de cabecera de Tabla

De manera similar a las tablas y las tablas oscuras, use las clases modificadoras .thead-lighto .thead-
darkpara hacer que los <thead>mensajes aparezcan en gris claro u oscuro.
Filas de rayas
Úselo .table-striped para agregar rayas de cebra a cualquier fila de la tabla dentro del <tbody>.
Tabla bordeada
Agregue .table-bordered para bordes en todos los lados de la tabla y las celdas.
Tabla sin bordes

Agregue .table-borderless para una mesa sin bordes.
Filas flotantes
Agregar .table-hover para habilitar un estado de desplazamiento en las filas de la tabla dentro
de un <tbody>.
Tabla pequeña
Agregue .table-sm para hacer las mesas más compactas cortando el acolchado de las celdas a
la mitad.
Tablas receptivas
Las tablas receptivas permiten que las tablas se desplacen horizontalmente con
facilidad. Haga que cualquier tabla responda en todas las ventanas gráficas ajustando
un .tablecon .table-responsive. O elija un punto de interrupción máximo con el que tener una
tabla receptiva utilizando .table-responsive{-sm|-md|-lg|-xl}.
Alertas
Proporcione mensajes de retroalimentación contextual para

las acciones típicas de los usuarios con un puñado de
mensajes de alerta disponibles y flexibles.
Las alertas están disponibles para cualquier longitud de texto, así como un botón de descarte
opcional. Para un estilo adecuado, use una de las ocho clases contextuales requeridas (p .alert-
success)
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
Color de enlace
Utilice la .alert-linkclase de utilidad para proporcionar rápidamente enlaces de colores
coincidentes dentro de cualquier alerta.
Métodos
$('.alert').alert('close')
Eventos
El complemento de alerta de Bootstrap expone algunos eventos para conectarse a la
funcionalidad de alerta.
Grupo de botones
Envuelva una serie de botones con .btnin .btn-group. Agregue el comportamiento de estilo de casilla
de verificación y radio de JavaScript opcional
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-secondary">Left</button>
<button type="button" class="btn btn-secondary">Middle</button>
<button type="button" class="btn btn-secondary">Right</button>
</div>
Dimensionamiento
En lugar de aplicar clases de tamaño de botón a cada botón de un grupo, simplemente
agréguelo .btn-group-*a cada uno .btn-group, incluido cada uno al anidar varios grupos.
Anidamiento
Coloque un .btn-group dentro de otro .btn-group cuando desee que los menús desplegables se
mezclen con una serie de botones.
<div class="btn-group" role="group" aria-label="Button group with nested

dropdown">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">

<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-
toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>
Variación vertical
Haga que un conjunto de botones aparezca apilado verticalmente en lugar de
horizontalmente. Aquí no se admiten los menús desplegables de botones divididos.
<div class="btn-group-vertical">
...
</div>
Tarjetas (Card, Badge)

Una tarjeta es un contenedor de contenido flexible y extensible. Incluye opciones para
encabezados y pies de página, una amplia variedad de contenido, colores de fondo
contextuales y potentes opciones de visualización. Si está familiarizado con Bootstrap 3, las
tarjetas reemplazan nuestros viejos paneles, pozos y miniaturas. Funcionalidad similar a
esos componentes está disponible como clases modificadoras para tarjetas.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and
make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Títulos, texto y enlaces

Los títulos de las cartas se utilizan añadiendo .card-titlea una <h*>etiqueta. De la misma
manera, los enlaces se agregan y se colocan uno al lado del otro agregando .card-linka
una <a>etiqueta.
Los subtítulos se usan agregando un .card-subtitlea una <h*>etiqueta. Si los elementos .card-

titley los .card-subtitle elementos se colocan en un .card-body elemento, el título y el subtítulo
de la tarjeta están bien alineados.

<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Imagenes
.card-img-topcoloca una imagen en la parte superior de la tarjeta. Con .card-text, se puede
agregar texto a la tarjeta. El texto que contiene .card-texttambién se puede diseñar con las
etiquetas HTML estándar.
Fregadero
Mezcle y combine varios tipos de contenido para crear la tarjeta que necesita, o coloque
todo allí. A continuación se muestran los estilos de imagen, bloques, estilos de texto y un
grupo de lista, todo envuelto en una tarjeta de ancho fijo.

</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Encabezado y pié de página
Agregue un encabezado y / o pie de página opcional dentro de una tarjeta.
<div class="card">
<div class="card-header">
Featured
</div>
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to
additional content.</p>
</div>
</div>
Dimensionamiento
Las tarjetas asumen que no son específicas widthpara comenzar, por lo que serán 100%
anchas a menos que se indique lo contrario. Puede cambiar esto según sea necesario con
CSS personalizado, clases de cuadrícula, mixins de cuadrícula Sass o utilidades.
Usar marcado de cuadrícula

Usando la cuadrícula, envuelva las tarjetas en columnas y filas según sea necesario.
<div class="row">
<div class="col-sm-6">
<div class="card">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
</div>
</div>
</div>
</div>
Imagenes
Las tarjetas incluyen algunas opciones para trabajar con imágenes. Elija entre agregar
"tapas de imagen" en cualquier extremo de una tarjeta, superponer imágenes con el
contenido de la tarjeta o simplemente incrustar la imagen en una tarjeta.
Gorras de imagen
De manera similar a los encabezados y pies de página, las tarjetas pueden incluir "tapas de
imagen" en la parte superior e inferior, es decir, imágenes en la parte superior o inferior de
una tarjeta.
<div class="card mb-3">

<p class="card-text">This is a wider card with supporting text below as a
natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins
ago</small></p>
</div>
</div>
Horizontal
Utilizando una combinación de clases de red y de servicios públicos, las tarjetas se pueden
hacer horizontales de una manera compatible con dispositivos móviles y con capacidad de
respuesta. En el siguiente ejemplo, eliminamos las canaletas de la cuadrícula .no-guttersy
usamos .col-md-*clases para hacer que la tarjeta sea horizontal en el md punto de
interrupción. Es posible que se necesiten más ajustes según el contenido de su tarjeta.
<div class="card mb-3" style="max-width: 540px;">

<div class="row no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" alt="...">
</div>
<div class="col-md-8">
<p class="card-text">This is a wider card with supporting text below as
a natural lead-in to additional content. This content is a little bit
longer.</p>
ago</small></p>
</div>
</div>
</div>
</div>
Fondo y color
Utilice las utilidades de texto y fondo para cambiar la apariencia de una tarjeta.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">

<div class="card-header">Header</div>
<h5 class="card-title">Primary card title</h5>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<h5 class="card-title">Secondary card title</h5>
</div>
Frontera
Use las utilidades de borde para cambiar solo el border-color de una tarjeta. Tenga en cuenta
que puede poner .text-{color}clases en el padre .cardo en un subconjunto del contenido de la
tarjeta como se muestra a continuación.
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
</div>
Grupos de cartas
Utilice grupos de tarjetas para representar tarjetas como un solo elemento adjunto con
columnas de igual ancho y alto. Los grupos de cartas comienzan apilados y suelen display:
flex;unirse con dimensiones uniformes a partir del sm punto de interrupción.
<div class="card-group">
<div class="card">
ago</small></p>
</div>
</div>
<div class="card">
<p class="card-text">This card has supporting text below as a natural
lead-in to additional content.</p>
ago</small></p>
</div>
</div>
<div class="card">
natural lead-in to additional content. This card has even longer content than
the first to show that equal height action.</p>
ago</small></p>
</div>
</div>
</div>
Barajas de cartas
¿Necesita un conjunto de tarjetas de igual ancho y alto que no estén unidas entre sí? Usa
barajas de cartas.
<div class="card-deck">
<div class="card">
<p class="card-text">This is a longer card with supporting text below as a
ago</small></p>
</div>
</div>
<div class="card">
ago</small></p>
</div>
</div>
<div class="card">
natural lead-in to additional content. This card has even longer content than
the first to show that equal height action.</p>
ago</small></p>
</div>
</div>
</div>
Tarjetas de cuadrícula
Use el sistema de cuadrícula Bootstrap y sus .row-cols clases para controlar cuántas
columnas de cuadrícula (envueltas alrededor de sus tarjetas) muestra por fila. Por ejemplo,
aquí se .row-cols-1colocan las tarjetas en una columna y se .row-cols-md-2dividen cuatro
tarjetas con el mismo ancho en varias filas, desde el punto medio hacia arriba.
<div class="row row-cols-1 row-cols-md-2">

<div class="col mb-4">
<div class="card">
<p class="card-text">This is a longer card with supporting text below as
longer.</p>
</div>
</div>
</div>
<div class="card">
longer.</p>
</div>
</div>
</div>
<div class="card">
a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="card">
longer.</p>
</div>
</div>
</div>
</div>
Columnas de cartas
Las tarjetas se pueden organizar en columnas similares a las de mampostería con solo CSS
envolviéndolas .card-columns. Las tarjetas están construidas con columnpropiedades CSS en
lugar de flexbox para facilitar la alineación. Las tarjetas se ordenan de arriba a abajo y de
izquierda a derecha.
¡Aviso! Su millaje con columnas de tarjetas puede variar. Para evitar que las tarjetas se
rompan entre las columnas, debemos configurarlas display: inline-blockcomo aún column-
break-inside: avoidno es una solución a prueba de balas.
<div class="card-columns">
<div class="card">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
posuere erat.</p>
<footer class="blockquote-footer text-white">
<small>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<p class="card-text">This card has a regular title and short paragraphy of
text below it.</p>
ago</small></p>
</div>
</div>
<div class="card">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
</small>
</footer>
</blockquote>
</div>
<div class="card">
<p class="card-text">This is another card with title and supporting text
below. This card has some additional content to make it slightly taller
overall.</p>
ago</small></p>
</div>
</div>
</div>
Tarjetas retraibles (Collapse, Dropdowns)

El complemento de colapso de JavaScript se utiliza para mostrar y ocultar contenido. Los botones o
anclajes se utilizan como activadores que se asignan a elementos específicos que alterna. El colapso
de un elemento animará el heightde su valor actual a 0. Dado cómo CSS maneja las animaciones, no
puede usarlas paddingen un .collapseelemento. En su lugar, use la clase como un elemento de
envoltura independiente.
Múltiples objetivos
A <button>o <a>puede mostrar y ocultar varios elementos haciendo referencia a ellos con un
selector de JQuery en su atributo hrefo data-target. Múltiple <button>o <a>puede mostrar y
ocultar un elemento si cada uno hace referencia a él con su atributo hrefodata-target
<p>
<a class="btn btn-primary" data-toggle="collapse"
href="#multiCollapseExample1" role="button" aria-expanded="false" aria-
controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-
target="#multiCollapseExample2" aria-expanded="false" aria-
controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-
target=".multi-collapse" aria-expanded="false" aria-
controls="multiCollapseExample1 multiCollapseExample2">Toggle both
elements</button>
</p>
<div class="row">
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
anderson cred nesciunt sapiente ea proident.
</div>
</div>
</div>
</div>
Ejemplo de acordeón
Con el componente de tarjeta , puede ampliar el comportamiento de contracción
predeterminado para crear un acordeón. Para lograr correctamente el estilo de acordeón,
asegúrese de usarlo .accordion como envoltorio.
<div class="accordion" id="accordionExample">

<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-
toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-
controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"

data-parent="#accordionExample">
terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard
dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-
controls="collapseTwo">
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-
parent="#accordionExample">
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button"
data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-
controls="collapseThree">
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree"
data-parent="#accordionExample">
</div>
</div>
</div>
</div>
A través de atributos de datos
Simplemente agregue data-toggle="collapse"y data-target a al elemento para asignar
automáticamente el control de uno o más elementos plegables. El data-target atributo acepta
un selector de CSS para aplicar la contracción. Asegúrese de agregar la clase collapseal
elemento contraíble. Si desea que se abra de forma predeterminada, agregue la clase
adicional show.
Para agregar una gestión de grupo similar a un acordeón a un área plegable, agregue el
atributo de datos data-parent="#selector". Consulte la demostración para ver esto en acción.
Opciones
Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos
de datos, agregue el nombre de la opción a data-, como en data-parent="".
Métodos
.collapse(options)
Activa su contenido como un elemento plegable. Acepta opciones opcionales object.
.collapse('toggle')
Alterna un elemento plegable a mostrado u oculto. Vuelve a la persona que llama antes
de que el elemento plegable se haya mostrado u ocultado (es decir, antes de que ocurra
el evento shown.bs.collapseo hidden.bs.collapse).
.collapse('show')
Muestra un elemento plegable. Vuelve a la persona que llama antes de que se haya
mostrado realmente el elemento plegable (es decir, antes de shown.bs.collapseque
ocurra el evento).
.collapse('hide')
Oculta un elemento plegable. Vuelve a la persona que llama antes de que el elemento
plegable se haya ocultado (es decir, antes de hidden.bs.collapseque ocurra el evento).
.collapse('dispose')
Destruye el colapso de un elemento.
Eventos
La clase de colapso de Bootstrap expone algunos eventos para engancharse a la
funcionalidad de colapso.
Jumbotron
Un componente ligero y flexible que opcionalmente puede ampliar toda la ventana gráfica para
mostrar mensajes de marketing clave en su sitio.
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component
for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out
within the larger container.</p>
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
Para hacer el jumbotron de ancho completo y sin esquinas redondeadas, agregue la .jumbotron-fluid
clase de modificador y agregue un .container o .container-fluid dentro.
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire
horizontal space of its parent.</p>
</div>
</div>
Barras de navegación (Nav bars)
Cómo funciona
Esto es lo que necesita saber antes de comenzar con la barra de navegación:
 Las barras de navegación requieren un ajuste .navbar con .navbar-expand{-sm|-md|-lg|-xl}

para las clases de combinación de colores y colapso receptivo .
 Las barras de navegación y su contenido son fluidos por defecto. Utilice contenedores
opcionales para limitar su ancho horizontal.
 Utilice nuestras clases de utilidad de espaciado y flexibilidad para controlar el espaciado y
la alineación dentro de las barras de navegación.
 Las barras de navegación responden de forma predeterminada, pero puede modificarlas
fácilmente para cambiar eso. El comportamiento receptivo depende de nuestro
complemento Collapse JavaScript.
 Las barras de navegación están ocultas de forma predeterminada al imprimir. Oblígalos a
imprimir agregando .d-print al archivo .navbar. Consulte la clase de utilidad
de visualización .
 Garantice la accesibilidad mediante el uso de un <nav> elemento o, si usa un elemento más
genérico como a <div>, agregue a role="navigation" a cada barra de navegación para
identificarla explícitamente como una región histórica para los usuarios de tecnologías de
asistencia.
Contenido admitido
Las barras de navegación vienen con soporte incorporado para un puñado de
subcomponentes. Elija entre lo siguiente según sea necesario:
 .navbar-brand para el nombre de su empresa, producto o proyecto.

 .navbar-nav para una navegación ligera y de altura completa (incluida la compatibilidad con
menús desplegables).
 .navbar-togglerpara usar con nuestro complemento de colapso y otros comportamientos
de alternancia de navegación .
 .form-inline para cualquier formulario, controles y acciones.
 .navbar-text para agregar cadenas de texto centradas verticalmente.
 .collapse.navbar-collapse para agrupar y ocultar el contenido de la barra de navegación por
un punto de interrupción principal.
Aquí hay un ejemplo de todos los subcomponentes incluidos en una barra de navegación
con tema de luz sensible que se colapsa automáticamente en el lg punto de interrupción
(grande).
<nav class="navbar navbar-expand-lg navbar-light bg-light">

<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-
only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-
disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</div>
</nav>
Formularios
Coloque varios controles y componentes de formulario dentro de una barra de
navegación con .form-inline.
<nav class="navbar navbar-light bg-light">

<form class="form-inline">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-
label="Search">
<button class="btn btn-outline-success my-2 my-sm-0"
type="submit">Search</button>
</form>
</nav>
Texto
Las barras de navegación pueden contener fragmentos de texto con la ayuda
de .navbar-text. Esta clase ajusta la alineación vertical y el espaciado horizontal de
cadenas de texto.
<nav class="navbar navbar-light bg-light">

<span class="navbar-text">
Navbar text with an inline element
</span>
</nav>
Esquemas de color
Crear temas en la barra de navegación nunca ha sido tan fácil gracias a la combinación de
clases de temas y background-colorutilidades. Elija entre .navbar-lightpara usar con colores de
fondo claros o .navbar-darkpara colores de fondo oscuros. Luego, personalícelo con .bg-
*utilidades.
<nav class="navbar navbar-dark bg-dark">


</nav>
<nav class="navbar navbar-dark bg-primary">

</nav>
<nav class="navbar navbar-light" style="background-color: #e3f2fd;">

</nav>
Contenido externo
A veces, desea utilizar el complemento para contraer para activar contenido oculto en otra
parte de la página. Debido a que nuestro complemento funciona en idy data-targetcoincide,
¡eso es fácil de hacer!
<div class="fixed-top">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarToggleExternalContent" aria-
controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
Notificaciones (Toasts)
Para fomentar los brindis extensibles y predecibles, recomendamos un encabezado y un
cuerpo. Se utilizan encabezados de tostadas display: flex, lo que permite alinear fácilmente el
contenido gracias a nuestras utilidades de margen y flexbox.
Los brindis son tan flexibles como necesita y tienen muy poco marcado requerido. Como
mínimo, requerimos un solo elemento para contener su contenido "tostado" y
recomendamos encarecidamente un botón para descartar.
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">

<div class="toast-header">
<img src="..." class="rounded mr-2" alt="...">
<strong class="mr-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
Apilado
Cuando tienes varios brindis, por defecto los apilamos verticalmente de manera legible.
<small class="text-muted">just now</small>
label="Close">
</button>
</div>
See? Just like this.
</div>
</div>

<small class="text-muted">2 seconds ago</small>
label="Close">
</button>
</div>
Heads up, toasts will stack automatically
</div>
</div>
Opciones
Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos
de datos, agregue el nombre de la opción a data-, como en data-animation="".
Métodos
$().toast(options)
Adjunta un controlador de tostadas a una colección de elementos.
.toast('show')
Revela el brindis de un elemento. Vuelve a la persona que llama antes de que se haya
mostrado realmente el brindis (es decir, antes de shown.bs.toastque ocurra el evento). Debe
llamar manualmente a este método, en su lugar, su brindis no se mostrará.
.toast('hide')
Oculta el brindis de un elemento. Vuelve a la persona que llama antes de que el brindis
se haya ocultado realmente (es decir, antes de hidden.bs.toastque ocurra el evento). Tienes
que llamar a este método de forma manual si ha realizado autohidea false.
.toast('dispose')
Oculta el brindis de un elemento. Su brindis permanecerá en el DOM pero ya no se
mostrará.
Eventos
Carrusel (Carousel)
El carrusel es una presentación de diapositivas para recorrer una serie de contenido,
construido con transformaciones CSS 3D y un poco de JavaScript. Funciona con una serie
de imágenes, texto o marcado personalizado. También incluye soporte para controles e
indicadores anteriores / siguientes.
En los navegadores en los que se admite la API de visibilidad de la página , el carrusel

evitará que se deslice cuando la página web no sea visible para el usuario (como cuando la
pestaña del navegador está inactiva, la ventana del navegador está minimizada, etc.).
Solo diapositivas
Aquí hay un carrusel con solo diapositivas. Tenga en cuenta la presencia de .d-blocky .w-
100en las imágenes del carrusel para evitar la alineación de la imagen predeterminada del
navegador.
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">

<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
</div>
</div>
</div>
</div>
Con controles
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
</div>
</div>
</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>
Con indicadores
También puede agregar los indicadores al carrusel, junto con los controles.
<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>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators"
role="button" data-slide="prev">
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators"
role="button" data-slide="next">
</a>
</div>
Con subtítulos
Agregue títulos a sus diapositivas fácilmente con el .carousel-caption elemento dentro de
cualquiera .carousel-item. Se pueden ocultar fácilmente en ventanas gráficas más pequeñas,
como se muestra a continuación, con utilidades de visualización opcionales . Los ocultamos
inicialmente con .d-noney los traemos de vuelta en dispositivos de tamaño mediano con .d-
md-block.
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"
data-slide="prev">
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button"
data-slide="next">
</a>
</div>

Boot

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Boot

Cargado por

Copyright:

Formatos disponibles

Bootstrap 4

.container, que establece un max-width en cada punto de interrupción de respuesta

.container-fluid, que está width: 100% en todos los puntos de interrupción

.container-{breakpoint}, que es width: 100% hasta el punto de interrupción especificado

<div class="container-sm">100% wide until small breakpoint</div>

Sistema de columnas (Grid System)

 Los contenedores proporcionan un medio para centrar y rellenar horizontalmente el

<h1>h1. Bootstrap heading</h1>

Elementos de texto en línea

Tamaños de fuente receptivos

Para soportar RFS , usamos un mixin Sass para reemplazar nuestras font-size

<img src="..." class="img-fluid" alt="Responsive image">

<img src="..." alt="..." class="img-thumbnail">

<img src="..." class="rounded float-left" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

Opciones de cabecera de Tabla

Tabla sin bordes

Proporcione mensajes de retroalimentación contextual para

<div class="btn-group" role="group" aria-label="Button group with nested

<div class="btn-group" role="group">

Tarjetas (Card, Badge)

Títulos, texto y enlaces

Los subtítulos se usan agregando un .card-subtitlea una <h*>etiqueta. Si los elementos .card-

<div class="card" style="width: 18rem;">

<div class="card" style="width: 18rem;">

Usar marcado de cuadrícula

<div class="card mb-3">

<div class="card mb-3" style="max-width: 540px;">

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">

<div class="row row-cols-1 row-cols-md-2">

Tarjetas retraibles (Collapse, Dropdowns)

<div class="accordion" id="accordionExample">

<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"

Barras de navegación (Nav bars)

 Las barras de navegación requieren un ajuste .navbar con .navbar-expand{-sm|-md|-lg|-xl}

 .navbar-brand para el nombre de su empresa, producto o proyecto.

<nav class="navbar navbar-expand-lg navbar-light bg-light">

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<nav class="navbar navbar-light bg-light">

<nav class="navbar navbar-light bg-light">

<nav class="navbar navbar-dark bg-dark">

<nav class="navbar navbar-dark bg-primary">

<nav class="navbar navbar-light" style="background-color: #e3f2fd;">

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">

En los navegadores en los que se admite la API de visibilidad de la página , el carrusel

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">

También podría gustarte