Etiam porta sem maleuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Bootstrap é um kit de ferramentas do Twitter projetado para iniciar o desenvolvimento de aplicativos e sites da web.
Inclui CSS e HTML básicos para tipografia, formulários, botões, tabelas, grades, navegação e muito mais.
Alerta de Nerd: Bootstrap é construído com Less e foi projetado para funcionar com navegadores modernos em mente.
Para um início mais rápido e fácil, basta copiar este snippet em sua página da web.
Um fã de usar menos? Sem problemas, basta clonar o repositório e adicionar estas linhas:
Faça download, fork, pull, problemas de arquivo e muito mais com o repositório oficial do Bootstrap no Github.
Atualmente v1.3.0
Os engenheiros do Twitter historicamente usaram quase todas as bibliotecas com as quais estavam familiarizados para atender aos requisitos de front-end. Bootstrap começou como uma resposta aos desafios que se apresentavam. Com a ajuda de muitas pessoas incríveis, o Bootstrap cresceu significativamente.
Leia mais em dev.twitter.com ›
O Bootstrap é testado e suportado nos principais navegadores modernos, como Chrome, Safari, Internet Explorer e Firefox.
Bootstrap vem completo com CSS compilado, não compilado e templates de exemplo.
O sistema de grade padrão fornecido como parte do Bootstrap é uma grade de 16 colunas de 940px de largura. É um sabor do popular sistema de grade 960, mas sem a margem/preenchimento adicional nos lados esquerdo e direito.
Conforme mostrado aqui, um layout básico pode ser criado com duas "colunas", cada uma abrangendo um número das 16 colunas fundamentais que definimos como parte de nosso sistema de grade. Veja os exemplos abaixo para mais variações.
- <div class = "linha" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Aninhe seu conteúdo, se necessário, criando um .row
dentro de uma coluna existente.
- <div class = "linha" >
- <div class = "span12" >
- Nível 1 da coluna
- <div class = "linha" >
- <div class = "span6" >
- Nível 2
- </div>
- <div class = "span6" >
- Nível 2
- </div>
- </div>
- </div>
- </div>
Construído no Bootstrap há um punhado de variáveis para personalizar o sistema de grade padrão de 940px. Com um pouco de personalização, você pode modificar o tamanho das colunas, suas calhas e o contêiner em que residem.
As variáveis necessárias para modificar o sistema de grade atualmente residem em preboot.less
.
Variável | Valor padrão | Descrição |
---|---|---|
@gridColumns |
16 | O número de colunas dentro da grade |
@gridColumnWidth |
40px | A largura de cada coluna dentro da grade |
@gridGutterWidth |
20px | O espaço negativo entre cada coluna |
@siteWidth |
Soma calculada de todas as colunas e calhas | Usamos algumas correspondências básicas para contar o número de colunas e medianizes e definir a largura do .fixed-container() mixin. |
Modificar a grade significa alterar as três @grid-*
variáveis e recompilar os arquivos Less.
O Bootstrap vem equipado para lidar com um sistema de grade com até 24 colunas; o padrão é apenas 16. Veja como suas variáveis de grade ficariam personalizadas para uma grade de 24 colunas.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Uma vez recompilado, você estará pronto!
O layout centralizado padrão e simples de 940px de largura para praticamente qualquer site ou página fornecido por um único arquivo <div.container>
.
- <corpo>
- <div class = "contêiner" >
- ...
- </div>
- </body>
Uma estrutura de página fluida alternativa e flexível com larguras mínima e máxima e uma barra lateral esquerda. Ótimo para aplicativos e documentos.
- <corpo>
- <div class = "contêiner-fluido" >
- <div class = "barra lateral" >
- ...
- </div>
- <div class = "conteúdo" >
- ...
- </div>
- </div>
- </body>
Uma hierarquia tipográfica padrão para estruturar suas páginas da web.
Toda a grade tipográfica é baseada em duas variáveis Less em nosso arquivo preboot.less: @basefont
e @baseline
. O primeiro é o tamanho da fonte base usado e o segundo é a altura da linha base.
Usamos essas variáveis e um pouco de matemática para criar as margens, preenchimentos e alturas de linha de todos os nossos tipos e muito mais.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Usando ênfase, endereços e abreviaturas
<strong>
<em>
<address>
<abbr>
As etiquetas de ênfase ( <strong>
e <em>
) devem ser usadas para indicar importância ou ênfase adicional de uma palavra ou frase em relação à sua cópia circundante. Use <strong>
para importância e ênfase <em>
de estresse .
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Nota: Ainda não há problema em usar tags <b>
e <i>
em HTML5 e elas não precisam ser estilizadas em negrito e itálico, respectivamente (embora, se houver um elemento mais semântico, use-o). <b>
destina-se a destacar palavras ou frases sem transmitir importância adicional, enquanto <i>
é principalmente para voz, termos técnicos, etc.
O <address>
elemento é usado para informações de contato de seu ancestral mais próximo ou de todo o trabalho. Aqui estão dois exemplos de como ele pode ser usado:
Observação: cada linha em um <address>
deve terminar com uma quebra de linha ( <br />
) ou ser envolvida em uma tag de nível de bloco (por exemplo, <p>
) para estruturar adequadamente o conteúdo.
Para abreviaturas e siglas, use a <abbr>
tag ( <acronym>
está obsoleta em HTML5 ). Coloque o formulário abreviado dentro da tag e defina um título para o nome completo.
<blockquote>
<p>
<small>
<blockquote>
Para incluir uma citação em bloco, envolva <p>
e <small>
tags. Use o <small>
elemento para citar sua fonte e você receberá um travessão —
antes dela.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Júlio Hibbert
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Dr. Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Pimp seu código em grande estilo com duas tags simples. Para ainda mais grandiosidade através do javascript, acesse a biblioteca de embelezamento de código do Google e pronto.
Código, blocos ou apenas snippets inline, podem ser exibidos com estilo apenas envolvendo a tag correta. Para blocos de código que abrangem várias linhas, use o <pre>
elemento. Para código embutido, use o <code>
elemento.
Elemento | Resultado |
---|---|
<code> |
Em uma linha de texto como esta, seu código encapsulado se parecerá com este >html< elemento. |
<pre> |
<div> <h1>Título</h1> <p>Algo aqui...</p> </div> Nota: Certifique-se de manter o código dentro das |
<pre class="prettyprint"> |
Usando a biblioteca google-code-prettify, seus blocos de código obtêm um estilo visual ligeiramente diferente e realce automático de sintaxe. <div> <h1> Título </h1> <p> Algo bem aqui... </p> </div> Baixe google-code-prettify e veja o leia-me de como usar. |
<span class="label">
Chame a atenção ou sinalize qualquer frase no corpo do texto.
Já precisou de um desses novos! ou sinalizadores importantes ao escrever código? Bem, agora você os tem. Aqui está o que está incluído por padrão:
Etiqueta | Resultado |
---|---|
<span class="label">Default</span> |
Predefinição |
<span class="label success">New</span> |
Novo |
<span class="label warning">Warning</span> |
Aviso |
<span class="label important">Important</span> |
Importante |
<span class="label notice">Notice</span> |
Perceber |
Exiba miniaturas de tamanhos variados em páginas com pouca pegada HTML e estilos mínimos.
As miniaturas .media-grid
podem ser de qualquer tamanho, mas funcionam melhor quando mapeadas diretamente para o sistema de grade Bootstrap integrado. Larguras de imagem como 90, 210 e 330 combinam com alguns pixels de preenchimento para igualar os tamanhos das colunas .span2
, .span4
e ..span6
As grades de mídia são fáceis de usar e bastante simples no lado da marcação. Suas dimensões são puramente baseadas no tamanho das imagens incluídas.
- <ul class = "media-grid" >
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
As mesas são ótimas – para muitas coisas. Grandes tabelas, no entanto, precisam de um pouco de amor de marcação para serem úteis, escaláveis e legíveis (no nível do código). Aqui estão algumas dicas para ajudar.
Sempre envolva seus cabeçalhos de coluna de <thead>
forma que a hierarquia seja <thead>
> <tr>
> <th>
.
Semelhante aos cabeçalhos de coluna, todo o conteúdo do corpo da sua tabela deve ser agrupado em um <tbody>
para que sua hierarquia seja <tbody>
> <tr>
> <td>
.
Todas as tabelas serão estilizadas automaticamente com apenas as bordas essenciais para garantir a legibilidade e manter a estrutura. Não há necessidade de adicionar classes ou atributos extras.
# | Primeiro nome | Sobrenome | Linguagem |
---|---|---|---|
1 | Algum | Um | Inglês |
2 | João | Pacote de seis | Inglês |
3 | Stu | Dente | Código |
- <tabela>
- ...
- </table>
Fique um pouco extravagante com suas mesas adicionando listras de zebra - basta adicionar a .zebra-striped
classe.
# | Primeiro nome | Sobrenome | Linguagem |
---|---|---|---|
1 | Algum | Um | Inglês |
2 | João | Pacote de seis | Inglês |
3 | Stu | Dente | Código |
Observação: o Zebra-striping é um aprimoramento progressivo não disponível para navegadores mais antigos, como IE8 e anteriores.
- < classe de tabela = "com listras de zebra" >
- ...
- </table>
Tomando o exemplo anterior, melhoramos a utilidade de nossas tabelas fornecendo funcionalidade de classificação via jQuery e o plugin Tablesorter . Clique no cabeçalho de qualquer coluna para alterar a classificação.
# | Primeiro nome | Sobrenome | Linguagem |
---|---|---|---|
2 | João | Pacote de seis | Inglês |
3 | Stu | Dente | Código |
1 | Sua | Um | Inglês |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( função () {
- $ ( "table#sortTableExample" ). tableorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- < classe de tabela = "com listras de zebra" >
- ...
- </table>
Todos os formulários recebem estilos padrão para apresentá-los de maneira legível e escalável. Os estilos são fornecidos para entradas de texto, listas de seleção, áreas de texto, botões de opção e caixas de seleção e botões.
Adicione .form-stacked
ao HTML do seu formulário e você terá rótulos no topo de seus campos em vez de à esquerda. Isso funciona muito bem se seus formulários forem curtos ou se você tiver duas colunas de entradas para formulários mais pesados.
Personalize qualquer forma input
, select
ou textarea
largura adicionando apenas algumas classes à sua marcação.
A partir da v1.3.0, adicionamos as classes de dimensionamento baseadas em grade para elementos de formulário. Por favor, use estes sobre as classes existentes .mini
, .small
etc.
Como convenção, os botões são usados para ações enquanto os links são usados para objetos. Por exemplo, "Download" pode ser um botão e "atividade recente" pode ser um link.
Todos os botões são padronizados para um estilo cinza claro, mas várias classes funcionais podem ser aplicadas para diferentes estilos de cores. Essas classes incluem uma .primary
classe azul, uma classe azul claro .info
, uma classe verde .success
e uma classe vermelha .danger
.
Estilos de botão podem ser aplicados a qualquer coisa com o .btn
método aplicado. Normalmente, você desejará aplicá-los apenas a elementos <a>
, <button>
e select <input>
. Veja como fica:
Gosta de botões maiores ou menores? Têm-no!
Para botões que não estão ativos ou estão desabilitados pelo aplicativo por um motivo ou outro, use o estado desabilitado. Isso é .disabled
para links e :disabled
para <button>
elementos.
.alert-message
Mensagens de uma linha para destacar a falha, possível falha ou sucesso de uma ação. Particularmente útil para formulários.
- <div class = "aviso de mensagem de alerta" >
- <a class = "fechar" href = "#" > × </a>
- <p><strong> Santo guacamole! </strong> Melhor verificar você mesmo, você não está parecendo muito bem. </p>
- </div>
.alert-message.block-message
Para mensagens que exigem um pouco de explicação, temos alertas de estilo de parágrafo. Eles são perfeitos para borbulhar mensagens de erro mais longas, avisar um usuário sobre uma ação pendente ou apenas apresentar informações para dar mais ênfase à página.
- <div class = "alert-message block-message warning" >
- <a class = "fechar" href = "#" > × </a>
- <p><strong> Santo guacamole! Isso é um aviso! </strong> Melhor verificar você mesmo, você não está parecendo muito bem. Nulla vitae elit libero, a pharetra augue. Praesent comodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "alert-actions" >
- <a class = "btn small" href = "#" > Execute esta ação </a> <a class = "btn small" href = "#" > Ou faça isso </a>
- </div>
- </div>
Os modais—diálogos ou lightboxes—são ótimos para ações contextuais em situações em que é importante que o contexto de fundo seja mantido.
Um belo corpo…
Twipsies são super úteis para ajudar um usuário confuso e apontá-lo na direção certa.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quase odit aut natus conequuntur conequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.
Use popovers para fornecer informações subtextuais a uma página sem afetar o layout.
Etiam porta sem maleuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Integrar javascript com a biblioteca Bootstrap é super fácil. Abaixo, abordamos o básico e fornecemos alguns plugins incríveis para você começar!
Dê vida a alguns dos principais componentes do Bootstrap com novos plugins personalizados que funcionam com jQuery e Ender . Incentivamos você a ampliá-los e modificá-los para atender às suas necessidades específicas de desenvolvimento.
Arquivo | Descrição |
---|---|
bootstrap-modal.js | Nosso plugin Modal é uma versão super fina do plugin modal js tradicional! Tomamos um cuidado especial para incluir apenas a funcionalidade básica que exigimos no twitter. |
bootstrap-alerts.js | O plugin de alerta é uma classe super pequena para adicionar funcionalidade próxima aos alertas. |
bootstrap-dropdown.js | Este plug-in é para adicionar interação suspensa à barra superior de bootstrap ou às navegações com guias. |
bootstrap-scrollspy.js | O plugin ScrollSpy é para adicionar uma navegação de atualização automática com base na posição de rolagem na barra superior do bootstrap. |
bootstrap-tabs.js | Este plug-in adiciona a funcionalidade rápida e dinâmica de tabulação e pílula para percorrer o conteúdo local. |
bootstrap-twipsy.js | Baseado no excelente plugin jQuery.tipsy escrito por Jason Frame; Twipsy é uma versão atualizada, que não depende de imagens, usa css3 para animações e atributos de dados para armazenamento local de títulos! |
bootstrap-popover.js | O plugin popover fornece uma interface simples para adicionar popovers ao seu aplicativo. Ele estende o plugin boostrap-twipsy.js , então certifique-se de pegar esse arquivo também ao incluir popovers em seu projeto! |
Não! Bootstrap é projetado em primeiro lugar para ser uma biblioteca CSS. Este javascript fornece uma camada interativa básica sobre os estilos incluídos.
No entanto, para aqueles que precisam de javascript, fornecemos os plugins acima para ajudá-lo a entender como integrar o Bootstrap com javascript e fornecer uma opção rápida e leve para a funcionalidade básica imediatamente.
Para obter mais informações e ver algumas demonstrações ao vivo, consulte nossa página de documentação do plug-in .
Bootstrap foi construído com Preboot , um pacote de código aberto de mixins e variáveis para ser usado em conjunto com Less , um pré-processador CSS para desenvolvimento web mais rápido e fácil.
Confira como usamos o Preboot no Bootstrap e como você pode usá-lo caso opte por executar o Less em seu próximo projeto.
Use esta opção para fazer pleno uso das variáveis Less do Bootstrap, mixins e aninhamento em CSS via javascript em seu navegador.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
Não está sentindo a solução .js? Experimente o aplicativo Less Mac ou use o Node.js para compilar ao implantar seu código.
Aqui estão alguns dos destaques do que está incluído no Twitter Bootstrap como parte do Bootstrap. Acesse o site do Bootstrap ou a página do projeto Github para baixar e saber mais.
Variáveis em Less são perfeitas para manter e atualizar seu CSS sem dor de cabeça. Quando você quiser alterar um valor de cor ou um valor usado com frequência, atualize-o em um ponto e pronto.
- // Links
- @linkColor : #8b59c2;
- @linkColorHover : escurecer ( @linkColor , 10 );
- // Cinzas
- @preto : #000;
- @grayDark : clarear ( @black , 25 %);
- @gray : clarear ( @black , 50 %);
- @grayLight : clarear ( @black , 70 %);
- @grayLighter : clarear ( @black , 90 %);
- @branco : #fff;
- // Cores de destaque
- @azul : #08b5fb;
- @verde : #46a546;
- @red : #9d261d;
- @yellow : #ffc40d;
- @laranja : #f89406;
- @rosa : #c3325f;
- @roxo : #7a43b6;
- // Grade de linha de base
- @basefont : 13px ;
- @baseline : 18px ;
Less também fornece outro estilo de comentário além da /* ... */
sintaxe normal do CSS.
- // Este é um comentário
- /* Isso também é um comentário */
Mixins são basicamente includes ou parciais para CSS, permitindo que você combine um bloco de código em um. Eles são ótimos para propriedades prefixadas de fornecedores como box-shadow
, gradientes entre navegadores, pilhas de fontes e muito mais. Abaixo está uma amostra dos mixins incluídos no Bootstrap.
- #Fonte {
- . taquigrafia ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- tamanho da fonte : @size ;
- font - weight : @weight ;
- altura da linha : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- fonte - família : "Helvetica Neue " , Helvetica , Arial , sem serifa ;
- tamanho da fonte : @size ;
- font - weight : @weight ;
- altura da linha : @lineHeight ;
- }
- ...
- }
- #gradiente {
- ...
- . vertical ( @startColor : #555, @endColor: #333) {
- cor de fundo : @endColor ;
- background - repetir : repeat - x ;
- background - image : - khtml - gradiente ( linear , superior esquerdo , inferior esquerdo , de ( @startColor ), para ( @endColor )); // Konqueror
- background - imagem : - moz - linear - gradiente ( @startColor , @endColor ); // FF 3.6+
- background - imagem : - ms - linear - gradiente ( @startColor , @endColor ); // IE10
- background - imagem : - webkit - gradiente ( linear , superior esquerdo , inferior esquerdo , color - stop ( 0 %, @startColor ), color - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - imagem : - webkit - linear - gradiente ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - imagem : - o - linear - gradiente ( @startColor , @endColor ); // Ópera 11.10
- imagem de fundo : gradiente linear ( @startColor , @endColor ) ; // O padrão
- }
- ...
- }
Seja sofisticado e faça algumas contas para gerar mixins flexíveis e poderosos como o abaixo.
- // Grade
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Faz algumas colunas
- . colunas ( @columnSpan : 1 ) {
- largura : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Após modificar os .less
arquivos em /lib/, você precisará recompilá-los para gerar novamente os arquivos bootstrap-*.*.*.css e bootstrap-*.*.*.min.css. Se você estiver enviando uma solicitação de pull ao GitHub, sempre recompile.
Método | Passos |
---|---|
Nó com makefile | Instale o compilador de linha de comando less com npm executando o seguinte comando: $ npm instalar lessc Uma vez instalado, basta executar Além disso, se você tiver o watchr instalado, poderá executar |
Javascript | Baixe o Less.js mais recente e inclua o caminho para ele (e Bootstrap) no arquivo
Para recompilar os arquivos .less, basta salvá-los e recarregar sua página. Less.js os compila e os armazena no armazenamento local. |
Linha de comando | Se você já tiver a ferramenta de linha de comando less instalada, basta executar o seguinte comando: $ lessc ./lib/bootstrap.less > bootstrap.css Certifique-se de incluir |
Menos aplicativo para Mac | O aplicativo não oficial para Mac observa diretórios de arquivos .less e compila o código em arquivos locais após cada salvamento de um arquivo .less monitorado. Se desejar, você pode alternar as preferências no aplicativo para redução automática e em qual diretório os arquivos compilados terminam. |