Introducción a Bootstrap

Bootstrap 3 es un primer marco front-end móvil, gratuito, de código abierto e intuitivo
para un desarrollo web más rápido y fácil. Fue desarrollado por Jacob Thornton y Mark
Otto en Twitter.

 Bootstrap usa CSS, HTML y JavaScript.

 Bootstrap le permite crear diseños web receptivos con facilidad.

¿Qué es el diseño web receptivo?

El diseño web receptivo es el enfoque de crear sitios web que respondan y se ajusten
automáticamente para verse limpios y uniformes en todos los dispositivos.

 Ofrece una solución ordenada y consistente para crear una interfaz para
desarrolladores.
 Consiste en componentes integrados buenos, funcionales y personalizables.
 Código abierto y ofrece personalización basada en la web.

¿Qué es el sistema de cuadrícula Bootstrap?

Bootstrap Grid System ayuda a crear diseños de página a través de filas y columnas
que incluyen contenido.

Permite un máximo de 12 columnas en la página. Columns can be combined for

creating wider columns, si las 12 columnas no son necesarias individualmente.

El sistema de cuadrícula Bootstrap contiene cuatro clases que se pueden agrupar para
crear diseños flexibles y dinámicos:

 lg - para escritorios más grandes

 md - para escritorios
 sm - para tabletas
 xs - para teléfonos
Cómo funciona el sistema de cuadrícula
Bootstrap
 Coloca filas dentro de una clase .container para relleno y alineación.
 Utiliza filas para crear columnas con grupos horizontales.
 Coloca contenido dentro de las columnas, y las columnas pueden ser elementos
secundarios inmediatos de las filas.
 Las clases de cuadrícula predefinidas como .col-xs-4 y .row están disponibles
para crear diseños de cuadrícula más rápido. Use MENOS mixins para diseños
más semánticos.
 Las columnas pueden inducir canales , que son huecos notados entre el
contenido de la columna.
 Cree columnas de cuadrícula especificando el número de columnas necesarias
para la expansión. Por ejemplo: 3 implicaría col-xs-4.

Preguntas de los medios

Media Query utiliza una regla CSS condicional y se aplica el estilo, si se cumplen
esas condiciones.

Las consultas de medios de comunicación en Bootstrap ayuda

a hide, showy moveel contenido en función del tamaño de la ventana gráfica.

Para crear puntos de interrupción importantes, las consultas de medios

correspondientes se utilizan en MENOS archivos .

Dispositivos extra pequeños (teléfonos, menos de 768 px)

No media query since this is the default in Bootstrap

Pequeños dispositivos (tabletas, 768 px y más)

sh @media (min-width: @screen-sm-min) { ... }

Dispositivos medianos (computadoras de escritorio, 992 px y más)

@media (min-width: @screen-md-min) { ... }

Dispositivos grandes (escritorios grandes, 1200 px y más)

@media (min-width: @screen-lg-min) { ... }

Agregue un ancho máximo para limitar CSS a un conjunto de dispositivos más

estrecho.

@media (max-width: @screen-xs-max) { ... }

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Bootstrap - Tipografía
Cree listas, párrafos, encabezados y otros elementos en línea utilizando la tipografía .

Todos los encabezados HTML (h1 a h6) están diseñados en Bootstrap.

<h1>I'm Heading1 h1</h1>

<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>

Subtítulos en línea
Para incluir un subtítulo en línea en un encabezado, incluya .small classo
agregue <small>alrededor de un elemento. El resultado será un texto más pequeño en
un color claro.

<h1>I'm Heading1 h1.

<small>I'm secondary Heading1 h1</small>
</h1>
Copia del cuerpo principal
Para enfatizar un párrafo en particular, incluya class = "lead" .

El resultado será un tamaño de fuente más grande con una altura de línea más alta y
un peso más ligero.

<h2>Lead Example</h2>
<p class = "lead">an example paragraph to demonstrate the use of lead body
copy.</p>

Liza
Bootstrap admite listas de definición, listas desordenadas y listas ordenadas.

 Listas ordenadas : es una lista que está precedida por números y cae en un
orden secuencial.
 Listas desordenadas : está diseñado con viñetas. Para evitar que aparezcan
las viñetas, elimine el estilo utilizando class .list-unstyled . Coloque todos los
elementos de la lista en una línea con la clase .list-inline .
 Listas de definiciones : en esta lista, cada elemento de la lista
contiene elementos <dd>y <dt>elementos. <dt>se refiere al término de
definición que se está definiendo. <dd>es la definición de la <dt>. Puede crear
términos y descripciones en <dl>línea usando class dl-horizontal.

Imágenes receptivas
Las imágenes receptivas se ajustan automáticamente para adaptarse al tamaño de la
pantalla.
Cree imágenes receptivas agregando una clase .img-responsive a
la etiqueta img . La clase .img-responsive aplica display: block ; y ancho máximo:
100% ; y altura: auto ; a la imagen

