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-bordered
i 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ć
rem
s zamiastem
s 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 kierunekmargin
jest prostszym modelem mentalnym. - Aby ułatwić skalowanie w różnych rozmiarach urządzeń, elementy blokowe powinny używać
rem
s dlamargin
s. - Ogranicz deklaracje
font
powiązanych właściwości do minimum, używając,inherit
gdy 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-sizing
ustawiony globalnie na każdym elemencie — w tym*::before
i*::after
, doborder-box
. Gwarantuje to, że deklarowana szerokość elementu nigdy nie zostanie przekroczona z powodu dopełnienia lub obramowania. - Brak bazy
font-size
jest zadeklarowany na<html>
, ale16px
zakłada się (domyślnie przeglądarki).font-size: 1rem
jest 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>
globalnefont-family
,line-height
itext-align
. Jest to dziedziczone później przez niektóre elementy formularza, aby zapobiec niespójnościom czcionek. - Ze względów bezpieczeństwa
<body>
zadeklarowanybackground-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 color
style CSS.
Jest font-family
to stosowane do <body>
i automatycznie dziedziczone globalnie przez Bootstrap. Aby przełączyć globalny font-family
, zaktualizuj $font-family-base
i ponownie skompiluj Bootstrap.
Nagłówki i akapity
Wszystkie elementy nagłówka — np. <h1>
— i <p>
są resetowane, aby zostały margin-top
usunięte. Dodane nagłówki margin-bottom: .5rem
i akapity margin-bottom: 1rem
uł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-top
usunię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-left
i 0
dodaj 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-top
i użyć rem
jednostek 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-align
w całym tekście. Dodatkowe zmiany dotyczące obramowań, dopełnienia i nie tylko są dostępne w .table
klasie .
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ą ustawionedisplay: inline-block
na zezwoleniemargin
na zastosowanie.<input>
s,<select>
s,<textarea>
s i<button>
s są w większości adresowane przez Normalize, ale Reboot usuwa również ichmargin
i ustawialine-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: pointer
kiedy: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ą cursor
zmianę.
<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-style
z italic
na normal
. line-height
jest teraz dziedziczony i margin-bottom: 1rem
został dodany. <address>
s służą do przedstawienia danych kontaktowych najbliższego przodka (lub całego dorobku). Zachowaj formatowanie, kończąc wiersze znakiem <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Imię i nazwisko
[email protected]
Zablokować cytat
Wartość domyślna margin
dla cytatów blokowych to 1em 40px
, więc resetujemy to, aby 0 0 1rem
uzyskać coś bardziej spójnego z innymi elementami.
Dobrze znany cytat zawarty w elemencie blockquote.
Elementy wbudowane
Element <abbr>
otrzymuje podstawową stylizację, aby wyróżniał się wśród tekstu akapitowego.
Streszczenie
Domyślnie cursor
podsumowanie to text
, więc resetujemy to, pointer
aby 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: none
domyślny styl. Zapożyczając pomysł z PureCSS , ulepszamy to domyślne ustawienie, [hidden] { display: none !important; }
aby zapobiec jego display
przypadkowemu 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 display
elementami.
Aby po prostu przełączyć widoczność elementu, co oznacza, że display
nie jest on modyfikowany, a element może nadal wpływać na przepływ dokumentu, użyj zamiast tego klasy .invisible
.