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 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
rem
s helyettem
s 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ánymargin
egy 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
rem
s helyettmargin
. font
Minimalizálja a kapcsolódó tulajdonságok deklarációit ,inherit
amikor 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-sizing
globálisan be van állítva minden elemen – beleértve a*::before
és*::after
, -t isborder-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-size
deklarálva bázis a<html>
-ban, de16px
feltételezik (a böngésző alapértelmezése). A médialekérdezéseken keresztüli egyszerű típusskálázás érdekébenfont-size: 1rem
alkalmazzá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-root
változó módosításával.
- Nincs
- Az
<body>
is beállít egy globálisfont-family
,font-weight
,line-height
, éscolor
. 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áltbackground-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- color
stílus nem érinti őket.
Ez font-family
vonatkozik a <body>
Bootstrap rendszerre, és automatikusan öröklődik globálisan. A globális váltáshoz font-family
frissí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-top
eltávolítsák. Címsorok margin-bottom: .5rem
és bekezdések kerültek hozzáadásra margin-bottom: 1rem
a 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-top
eltávolítva és a margin-bottom: 1rem
. A beágyazott listáknak nincs margin-bottom
. Az padding-left
on <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 margin
lettek. <dd>
s visszaállítja margin-left
és 0
hozzá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.
<section>
soron belüliként kell csomagolni.
For example, <code><section></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 rem
egységeket használjon hozzá margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Változók
A változók jelzésére használja a <var>
címkét.
<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 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.
<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 .table
osztályhoz tartoznak .
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-block
hogy lehetővé tegyemargin
az 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 őketmargin
és beállítja a -tline-height: inherit
is.<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 vancursor: pointer
amikor: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 cursor
változást kapnak.
<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-style
alapértelmezett italic
értékét normal
. line-height
szintén most öröklődik, és margin-bottom: 1rem
hozzá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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Teljes név
[email protected]
Idézetblokk
margin
A blockquotes alapértelmezett értéke 1em 40px
, ezért visszaállítjuk, hogy 0 0 1rem
valami 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.
Összegzés
cursor
Az összegzés alapértelmezett értéke text
, ezért ezt visszaállítjuk, hogy jelezzük, pointer
hogy 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: none
alapé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 display
vé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 display
az nem módosul, és az elem továbbra is befolyásolhatja a dokumentum menetét, használja helyette az .invisible
osztályt .