• Author / Uploaded
• José Aranibar

Citation preview

INTRODUCCIÓN

CONCEPTO Es un framework o conjunto de herramientas de Código abierto para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScriptopcionales adicionales. Historia Bootstrap fue desarrollado por Mark Otto y Jacob Thornton en Twitter, y lanzado como un producto de código abierto en agosto de 2011 en GitHub. Según el desarrollador de Twitter Mark Otto. "...un pequeño grupo de desarrolladores y yo nos reunimos a diseñar y construir una nueva herramienta interna y vimos una oportunidad de hacer más. A través de ese proceso, nos vimos construir algo mucho más sustancial que otra herramienta interna más. Meses después, terminamos con una primera versión de Bootstrap como una manera de documentar y compartir bienes y patrones de diseño comunes dentro de la compañía." Mark Otto 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. LESS es un lenguaje dinámico de hoja de estilos diseñado por Alexis Sellier, proporcionando los siguientes mecanismos: variables anidamientos, operadores, mixins y funciones.

Estructura 

Sistema de cuadrilla y diseño sensible



Entendiendo la hoja de estilo CSS



Componentes re-usables



Plug-ins de JavaScript

Funciones

  

Bootstrap viene con una disposición de cuadrilla estándar de 940 píxeles de ancho. Bootstrap proporciona un conjunto de hojas de estilo que proveen definiciones básicas de estilo para todos los componentes de HTML. Bootstrap contiene otra interfaz de elementos comúnmente usados.

CONTENIDOS DE LA VERSIÓN COMPILADA DE BOOTSTRAP Estos archivos son la forma más sencilla de utilizar Bootstrap en cualquier proyecto web.

CONTENIDOS DE LA VERSIÓN ORIGINAL DE BOOTSTRAP

Incluye, además de las versiones compiladas de los archivos CSS y JavaScript, las versiones originales de esos mismos archivos y toda la documentación. Tras descomprimir el archivo que te has descargado con la versión original de Bootstrap, verás la siguiente estructura de archivos y directorios:

Ventajas de Bootstrap:



Fácil de usar: Cualquier persona con conocimientos simplemente básicos de HTML y CSS puede comenzar a usar Bootstrap



Características de respuesta: CSS sensible de Bootstrap ajusta a los teléfonos, tabletas y ordenadores de sobremesa



Mobile-primer acercamiento: En Bootstrap 3, estilos móviles primer forman parte del marco básico



Compatibilidad del navegador: Bootstrap es compatible con todos los navegadores modernos (Chrome, Firefox, Internet Explorer, Safari y Opera)



Ser usado de forma muy flexible para desarrollo web con unos excelentes resultados.



Se ha añadido un sistema GRID que permite diseñar usando un GRID de 12 columnas donde se debe plasmar el contenido, con esto podemos desarrollar responsive de forma mucho más fácil e intuitiva.



Bootstrap establece Media Queries

para 4 tamaños de dispositivos

diferentes variando dependiendo del tamaño de su pantalla, estas Media Queries permiten desarrollar para dispositivos móviles y tabletas de forma mucho más fácil.



Bootstrap también permite insertar imágenes responsive, es decir, con solo insertar la imagen con la clase “img-responsive” las imágenes se adaptarán al tamaño.

ELEMENTOS PRINCIPALES

Elemento CSS En este capítulo se explican los estilos que define Bootstrap 3 para las tablas y las imágenes, incluyendo todas sus variantes. También se explican las classes CSS

genéricas y utilidades que simplifican el diseño de los sitios web y que se pueden aplicar a cualquier elemento. Tablas 

Tablas básicas



Tablas cebreadas



Tablas con bordes



Tablas dinámicas



Tablas condensadas



Tablas semánticas



Tablas responsivas

Imágenes

 

.img-rounded, añade unas pequeñas esquinas redondeadas en todos los lados de la imagen aplicando el estilo border-radius: 6px. .img-thumbnail, muestra la imagen con un relleno blanco y un borde



fino. .img-circle, convierte la imagen en un círculo aplicando el estilo borderradius: 50%

Listas de elementos

Las listas de los elementos de Bootstrap son componentes bastante flexibles y poderosos, ya que permiten mostrar listados que están formados por elementos complejos. Listas de elementos con badges

Al añadir un componente de tipo badge a cualquier elemento de una lista de objetos, el badge se alineará a la derecha automáticamente. Listas de elementos con enlaces Para crear una lista de elementos pinchables, reemplaza los elementos