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.2.0

Mit v5.1.1 haben wir unsere erforderlichen @imports für alle unsere CSS-Pakete (einschließlich bootstrap.css, bootstrap-reboot.cssund bootstrap-grid.css) standardisiert, um _root.scss. Dadurch :rootwerden Level-CSS-Variablen zu allen Bundles hinzugefügt, unabhängig davon, wie viele davon in diesem Bundle verwendet werden. Letztendlich wird Bootstrap 5 im Laufe der Zeit weitere CSS-Variablen hinzufügen, um mehr Echtzeit-Anpassungen 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 {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

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

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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.

Ü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

Horizontale Regeln

Das <hr>Element wurde vereinfacht. Ähnlich wie Browser-Standardeinstellungen werden <hr>s via gestaltet border-top, haben einen Standardwert opacity: .25und erben automatisch ihr border-colorvia color, einschließlich wenn colores über das übergeordnete Element festgelegt wird. Sie können mit Dienstprogrammen für Text, Rahmen und Deckkraft geändert werden.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

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

Hier ist eine geordnete Liste
Mit ein paar Listenpunkten
Es hat das gleiche Gesamtbild
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.

html

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>

html

<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

html

<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 + ,

html

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.

html

<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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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

Beispieleingabe

Beispiel E-Mail

Beispiel Telefon

Beispiel-URL

Beispielnummer

Beispielsuche

Beispielbereich

Beispieldateieingabe

Beispiel auswählen

Aktivieren Sie dieses Kontrollkästchen

Option eins ist dies und das Option zwei ist etwas anderes, das ebenfalls sehr lang ist, um das Umschließen dieser ausgefallenen Formularsteuerelemente zu demonstrieren. Option drei ist deaktiviert

Beispiel Textbereich

Beispieldatum

Beispiel Zeit

Beispiel Passwort

Beispiel datetime-local

Beispielwoche

Beispielmonat

Beispielfarbe

Beispielausgabe 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

html

<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 .

Neustart

Sich nähern

CSS-Variablen

Seitenvorgaben

Stapel nativer Schriftarten

Überschriften und Absätze

Horizontale Regeln

Listen

Inline-Code

Codeblöcke

Variablen

Benutzereingabe

Beispielausgabe

Tische

Formen

Datums- und Farbeingabeunterstützung

Zeiger auf Schaltflächen

Verschiedene Elemente

Adresse

Blockzitat

Inline-Elemente

Zusammenfassung

HTML5- [hidden]Attribut

jQuery-Inkompatibilität

HTML5- `[hidden]`Attribut