Source

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

Lorem ipsum dolor sit amet
Consectetur adipisująca elita
Integer molestie lorem w massa
Facilisis w pretium nisl aliquet
Nulla volutpat aliquam velit
- Fasellus 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 adipisująca elita
Integer molestie lorem w massa
Facilisis w pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

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.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat ante.

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.