<img class="img-responsive" src="img_fresco.jpg" alt="Fresco">

Bootstrap proporciona tres clases que se pueden usar para aplicar estilos simples a
las imágenes:
 .img-redondeado - agrega borde-radio: 6px para dar a la imagen esquinas
redondeadas.
 .img-circle : redondea toda la imagen agregando border-radius: 500px.
 .img-thumbnail : agrega un poco de relleno y un borde gris.

Clases de ayuda
Ícono de cierre : se utiliza para descartar contenido como alertas y modales. Para
obtener el ícono de cierre, use el cierre de clase .

<button type = "button" class = "close" aria-hidden = "true"></button>

Cuidados : se utilizan para mostrar la funcionalidad y dirección desplegable. Use

el cursor de clase con un elemento span para obtener esta funcionalidad.

<p>Caret Example<span class = "caret"></span></p>

Contenido del lector de pantalla : para ocultar un elemento de todos los dispositivos,
con excepción de los lectores de pantalla con la clase .sr-only .

<label class = "sr-only" for = "email">Email address</label>

<input type = "email" class = "form-control" placeholder = "Enter email">
¿Qué son los glificones?

Los glifos son fuentes de iconos que puedes usar en proyectos web. Después de

descargar la versión Bootstrap 3.x , busque Glyphicons en la carpeta de fuentes en
la estructura de directorios.

Uso :

e.g.: <span class = "glyphicon glyphicon-search"></span>

Para un relleno adecuado, deje un espacio entre el texto y el ícono.

Grupos de botones

Agrupe una serie de botones en una sola línea con el grupo de botones.

<div class = "btn-group">

<button type = "button" class = "btn btn-default">
Button1
</button>
<button type = "button" class = "btn btn-default">
Button2
</button>
</div>
Grupos de botones de anidamiento

Agrupe grupos de botones para crear menús desplegables combinados con una serie de botones.

<div class = "btn-group">

<button type = "button" class = "btn btn-default">Button1</button>
<button type = "button" class = "btn btn-default">Button2</button>
<div class="btn-group">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
Dropdown<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</div>
</div>
Botones desplegables divididos

Los menús desplegables de botones divididos siguen el mismo estilo que los grupos de botones
de anidación. Pero los menús desplegables de botones divididos incluyen una acción principal
con el menú desplegable.

Los botones tienen una palanca a la derecha que muestra el menú desplegable y la acción
principal a la izquierda.

<div class="btn-group">
<button type="button" class="btn btn-primary">Split Dropdown</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-
toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href= # ">Option 1</a></li>
<li><a href= # ">Option 2</a></li>
</ul>
</div>



Grupos de entrada

Extienda los controles de formulario agregando texto, botones o grupos de botones a

cada lado de la entrada de texto.

Para esto, use el input-groupelemento class y span con class input-group-

addon. Coloque spanantes o después del inputelemento.

Uso:

<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="Amount" aria-
label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>

Nota:

 Evite el uso de selectelementos, ya que no se pueden diseñar completamente

en los navegadores WebKit para compatibilidad cruzada entre navegadores.
  Evite aplicar clases de grupo de entrada directamente a grupos de
formulario. Un grupo de entrada es un componente aislado.

Complementos de botones

Agregue o agregue previamente botones en grupos de entrada, usando la clase .input-

group-btn para ajustar los botones, en lugar de la clase .input-group-addon .

Esto es necesario, ya que los estilos de navegador predeterminados no se pueden

anular.

<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
Barra de navegación

 Es un componente 'meta' receptivo que actúa como encabezado de navegación para un

sitio o una aplicación
 Se colapsa en las vistas móviles y tiende a volverse horizontal a medida que aumenta el
ancho de la vista
 Navbar presenta un estilo para la navegación básica y los nombres de sitios

<nav class="navbar navbar-default">

<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href= "#">Site1</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href= "#">Home</a></li>
<li><a href= "# ">Contact us</a></li>
<li><a href= "# ">About us</a></li>
</ul>
</div>
</nav>

Etiquetas

Útil para proporcionar consejos, recuentos u otro marcado para las páginas. Utilice la
clase .label para mostrar etiquetas. Uso:

<h1>Example Heading <span class = "label label-default">Label</span></h1>

Modificar el aspecto de las etiquetas con las clases de modificadores tales

como, label-danger, label-warning, label-info, label-default, label-
success, and label-primary.
Miniaturas

En general, los sitios requieren una forma de diseñar texto, videos, imágenes, etc. en
una cuadrícula. Para crear miniaturas:

Incluir ahrefetiqueta con la clase thumbnailalrededor de una imagen. Esto agrega un

borde gris y cuatro píxeles de relleno. Al pasar el mouse, un brillo animado describe la
imagen.

Uso:

<div class = "col-sm-6 col-md-3">

<a href = "#" class = "thumbnail">
<img src = "/bootstrap/images/detailed.jpg">
</a>
</div>
Alertas

Se usa para diseñar mensajes para el usuario y proporcionar mensajes de

