Zum Hauptinhalt springen Zur Dokumentennavigation springen
in English

Neustart

Reboot, eine Sammlung elementspezifischer CSS-Änderungen in einer einzigen Datei, Kickstart Bootstrap, um eine elegante, konsistente und einfache Grundlage bereitzustellen, auf der aufgebaut werden kann.

Auf dieser Seite

Sich nähern

Reboot baut auf Normalize auf und stellt viele HTML-Elemente mit etwas eigenwilligen Stilen bereit, die nur Elementselektoren verwenden. Zusätzliches Styling erfolgt nur mit Klassen. Beispielsweise starten wir einige <table>Stile für eine einfachere Grundlinie neu und stellen später .table, .table-bordered, und mehr bereit.

Hier sind unsere Richtlinien und Gründe für die Auswahl, was beim Neustart überschrieben werden soll:

  • Aktualisieren Sie einige Browser-Standardwerte, um rems anstelle von ems für skalierbare Komponentenabstände zu verwenden.
  • Vermeiden margin-top. Vertikale Ränder können zusammenbrechen und zu unerwarteten Ergebnissen führen. Noch wichtiger ist jedoch, dass eine einzige Richtung marginein einfacheres mentales Modell ist.
  • Für eine einfachere Skalierung über Gerätegrößen hinweg sollten Blockelemente rems für margins verwenden.
  • Beschränken Sie Deklarationen von font-bezogenen Eigenschaften auf ein Minimum und verwenden Sie inheritwann immer möglich.

CSS-Variablen

Hinzugefügt in v5.1.1

Mit v5.1.1 haben wir unsere erforderlichen @imports für alle unsere CSS-Bundles standardisiert (einschließlich bootstrap.css, bootstrap-reboot.css, und bootstrap-grid.css, um _root.scss. Dies fügt :rootLevel-CSS-Variablen zu allen Bundles hinzu, unabhängig davon, wie viele davon in diesem Bundle verwendet werden. Letztendlich wird Bootstrap 5 dies auch weiterhin tun sehen Sie sich weitere CSS-Variablen an, die im Laufe der Zeit hinzugefügt wurden.

Seitenvorgaben

Die Elemente <html>und <body>wurden aktualisiert, um bessere seitenweite Standardwerte bereitzustellen. Genauer:

  • Das box-sizingwird global für jedes Element festgelegt – einschließlich *::beforeund *::after, bis border-box. Dadurch wird sichergestellt, dass die deklarierte Breite des Elements niemals durch Polsterung oder Umrandung überschritten wird.
    • Auf der wird keine Basis font-sizedeklariert <html>, sondern 16pxangenommen (die Standardeinstellung des Browsers). font-size: 1remwird auf der <body>für eine einfache reaktionsschnelle Typskalierung über Medienabfragen angewendet, wobei die Benutzereinstellungen berücksichtigt und ein zugänglicherer Ansatz gewährleistet werden. Diese Browservorgabe kann durch Ändern der $font-size-rootVariablen überschrieben werden.
  • Der <body>setzt auch ein globales font-family, font-weight, line-heightund color. Dies wird später von einigen Formularelementen vererbt, um Schriftinkonsistenzen zu vermeiden.
  • Aus Sicherheitsgründen hat das <body>ein deklariertes background-color, standardmäßig #fff.

Stapel nativer Schriftarten

Bootstrap verwendet einen „nativen Font-Stack“ oder „System-Font-Stack“ für eine optimale Textwiedergabe auf jedem Gerät und Betriebssystem. Diese Systemschriftarten wurden speziell für die heutigen Geräte entwickelt, mit verbesserter Darstellung auf Bildschirmen, Unterstützung variabler Schriftarten und mehr. Lesen Sie mehr über native Font-Stacks in diesem Smashing Magazine- Artikel .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // Basic web fallback
  "Helvetica Neue", Arial,
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Sans serif fallback
  sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

Beachten Sie, dass viele gängige Symbol-/Dingbat-Unicode-Zeichen als mehrfarbige Piktogramme gerendert werden, da der Schriftartstapel Emoji-Schriftarten enthält. Ihr Aussehen variiert je nach Stil, der in der nativen Emoji-Schriftart des Browsers/der Plattform verwendet wird, und sie werden nicht von CSS- colorStilen beeinflusst.

Dies font-familywird auf Bootstrap angewendet <body>und automatisch global vererbt. Um das globale zu wechseln font-family, aktualisieren $font-family-baseund kompilieren Sie Bootstrap neu.

CSS-Variablen

Während Bootstrap 5 weiter reift, werden immer mehr Stile mit CSS-Variablen erstellt, um mehr Anpassungen in Echtzeit zu ermöglichen, ohne dass Sass immer neu kompiliert werden muss. Unser Ansatz besteht darin, unsere Quell-Sass-Variablen zu nehmen und sie in CSS-Variablen umzuwandeln. Auf diese Weise haben Sie, selbst wenn Sie keine CSS-Variablen verwenden, immer noch die gesamte Leistungsfähigkeit von Sass. Dies ist noch in Arbeit und wird einige Zeit dauern, bis es vollständig implementiert ist.

Betrachten Sie beispielsweise diese :rootCSS-Variablen für gängige <body>Stile:

  @if $font-size-root != null {
    --#{$variable-prefix}root-font-size: #{$font-size-root};
  }
  --#{$variable-prefix}body-font-family: #{$font-family-base};
  --#{$variable-prefix}body-font-size: #{$font-size-base};
  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
  --#{$variable-prefix}body-line-height: #{$line-height-base};
  --#{$variable-prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$variable-prefix}body-text-align: #{$body-text-align};
  }
  --#{$variable-prefix}body-bg: #{$body-bg};

