Visão geral do projeto, seu conteúdo e como começar com um modelo simples.
Antes de fazer o download, certifique-se de ter um editor de código (recomendamos o Sublime Text 2 ) e algum conhecimento prático de HTML e CSS. Não vamos percorrer os arquivos de origem aqui, mas eles estão disponíveis para download. Vamos nos concentrar em começar com os arquivos compilados do Bootstrap.
A maneira mais rápida de começar: obtenha as versões compiladas e minificadas de nosso CSS, JS e imagens. Sem documentos ou arquivos de origem originais.
Obtenha os arquivos originais para todos os CSS e JavaScript, juntamente com uma cópia local dos documentos baixando a versão mais recente diretamente do GitHub.
Dentro do download, você encontrará a seguinte estrutura e conteúdo de arquivos, agrupando logicamente ativos comuns e fornecendo variações compiladas e minificadas.
Uma vez baixado, descompacte a pasta compactada para ver a estrutura do Bootstrap (compilado). Você verá algo assim:
bootstrap / ├── css / │ ├── bootstrap . css │ ├── bootstrap . min . css ├── js / │ ├── bootstrap . js │ ├── bootstrap . min . js ├── img / │ ├── glyphicons - halflings . png │ ├── glyphicons - halflings - white . png └── LEIA -ME . médico
Esta é a forma mais básica de Bootstrap: arquivos compilados para uso rápido em praticamente qualquer projeto da web. Fornecemos CSS e JS compilados ( bootstrap.*
), bem como CSS e JS compilados e minificados ( bootstrap.min.*
). Os arquivos de imagem são compactados usando ImageOptim , um aplicativo Mac para compactar PNGs.
Observe que todos os plugins JavaScript requerem que o jQuery seja incluído.
O Bootstrap vem equipado com HTML, CSS e JS para todo tipo de coisa, mas eles podem ser resumidos com um punhado de categorias visíveis no topo da documentação do Bootstrap .
Estilos globais para o corpo para redefinir tipo e plano de fundo, estilos de link, sistema de grade e dois layouts simples.
Estilos para elementos HTML comuns, como tipografia, código, tabelas, formulários e botões. Também inclui Glyphicons , um ótimo conjunto de ícones.
Estilos básicos para componentes de interface comuns, como guias e pílulas, barra de navegação, alertas, cabeçalhos de página e muito mais.
Semelhante aos componentes, esses plug-ins Javascript são componentes interativos para dicas de ferramentas, popovers, modais e muito mais.
Juntas, as seções Componentes e plug- ins Javascript fornecem os seguintes elementos de interface:
Em guias futuros, poderemos percorrer esses componentes individualmente com mais detalhes. Até lá, procure cada um deles na documentação para obter informações sobre como utilizá-los e personalizá-los.
Com uma breve introdução ao conteúdo fora do caminho, podemos nos concentrar em usar o Bootstrap. Para fazer isso, utilizaremos um modelo HTML básico que inclui tudo o que mencionamos na estrutura do arquivo .
Agora, veja um arquivo HTML típico :
- <!DOCTYPEhtml>
- <html>
- <cabeça>
- <title> Modelo do Bootstrap 101 </title>
- </head>
- <corpo>
- <h1> Olá, mundo! </h1>
- <script src = "https://code.jquery.com/jquery-latest.js" ></script>
- </body>
- </html>
Para torná-lo um modelo Bootstrapped , basta incluir os arquivos CSS e JS apropriados:
- <!DOCTYPEhtml>
- <html>
- <cabeça>
- <title> Modelo do Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "css/bootstrap.min.css" rel = "folha de estilo" >
- </head>
- <corpo>
- <h1> Olá, mundo! </h1>
- <script src = "https://code.jquery.com/jquery-latest.js" ></script>
- <script src = "js/bootstrap.min.js" ></script>
- </body>
- </html>
E você está pronto! Com esses dois arquivos adicionados, você pode começar a desenvolver qualquer site ou aplicativo com o Bootstrap.
Vá além do modelo base com alguns layouts de exemplo. Incentivamos as pessoas a repetir esses exemplos e não simplesmente usá-los como resultado final.
Apresentando uma unidade de herói para uma mensagem principal e três elementos de apoio.
Usa nosso novo sistema de grade fluida e responsivo para criar um layout líquido perfeito.
Um documento HTML básico com todo o CSS e javascript do Bootstrap incluídos.
Vá para os documentos para obter informações, exemplos e trechos de código, ou dê o próximo passo e personalize o Bootstrap para qualquer projeto futuro.
Visite os documentos do Bootstrap Personalizar Bootstrap