Source

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.

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.

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.
Das <body>setzt auch ein globales font-family, line-heightund text-align. 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

Die Standard-Webfonts (Helvetica Neue, Helvetica und Arial) wurden in Bootstrap 4 entfernt und durch einen „nativen Font-Stack“ für eine optimale Textdarstellung auf jedem Gerät und Betriebssystem ersetzt. Lesen Sie mehr über native Font-Stacks in diesem Smashing Magazine- Artikel .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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

Listen

Alle Listen <ul>– , <ol>, und <dl>– haben ihre margin-topentfernt und ein margin-bottom: 1rem. Verschachtelte Listen haben keine margin-bottom.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ganzzahlige Molestie Lorem und Massa
Facilisis in pretium nisl aliquet
Nulla Volutpat Aliquam Velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Ganzzahlige Molestie Lorem und Massa
Facilisis in pretium nisl aliquet
Nulla Volutpat Aliquam Velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida bei eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Vorformatierter Text

Das <pre>Element wird zurückgesetzt, um seine zu entfernen margin-topund remEinheiten für seine zu verwenden margin-bottom.

.Beispielelement {
  Rand-unten: 1rem;
}

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.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Jemand, der in Source Title berühmt ist

Inline-Elemente

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

Nulla attr vitae elit libero, a pharetra augue.

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. Obwohl [hidden]es von IE10 nicht nativ unterstützt wird, umgeht die explizite Deklaration in unserem CSS dieses Problem.

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