In der Praxis werden diese Variablen dann beim Neustart wie folgt angewendet:

body {
  margin: 0; // 1
  font-family: var(--#{$variable-prefix}body-font-family);
  @include font-size(var(--#{$variable-prefix}body-font-size));
  font-weight: var(--#{$variable-prefix}body-font-weight);
  line-height: var(--#{$variable-prefix}body-line-height);
  color: var(--#{$variable-prefix}body-color);
  text-align: var(--#{$variable-prefix}body-text-align);
  background-color: var(--#{$variable-prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Dadurch können Sie in Echtzeit Anpassungen vornehmen, wie Sie möchten:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

Überschriften und Absätze

Alle Überschriftenelemente – z. B. – <h1>und <p>werden zurückgesetzt, damit sie margin-topentfernt werden. Überschriften wurden margin-bottom: .5remhinzugefügt und Absätze margin-bottom: 1remfür einfache Abstände.

Überschrift Beispiel
<h1></h1> h1. Bootstrap-Überschrift
<h2></h2> h2. Bootstrap-Überschrift
<h3></h3> h3. Bootstrap-Überschrift
<h4></h4> h4. Bootstrap-Überschrift
<h5></h5> h5. Bootstrap-Überschrift
<h6></h6> h6. Bootstrap-Überschrift

Listen

Alle Listen <ul>– , <ol>, und <dl>– haben ihre margin-topentfernt und ein margin-bottom: 1rem. Verschachtelte Listen haben keine margin-bottom. Wir haben auch die Elemente padding-lefton <ul>und zurückgesetzt.<ol>

  • Bei allen Listen wurde der obere Rand entfernt
  • Und ihre untere Marge normalisierte sich
  • Verschachtelte Listen haben keinen unteren Rand
    • Dadurch erhalten sie ein gleichmäßigeres Erscheinungsbild
    • Besonders, wenn weitere Listenelemente folgen
  • Die linke Polsterung wurde ebenfalls zurückgesetzt
  1. Hier ist eine geordnete Liste
  2. Mit ein paar Listenpunkten
  3. Es hat das gleiche Gesamtbild
  4. Wie die vorherige ungeordnete Liste

Für ein einfacheres Styling, eine klare Hierarchie und bessere Abstände wurden die Beschreibungslisten aktualisiert margin. <dd>s zurücksetzen margin-leftauf 0und hinzufügen margin-bottom: .5rem. <dt>s sind fett gedruckt .

Beschreibungslisten
Eine Beschreibungsliste ist perfekt, um Begriffe zu definieren.
Begriff
Definition für den Begriff.
Eine zweite Definition für denselben Begriff.
Ein anderer Begriff
Definition für diesen anderen Begriff.

Inline-Code

Umschließen Sie Inline-Codeschnipsel mit <code>. Stellen Sie sicher, dass spitze HTML-Klammern maskiert werden.

Sollte beispielsweise <section>als Inline umbrochen werden. 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Codeblöcke

Verwenden Sie <pre>s für mehrere Codezeilen. Stellen Sie auch hier sicher, dass Sie alle spitzen Klammern im Code maskieren, um eine korrekte Darstellung zu gewährleisten. Das <pre>Element wird zurückgesetzt, um seine zu entfernen margin-topund remEinheiten für seine zu verwenden margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Variablen

Verwenden Sie zum Anzeigen von Variablen das <var>Tag.

y = m x + b 
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Benutzereingabe

Verwenden Sie das <kbd>, um Eingaben anzuzeigen, die normalerweise über die Tastatur eingegeben werden.

Um das Verzeichnis zu wechseln, geben Sie cdgefolgt vom Namen des Verzeichnisses ein.
Um die Einstellungen zu bearbeiten, drücken Sie ctrl + , 
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Beispielausgabe

Um Beispielausgaben von einem Programm anzuzeigen, verwenden Sie das <samp>Tag.

Dieser Text soll als Beispielausgabe eines Computerprogramms behandelt werden. 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Tische

Tabellen sind leicht an die Stile angepasst <caption>, reduzieren die Ränder und sorgen für text-aligndurchgehende Konsistenz. Zusätzliche Änderungen für Rahmen, Polsterung und mehr kommen mit der .tableKlasse .

Dies ist eine Beispieltabelle, und dies ist ihre Überschrift, um den Inhalt zu beschreiben.
Tabellenüberschrift Tabellenüberschrift Tabellenüberschrift Tabellenüberschrift
Tabellenzelle Tabellenzelle Tabellenzelle Tabellenzelle
Tabellenzelle Tabellenzelle Tabellenzelle Tabellenzelle
Tabellenzelle Tabellenzelle Tabellenzelle Tabellenzelle

Formen

Verschiedene Formularelemente wurden für einfachere Basisstile neu gestartet. Hier sind einige der bemerkenswertesten Änderungen:

  • <fieldset>s haben keine Rahmen, Auffüllungen oder Ränder, sodass sie einfach als Wrapper für einzelne Eingaben oder Gruppen von Eingaben verwendet werden können.
  • <legend>s wurden ebenso wie Fieldsets umgestaltet, um als eine Art Überschrift angezeigt zu werden.
  • <label>s sind so eingestellt, display: inline-blockdass marginsie angewendet werden können.
  • <input>s, <select>s, <textarea>s und <button>s werden meistens von Normalize angesprochen, aber Reboot entfernt auch ihre marginund setzt line-height: inherit.
  • <textarea>s werden so geändert, dass sie nur vertikal in der Größe geändert werden können, da die horizontale Größenänderung häufig das Seitenlayout „unterbricht“.
  • <button>s und <input>Button-Elemente haben cursor: pointerwhen :not(:disabled).

Diese Änderungen und mehr werden im Folgenden demonstriert.

Beispiel Legende

100

Datums- und Farbeingabeunterstützung

Beachten Sie, dass Datumseingaben nicht von allen Browsern vollständig unterstützt werden, insbesondere von Safari.

Zeiger auf Schaltflächen

Reboot enthält eine Verbesserung role="button", um den Standardcursor in zu ändern pointer. Fügen Sie dieses Attribut zu Elementen hinzu, um anzuzeigen, dass Elemente interaktiv sind. <button>Diese Rolle ist für Elemente, die ihre eigene cursorÄnderung erhalten, nicht erforderlich .

Schaltfläche ohne Schaltflächenelement 
<span role="button" tabindex="0">Non-button element button</span>

Verschiedene Elemente

Adresse

Das <address>Element wird aktualisiert, um den Browserstandard font-stylevon italicauf zurückzusetzen normal. line-heightist jetzt auch vererbt und margin-bottom: 1remwurde hinzugefügt. <address>s dienen zum Präsentieren von Kontaktinformationen für den nächsten Vorfahren (oder ein ganzes Werk). Behalten Sie die Formatierung bei, indem Sie Zeilen mit beenden <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Vollständiger Name
[email protected]

Blockzitat

Der Standardwert marginfür Blockquotes ist 1em 40px, also setzen wir das auf zurück, 0 0 1remum etwas konsistenteres mit anderen Elementen zu erreichen.

Ein bekanntes Zitat, das in einem Blockquote-Element enthalten ist.

Jemand, der in Source Title berühmt ist

Inline-Elemente

Das <abbr>Element erhält ein einfaches Styling, um es vom Absatztext abzuheben.

Das HTML- Abkürzungselement.

Zusammenfassung

Der Standardwert cursorfür die Zusammenfassung ist text, also setzen wir das auf zurück, um pointerzu vermitteln, dass mit dem Element interagiert werden kann, indem man darauf klickt.

Ein paar Details

Mehr Infos zu den Details.

Noch mehr Details

Hier noch mehr Details zu den Details.

HTML5- [hidden]Attribut

HTML5 fügt ein neues globales Attribut namens[hidden] hinzu , das display: nonestandardmäßig wie folgt formatiert ist. In Anlehnung an eine Idee von PureCSS verbessern wir diese Standardeinstellung, indem wir [hidden] { display: none !important; }dazu beitragen, dass displaysie nicht versehentlich überschrieben wird.

<input type="text" hidden>
jQuery-Inkompatibilität

[hidden]ist nicht kompatibel mit jQuery $(...).hide()und $(...).show()Methoden. Daher unterstützen wir derzeit [hidden]andere Techniken zur Verwaltung der displayElemente nicht besonders.

Um lediglich die Sichtbarkeit eines Elements umzuschalten, d. h. displayes wird nicht geändert und das Element kann immer noch den Fluss des Dokuments beeinflussen, verwenden Sie stattdessen die .invisibleKlasse .