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.

Megközelítés

Az újraindítás a Normalize-re épül, és számos HTML-elemet biztosít némileg véleménynyilvánított stílussal, csak elemválasztókat használva. 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 az irányelveink és az indokaink, hogy miért kell felülírni az újraindítást:

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.

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>
Az <body>is beállít egy globális font-family, line-height, és text-align. 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

Az alapértelmezett webes betűtípusok (Helvetica Neue, Helvetica és Arial) kikerültek a Bootstrap 4-ből, és helyükre „natív betűkészlet-verem” került az optimális szövegmegjelenítés érdekében minden eszközön és operációs rendszeren. A natív betűkészlet-halmazokról a Smashing Magazine cikkében olvashat bővebben .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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.

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.

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 egy második meghatározása.
Egy másik kifejezés: Ennek a másik kifejezésnek a meghatározása.

Előre formázott szöveg

Az <pre>elem alaphelyzetbe áll, hogy eltávolítsa margin-topés remegységeket használjon hozzá margin-bottom.

.example-element {
  margó-alsó: 1rem;
}

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 a mezőkészletekhez hasonlóan szintén át lett alakítva, hogy egyfajta címsorként jelenjenek meg.
<label>s úgy van 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.

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

Nulla attr vitae elit libero, a pharetra augue.

Ö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. Bár [hidden]az IE10 natívan nem támogatja, a CSS-ünkben található kifejezett deklaráció megkerüli ezt a problémá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 .