Descripción general del proyecto, su contenido y cómo comenzar con una plantilla simple.
Antes de descargar, asegúrese de tener un editor de código (recomendamos Sublime Text 2 ) y algunos conocimientos prácticos de HTML y CSS. No revisaremos los archivos fuente aquí, pero están disponibles para descargar. Nos centraremos en comenzar con los archivos de Bootstrap compilados.
La forma más rápida de comenzar: obtenga las versiones compiladas y minimizadas de nuestro CSS, JS e imágenes. Sin documentos ni archivos fuente originales.
Obtenga los archivos originales para todos los CSS y JavaScript, junto con una copia local de los documentos descargando la última versión directamente desde GitHub.
Dentro de la descarga, encontrará la siguiente estructura de archivos y contenido, agrupando lógicamente los activos comunes y proporcionando variaciones compiladas y minimizadas.
Una vez descargado, descomprima la carpeta comprimida para ver la estructura de (el compilado) Bootstrap. Verás algo como esto:
arranque / ├── css / │ ├── arranque . css │ ├── arranque . mín . css ├── js / │ ├── arranque . js │ ├── arranque . mín . js ├── img / │ ├── glyphicons - medianos . png │ ├── glyphicons - medianos - blanco . png └── LÉAME . Maryland
Esta es la forma más básica de Bootstrap: archivos compilados para un uso rápido en casi cualquier proyecto web. Proporcionamos CSS y JS compilados ( bootstrap.*
), así como CSS y JS compilados y minimizados ( bootstrap.min.*
). Los archivos de imagen se comprimen con ImageOptim , una aplicación de Mac para comprimir archivos PNG.
Tenga en cuenta que todos los complementos de JavaScript requieren que se incluya jQuery.
Bootstrap viene equipado con HTML, CSS y JS para todo tipo de cosas, pero se pueden resumir con un puñado de categorías visibles en la parte superior de la documentación de Bootstrap .
Estilos globales para el cuerpo para restablecer el tipo y el fondo, estilos de enlace, sistema de cuadrícula y dos diseños simples.
Estilos para elementos HTML comunes como tipografía, código, tablas, formularios y botones. También incluye Glyphicons , un gran pequeño conjunto de iconos.
Estilos básicos para componentes de interfaz comunes como pestañas y píldoras, barra de navegación, alertas, encabezados de página y más.
Al igual que los componentes, estos complementos de Javascript son componentes interactivos para cosas como información sobre herramientas, popovers, modales y más.
Juntas, las secciones Componentes y complementos de Javascript proporcionan los siguientes elementos de interfaz:
En guías futuras, es posible que analicemos estos componentes individualmente con más detalle. Hasta entonces, busque cada uno de estos en la documentación para obtener información sobre cómo utilizarlos y personalizarlos.
Con una breve introducción a los contenidos, podemos centrarnos en poner Bootstrap en uso. Para hacer eso, utilizaremos una plantilla HTML básica que incluye todo lo que mencionamos en la Estructura del archivo .
Ahora, aquí hay un vistazo a un archivo HTML típico :
- <!DOCTYPEhtml>
- <html>
- <cabeza>
- <title> Plantilla Bootstrap 101 </title>
- </cabeza>
- <cuerpo>
- <h1> ¡Hola, mundo! </h1>
- <script src = "https://code.jquery.com/jquery-latest.js" ></script>
- </cuerpo>
- </html>
Para hacer de esta una plantilla Bootstrapped , simplemente incluya los archivos CSS y JS apropiados:
- <!DOCTYPEhtml>
- <html>
- <cabeza>
- <title> Plantilla Bootstrap 101 </title>
- <!-- Arranque -->
- <enlace href = "css/bootstrap.min.css" rel = "hoja de estilo" >
- </cabeza>
- <cuerpo>
- <h1> ¡Hola, mundo! </h1>
- <script src = "https://code.jquery.com/jquery-latest.js" ></script>
- <script src = "js/bootstrap.min.js" ></script>
- </cuerpo>
- </html>
¡Y listo! Con esos dos archivos agregados, puede comenzar a desarrollar cualquier sitio o aplicación con Bootstrap.
Vaya más allá de la plantilla base con algunos diseños de ejemplo. Alentamos a la gente a repetir estos ejemplos y no simplemente usarlos como resultado final.
Con una unidad de héroe para un mensaje principal y tres elementos de apoyo.
Utiliza nuestro nuevo sistema de cuadrícula fluido y receptivo para crear un diseño líquido uniforme.
Un documento HTML barebones con todo el Bootstrap CSS y javascript incluidos.
Diríjase a los documentos para obtener información, ejemplos y fragmentos de código, o dé el siguiente salto y personalice Bootstrap para cualquier proyecto próximo.
Visite los documentos de Bootstrap Personalizar Bootstrap