Source

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 alap 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem és massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem és massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

Előre formázott szöveg

Az <pre>elemet alaphelyzetbe állítja, 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 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.

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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 .