PDF de programación - Iniciación en BootStrap

Bootstrap



Iniciación en Bootstrap,

Alberto González y Ulises Freitas



Introducción

Bootstrap es un elegante e intuitivo.

Antes de descargar, asegúrese de tener un editor de código y algunos conocimientos básicos
de HTML y CSS. No vamos a caminar a través de los archivos de código fuente aquí, pero
están disponibles para su descarga. Nos centraremos en cómo empezar con los archivos de
rutina de carga compilados.

Descargar Fuente
http://twitter.github.com/bootstrap/assets/bootstrap.zip

Al descargarlo nos presenta una estructura de directorios tal:

bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
├── img/
│ ├── glyphicons-halflings.png
│ ├── glyphicons-halflings-white.png
└── README.md

Funcionalidades


Scaffolding
Estilos globales para el cuerpo para restablecer y tipo de fondo, estilos de vínculos, sistema de
red y dos diseños simples.

Está es una de las características más importantes ya que permite utilizar una grilla o grid de
12 columnas totalmente configurables, diseñadas para el uso del responsive design.

Base CSS
Los estilos para los elementos comunes de HTML como tipografía, código, tablas, formularios y
botones. También incluye Glyphicons, icon set gratuito.

Components
Estilos básicos para los componentes de interfaz comunes, como las pestañas y listas, navbar,
alertas, encabezados de página, y más.

Javascript plugins
Similar a los componentes, estos plugins Javascript son componentes interactivos para cosas
como información sobre herramientas, popovers, modales, etc.


Componentes y Javascript
Transitions transition.js bootstrap-

Acerca de las transiciones
Para efectos de transición simples, se incluyen bootstrap-transition.js una vez al lado de
los otros archivos JS. Si se está utilizando los compilados (o minified) bootstrap.js, no hay
necesidad de incluir este-ya está ahí.


Modals modal.js bootstrap-

Ventanas modales se han simplificado, con diálogo flexible, pide una funcionalidad mínima
necesaria y por defecto son inteligentes.


Dropdowns dropdown.js bootstrap-
Agregar menús desplegables para casi cualquier cosa con este simple plugin, incluyendo la
barra de navegación, las pestañas y las pastillas.


ScrollSpy bootstrap-scrollspy.js
El plugin ScrollSpy es para la actualización automática de los objetivos de navegación basados ​
en la posición de desplazamiento.

Togglable Tabs tab.js bootstrap-

Agregar funcionalidad rápido, dinámicas pestañas con transiciones a través de paneles de
contenido local, incluso a través de menús desplegables.


Tooltips tooltip.js bootstrap-
Inspirado por el plugin jQuery.tipsy excelente escrito por Jason Frame; Tooltips son una
versión actualizada, que no se basan en imágenes, buena para animaciones CSS3, y datos de
atributos para el almacenamiento local.


Popovers popover.js bootstrap-
Añadir superposiciones pequeñas de contenido, como las que hay en el iPad, a cualquier
elemento de información de foco secundaria.


Alerts alert.js bootstrap-
Agregar funcionalidad de volver a todos los mensajes de alerta con este plugin.

Buttons button.js bootstrap-
Personalización de botones. Control de estados del botón o crear grupos de botones para más
componentes como barras de herramientas.

Contraer bootstrap-collapse.js
Obtener estilos básicos y de apoyo flexible para los componentes plegables como acordeones
y la navegación.
* Requiere el plugin de las transiciones.

Carrusel bootstrap-carousel.js

​
La presentación de diapositivas muestra un plugin genérico y componentes a través de
elementos como un carrusel.


Typeahead bootstrap-typeahead.js
Un complemento básico, fácilmente extendido para la creación rápida detypeaheads elegantes
con cualquier entrada de texto del formulario.


Affix bootstrap-affix.js
Sub-navegaciones en los laterales.



Soporte de LESS

Bootstrap soporta LESS lo que lo hace mucho más rápido en desarrollos con un gran
despliegue Web.

Less ofrece una velocidad hasta 6 veces mayor frente a Sass con Bootstrap al estar
optimizado.

Less es una tecnología que permite la generación de páginas de estilo CSS al vuelo.