Indítsa újra

A Reboot, az elemspecifikus CSS-módosítások gyűjteménye egyetlen fájlban, elindítja a Bootstrap-et, hogy elegáns, következetes és egyszerű alapvonalat biztosítson, amelyre építeni lehet.

Ezen az oldalon

Megközelítés

Az újraindítás a Normalize-re épül, és számos HTML-elemet biztosít némileg elgondolkodtató stílussal, csak elemválasztók használatával. A kiegészítő stílus csak osztályokkal történik. Például újraindítunk néhány <table>stílust az egyszerűbb alapvonal érdekében, és később biztosítjuk a .table, .table-bordered, és egyebeket.

Íme irányelveink és indokaink, amiért azt választjuk, hogy mit kell felülírni az Újraindításban:

Frissítsen néhány böngésző alapértelmezett értékét, hogy az rems helyett ems legyen a méretezhető komponenstávolsághoz.
Kerüld el margin-top. A függőleges margók összeeshetnek, ami váratlan eredményeket eredményezhet. Ennél is fontosabb azonban, hogy egyetlen irány marginegy egyszerűbb mentális modell.
Az eszközméretek közötti könnyebb skálázás érdekében a blokkelemeknek s-t kell használniuk rems helyett margin.
fontMinimalizálja a kapcsolódó tulajdonságok deklarációit , inheritamikor csak lehetséges.

CSS-változók

Hozzáadva a v5.1.1-hez

Az 5.1.1-es verzióval szabványosítottuk a szükséges @imports-eket az összes CSS-csomagunkban (beleértve a bootstrap.css, bootstrap-reboot.css, és bootstrap-grid.cssto include _root.scss. Ez a CSS-szintű változókat hozzáadja :rootaz összes csomaghoz, függetlenül attól, hogy hányat használunk belőlük az adott csomagban. Végül a Bootstrap 5 továbbra is az idő múlásával hozzáadott további CSS-változók megtekintése.

Az oldal alapértelmezett beállításai

A <html>és <body>elemek frissülnek, hogy jobb oldalszintű alapértelmezett értékeket biztosítsanak. Pontosabban:

A box-sizingglobálisan be van állítva minden elemen – beleértve a *::beforeés *::after, -t is border-box. Ez biztosítja, hogy az elem deklarált szélességét soha ne lépje túl a kitöltés vagy a szegély.
- Nincs font-sizedeklarálva bázis a <html>-ban, de 16pxfeltételezik (a böngésző alapértelmezése). A médialekérdezéseken keresztüli egyszerű típusskálázás érdekében font-size: 1remalkalmazzák, miközben tiszteletben tartja a felhasználói preferenciákat és biztosítja a könnyebben elérhető megközelítést. <body>Ez a böngésző alapértelmezése felülírható a $font-size-rootváltozó módosításával.
Az <body>is beállít egy globális font-family, font-weight, line-height, és color. Ezt később egyes űrlapelemek öröklik, hogy elkerüljék a betűtípus inkonzisztenciáját.
Biztonsági okokból <body>a deklarált background-color, alapértelmezett értéke #fff.

Natív betűkészlet

A Bootstrap „natív betűkészlet-vereget” vagy „rendszer-betűkészletet” használ az optimális szövegmegjelenítés érdekében minden eszközön és operációs rendszeren. Ezeket a rendszer-betűtípusokat kifejezetten a mai eszközöket szem előtt tartva tervezték, javított megjelenítéssel a képernyőkön, változó betűtípus-támogatással stb. A natív betűkészlet-halmazokról a Smashing Magazine cikkében olvashat bővebben .

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

Vegye figyelembe, hogy mivel a betűkészlet emoji betűtípusokat tartalmaz, sok gyakori szimbólum/dingbat unicode karakter többszínű piktogramként jelenik meg. Megjelenésük a böngésző/platform natív hangulatjel-betűkészletében használt stílustól függően változhat, és semmilyen CSS- colorstílus nem érinti őket.

Ez font-familyvonatkozik a <body>Bootstrap rendszerre, és automatikusan öröklődik globálisan. A globális váltáshoz font-familyfrissítse $font-family-baseés fordítsa újra a Bootstrapet.

CSS-változók

Ahogy a Bootstrap 5 tovább fejlődik, egyre több stílust építenek majd CSS-változókkal , hogy több valós idejű testreszabást biztosítsanak anélkül, hogy a Sass-t mindig újra kellene fordítani. Megközelítésünk az, hogy a forrás Sass-változóinkat átvesszük és CSS-változókká alakítjuk. Így még ha nem is használ CSS-változókat, a Sass minden ereje továbbra is rendelkezésére áll. Ez még folyamatban van, és időbe telik a teljes megvalósítás.

Vegyük például ezeket a :rootCSS-változókat a gyakori <body>stílusokhoz:

  @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};

