Para entender Bootstrap primero analizaremos una palabra muy usada en estos tiempos "FRAMEWORK", un framework es un esquema, un esqueleto, un patron para el desarrollo y/o implementacion de una aplicación sin llegar a ser un lenguaje.
BOOTSTRAP es un framework originalmente creado por twitter, que permite crear interfaces web con CSS y JAVASCRIP, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tableta, un dispositivo movil, u otro dispositivo.
BOOTSTRAP es un framework originalmente creado por twitter, que permite crear interfaces web con CSS y JAVASCRIP, cuya particularidad es la de adaptar la interfaz del sitio web al tamaño del dispositivo en que se visualice. Es decir, el sitio web se adapta automáticamente al tamaño de una PC, una Tableta, un dispositivo movil, u otro dispositivo.
l
Originalmente llamado Blueprint de Twitter, fue desarrollado por Mark Otto y Jacob Thornton de Twitter, como un marco de trabajo (framework) para fomentar la consistencia entre las herramientas internas. Antes de Bootstrap, se usaron varias librerías para el desarrollo de interfaces de usuario, las cuales generó inconsistencias y una gran carga de trabajo en su mantenimiento. Según el desarrollador de Twitter Mark Otto, frente a esos desafíos.
Características
tiene un soporte relativamente incompleto para HTML5 y CSS 3, pero es compatible con la mayoría de los navegadores web. La información básica de compatibilidad de sitios web o aplicaciones está disponible para todos los dispositivos y navegadores. Existe un concepto de compatibilidad parcial que hace disponible la información básica de un sitio web para todos los dispositivos y navegadores. Por ejemplo, las propiedades introducidas en CSS3 para las esquinas redondeadas, gradientes y sombras son usadas por Bootstrap a pesar de la falta de soporte de navegadores antiguos. Esto extiende la funcionalidad de la herramienta, pero no es requerida para su uso.
Funcíon y Estructura
Bootstrap es modular y consiste esencialmente en una serie de hojas de estilo LESS que implementan la variedad de componentes de la herramienta. Una hoja de estilo llamada bootstrap.less incluye los componentes de las hojas de estilo. Los desarrolladores pueden adaptar el mismo archivo de Bootstrap, seleccionando los componentes que deseen usar en su proyecto.
Los ajustes son posibles en una medida limitada a través de una hoja de estilo de configuración central. Los cambios más profundos son posibles mediante las declaraciones LESS.
El uso del lenguaje de hojas de estilo LESS permite el uso de variables, funciones y operadores, selectores anidados, así como clases mixin.
Desde la versión 2.0, la configuración de Bootstrap también tiene una opción especial de "Personalizar" en la documentación. Por otra parte, los desarrolladores eligen en un formulario los componentes y ajustes deseados, y de ser necesario, los valores de varias opciones a sus necesidades. El paquete consecuentemente generado ya incluye la hoja de estilo CSS pre-compilada
Sistema de cuadrilla y diseño sensible
Bootstrap viene con una disposición de cuadrilla estándar de 940 píxeles de ancho. Alternativamente, el desarrollador puede usar un diseño de ancho-variable. Para ambos casos, la herramienta tiene cuatro variaciones para hacer uso de distintas resoluciones y tipos de dispositivos: teléfonos móviles, formato de retrato y paisaje, tabletas y computadoras con baja y alta resolución (pantalla ancha). Esto ajusta el ancho de las columnas automáticamente.
Entendiendo la hoja de estilo CSS
Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones básicas de estilo para todos los componentes de HTML. Esto otorga una uniformidad al navegador y al sistema de anchura, da una apariencia moderna para el formateo de los elementos de texto, tablas y formularios.
Componentes re-usables
En adición a los elementos regulares de HTML, Bootstrap contiene otra interfaz de elementos comúnmente usados. Ésta incluye botones con características avanzadas (e.g grupo de botones o botones con opción de menú desplegable, listas de navegación, etiquetas horizontales y verticales, ruta de navegación, paginación, etc.), etiquetas, capacidades avanzadas de miniaturas tipográficas, formatos para mensajes de alerta y barras de progreso.
Plug-ins de JavaScript
Los componentes de JavaScript para Bootstrap están basados en la librería jQuery de JavaScript. Los plug-ins se encuentran en la herramienta de plug-in de jQuery. Proveen elementos adicionales de interfaz de usuario como diálogos, tooltips y carruseles. También extienden la funcionalidad de algunos elementos de interfaz existentes, incluyendo por ejemplo una función de auto-completar para campos de entrada (input). La versión 2.0 soporta los siguientes plug-ins de JavaScript: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel y Typeahead.
¿Como usar Bootstrap?
Hay varias maneras de usar bootstrap
-En HTML el desarrollador solo debe descargar la hoja de estilo Bootstrap CSS y enlazarla en el archivo HTML.
-Compilando el archivo CSS desde la hoja de estilo LESS o SASS descargada. Esto puede realizarse con un compilador especial.(LESS, SASS)
-Referenciando, Si el desarrollador también quiere usar los componentes de JavaScript, éstos deben estar referenciados junto con la librería jQuery en el documento HTML.
El siguiente ejemplo ilustra como funciona. El código HTML define un simple formulario de búsqueda y una lista de resultados en un formulario tabular. La página consiste en elementos regulares y semánticos de HTML 5, y alguna información adicional de la clase de CSS de acuerdo con la documentación de Bootstrap. La figura muestra la representación del documento en Mozilla Firefox 10
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Bootstrap</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div class="container">
<h1>Search</h1>
<label>Ejemplo de un formulario sencillo de búsqueda.</label>
<!-- Formulario de búsqueda con un campo de entrada (input) y un botón -->
<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn btn-primary">Buscar</button>
</form>
<h2>Results</h2>
<!-- Tabla con celdas de color de fondo alternantes y con marco -->
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>#</th>
<th>Título</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Lorem ipsum dolor sit amet</td>
</tr>
<tr>
<td>2</td>
<td>Consetetur sadipscing elitr</td>
</tr>
<tr>
<td>3</td>
<td>At vero eos et accusam</td>
</tr>
</tbody>
</table>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>.
Creando una cuadrilla de diseño fija
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-8">...</div>
</div>
Creando unacuadrilla de diseño fija con una cuadrilla de diseño fluida anidada
<div class="row"> <div class="col-md-4"> <div class="4">...</div> <div class="4">...</div> <div class="4">...</div> </div> <div class="col-md-8">...</div> </div>
ENTRANDO MAS EN EL TEMA DE BOOTSTRAP
COMPONENTES DE BOOTSTRAP
͒🔺Barra de navegación
predeterminada
Las barras Navbar son
meta componentes que sirven como encabezados de navegación para su aplicación o
sitio. Comienzan colapsados (y se pueden alternar) en vistas móviles y
se vuelven horizontales a medida que aumenta el ancho de ventana disponible.
- .navbar-nav para
una navegación de altura completa y ligera (incluida la compatibilidad con
los menús desplegables).
·
collapse.navbar-collapse para
agrupar y ocultar contenidos de la barra de navegación por un punto de
interrupción padre.🔺🔺
Una barra de navegación es un encabezado de navegación que se
coloca en la parte superior de la página:
Con Bootstrap, una barra de navegación puede extenderse o
colapsar, dependiendo del tamaño de la pantalla.
Se crea una barra de navegación estándar con
<nav
class="navbar navbar-default">.
El siguiente ejemplo muestra cómo agregar una barra de navegación
a la parte superior de la página:
El encabezado
de la barra de navegación es principalmente una clase de arquitectura para la
barra de navegación Bootstrap. Asigna aproximadamente 150 px a la
izquierda de la barra de navegación para envolver la marca de la barra de
navegación y permite que el nombre o logotipo de la marca haga uso de toda el
área al hacer clic o al desplazarse. Pero la propiedad más útil del
encabezado navbar es su receptividad al ancho del 100% en y después de 768px
(vistas de tableta). Esto permite que la marca se centre en la parte
superior de la ventana gráfica, lo cual es una maravilla para evitar que su
menú receptivo se solape con su marca cuando se abre. EDITAR ->
La marca navbar no responde al 100% de ancho.
Pero tienes razón, poco se dice sobre esta clase en
la web, porque no ejecuta una función per se. La mayoría de las personas
simplemente lo dejan solo, lo reemplazan o lo utilizan como una clase de enlace
(padre) para apuntar a la marca de la barra de navegación o cualquier otro
elemento que quieran incluir.
🔺Containers(Contenedores)
Bootstrap requiere un
elemento contenedor para envolver los contenidos del sitio y albergar nuestro
sistema de grillas. Puede elegir uno de los dos contenedores para usar en
sus proyectos. Tenga en cuenta que, debido a
paddingy más, ninguno de los contenedores puede
encajarse.🔺Dropdowns dropdown.js
Ejemplos
Agreguemos menús
desplegables a casi cualquier cosa con este sencillo complemento, incluida la
barra de navegación, las pestañas y las píldoras.
A través de los atributos
de datos o JavaScript, el complemento desplegable alterna el contenido oculto
(menús desplegables) al alternar la
.openclase en el elemento de la lista principal.
Agregar
data-toggle="dropdown"a un enlace o botón para alternar un menú desplegable.
En los dispositivos
móviles, la apertura de un menú desplegable agrega un
.dropdown-backdropárea de toque para cerrar los menús
desplegables al tocar fuera del menú, un requisito para el soporte apropiado de
iOS. Esto significa que
cambiar de un menú desplegable abierto a un menú desplegable diferente requiere
un toque adicional en el móvil.
Nota: El
data-toggle="dropdown"atributo se utiliza para cerrar menús
desplegables a nivel de aplicación, por lo que es una buena idea usarlo
siempre.
🔺Breadcrumbs
Indique
la ubicación de la página actual dentro de una jerarquía de navegación.
Los separadores se
agregan automáticamente en CSS a través de
:beforey content.
🔺List group
Los grupos de lista son un componente flexible
y poderoso para mostrar una serie de contenido. Modifíquelos y extiéndalos
para admitir casi cualquier contenido dentro.
Ejemplo básico
El grupo de lista más básico es una lista desordenada con
elementos de lista y las clases adecuadas. Aproveche al máximo las
opciones que siguen, o con su propio CSS según sea necesario.
🔺Wells
La
.wellclase agrega un borde redondeado alrededor de un elemento con
un color de fondo gris y algo de relleno:
🔺Progress
Documentación
y ejemplos para usar barras de progreso personalizadas de Bootstrap con soporte
para barras apiladas, fondos animados y etiquetas de texto.
Cómo funciona
Los componentes de progreso se crean con dos elementos HTML,
algunos CSS para establecer el ancho y algunos atributos. No usamos el
<progress>elemento HTML5 , lo que
garantiza que pueda apilar barras de progreso, animarlas y colocar etiquetas de
texto sobre ellas.- Usamos
el
.progresscomo un contenedor para indicar el valor máximo de la barra de progreso. - Usamos
el interior
.progress-barpara indicar el progreso hasta el momento. - El
.progress-barrequiere un estilo en línea, clase de utilidad, o CSS personalizada para establecer su anchura. - El
.progress-bartambién requiere algunosroleyariaatributos para hacerlo accesible.
.
Panels(panel)
Un panel en
bootstrap es una caja bordeada con algo de relleno alrededor de su contenido:
Un panel básico
Los paneles se
crean con la .panelclase, y el
contenido dentro del panel tiene una .panel-bodyclase:
<div class=”
well dash-box>”</div>
🔺Bootstrap footer
Footer es una navegación adicional para el sitio web. Puede
contener enlaces, botones, información de la empresa, derechos de autor,
formularios y muchos otros elementos.
Puede establecer el color del pie de página agregando una de las
clases de nuestra paleta de colores .
Al igual que cualquier otro componente de MDBootstrap , los pies de página
responden de manera predeterminada.
🔺Pie de página básico
Agregue o elimine la
.font-smallclase al <footer>elemento para cambiar el
tamaño de las fuentes dentro del pie de página.
🔺Collapse
Conmute(oculta el contenido) la visibilidad del contenido en
su proyecto con algunas clases y nuestros complementos de JavaScript.
Section:
La etiqueta <section> define secciones en un documento, como
capítulos, encabezados, pies de página o cualquier otra sección del documento.
🔺span
Las clases
"span" de Bootstrap se usan en el sistema de grilla bootstrap
La documentación muestra columnas etiquetadas con números, cada
número representa la
spanclase
utilizada para este contenedor. Los desplazamientos se muestran a la
derecha en la siguiente sección, ellos definen cuántas columnas vacías deben
estar a la izquierda del tramo.
Puede leer
Por defecto hay 12 columnas. Si tiene una
span4 offset2como
"extienda este bloque sobre 4 columnas, deje dos columnas vacías a la
izquierda".Por defecto hay 12 columnas. Si tiene una
span12, será
tan ancha como el contenedor (que puede ser fluido).
🔺Colocación de contenido
dentro de Wells
El
componente de pozo Bootstrap proporciona una forma rápida de aplicar un simple
efecto de inserción a un elemento. Será muy útil si solo desea colocar
algún contenido dentro de un cuadro para que se vea diferente del resto de los
contenidos. Para usar esto simplemente encierre el contenido con un <div>elemento y aplique la
clase
.wellen él, así:
Ejemplo:
1. <div class = "bien"
>
2. Mira, estoy en un pozo!
3. </ div>
Panels
A veces puede
requerir colocar su contenido en el recuadro para una mejor
presentación. En tal situación, el componente del panel Bootstrap puede
ser muy útil. En la forma más básica, el componente del panel aplica
algo bordery paddingalrededor del contenido.
Ejemplo:
1. <div class = "panel panel-default" >
2. <div class = "panel-body"
> ¡Mira, estoy en un panel! </ div>
3. </ div>
🔺Progress
Documentación
y ejemplos para usar barras de progreso personalizadas de Bootstrap con soporte
para barras apiladas, fondos animados y etiquetas de texto.
Cómo funciona
Los componentes de progreso se crean con dos elementos HTML,
algunos CSS para establecer el ancho y algunos atributos. No usamos el
<progress>elemento HTML5 , lo que
garantiza que pueda apilar barras de progreso, animarlas y colocar etiquetas de
texto sobre ellas.- Usamos
el
.progresscomo un contenedor para indicar el valor máximo de la barra de progreso. - Usamos
el interior
.progress-barpara indicar el progreso hasta el momento. - El
.progress-barrequiere un estilo en línea, clase de utilidad, o CSS personalizada para establecer su anchura. - El
.progress-bartambién requiere algunosroleyariaatributos para hacerlo accesible.
Bibliografia
Cochran, David (12 de noviembre de 2012).Twitter Bootstrap Web Development (1st edición). Packt Publishing. p. 100. ISBN 978-1849518826.
Mas informacion de BOOTSTRAP
--->Link de Video
https://www.youtube.com/watch?v=jpWvOES68IQ&feature=youtu.be
¡¡¡NUESTRA META SER MEJORES CADA DIA!!!
CABRERA ROJAS Alex, GARCIA GUERRERO Aquiles, LAVALLE MEDINA Maria, MARQUEZ VICENTE Kevin, PEÑA JAUREGUI Eduardo, ROMAN GAMARRA Michael, SUEYO GUTIERREZ Antoni.
ᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎ
¡¡¡NUESTRA META SER MEJORES CADA DIA!!!
CABRERA ROJAS Alex, GARCIA GUERRERO Aquiles, LAVALLE MEDINA Maria, MARQUEZ VICENTE Kevin, PEÑA JAUREGUI Eduardo, ROMAN GAMARRA Michael, SUEYO GUTIERREZ Antoni.
ᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎᘎ
