in English

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ć.

Na tej stronie

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.

Zmienne CSS

Dodano w wersji 5.2.0

W wersji 5.1.1 ustandaryzowaliśmy wymagane @imports we wszystkich naszych pakietach CSS (w tym bootstrap.css, bootstrap-reboot.cssi bootstrap-grid.css), aby uwzględnić _root.scss. Powoduje to dodanie :rootzmiennych CSS poziomu do wszystkich pakietów, niezależnie od tego, ile z nich jest używanych w tym pakiecie. Ostatecznie Bootstrap 5 będzie z czasem dodawał więcej zmiennych 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 :rootzmienne CSS dla typowych <body>stylów:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$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(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$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>

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. To domyślne ustawienie przeglądarki można zmienić, modyfikując $font-size-rootzmienną.
Ustawia również <body>globalne font-family, font-weight, line-heighti color. 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

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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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

Zasady horyzontalne

Element <hr>został uproszczony. Podobnie jak w przypadku domyślnych ustawień przeglądarki, <hr>s są stylizowane przez border-top, mają wartość domyślną opacity: .25i automatycznie dziedziczą adres border-colorza pośrednictwem color, w tym, gdy colorjest ustawione przez rodzica. Można je modyfikować za pomocą narzędzi tekstu, obramowania i krycia.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Listy

Wszystkie listy <ul>— , <ol>, i <dl>— mają swoje margin-topusunięte i margin-bottom: 1rem. Listy zagnieżdżone nie mają margin-bottom. Zresetowaliśmy również elementy padding-lefton <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-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.

Kod wbudowany

Zawijaj wbudowane fragmenty kodu za pomocą <code>. Pamiętaj, aby pominąć nawiasy kątowe HTML.

Na przykład <section>powinien być opakowany jako inline.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Bloki kodu

Użyj <pre>s dla wielu linii kodu. Jeszcze raz upewnij się, że w kodzie zostały zmienione nawiasy kątowe, aby zapewnić prawidłowe renderowanie. Element <pre>jest resetowany, aby go usunąć margin-topi użyć remjednostek do jego margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Zmienne

Do wskazania zmiennych użyj <var>znacznika.

y = m x + b

html

<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 przełączyć katalogi, wpisz, cda następnie nazwę katalogu.
Aby edytować ustawienia, naciśnij ctrl + ,

html

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.

Ten tekst ma być traktowany jako przykładowe wyjście z programu komputerowego.

html

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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.

Przykładowa legenda

Przykładowe wejście

Przykładowy e-mail

Przykładowy telefon

Przykładowy adres URL

Przykładowy numer

Przykładowe wyszukiwanie

Przykładowy zakres

Przykładowy plik wejściowy

Przykład wybierz

Zaznacz to pole wyboru

Opcja pierwsza to to i tamto Opcja druga to coś innego, co jest również bardzo długie, aby zademonstrować zawijanie tych fantazyjnych kontrolek formularza. Opcja trzecia jest wyłączona

Przykładowy obszar tekstowy

Przykładowa data

Przykładowy czas

Przykładowe hasło

Przykład data-godzina-lokalna

Przykładowy tydzień

Przykładowy miesiąc

Przykładowy kolor

Przykładowe wyjście 100

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ą cursorzmianę.

Przycisk elementu bez przycisku

html

<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.

Element skrótu HTML .

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.

<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.

Restart

Zbliżać się

Zmienne CSS

Domyślne ustawienia strony

Natywny stos czcionek

Nagłówki i akapity

Zasady horyzontalne

Listy

Kod wbudowany

Bloki kodu

Zmienne

Wprowadzane przez użytkownika

Przykładowe wyjście

Stoły

Formularze

Obsługa wprowadzania daty i koloru

Wskaźniki na przyciskach

Różne elementy

Adres zamieszkania

Zablokować cytat

Elementy wbudowane

Streszczenie

[hidden]Atrybut HTML5

Niezgodność jQuery

`[hidden]`Atrybut HTML5