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.
Zmienne CSS
Dodano w wersji 5.1.1
W wersji 5.1.1 ustandaryzowaliśmy nasze wymagane @import
s we wszystkich naszych pakietach CSS (w tym bootstrap.css
, bootstrap-reboot.css
i bootstrap-grid.css
to include _root.scss
. Powoduje to dodanie :root
zmiennych CSS poziomu do wszystkich pakietów, niezależnie od tego, ile z nich jest używanych w tym pakiecie. Ostatecznie Bootstrap 5 będzie nadal zobacz więcej zmiennych CSS dodanych z biegiem czasu.
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. To domyślne ustawienie przeglądarki można zmienić, modyfikując$font-size-root
zmienną.
- Brak bazy
- Ustawia również
<body>
globalnefont-family
,font-weight
,line-height
icolor
. 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
Bootstrap wykorzystuje „natywny stos czcionek” lub „systemowy stos czcionek” w celu optymalnego renderowania tekstu na każdym urządzeniu i systemie operacyjnym. Te czcionki systemowe zostały zaprojektowane specjalnie z myślą o dzisiejszych urządzeniach, z ulepszonym renderowaniem na ekranach, obsługą czcionek zmiennych i nie tylko. Przeczytaj więcej o stosach czcionek natywnych w tym artykule w Smashing Magazine .
$font-family-sans-serif:
// Cross-platform generic font family (default user interface font)
system-ui,
// Safari for macOS and iOS (San Francisco)
-apple-system,
// 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.
Zmienne CSS
W miarę dojrzewania Bootstrap 5, coraz więcej stylów będzie tworzonych ze zmiennymi CSS , aby zapewnić większą personalizację w czasie rzeczywistym bez konieczności ponownego kompilowania Sassa. Nasze podejście polega na wzięciu naszych źródłowych zmiennych Sass i przekształceniu ich w zmienne CSS. W ten sposób, nawet jeśli nie używasz zmiennych CSS, nadal masz pełną moc Sassa. Jest to wciąż w toku i pełne wdrożenie zajmie trochę czasu.
Rozważmy na przykład te :root
zmienne CSS dla typowych <body>
stylów:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
W praktyce te zmienne są następnie stosowane w Reboot w następujący sposób:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
Co pozwala na dokonywanie dostosowań w czasie rzeczywistym w dowolny sposób:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
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
. Zresetowaliśmy również elementy padding-left
on <ul>
i <ol>
.
- 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.
Kod wbudowany
Zawijaj wbudowane fragmenty kodu za pomocą <code>
. Pamiętaj, aby pominąć nawiasy kątowe HTML.
<section>
powinien być opakowany jako inline.
For example, <code><section></code> should be wrapped as inline.
Bloki kodu
Użyj <pre>
s dla wielu linii kodu. Ponownie upewnij się, że w kodzie zostały usunięte nawiasy kątowe w celu poprawnego renderowania. Element <pre>
jest resetowany, aby go usunąć margin-top
i użyć rem
jednostek do jego margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Zmienne
Do wskazania zmiennych użyj <var>
znacznika.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Wprowadzane przez użytkownika
Użyj , <kbd>
aby wskazać dane wejściowe, które są zwykle wprowadzane za pomocą klawiatury.
Aby edytować ustawienia, naciśnij ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
Przykładowe wyjście
Aby wskazać przykładowe wyjście z programu, użyj <samp>
znacznika.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
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.
Obsługa wprowadzania daty i koloru
Pamiętaj, że dane wejściowe nie są w pełni obsługiwane przez wszystkie przeglądarki, a mianowicie przez Safari.
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 prezentowania danych kontaktowych do 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 zmieniamy to 0 0 1rem
na 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.
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.
<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
.