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
rem
s anstelle vonem
s 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 Richtungmargin
ein einfacheres mentales Modell ist. - Für eine einfachere Skalierung über Gerätegrößen hinweg sollten Blockelemente
rem
s fürmargin
s verwenden. - Beschränken Sie Deklarationen von
font
-bezogenen Eigenschaften auf ein Minimum und verwenden Sieinherit
wann immer möglich.
Seitenvorgaben
Die Elemente <html>
und <body>
wurden aktualisiert, um bessere seitenweite Standardwerte bereitzustellen. Genauer:
- Das
box-sizing
wird global für jedes Element festgelegt – einschließlich*::before
und*::after
, bisborder-box
. Dadurch wird sichergestellt, dass die deklarierte Breite des Elements niemals durch Polsterung oder Umrandung überschritten wird. - Auf der wird keine Basis
font-size
deklariert<html>
, sondern16px
angenommen (die Standardeinstellung des Browsers).font-size: 1rem
wird 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 globalesfont-family
,line-height
undtext-align
. Dies wird später von einigen Formularelementen vererbt, um Schriftinkonsistenzen zu vermeiden. - Aus Sicherheitsgründen hat das
<body>
ein deklariertesbackground-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,
// 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- color
Stilen beeinflusst.
Dies font-family
wird auf Bootstrap angewendet <body>
und automatisch global vererbt. Um das globale zu wechseln font-family
, aktualisieren $font-family-base
und kompilieren Sie Bootstrap neu.
Überschriften und Absätze
Alle Überschriftenelemente – z. B. – <h1>
und <p>
werden zurückgesetzt, damit sie margin-top
entfernt werden. Überschriften wurden margin-bottom: .5rem
hinzugefügt und Absätze margin-bottom: 1rem
fü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-top
entfernt und ein margin-bottom: 1rem
. Verschachtelte Listen haben keine margin-bottom
.
- 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-left
auf 0
und 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.
Vorformatierter Text
Das <pre>
Element wird zurückgesetzt, um seine zu entfernen margin-top
und rem
Einheiten 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-align
durchgehende Konsistenz. Zusätzliche Änderungen für Rahmen, Polsterung und mehr kommen mit der .table
Klasse .
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-block
dassmargin
sie angewendet werden können.<input>
s,<select>
s,<textarea>
s und<button>
s werden meistens von Normalize angesprochen, aber Reboot entfernt auch ihremargin
und setztline-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 habencursor: pointer
when:not(:disabled)
.
Diese Änderungen und mehr werden im Folgenden demonstriert.
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 .
<span role="button" tabindex="0">Non-button element button</span>
Verschiedene Elemente
Adresse
Das <address>
Element wird aktualisiert, um den Browserstandard font-style
von italic
auf zurückzusetzen normal
. line-height
ist jetzt auch vererbt und margin-bottom: 1rem
wurde 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Vollständiger Name
[email protected]
Blockzitat
Der Standardwert margin
für Blockquotes ist 1em 40px
, also setzen wir das auf zurück, 0 0 1rem
um etwas konsistenteres mit anderen Elementen zu erreichen.
Ein bekanntes Zitat, das in einem Blockquote-Element enthalten ist.
Inline-Elemente
Das <abbr>
Element erhält ein einfaches Styling, um es vom Absatztext abzuheben.
Zusammenfassung
Der Standardwert cursor
für die Zusammenfassung ist text
, also setzen wir das auf zurück, um pointer
zu 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: none
standardmäß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 display
sie 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 display
Elemente nicht besonders.
Um lediglich die Sichtbarkeit eines Elements umzuschalten, d. h. display
es wird nicht geändert und das Element kann immer noch den Fluss des Dokuments beeinflussen, verwenden Sie stattdessen die .invisible
Klasse .