Restart

Reboot, zbiór zmian CSS specyficznych dla elementu w jednym pliku, kickstart Bootstrap, aby zapewnić elegancką, spójną i prostą linię bazową, na której można budować.

Zbliżać się

Reboot opiera się na Normalize, zapewniając wielu elementom HTML nieco uparty styl przy użyciu tylko selektorów elementów. Dodatkowa stylizacja odbywa się tylko z klasami. Na przykład ponownie uruchamiamy niektóre <table>style, aby uzyskać prostszą linię bazową, a później udostępniamy .table, .table-borderedi nie tylko.

Oto nasze wytyczne i powody, dla których warto wybrać, co zastąpić w Reboot:

Zaktualizuj niektóre domyślne wartości przeglądarki, aby używać rems zamiast ems dla skalowalnych odstępów między komponentami.
Unikaj margin-top. Marginesy pionowe mogą się załamać, dając nieoczekiwane rezultaty. Co ważniejsze jednak, pojedynczy kierunek marginjest prostszym modelem mentalnym.
Aby ułatwić skalowanie w różnych rozmiarach urządzeń, elementy blokowe powinny używać rems dla margins.
Ogranicz deklaracje fontpowiązanych właściwości do minimum, używając, inheritgdy tylko jest to możliwe.

Domyślne ustawienia strony

Elementy <html>i <body>są aktualizowane w celu zapewnienia lepszych wartości domyślnych dla całej strony. Dokładniej:

Jest box-sizingustawiony globalnie na każdym elemencie — w tym *::beforei *::after, do border-box. Gwarantuje to, że deklarowana szerokość elementu nigdy nie zostanie przekroczona z powodu dopełnienia lub obramowania.
Brak bazy font-sizejest zadeklarowany na <html>, ale 16pxzakłada się (domyślnie przeglądarki). font-size: 1remjest stosowany w <body>celu łatwego responsywnego skalowania typów za pomocą zapytań o media, przy jednoczesnym poszanowaniu preferencji użytkownika i zapewnieniu bardziej dostępnego podejścia.
Ustawia również <body>globalne font-family, line-heighti text-align. Jest to dziedziczone później przez niektóre elementy formularza, aby zapobiec niespójnościom czcionek.
Ze względów bezpieczeństwa <body>zadeklarowany background-color, domyślnie #fff.

Natywny stos czcionek

Domyślne czcionki internetowe (Helvetica Neue, Helvetica i Arial) zostały usunięte w Bootstrap 4 i zastąpione „natywnym stosem czcionek” w celu optymalnego renderowania tekstu na każdym urządzeniu i systemie operacyjnym. Przeczytaj więcej o stosach czcionek natywnych w tym artykule w Smashing Magazine .

$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;

Należy zauważyć, że ponieważ stos czcionek zawiera czcionki emoji, wiele popularnych symboli/znaków dingbat Unicode będzie renderowanych jako wielokolorowe piktogramy. Ich wygląd będzie się różnić w zależności od stylu użytego w natywnej czcionce emoji przeglądarki/platformy i nie będą miały na nie wpływu żadne colorstyle CSS.

Jest font-familyto stosowane do <body>i automatycznie dziedziczone globalnie przez Bootstrap. Aby przełączyć globalny font-family, zaktualizuj $font-family-basei ponownie skompiluj Bootstrap.

Nagłówki i akapity

Wszystkie elementy nagłówka — np. <h1>— i <p>są resetowane, aby zostały margin-topusunięte. Dodane nagłówki margin-bottom: .5remi akapity margin-bottom: 1remułatwiające odstępy.

Nagłówek	Przykład
`<h1></h1>`	h1. Nagłówek Bootstrapa
`<h2></h2>`	h2. Nagłówek Bootstrapa
`<h3></h3>`	h3. Nagłówek Bootstrapa
`<h4></h4>`	h4. Nagłówek Bootstrapa
`<h5></h5>`	h5. Nagłówek Bootstrapa
`<h6></h6>`	h6. Nagłówek Bootstrapa

Listy

Wszystkie listy <ul>— , <ol>, i <dl>— mają swoje margin-topusunięte i margin-bottom: 1rem. Listy zagnieżdżone nie mają margin-bottom.

Wszystkie listy mają usunięty górny margines
A ich dolny margines znormalizowany
Listy zagnieżdżone nie mają dolnego marginesu
- W ten sposób mają bardziej wyrównany wygląd
- Zwłaszcza gdy następuje więcej pozycji na liście
Lewa wyściółka również została zresetowana

Oto uporządkowana lista
Z kilkoma elementami listy
Ma ten sam ogólny wygląd
Jak poprzednia lista nieuporządkowana

W celu uproszczenia stylizacji, przejrzystej hierarchii i lepszych odstępów zaktualizowano listy opisów margin. <dd>s zresetuj margin-lefti 0dodaj margin-bottom: .5rem. <dt>s są pogrubione .