retroalimentación contextual para acciones típicas del usuario.

 Agregue un icono de cierre opcional para alertar.

 Para el despido en línea, use el complemento Alerts jQuery.

Uso:

<div class = "alert alert-success">Success!</div>

<div class = "alert alert-info">Important Info!</div>
<div class = "alert alert-warning">Warning!</div>
<div class = "alert alert-danger">Error!</div>
Objeto de medios

Estilos de objetos abstractos para construir varios tipos de componentes como

comentarios de blog y Tweets, que presentan una imagen alineada a la izquierda o
alineada a la derecha junto con el contenido textual.

Objetivo del objeto multimedia : hacer el código drásticamente más corto para dichos
objetos.

Clases de objetos de medios:

 multimedia : permite flotar un objeto multimedia (imágenes, video y audio) a la

izquierda o derecha de un bloque de contenido.
  media-list : los elementos serán parte de una lista desordenada. Útil para hilos
de comentarios o listas de artículos.

Paneles

Los componentes del panel se usan cuando un componente DOM se coloca en un

cuadro. Utilice las clases .panel y .panel-default para implementar esto.

Uso:

<div class = "panel panel-default">

<div class = "panel-body">
This is a Basic panel
</div>
</div>
Información general sobre los complementos
de Bootstrap

Bootstrap incluye 12 complementos jQuery que proporcionan funciones e interacción

adicionales a un sitio. La mayoría de estos complementos se pueden activar sin escribir
una sola línea de código utilizando la API de datos Bootstrap .

Los complementos de Bootstrap se pueden agregar a un sitio de dos formas:

 Individualmente : utilizando los archivos * .js individuales de

Bootstrap. Asegúrese de verificar las dependencias, ya que pocos componentes
y complementos CSS dependen de otros complementos.
 Compilado todo simultáneamente - usando minified
bootstrap.min.jso bootstrap.js. No agregue ambos, ya que contienen
todos los complementos.
Complemento de transición

Ofrece efectos de transición simples.

Transition.js ayuda como un emulador de transición CSS y para eventos de transición

final. Es utilizado por los otros complementos para obtener transiciones colgantes y
verificar el soporte de transición CSS.

Casos de uso

 Paneles de carrusel deslizantes.

 Desvanecimiento de alertas.
 Desvanecimiento de pestañas.
 Deslizamiento o decoloración en modales.
Complemento desplegable
Se usa para agregar menús desplegables a cualquier componente como barras de
navegación, pestañas, píldoras y botones. Alternar el contenido oculto del
complemento desplegable:
A través de atributos de datos : agregue data-toggle = "dropdown"

<div class = "dropdown">

<a data-toggle = "dropdown" href = "#">Dropdown</a>
<ul class = "dropdown-menu" role = "menu">
...
</ul>
</div>

Para mantener los enlaces intactos, use el atributo de destino de datos

<a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#"

href = "/page.html">Dropdown<span class = "caret"></span>
</a>

Vía JavaScript

$('.dropdown-toggle').dropdown()
Complemento de punta de herramienta

Genera marcado y contenido a pedido, y coloca información sobre herramientas

después del elemento desencadenante. Estos son útiles para describir un enlace.

Para agregar información sobre herramientas:

A través de atributos de datos : agregue data-toggle = "tooltip". El título del ancla

será el texto de una información sobre herramientas.

<a href = "#" data-toggle = "tooltip" title = "Example tooltip">Hover over

me</a>

Vía JavaScript

$('#identifier').tooltip(options)
Plugin Popover

Es como una información sobre herramientas, que proporciona una vista ampliada con
un encabezado. El contenido de popover se puede completar con la API de datos
Bootstrap.

El complemento popover crea marcado y contenido a pedido, y por defecto coloca

popover después de su elemento desencadenante. Incluya popover de dos maneras:

A través de atributos de datos : agregue data-toggle = "popover" a una etiqueta de

ancla / botón. El título del ancla será el texto de un popover.

<a href = "#" data-toggle = "popover" title = "Example popover">Hover over

me</a>

Vía JavaScript

$('#identifier').popover(options)
Complemento de carrusel

Bootstrap Carousel es una forma flexible y receptiva de incluir un control deslizante

en su sitio. El contenido es flexible y receptivo, y permite videos, imágenes, iframes o
cualquier tipo de contenido. Implementación del carrusel Bootstrap:

Vía atributos de datos

 Utilice atributos de datos para controlar la posición del carrusel fácilmente.

 El atributo data-slideacepta las palabras clave next o prev, lo que cambia la
posición de la diapositiva en relación con su posición actual.
 Utilícelo data-slide-topara pasar un índice de diapositiva sin procesar al
carrusel. Esto cambia la posición de la diapositiva a otro índice que comienza
con 0.
 El data-rideatributo = "carrusel" se utiliza para marcar un carrusel como una
animación que comienza al cargar la página.

Vía JavaScript

$('.carousel').carousel()