Approcher
Découvrez les principes directeurs, les stratégies et les techniques utilisées pour créer et maintenir Bootstrap afin de pouvoir le personnaliser et l'étendre plus facilement vous-même.
Alors que les pages de démarrage fournissent une présentation du projet et de ce qu'il offre, ce document se concentre sur les raisons pour lesquelles nous faisons les choses que nous faisons dans Bootstrap. Il explique notre philosophie de construction sur le Web afin que d'autres puissent apprendre de nous, contribuer avec nous et nous aider à nous améliorer.
Vous voyez quelque chose qui ne sonne pas bien ou qui pourrait peut-être être mieux fait ? Ouvrez un problème - nous serions ravis d'en discuter avec vous.
Nous allons plonger dans chacun de ces éléments plus en détail, mais à un niveau élevé, voici ce qui guide notre approche.
- Les composants doivent être réactifs et mobiles d'abord
- Les composants doivent être construits avec une classe de base et étendus via des classes de modificateurs
- Les états des composants doivent obéir à une échelle d'index z commune
- Dans la mesure du possible, préférez une implémentation HTML et CSS à JavaScript
- Dans la mesure du possible, utilisez des utilitaires plutôt que des styles personnalisés
- Dans la mesure du possible, évitez d'appliquer des exigences HTML strictes (sélecteurs enfants)
Les styles réactifs de Bootstrap sont conçus pour être réactifs, une approche souvent appelée mobile-first . Nous utilisons ce terme dans nos documents et sommes largement d'accord avec lui, mais il peut parfois être trop large. Bien que tous les composants ne doivent pas être entièrement réactifs dans Bootstrap, cette approche réactive consiste à réduire les remplacements CSS en vous poussant à ajouter des styles à mesure que la fenêtre d'affichage s'agrandit.
Dans Bootstrap, vous le verrez plus clairement dans nos requêtes multimédias. Dans la plupart des cas, nous utilisons des min-widthrequêtes qui commencent à s'appliquer à un point d'arrêt spécifique et se poursuivent jusqu'aux points d'arrêt supérieurs. Par exemple, a .d-nones'applique de min-width: 0à l'infini. D'autre part, a .d-md-nones'applique à partir du point d'arrêt moyen et plus.
Parfois, nous l'utiliserons max-widthlorsque la complexité inhérente d'un composant l'exige. Parfois, ces remplacements sont fonctionnellement et mentalement plus clairs à mettre en œuvre et à prendre en charge que la réécriture des fonctionnalités de base de nos composants. Nous nous efforçons de limiter cette approche, mais nous l'utiliserons de temps à autre.
Mis à part notre Reboot, une feuille de style de normalisation inter-navigateurs, tous nos styles visent à utiliser des classes comme sélecteurs. Cela signifie éviter les sélecteurs de type (par exemple, input[type="text"]) et les classes parentes superflues (par exemple, .parent .child) qui rendent les styles trop spécifiques pour être facilement remplacés.
En tant que tels, les composants doivent être construits avec une classe de base qui héberge des paires propriété-valeur communes, qui ne doivent pas être remplacées. Par exemple, .btnet .btn-primary. Nous utilisons .btnpour tous les styles courants tels que display, paddinget border-width. Nous utilisons ensuite des modificateurs comme .btn-primarypour ajouter la couleur, la couleur de fond, la couleur de bordure, etc.
Les classes de modificateurs ne doivent être utilisées que lorsqu'il existe plusieurs propriétés ou valeurs à modifier dans plusieurs variantes. Les modificateurs ne sont pas toujours nécessaires, alors assurez-vous que vous enregistrez réellement des lignes de code et évitez les remplacements inutiles lors de leur création. De bons exemples de modificateurs sont nos classes de couleurs thématiques et nos variantes de taille.
Il existe deux z-indexéchelles dans Bootstrap : les éléments d'un composant et les composants superposés.
- Certains composants de Bootstrap sont construits avec des éléments qui se chevauchent pour éviter les doubles bordures sans modifier la
borderpropriété. Par exemple, les groupes de boutons, les groupes d'entrée et la pagination. - Ces composants partagent une
z-indexéchelle standard de0à3. 0est par défaut (initial),1est:hover,2est:active/.activeet ,3est:focus.- Cette approche correspond à nos attentes de la plus haute priorité des utilisateurs. Si un élément est ciblé, il est visible et à l'attention de l'utilisateur. Les éléments actifs viennent au deuxième rang car ils indiquent l'état. Le survol est le troisième plus élevé car il indique l'intention de l'utilisateur, mais presque tout peut être survolé.
Bootstrap comprend plusieurs composants qui fonctionnent comme une sorte de superposition. Cela inclut, par ordre z-indexdécroissant, les listes déroulantes, les barres de navigation fixes et collantes, les modaux, les info-bulles et les popovers. Ces composants ont leur propre z-indexéchelle qui commence à 1000. Ce numéro de départ est aléatoire et sert de petit tampon entre nos styles et les styles personnalisés de votre projet.
Chaque composant de superposition augmente z-indexlégèrement sa valeur de telle sorte que les principes communs de l'interface utilisateur permettent aux éléments ciblés ou survolés par l'utilisateur de rester visibles à tout moment. Par exemple, un modal bloque un document (par exemple, vous ne pouvez pas effectuer d'autre action que l'action du modal), nous le plaçons donc au-dessus de nos barres de navigation.
En savoir plus à ce sujet dans notre page de z-indexmise en page .
Dans la mesure du possible, nous préférons écrire HTML et CSS plutôt que JavaScript. En général, HTML et CSS sont plus prolifiques et accessibles à un plus grand nombre de personnes de tous niveaux d'expérience. HTML et CSS sont également plus rapides dans votre navigateur que JavaScript, et votre navigateur vous offre généralement de nombreuses fonctionnalités.
Ce principe est notre API JavaScript de première classe est des dataattributs. Vous n'avez pas besoin d'écrire presque n'importe quel JavaScript pour utiliser nos plugins JavaScript ; à la place, écrivez HTML. En savoir plus à ce sujet dans notre page de présentation JavaScript .
Enfin, nos styles s'appuient sur les comportements fondamentaux des éléments Web courants. Dans la mesure du possible, nous préférons utiliser ce que le navigateur fournit. Par exemple, vous pouvez mettre une .btnclasse sur presque n'importe quel élément, mais la plupart des éléments ne fournissent aucune valeur sémantique ou fonctionnalité de navigateur. Donc, à la place, nous utilisons <button>s et <a>s.
Il en va de même pour les composants plus complexes. Bien que nous puissions écrire notre propre plugin de validation de formulaire pour ajouter des classes à un élément parent en fonction de l'état d'une entrée, nous permettant ainsi de styliser le texte, disons rouge, nous préférons utiliser les pseudo-éléments :valid/ que :invalidchaque navigateur nous fournit.
Les classes utilitaires - anciennement assistantes dans Bootstrap 3 - sont un allié puissant dans la lutte contre le gonflement CSS et les mauvaises performances des pages. Une classe utilitaire est généralement une paire propriété-valeur unique et immuable exprimée sous la forme d'une classe (par exemple, .d-blockreprésente display: block;). Leur principal attrait est la rapidité d'utilisation lors de l'écriture de code HTML et la limitation de la quantité de CSS personnalisés que vous devez écrire.
En ce qui concerne spécifiquement le CSS personnalisé, les utilitaires peuvent aider à lutter contre l'augmentation de la taille des fichiers en réduisant vos paires propriété-valeur les plus fréquemment répétées en classes uniques. Cela peut avoir un effet dramatique à grande échelle dans vos projets.
Bien que ce ne soit pas toujours possible, nous nous efforçons d'éviter d'être trop dogmatiques dans nos exigences HTML pour les composants. Ainsi, nous nous concentrons sur des classes uniques dans nos sélecteurs CSS et essayons d'éviter les sélecteurs enfants immédiats ( >). Cela vous donne plus de flexibilité dans votre implémentation et aide à garder notre CSS plus simple et moins spécifique.