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ć.
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.
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.
- Brak bazy
- 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
.
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 .
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.
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. Nagłówek Bootstrapa |
|
h2. Nagłówek Bootstrapa |
|
h3. Nagłówek Bootstrapa |
|
h4. Nagłówek Bootstrapa |
|
h5. Nagłówek Bootstrapa |
|
h6. Nagłówek Bootstrapa |
Wszystkie listy <ul>
— , <ol>
, i <dl>
— mają swoje margin-top
usunię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-left
i 0
dodaj 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.
Element <pre>
jest resetowany, aby go usunąć margin-top
i użyć rem
jednostek do jego margin-bottom
.
.przykładowy element { margines-dolny: 1rem; }
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 |
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.
Te i inne zmiany przedstawiono poniżej.
Element <address>
zostanie zaktualizowany, aby zresetować przeglądarkę domyślną font-style
z italic
na normal
. line-height
jest również 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]
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Liczba całkowita posuere erat ante.
Element <abbr>
otrzymuje podstawową stylizację, aby wyróżniał się wśród tekstu akapitowego.
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.
HTML5 adds a new global attribute named [hidden]
, which is styled as display: none
by default. Borrowing an idea from PureCSS, we improve upon this default by making [hidden] { display: none !important; }
to help prevent its display
from getting accidentally overridden. While [hidden]
isn’t natively supported by IE10, the explicit declaration in our CSS gets around that problem.
jQuery incompatibility
[hidden]
is not compatible with jQuery’s $(...).hide()
and $(...).show()
methods. Therefore, we don’t currently especially endorse [hidden]
over other techniques for managing the display
of elements.
To merely toggle the visibility of an element, meaning its display
is not modified and the element can still affect the flow of the document, use the .invisible
class instead.