Abordagem

Aprenda sobre os princípios orientadores, estratégias e técnicas usadas para criar e manter o Bootstrap para que você possa personalizá-lo e ampliá-lo com mais facilidade.

Enquanto as páginas de introdução fornecem um tour introdutório do projeto e o que ele oferece, este documento se concentra em por que fazemos as coisas que fazemos no Bootstrap. Ele explica nossa filosofia de construir na web para que outros possam aprender conosco, contribuir conosco e nos ajudar a melhorar.

Vê algo que não soa bem, ou talvez pudesse ser feito melhor? Abra um problema — adoraríamos discuti-lo com você.

Resumo

Vamos nos aprofundar em cada um deles, mas em alto nível, aqui está o que orienta nossa abordagem.

• Os componentes devem ser responsivos e mobile-first
• Os componentes devem ser construídos com uma classe base e estendidos por meio de classes modificadoras
• Os estados dos componentes devem obedecer a uma escala de índice z comum
• Sempre que possível, prefira uma implementação HTML e CSS em vez de JavaScript
• Sempre que possível, use utilitários em estilos personalizados
• Sempre que possível, evite impor requisitos HTML rígidos (seletores filhos)

Responsivo

Os estilos responsivos do Bootstrap são desenvolvidos para serem responsivos, uma abordagem que é frequentemente chamada de mobile-first . Usamos esse termo em nossos documentos e concordamos amplamente com ele, mas às vezes pode ser muito amplo. Embora nem todos os componentes devam ser totalmente responsivos no Bootstrap, essa abordagem responsiva trata de reduzir as substituições de CSS, forçando você a adicionar estilos à medida que a janela de visualização se torna maior.

No Bootstrap, você verá isso mais claramente em nossas consultas de mídia. Na maioria dos casos, usamos min-widthconsultas que começam a ser aplicadas em um ponto de interrupção específico e continuam até os pontos de interrupção mais altos. Por exemplo, a .d-nonese aplica de min-width: 0até infinito. Por outro lado, a .d-md-nonese aplica a partir do ponto de interrupção médio para cima.

Às vezes, usaremos max-widthquando a complexidade inerente de um componente exigir. Às vezes, essas substituições são funcional e mentalmente mais claras para implementar e suportar do que reescrever a funcionalidade principal de nossos componentes. Nós nos esforçamos para limitar essa abordagem, mas a usaremos de tempos em tempos.

Aulas

Além de nosso Reboot, uma folha de estilo de normalização entre navegadores, todos os nossos estilos visam usar classes como seletores. Isso significa evitar seletores de tipo (por exemplo, input[type="text"]) e classes pai estranhas (por exemplo, .parent .child) que tornam os estilos muito específicos para serem substituídos facilmente.

Como tal, os componentes devem ser construídos com uma classe base que abrigue pares de valor de propriedade comuns, que não devem ser substituídos. Por exemplo, .btne .btn-primary. Usamos .btnpara todos os estilos comuns como display, paddinge border-width. Em seguida, usamos modificadores como .btn-primaryadicionar a cor, a cor do plano de fundo, a cor da borda etc.

As classes modificadoras só devem ser usadas quando houver várias propriedades ou valores a serem alterados em várias variantes. Os modificadores nem sempre são necessários, portanto, certifique-se de realmente salvar linhas de código e evitar substituições desnecessárias ao criá-las. Bons exemplos de modificadores são nossas classes de cores temáticas e variantes de tamanho.

escalas de índice z

Existem duas z-indexescalas no Bootstrap - elementos dentro de um componente e componentes de sobreposição.

Elementos componentes

• Alguns componentes no Bootstrap são construídos com elementos sobrepostos para evitar bordas duplas sem modificar a borderpropriedade. Por exemplo, grupos de botões, grupos de entrada e paginação.
• Esses componentes compartilham uma z-indexescala padrão de 0até 3.
• 0é padrão (inicial), 1é :hover, 2é :active/ .activee , 3é :focus.
• Essa abordagem corresponde às nossas expectativas de maior prioridade do usuário. Se um elemento está focado, está à vista e à atenção do usuário. Os elementos ativos são os segundos mais altos porque indicam o estado. Passe o mouse é o terceiro mais alto porque indica a intenção do usuário, mas quase tudo pode ser passado.

Componentes de sobreposição

Bootstrap inclui vários componentes que funcionam como uma sobreposição de algum tipo. Isso inclui, em ordem de maior z-index, dropdowns, navbars fixos e fixos, modais, dicas de ferramentas e popovers. Esses componentes têm sua própria z-indexescala que começa em 1000. Esse número inicial é aleatório e serve como um pequeno buffer entre nossos estilos e os estilos personalizados do seu projeto.

Cada componente de sobreposição aumenta z-indexligeiramente seu valor de forma que os princípios comuns de interface do usuário permitem que os elementos focados no usuário ou em foco permaneçam sempre visíveis. Por exemplo, um modal é um bloqueio de documento (por exemplo, você não pode realizar nenhuma outra ação exceto a ação do modal), então colocamos isso acima de nossas barras de navegação.

Saiba mais sobre isso em nossa z-indexpágina de layout .

HTML e CSS sobre JS

Sempre que possível, preferimos escrever HTML e CSS em vez de JavaScript. Em geral, HTML e CSS são mais prolíficos e acessíveis a mais pessoas com diferentes níveis de experiência. HTML e CSS também são mais rápidos em seu navegador do que JavaScript, e seu navegador geralmente oferece muitas funcionalidades para você.

Este princípio é nossa API JavaScript de primeira classe em dataatributos. Você não precisa escrever quase nenhum JavaScript para usar nossos plugins JavaScript; em vez disso, escreva HTML. Leia mais sobre isso em nossa página de visão geral do JavaScript .

Por fim, nossos estilos se baseiam nos comportamentos fundamentais de elementos comuns da web. Sempre que possível, preferimos usar o que o navegador oferece. Por exemplo, você pode colocar uma .btnclasse em praticamente qualquer elemento, mas a maioria dos elementos não fornece nenhum valor semântico ou funcionalidade do navegador. Então, em vez disso, usamos <button>s e <a>s.

O mesmo vale para componentes mais complexos. Embora possamos escrever nosso próprio plug-in de validação de formulário para adicionar classes a um elemento pai com base no estado de uma entrada, permitindo-nos estilizar o texto como vermelho, preferimos usar os pseudo-elementos :valid/ que todos os navegadores nos fornecem.:invalid

Serviços de utilidade pública

Classes utilitárias - anteriormente auxiliares no Bootstrap 3 - são um poderoso aliado no combate ao inchaço CSS e ao baixo desempenho da página. Uma classe de utilidade é tipicamente um único par de valor de propriedade imutável expresso como uma classe (por exemplo, .d-blockrepresenta display: block;). Seu principal apelo é a velocidade de uso ao escrever HTML e limitar a quantidade de CSS personalizado que você precisa escrever.

Especificamente em relação ao CSS personalizado, os utilitários podem ajudar a combater o aumento do tamanho do arquivo, reduzindo seus pares de propriedade-valor mais comumente repetidos em classes únicas. Isso pode ter um efeito dramático em escala em seus projetos.

HTML flexível

Embora nem sempre seja possível, nos esforçamos para evitar ser excessivamente dogmáticos em nossos requisitos de HTML para componentes. Assim, focamos em classes únicas em nossos seletores CSS e tentamos evitar seletores filhos imediatos ( >). Isso lhe dá mais flexibilidade em sua implementação e ajuda a manter nosso CSS mais simples e menos específico.