in English

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

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.css) elemet is _root.scss. Ez minden csomaghoz hozzáadja :roota CSS-szintű változókat, függetlenül attól, hogy hányat használunk belőlük az adott kötegben. Végül a Bootstrap 5 továbbra is több CSS-változót fog látni az idő múlásával, hogy több valós idejű testreszabást biztosítson a Sass újrafordítása nélkül. 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 {
    --#{$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};

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

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
}

Ez lehetővé teszi, hogy tetszés szerint valós idejű testreszabásokat hajtson végre:

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

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,
  // 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;

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.

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

Vízszintes szabályok

Az <hr>elem leegyszerűsödött. A böngésző alapértelmezéseihez hasonlóan az <hr>s stílusa border-top: , alapértelmezett értékük van opacity: .25, és automatikusan örökli a border-colorvia -t color, beleértve azt is, ha colora szülőn keresztül van beállítva. Módosíthatók szöveges, szegélyes és átlátszósági segédprogramokkal.

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

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. A padding-leftbe <ul>és <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ást is visszaállították

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.

html

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>

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>

Változók

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

y = m x + b

html

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

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>

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.

html

<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

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>

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

Példa legenda

Példa bemenet

Példa email

Példa telefon

Példa URL

Példaszám

Példa keresés

Példa tartomány

Példa fájlbevitelre

Példa kiválasztása

Jelölje be ezt a jelölőnégyzetet

Az első lehetőség ez és az A második lehetőség valami más, ami szintén rendkívül hosszú, hogy bemutassa e díszes űrlapvezérlők burkolását. A harmadik lehetőség le van tiltva

Példa szövegterületre

Példa dátum

Példaidő

Példa jelszó

Példa datetime-local

Példa hét

Példa hónap

Példa szín

Példa kimenet 100

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 egy olyan fejlesztést tartalmaz, amely role="button"az alapértelmezett kurzort a következőre módosítja 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

html

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

Címek és bekezdések

Vízszintes szabályok

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