Visión xeral do proxecto, os seus contidos e como comezar cun modelo sinxelo.
Antes de descargar, asegúrate de ter un editor de código (recomendámosche Sublime Text 2 ) e algúns coñecementos prácticos de HTML e CSS. Non repasaremos aquí os ficheiros fonte, pero están dispoñibles para descargar. Centrarémonos en comezar cos nosos ficheiros Bootstrap compilados.
O xeito máis rápido de comezar: obtén as versións compiladas e reducidas dos nosos CSS, JS e imaxes. Non hai documentos nin ficheiros de orixe orixinais.
Obtén os ficheiros orixinais de todos os CSS e Javasript, xunto cunha copia local dos documentos descargando a última versión directamente desde GitHub.
Dentro da descarga atoparás a seguinte estrutura de ficheiros e contidos, agrupando loxicamente os recursos comúns e proporcionando variacións tanto compiladas como reducidas.
Unha vez descargado, descomprime o cartafol comprimido para ver a estrutura de Bootstrap (compilado). Verás algo así:
bootstrap / ├── css / │ ├── bootstrap . css │ ├── bootstrap . min . css ├── js / │ ├── bootstrap . js │ ├── bootstrap . min . js ├── img / │ ├── glifos - halflings . png │ ├── glifos - halflings - branco . png └── Léame . md
Esta é a forma máis básica de Bootstrap: ficheiros compilados para un uso rápido en case calquera proxecto web. Ofrecemos CSS e JS compilados ( bootstrap.*
), así como CSS e JS compilados e minificados ( bootstrap.min.*
). Os ficheiros de imaxe comprímense usando ImageOptim , unha aplicación de Mac para comprimir PNG.
Bootstrap vén equipado con HTML, CSS e JS para todo tipo de cousas, pero pódense resumir cun puñado de categorías visibles na parte superior da documentación de Bootstrap .
Estilos globais para o corpo para restablecer o tipo e o fondo, estilos de ligazón, sistema de cuadrícula e dous deseños sinxelos.
Estilos para elementos HTML comúns como tipografía, código, táboas, formularios e botóns. Tamén inclúe Glyphicons , un pequeno conxunto de iconas xenial.
Estilos básicos para compoñentes comúns da interface como pestanas e pílulas, barra de navegación, alertas, cabeceiras de páxina e moito máis.
Semellante aos Compoñentes, estes complementos de Javascript son compoñentes interactivos para cousas como información sobre ferramentas, popovers, modais e moito máis.
Xuntos, as seccións Compoñentes e complementos de Javascript proporcionan os seguintes elementos de interface:
En futuras guías, podemos percorrer estes compoñentes individualmente con máis detalle. Ata entón, busque cada un destes na documentación para obter información sobre como utilizalos e personalizalos.
Cunha breve introdución aos contidos fóra do camiño, podemos centrarnos en usar Bootstrap. Para iso, utilizaremos un modelo HTML básico que inclúe todo o que mencionamos na estrutura do ficheiro .
Agora, aquí tes unha ollada a un ficheiro HTML típico :
- <html>
- <cabeza>
- <title> Modelo Bootstrap 101 </title>
- </cabeza>
- <corpo>
- <h1> Ola, mundo! </h1>
- </corpo>
- </html>
Para que este sexa un modelo Bootstrapped , só debe incluír os ficheiros CSS e JS adecuados:
- <html>
- <cabeza>
- <title> Modelo Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "css/bootstrap.min.css" rel = "folla de estilo" >
- </cabeza>
- <corpo>
- <h1> Ola, mundo! </h1>
- <script src = "js/bootstrap.min.js" ></script>
- </corpo>
- </html>
E xa estás listo! Con eses dous ficheiros engadidos, pode comezar a desenvolver calquera sitio ou aplicación con Bootstrap.
Vaia máis aló do modelo base con algúns exemplos de deseño. Animamos á xente a repetir estes exemplos e non simplemente usalos como resultado final.
Presenta unha unidade de heroe para unha mensaxe principal e tres elementos de apoio.
Usa o noso novo sistema de reixa fluída e sensible para crear un deseño líquido perfecto.
Un documento HTML simple con todo o Bootstrap CSS e Javascript incluídos.
Diríxete aos documentos para obter información, exemplos e fragmentos de código, ou dá o seguinte salto e personaliza Bootstrap para calquera proxecto.
Visita os documentos de Bootstrap Personaliza Bootstrap