A gyakorlatban ezek a változók az Újraindításban így kerülnek alkalmazásra:

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
}

Ez lehetővé teszi a valós idejű testreszabások tetszés szerinti elvégzését:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

Címek és bekezdések

Minden címsorelem – pl. <h1>– <p>és visszaállításra kerül, hogy margin-topeltávolítsák. Címsorok margin-bottom: .5remés bekezdések kerültek hozzáadásra margin-bottom: 1rema könnyű térközök érdekében.

Cím	Példa
`<h1></h1>`	h1. Bootstrap címsor
`<h2></h2>`	h2. Bootstrap címsor
`<h3></h3>`	h3. Bootstrap címsor
`<h4></h4>`	h4. Bootstrap címsor
`<h5></h5>`	h5. Bootstrap címsor
`<h6></h6>`	h6. Bootstrap címsor

Listák

Minden listának <ul>– , <ol>, és <dl>– margin-topeltávolítva és a margin-bottom: 1rem. A beágyazott listáknak nincs margin-bottom. Az padding-lefton <ul>és az <ol>elemeket is visszaállítottuk.

Minden lista felső margója eltávolítva
Az alsó margójuk pedig normalizálódott
A beágyazott listáknak nincs alsó margója
- Így egyenletesebb megjelenést kapnak
- Különösen, ha több listaelem követi
A bal oldali párnázás is visszaállításra került

Itt egy rendezett lista
Néhány listaelemgel
Ugyanaz az összkép
Mint az előző rendezetlen lista

Az egyszerűbb stílus, az egyértelmű hierarchia és a jobb térköz érdekében a leíráslisták frissítve marginlettek. <dd>s visszaállítja margin-leftés 0hozzáadja margin-bottom: .5rem. <dt>s vastagon vannak szedve .

Leírás listák: A leírások listája tökéletes a kifejezések meghatározásához.
Term: A kifejezés definíciója.; Ugyanennek a kifejezésnek a második meghatározása.
Egy másik kifejezés: Ennek a másik kifejezésnek a meghatározása.

Inline kód

Burkolja be a soron belüli kódrészleteket a következővel: <code>. Ügyeljen arra, hogy elkerülje a HTML szögletes zárójeleket.

Például <section>soron belüliként kell csomagolni.

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

Kódblokkok

Használja <pre>az s-t több kódsorhoz. Még egyszer ügyeljen arra, hogy a megfelelő megjelenítés érdekében ne hagyja ki a szögletes zárójeleket a kódban. Az <pre>elem alaphelyzetbe áll, hogy eltávolítsa margin-topés remegységeket használjon hozzá margin-bottom.

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

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

Változók

A változók jelzésére használja a <var>címkét.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Felhasználói bevitel

Használja a <kbd>gombot a tipikusan billentyűzetről bevitt bevitel jelzésére.

A könyvtárak közötti váltáshoz írja be, cdmajd írja be a könyvtár nevét.
A beállítások módosításához nyomja meg a gombot 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>

Minta kimenet

A program minta kimenetének jelzéséhez használja a <samp>címkét.

Ezt a szöveget egy számítógépes program minta kimeneteként kell kezelni.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Táblázatok

A táblázatok enyhén igazodnak az <caption>s stílushoz, összecsukják a szegélyeket, és biztosítják az egységességet text-align. A szegélyekre, a kitöltésre és egyebekre vonatkozó további változtatások az .tableosztályhoz tartoznak .

Ez egy példa táblázat, és ez a felirat a tartalom leírására.
Táblázat címe	Táblázat címe	Táblázat címe	Táblázat címe
Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella
Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella
Táblázat cella	Táblázat cella	Táblázat cella	Táblázat cella

Űrlapok

Különféle űrlapelemek újraindításra kerültek az egyszerűbb alapstílusok érdekében. Íme néhány a legszembetűnőbb változtatások közül:

