Source

Aproximación

Aprende sobre os principios reitores, as estratexias e as técnicas utilizadas para crear e manter Bootstrap para que poidas personalizalo e amplialo máis facilmente.

Aínda que as páxinas de inicio ofrecen un percorrido introductorio do proxecto e do que ofrece, este documento céntrase en por que facemos as cousas que facemos en Bootstrap. Explica a nosa filosofía de construír na web para que outros poidan aprender de nós, contribuír connosco e axudarnos a mellorar.

Ves algo que non soa ben, ou quizais se podería facer mellor? Abre un problema : encantaríanos discutilo contigo.

Resumo

Afondaremos máis en cada un destes ao longo do tempo, pero a un alto nivel, aquí tes o que guía o noso enfoque.

  • Os compoñentes deben ser sensibles e en primeiro lugar para móbiles
  • Os compoñentes deben construírse cunha clase base e ampliarse mediante clases modificadoras
  • Os estados dos compoñentes deben obedecer a unha escala de índice z común
  • Sempre que sexa posible, prefire unha implementación HTML e CSS sobre JavaScript
  • Sempre que sexa posible, use utilidades sobre estilos personalizados
  • Sempre que sexa posible, evite facer cumprir requisitos HTML estritos (selectores de nenos)

Sensible

Os estilos de resposta de Bootstrap están deseñados para ser receptivos, un enfoque ao que se adoita chamar primeiro móbil . Usamos este termo nos nosos documentos e estamos moi de acordo con el, pero ás veces pode ser demasiado amplo. Aínda que non todos os compoñentes deben ser totalmente sensibles en Bootstrap, este enfoque sensible consiste en reducir as anulacións de CSS empurrandoche a engadir estilos a medida que a ventana gráfica se fai máis grande.

En Bootstrap, verás isto máis claramente nas nosas consultas de medios. Na maioría dos casos, utilizamos min-widthconsultas que comezan a aplicarse nun punto de interrupción específico e continúan a través dos puntos de interrupción máis altos. Por exemplo, a .d-noneaplícase desde min-width: 0o infinito. Por outra banda, a .d-md-noneaplícase a partir do punto de interrupción medio e cara arriba.

Ás veces usaremos max-widthcando a complexidade inherente dun compoñente o requira. Ás veces, estas anulacións son funcional e mentalmente máis claras de implementar e apoiar que reescribir a funcionalidade básica dos nosos compoñentes. Esforzámonos por limitar este enfoque, pero empregarémolo de cando en vez.

Clases

Ademais do noso Reinicio, unha folla de estilo de normalización entre navegadores, todos os nosos estilos teñen como obxectivo usar clases como selectores. Isto significa afastarse dos selectores de tipo (por exemplo, input[type="text"]) e das clases parentais estrañas (por exemplo, .parent .child) que fan que os estilos sexan demasiado específicos para anular facilmente.

Polo tanto, os compoñentes deberían construírse cunha clase base que alberge pares de propiedades-valor comúns que non se deben anular. Por exemplo, .btne .btn-primary. Usamos .btnpara todos os estilos comúns como display, padding, e border-width. Despois usamos modificadores como .btn-primaryengadir a cor, a cor de fondo, a cor do bordo, etc.

As clases modificadoras só deben usarse cando hai varias propiedades ou valores que se deben cambiar en varias variantes. Os modificadores non sempre son necesarios, así que asegúrate de gardar liñas de código e de evitar substitucións innecesarias ao crealas. Bos exemplos de modificadores son as nosas clases de cores do tema e as variantes de tamaño.

escalas de índice z

Hai dúas z-indexescalas en Bootstrap: elementos dentro dun compoñente e compoñentes de superposición.

