Sich nähern
Erfahren Sie mehr über die Leitprinzipien, Strategien und Techniken, die zum Erstellen und Verwalten von Bootstrap verwendet werden, damit Sie es einfacher selbst anpassen und erweitern können.
Während die Seiten „Erste Schritte“ eine Einführung in das Projekt und seine Angebote bieten, konzentriert sich dieses Dokument darauf, warum wir die Dinge tun, die wir in Bootstrap tun. Es erklärt unsere Philosophie, im Web aufzubauen, damit andere von uns lernen, mit uns beitragen und uns helfen können, uns zu verbessern.
Sehen Sie etwas, das nicht richtig klingt oder vielleicht besser gemacht werden könnte? Eröffnen Sie ein Problem – wir würden gerne mit Ihnen darüber diskutieren.
Zusammenfassung
Wir werden uns im Laufe der Zeit ausführlicher mit jedem dieser Themen befassen, aber auf hoher Ebene leitet sich unser Ansatz von Folgendem ab.
- Die Komponenten sollten reaktionsschnell und mobil sein
- Komponenten sollten mit einer Basisklasse erstellt und über Modifikatorklassen erweitert werden
- Komponentenzustände sollten einer gemeinsamen Z-Index-Skala gehorchen
- Bevorzugen Sie nach Möglichkeit eine HTML- und CSS-Implementierung gegenüber JavaScript
- Verwenden Sie nach Möglichkeit Dienstprogramme anstelle von benutzerdefinierten Stilen
- Vermeiden Sie nach Möglichkeit strenge HTML-Anforderungen (untergeordnete Selektoren)
Reaktionsschnell
Die reaktionsschnellen Stile von Bootstrap sind so konzipiert, dass sie reaktionsschnell sind, ein Ansatz, der oft als Mobile-First bezeichnet wird . Wir verwenden diesen Begriff in unseren Dokumenten und stimmen ihm weitgehend zu, aber manchmal kann er zu weit gefasst sein. Während nicht jede Komponente in Bootstrap vollständig reaktionsfähig sein muss , geht es bei diesem reaktionsschnellen Ansatz darum, CSS-Überschreibungen zu reduzieren, indem Sie dazu gedrängt werden, Stile hinzuzufügen, wenn der Darstellungsbereich größer wird.
Bei Bootstrap sehen Sie dies am deutlichsten in unseren Medienabfragen. In den meisten Fällen verwenden wir min-width
Abfragen, die an einem bestimmten Breakpoint zu gelten beginnen und sich bis zu den höheren Breakpoints fortsetzen. Beispielsweise .d-none
gilt a von min-width: 0
bis unendlich. .d-md-none
Ab dem mittleren Haltepunkt gilt dagegen a .
Manchmal werden wir verwenden, max-width
wenn die inhärente Komplexität einer Komponente dies erfordert. Manchmal sind diese Außerkraftsetzungen funktional und mental klarer zu implementieren und zu unterstützen, als die Kernfunktionalität unserer Komponenten neu zu schreiben. Wir bemühen uns, diesen Ansatz einzuschränken, werden ihn aber von Zeit zu Zeit verwenden.
Klassen
Abgesehen von unserem Reboot, einem browserübergreifenden Normalisierungs-Stylesheet, zielen alle unsere Stile darauf ab, Klassen als Selektoren zu verwenden. Das bedeutet, sich von Typselektoren (z. B. input[type="text"]
) und fremden Elternklassen (z. B. ) fernzuhalten .parent .child
, die Stile zu spezifisch machen, um sie einfach zu überschreiben.
Daher sollten Komponenten mit einer Basisklasse erstellt werden, die gemeinsame, nicht zu überschreibende Eigenschaft-Wert-Paare enthält. Zum Beispiel .btn
und .btn-primary
. Wir verwenden .btn
für alle gängigen Stile wie display
, padding
und border-width
. Wir verwenden dann Modifikatoren .btn-primary
, um die Farbe, die Hintergrundfarbe, die Rahmenfarbe usw. hinzuzufügen.
Modifikatorklassen sollten nur verwendet werden, wenn mehrere Eigenschaften oder Werte über mehrere Varianten hinweg geändert werden müssen. Modifikatoren sind nicht immer notwendig, stellen Sie also sicher, dass Sie tatsächlich Codezeilen sparen und unnötige Überschreibungen vermeiden, wenn Sie sie erstellen. Gute Beispiele für Modifikatoren sind unsere Themenfarbklassen und Größenvarianten.
z-Index-Skalen
Es gibt zwei z-index
Skalen in Bootstrap – Elemente innerhalb einer Komponente und Überlagerungskomponenten.
Komponentenelemente
- 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 of0
through3
. 0
is default (initial),1
is:hover
,2
is:active
/.active
, and3
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 was chosen arbitrarily and serves as a small buffer between our styles and your project’s custom styles.
Each overlay component increases its 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 using 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
While not always possible, we strive to avoid being overly dogmatic in our HTML requirements for components. Thus, we focus on single classes in our CSS selectors and try to avoid immediate children selectors (>
). This gives you more flexibility in your implementation and helps keep our CSS simpler and less specific.
Code conventions
Code Guide (from Bootstrap co-creator, @mdo) documents how we write our HTML and CSS across Bootstrap. It specifices guidelines for general formatting, common sense defaults, property and attribute orders, and more.
We use Stylelint to enforce these standards and more in our Sass/CSS. Our custom Stylelint config is open source and available for others to use and extend.
Wir verwenden vnu-jar , um Standard- und semantisches HTML durchzusetzen und häufige Fehler zu erkennen.