Source

Nadering

Lees meer over de leidende principes, strategieën en technieken die worden gebruikt om Bootstrap te bouwen en te onderhouden, zodat u het gemakkelijker zelf kunt aanpassen en uitbreiden.

Hoewel de pagina's 'Aan de slag' een inleidende rondleiding geven door het project en wat het biedt, richt dit document zich op waarom we de dingen doen die we doen in Bootstrap. Het legt onze filosofie uit om op het web te bouwen, zodat anderen van ons kunnen leren, met ons kunnen bijdragen en ons kunnen helpen verbeteren.

Zie je iets dat niet goed klinkt, of misschien beter kan? Open een probleem — we willen het graag met u bespreken.

Overzicht

We zullen in elk van deze meer ingaan, maar op een hoog niveau, dit is wat onze aanpak leidt.

  • Componenten moeten responsive en mobile-first zijn
  • Componenten moeten worden gebouwd met een basisklasse en worden uitgebreid via modificatieklassen
  • Componentstatussen moeten voldoen aan een algemene z-indexschaal
  • Geef waar mogelijk de voorkeur aan een HTML- en CSS-implementatie boven JavaScript
  • Gebruik waar mogelijk hulpprogramma's in plaats van aangepaste stijlen
  • Vermijd waar mogelijk het afdwingen van strikte HTML-vereisten (children selectors)

Snel reagerend

De responsieve stijlen van Bootstrap zijn gebouwd om responsief te zijn, een benadering die vaak wordt aangeduid als mobile-first . We gebruiken deze term in onze documenten en zijn het er grotendeels mee eens, maar soms kan deze te breed zijn. Hoewel niet elk onderdeel volledig responsief hoeft te zijn in Bootstrap, gaat deze responsieve benadering over het verminderen van CSS-overschrijvingen door u ertoe aan te zetten stijlen toe te voegen naarmate de viewport groter wordt.

Bij Bootstrap zie je dit het duidelijkst in onze mediaquery's. In de meeste gevallen gebruiken we min-widthquery's die van toepassing zijn op een specifiek breekpunt en doorgaan naar de hogere breekpunten. A geldt bijvoorbeeld .d-nonevan min-width: 0tot oneindig. Aan de andere kant is a .d-md-nonevan toepassing vanaf het gemiddelde breekpunt en hoger.

Soms gebruiken we max-widthwanneer de inherente complexiteit van een component dit vereist. Soms zijn deze overschrijvingen functioneel en mentaal duidelijker te implementeren en te ondersteunen dan de kernfunctionaliteit van onze componenten te herschrijven. We streven ernaar deze aanpak te beperken, maar zullen deze van tijd tot tijd gebruiken.

Klassen

Afgezien van onze Reboot, een cross-browser normalisatie-stylesheet, zijn al onze stijlen erop gericht om klassen als selectors te gebruiken. Dit betekent dat je uit de buurt moet blijven van typeselectors (bijv. input[type="text"]) en vreemde bovenliggende klassen (bijv. .parent .child) die stijlen te specifiek maken om gemakkelijk te overschrijven.

Als zodanig moeten componenten worden gebouwd met een basisklasse die gemeenschappelijke, niet-overschreven eigenschap-waardeparen bevat. Bijvoorbeeld, .btnen .btn-primary. We gebruiken .btnvoor alle gangbare stijlen zoals display, padding, en border-width. We gebruiken dan modifiers zoals .btn-primaryhet toevoegen van de kleur, achtergrondkleur, randkleur, enz.

Modifier-klassen mogen alleen worden gebruikt als er meerdere eigenschappen of waarden voor meerdere varianten moeten worden gewijzigd. Modifiers zijn niet altijd nodig, dus zorg ervoor dat u regels code daadwerkelijk opslaat en onnodige overschrijvingen voorkomt bij het maken ervan. Goede voorbeelden van modifiers zijn onze themakleurklassen en maatvarianten.

z-index schalen

Er zijn twee z-indexschalen in Bootstrap: elementen binnen een component en overlaycomponenten.

Component elementen

  • Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the border property. For example, button groups, input groups, and pagination.
  • These components share a standard z-index scale of 0 through 3.
  • 0 is default (initial), 1 is :hover, 2 is :active/.active, and , 3 is :focus.
  • This approach matches our expectations of highest user priority. If an element is focused, it’s in view and at the user’s attention. Active elements are second highest because they indicate state. Hover is third highest because it indicates user intent, but nearly anything can be hovered.

Overlay components

Bootstrap includes several components that function as an overlay of some kind. This includes, in order of highest z-index, dropdowns, fixed and sticky navbars, modals, tooltips, and popovers. These components have their own z-index scale that begins at 1000. This starting number is random and serves as a small buffer between our styles and your project’s custom styles.

Each overlay component increases it’s z-index value slightly in such a way that common UI principles allow user focused or hovered elements to remain in view at all times. For example, a modal is document blocking (e.g., you cannot take any other action save for the modal’s action), so we put that above our navbars.

Learn more about this in our z-index layout page.

HTML and CSS over JS

Whenever possible, we prefer to write HTML and CSS over JavaScript. In general, HTML and CSS are more prolific and accessible to more people of all different experience levels. HTML and CSS are also faster in your browser than JavaScript, and your browser generally provides a great deal of functionality for you.

This principle is our first-class JavaScript API is data attributes. You don’t need to write nearly any JavaScript to use our JavaScript plugins; instead, write HTML. Read more about this in our JavaScript overview page.

Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.

The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.

Utilities

Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.

Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.

Flexible HTML

Hoewel dit niet altijd mogelijk is, streven we ernaar om niet al te dogmatisch te zijn in onze HTML-vereisten voor componenten. Daarom concentreren we ons op afzonderlijke klassen in onze CSS-selectors en proberen we directe kinderen-selectors ( >) te vermijden. Dit geeft u meer flexibiliteit in uw implementatie en helpt onze CSS eenvoudiger en minder specifiek te houden.