<fieldset>Nincsenek szegélyek, kitöltés vagy margók, így könnyen használhatók egyedi bemenetek vagy bemeneti csoportok burkolóanyagaként.
<legend>s, mint a mezőkészletek, szintén át lett alakítva, hogy egyfajta címsorként jelenjenek meg.
<label>s úgy vannak beállítva, display: inline-blockhogy lehetővé tegye marginaz alkalmazást.
<input>Az s-t, <select>s-t, <textarea>s-t és <button>s-t többnyire a Normalize kezeli, de a Reboot eltávolítja őket marginés beállítja a -t line-height: inheritis.
<textarea>s úgy módosul, hogy csak függőlegesen legyen átméretezhető, mivel a vízszintes átméretezés gyakran „megtöri” az oldalelrendezést.
<button>s és <input>gombelemeknél van cursor: pointeramikor :not(:disabled).

Ezeket a változásokat és még sok mást az alábbiakban mutatunk be.

Dátum és szín beviteli támogatás

Ne feledje, hogy a dátumbevitelt nem minden böngésző támogatja teljes mértékben , nevezetesen a Safari.

Mutatók a gombokon

Az Újraindítás tartalmaz egy továbbfejlesztést role="button"az alapértelmezett kurzor módosításához pointer. Adja hozzá ezt az attribútumot az elemekhez, hogy jelezze, hogy az elemek interaktívak. Ez a szerep nem szükséges azoknál az <button>elemeknél, amelyek saját cursorváltozást kapnak.

Nem gombos elem gomb

<span role="button" tabindex="0">Non-button element button</span>

Egyéb elemek

Cím

Az <address>elem frissítve van, hogy visszaállítsa a böngésző font-stylealapértelmezett italicértékét normal. line-heightszintén most öröklődik, és margin-bottom: 1remhozzáadásra került. <address>s a legközelebbi ős (vagy egy teljes munka) elérhetőségi adatainak bemutatására szolgál. A formázás megőrzése a sorok karakterrel történő befejezésével <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Teljes név
[email protected]

Idézetblokk

marginA blockquotes alapértelmezett értéke 1em 40px, ezért visszaállítjuk, hogy 0 0 1remvalami konzisztensebb legyen a többi elemmel.

Egy jól ismert idézet, blokk idézőjelben található.

Valaki híres a Forrás címében

Inline elemek

Az <abbr>elem alapvető stílust kap, hogy kitűnjön a bekezdés szövegéből.

A HTML rövidítés eleme.

Összegzés

cursorAz összegzés alapértelmezett értéke text, ezért ezt visszaállítjuk, hogy jelezzük, pointerhogy az elemre kattintva interakcióba léphet.

Néhány részlet

További információ a részletekről.

Még több részlet

Itt még több részlet a részletekről.

HTML5 `[hidden]`attribútum

A HTML5 hozzáad egy új globális attribútumot[hidden] , amelynek stílusa display: nonealapértelmezés szerint a következő. A PureCSS - től kölcsönözve egy ötletet javítunk ezen az alapértelmezésen azáltal, [hidden] { display: none !important; }hogy megakadályozzuk annak displayvéletlen felülbírálását.

<input type="text" hidden>

jQuery inkompatibilitás

[hidden]nem kompatibilis a jQuery-vel $(...).hide()és $(...).show()módszerekkel. Ezért jelenleg nem támogatjuk különösebben az elemek [hidden]kezelésének más technikáit .display

Ha csak egy elem láthatóságát szeretné átkapcsolni, ami azt jelenti, hogy displayaz nem módosul, és az elem továbbra is befolyásolhatja a dokumentum menetét, használja helyette az .invisibleosztályt .

Indítsa újra

Megközelítés

CSS-változók

Az oldal alapértelmezett beállításai

Natív betűkészlet

CSS-változók

Címek és bekezdések

Listák

Inline kód

Kódblokkok

Változók

Felhasználói bevitel

Minta kimenet

Táblázatok

Űrlapok

Dátum és szín beviteli támogatás

Mutatók a gombokon

Egyéb elemek

Cím

Idézetblokk

Inline elemek

Összegzés

HTML5 [hidden]attribútum

jQuery inkompatibilitás

HTML5 `[hidden]`attribútum