Listy opisów: Lista opisowa jest idealna do definiowania terminów.
Termin: Definicja terminu.; Druga definicja tego samego terminu.
Inny termin: Definicja tego drugiego terminu.

Tekst wstępnie sformatowany

Element <pre>jest resetowany, aby go usunąć margin-topi użyć remjednostek do jego margin-bottom.

.przykładowy element {
  margines-dolny: 1rem;
}

Stoły

Tabele są lekko dostosowane do stylów <caption>, zwijania obramowań i zapewnienia spójności text-alignw całym tekście. Dodatkowe zmiany dotyczące obramowań, dopełnienia i nie tylko są dostępne w .tableklasie .

To jest przykładowa tabela i jest to jej podpis opisujący zawartość.
Nagłówek tabeli	Nagłówek tabeli	Nagłówek tabeli	Nagłówek tabeli
Komórka tabeli	Komórka tabeli	Komórka tabeli	Komórka tabeli
Komórka tabeli	Komórka tabeli	Komórka tabeli	Komórka tabeli
Komórka tabeli	Komórka tabeli	Komórka tabeli	Komórka tabeli

Formularze

Różne elementy formularzy zostały zrestartowane w celu uproszczenia stylów podstawowych. Oto niektóre z najważniejszych zmian:

<fieldset>Nie mają obramowań, dopełnień ani marginesów, dzięki czemu można je łatwo wykorzystać jako opakowania dla poszczególnych danych wejściowych lub grup danych wejściowych.
<legend>s, podobnie jak zestawy pól, zostały również przestylizowane, aby były wyświetlane jako nagłówki sortowania.
<label>s są ustawione display: inline-blockna zezwolenie marginna zastosowanie.
<input>s, <select>s, <textarea>s i <button>s są w większości adresowane przez Normalize, ale Reboot usuwa również ich margini ustawia line-height: inherit.
<textarea>s są modyfikowane, aby można je było zmieniać tylko w pionie, ponieważ zmiana rozmiaru w poziomie często „przerywa” układ strony.
<button>s i <input>elementy przycisków mają cursor: pointerkiedy :not(:disabled).

Te i inne zmiany przedstawiono poniżej.

Wskaźniki na przyciskach

Reboot zawiera ulepszenie umożliwiające role="button"zmianę domyślnego kursora na pointer. Dodaj ten atrybut do elementów, aby wskazać, że elementy są interaktywne. Ta rola nie jest konieczna dla <button>elementów, które dostają własną cursorzmianę.

Przycisk elementu bez przycisku

<span role="button" tabindex="0">Non-button element button</span>

Różne elementy

Adres zamieszkania

Element <address>zostanie zaktualizowany, aby zresetować przeglądarkę domyślną font-stylez italicna normal. line-heightjest teraz dziedziczony i margin-bottom: 1remzostał dodany. <address>s służą do przedstawienia danych kontaktowych najbliższego przodka (lub całego dorobku). Zachowaj formatowanie, kończąc wiersze znakiem <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Imię i nazwisko
[email protected]

Zablokować cytat

Wartość domyślna margindla cytatów blokowych to 1em 40px, więc resetujemy to, aby 0 0 1remuzyskać coś bardziej spójnego z innymi elementami.

Dobrze znany cytat zawarty w elemencie blockquote.

Ktoś sławny w tytule źródła

Elementy wbudowane

Element <abbr>otrzymuje podstawową stylizację, aby wyróżniał się wśród tekstu akapitowego.

Nulla attr vitae elit libero, pharetra augue.

Streszczenie

Domyślnie cursorpodsumowanie to text, więc resetujemy to, pointeraby przekazać, że element można wchodzić w interakcję, klikając go.

Trochę szczegółów

Więcej informacji o szczegółach.

Jeszcze więcej szczegółów

Oto jeszcze więcej szczegółów na temat szczegółów.

`[hidden]`Atrybut HTML5

HTML5 dodaje nowy atrybut globalny o nazwie[hidden] , który ma display: nonedomyślny styl. Zapożyczając pomysł z PureCSS , ulepszamy to domyślne ustawienie, [hidden] { display: none !important; }aby zapobiec jego displayprzypadkowemu nadpisaniu. Chociaż [hidden]nie jest natywnie obsługiwany przez IE10, wyraźna deklaracja w naszym CSS rozwiązuje ten problem.

<input type="text" hidden>

Niezgodność jQuery

[hidden]nie jest kompatybilny z jQuery $(...).hide()i $(...).show()metodami. Dlatego obecnie nie popieramy szczególnie [hidden]innych technik zarządzania displayelementami.

Aby po prostu przełączyć widoczność elementu, co oznacza, że displaynie jest on modyfikowany, a element może nadal wpływać na przepływ dokumentu, użyj zamiast tego klasy .invisible.