Es un framework CSS gratuito para desarrollar pagina web rapido y de manera sencilla. Ademas se ajusta a cualquier navegador, telefono, tabletas, etc. Incluye clases predeterminadas para hacer: botones, menus, formularios, carrusel de imagenes, etc.
Piensa en Bootstrap como un conjunto de piezas de Lego estéticas y responsivas que se adaptan automáticamente a pantallas del dispositivo mediante un sistema de Grid (Cuadrícula) de 12 columnas.
<!-- CSS Bootstrap --> <link rel=StyleSheet href='bootstrap.min.css'> <!-- Libreria jQuery --> <script src='jquery.min.js'></script> <!-- Libreria Popper --> <script src='popper.min.js'></script> <!-- Libreria Bootstrap --> <script src='bootstrap.min.js'></script>
Para un dimensionamiento más sencillo en CSS, cambiamos el box-sizing valor global de content-box a border-box. Esto garantiza padding que no afecte al ancho calculado final de un elemento. Si necesita anular Bootstrap para alna clase solo use:
Nuestra bootstrap.bundle.min.js incluye Popper, pero no jQuery.
Incluya <meta name=viewport content='width=device-width, initial-scale=1, shrink-to-fit=no'> para un mejor funcionamiento.
.alguna_clase {
box-sizing: content-box;
}
Bootstrap incluye 9 estilos de botones predefinidos, cada uno con su propio propósito semántico, además de algunos extras para un mayor control.
Las clases btn están diseñadas para usarse con la etiqueta <button>. Sin embargo, también pueden usar estas clases en elementos <a> o <input> añadiendole el atributo role=button (aunque algunos navegadores pueden aplicar una representación ligeramente diferente).
| Clase | Descripcion |
|---|---|
| btn btn-primary | Primaria (celeste) |
| btn btn-secondary | Secundaria (gris) |
| btn btn-success | Exito (verde) |
| btn btn-danger | Peligro (rojo) |
| btn btn-warning | Advertencia (amarillO) |
| btn btn-info | Informativo (turquesa) |
| btn btn-light | Luz (sin fondo) |
| btn btn-dark | Oscura (gris oscuro) |
| btn btn-link | Enlace (azul) |
Si necesitas solo el contorno añade -outline a la clase.
<button type=button class='btn btn-outline-primary'>Primario contorno</button>
Si necesitas botones grandes añade la clase .btn-lg o .btn-sm.
<button type=button class='btn btn-primary btn-sm'>Primario grande</button>
Si necesitas botones anchos añade la clase .btn-block.
<button type=button class='btn btn-primary btn-block'>Primario grande</button>
Puedes usar disabled para inabilitarlo o el atributo aria-pressed=true para que se vea presionado.
Las alertas están disponibles para cualquier longitud de texto, así como un botón opcional para descartarlas. Para un estilo adecuado, use una de las 8 clases contextuales requeridas. Las alertas también pueden contener elementos HTML adicionales como encabezados, párrafos y separadores. Para descartarlas en línea, use el complemento jQuery alerts.
| Clase | Descripcion |
|---|---|
| alert alert-primary | Primaria (celeste) |
| alert alert-secondary | Secundaria (gris) |
| alert alert-success | Exito (verde) |
| alert alert-danger | Peligro (rojo) |
| alert alert-warning | Advertencia (amarillO) |
| alert alert-info | Informativo (turquesa) |
| alert alert-light | Luz (sin fondo) |
| alert alert-dark | Oscura (gris oscuro) |
<div class='alert alert-warning alert-dismissible fade show' role=alert>
<strong>Santo guacamole</strong> You should check in on some of those fields below.
<button type=button class=close data-dismiss=alert aria-label=Close>
Metodos de alertas
Metodo Descripcion
$().alert() Crea una alerta que detecta eventos de clic en elementos descendientes que tienen el atributo data-dismiss=alert. (No es necesario cuando se usa la inicialización automática de la API de datos).
$().alert('close') Cierra una alerta eliminándola del DOM. Si las clases .fadey .show están presentes en el elemento, la alerta se desvanecerá antes de ser eliminada.
$().alert('dispose') Destruye la alerta de un elemento.
Eventos de alertas
Evento Descripcion
close.bs.alert Este evento se activa inmediatamente cuando se invoca al metodo close.
closed.bs.alert Este evento se activa cuando se cierra la alerta (esperará a que finalicen las transiciones CSS).
$('#miAlerta').on('closed.bs.alert',function() {
// hacer algo
})