Elementos compoñentes

  • Algúns compoñentes en Bootstrap están construídos con elementos superpostos para evitar bordos dobres sen modificar a borderpropiedade. Por exemplo, grupos de botóns, grupos de entrada e paxinación.
  • z-indexEstes compoñentes comparten unha escala estándar de 0ata 3.
  • 0é predeterminado (inicial), 1é :hover, 2é :active/ .activee , 3é :focus.
  • Este enfoque coincide coas nosas expectativas de máxima prioridade do usuario. Se un elemento está enfocado, está á vista e á atención do usuario. Os elementos activos son os segundos máis altos porque indican estado. Pasa o rato é o terceiro máis alto porque indica a intención do usuario, pero pódese pasar case calquera cousa .

Compoñentes de superposición

Bootstrap inclúe varios compoñentes que funcionan como superposición dalgún tipo. Isto inclúe, por orde de maior z-index, menús despregables, barras de navegación fixas e adhesivas, modais, informacións sobre ferramentas e popovers. Estes compoñentes teñen a súa propia z-indexescala que comeza en 1000. Este número inicial é aleatorio e serve como un pequeno búfer entre os nosos estilos e os estilos personalizados do teu proxecto.

Cada compoñente de superposición aumenta z-indexlixeiramente o seu valor de tal xeito que os principios comúns da IU permiten que os elementos centrados no usuario ou sobre o rato permanezan á vista en todo momento. Por exemplo, un modal é o bloqueo de documentos (por exemplo, non podes realizar ningunha outra acción salvo a acción do modal), polo que poñémolo enriba das nosas barras de navegación.

Máis información sobre isto na nosa z-indexpáxina de deseño .

HTML e CSS sobre JS

Sempre que sexa posible, preferimos escribir HTML e CSS sobre JavaScript. En xeral, HTML e CSS son máis prolíficos e accesibles para máis persoas de todos os niveis de experiencia. HTML e CSS tamén son máis rápidos no teu navegador que JavaScript e, en xeral, o teu navegador ofrece unha gran cantidade de funcionalidades para ti.

dataEste principio son os nosos atributos da API de JavaScript de primeira clase . Non necesitas escribir case ningún JavaScript para usar os nosos complementos de JavaScript; en cambio, escribe HTML. Lea máis sobre isto na nosa páxina de descrición xeral de JavaScript .

Por último, os nosos estilos baséanse nos comportamentos fundamentais dos elementos web comúns. Sempre que sexa posible, preferimos utilizar o que proporciona o navegador. Por exemplo, pode poñer unha .btnclase en case calquera elemento, pero a maioría dos elementos non proporcionan ningún valor semántico nin funcionalidade do navegador. Polo tanto, usamos <button>s e <a>s.

O mesmo ocorre cos compoñentes máis complexos. Aínda que poderiamos escribir o noso propio complemento de validación de formularios para engadir clases a un elemento principal en función do estado dunha entrada, permitíndonos así poñer un estilo ao texto en vermello, preferimos usar os pseudoelementos :valid/ que nos proporciona cada navegador.:invalid

Utilidades

As clases de utilidade (antes axudantes de Bootstrap 3) son un poderoso aliado para combater o inchazo de CSS e o mal rendemento da páxina. Unha clase de utilidade adoita ser unha parella única e inmutable de valor-propiedade expresada como unha clase (por exemplo, .d-blockrepresenta display: block;). O seu atractivo principal é a velocidade de uso ao escribir HTML e limitar a cantidade de CSS personalizado que tes que escribir.

Específicamente no que se refire a CSS personalizado, as utilidades poden axudar a combater o aumento do tamaño do ficheiro reducindo os pares de valores de propiedade máis repetidos en clases únicas. Isto pode ter un efecto dramático a escala nos teus proxectos.

HTML flexible

Aínda que non sempre é posible, esforzámonos por evitar ser demasiado dogmáticos nos nosos requisitos HTML para compoñentes. Así, centrámonos nas clases individuais nos nosos selectores CSS e tentamos evitar os selectores fillos inmediatos ( >). Isto ofrécelle máis flexibilidade na implementación e axuda a que o noso CSS sexa máis sinxelo e menos específico.