Endurræstu
Endurræsa, safn af þáttasértækum CSS breytingum í einni skrá, kickstart Bootstrap til að veita glæsilega, samkvæma og einfalda grunnlínu til að byggja á.
Nálgun
Endurræsa byggir á Normalize, sem gefur mörgum HTML þáttum með nokkuð skoðanakenndum stíl með því að nota aðeins þáttaval. Viðbótar stíll er aðeins gert með flokkum. Til dæmis endurræsum við nokkra <table>
stíla fyrir einfaldari grunnlínu og gefum síðar .table
, .table-bordered
, og fleira.
Hér eru leiðbeiningar okkar og ástæður fyrir því að velja hvað á að hnekkja í endurræsingu:
- Uppfærðu sum sjálfgefin gildi vafra til að nota
rem
s í staðem
s fyrir stigstærð íhlutabil. - Forðastu
margin-top
. Lóðrétt framlegð getur hrunið og skilað óvæntum niðurstöðum. Mikilvægara er þó að ein stefnamargin
er einfaldara andlegt líkan. - Til að auðvelda mælikvarða á tækjastærðum ættu blokkeiningar að nota
rem
s fyrirmargin
s. - Haldið yfirlýsingum um
font
-tengda eiginleika í lágmarki, notaðuinherit
þegar mögulegt er.
Sjálfgefnar síður
Þættirnir <html>
og <body>
eru uppfærðir til að veita betri sjálfgefnar stillingar á síðu. Nánar tiltekið:
- The
box-sizing
er á heimsvísu stillt á alla þætti—þar á meðal*::before
og*::after
, tilborder-box
. Þetta tryggir að aldrei sé farið yfir uppgefin breidd frumefnis vegna fyllingar eða ramma.- Enginn grunnur
font-size
er tilgreindur á<html>
, en16px
gert er ráð fyrir (sjálfgefið vafra).font-size: 1rem
er beitt á til<body>
að auðvelda móttækileg tegundarstærð í gegnum fjölmiðlafyrirspurnir á meðan notendastillingar eru virtar og tryggðari aðgengilegri nálgun. Hægt er að hnekkja þessum sjálfgefna vafra með því að$font-size-root
breyta breytunni.
- Enginn grunnur
- Setur
<body>
einnig alþjóðlegtfont-family
,font-weight
,line-height
, ogcolor
. Þetta erfist síðar af sumum formþáttum til að koma í veg fyrir ósamræmi í leturgerð. - Til öryggis
<body>
er lýst yfirbackground-color
, sem er sjálfgefið#fff
.
Innfæddur leturstafla
Bootstrap notar „innfæddan leturstafla“ eða „kerfisleturstafla“ til að ná sem bestum textaútgáfu í hverju tæki og stýrikerfi. Þessar kerfisleturgerðir hafa verið hönnuð sérstaklega með tæki nútímans í huga, með bættri birtingu á skjám, stuðningi við breytilegt letur og fleira. Lestu meira um innfædda leturstafla í þessari grein í Smashing Magazine .
$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;
Athugaðu að vegna þess að leturstaflan inniheldur emoji leturgerðir verða margir algengir tákn/dingbat unicode stafir sýndir sem marglitar myndir. Útlit þeirra er breytilegt, eftir því hvaða stíl er notaður í innfæddu emoji leturgerð vafrans/pallsins, og þeir verða ekki fyrir áhrifum af neinum CSS color
stílum.
Þetta font-family
er notað á <body>
og erfist sjálfkrafa um allan heim allan Bootstrap. Til að skipta um alþjóðlegt font-family
skaltu uppfæra $font-family-base
og setja saman Bootstrap aftur.
Fyrirsagnir og málsgreinar
Allar fyrirsagnir – td – <h1>
og <p>
eru endurstilltar til að margin-top
fjarlægja þær. Fyrirsagnir hafa margin-bottom: .5rem
bætt við og málsgreinar margin-bottom: 1rem
til að auðvelda bil.
Fyrirsögn | Dæmi |
---|---|
<h1></h1> |
h1. Bootstrap fyrirsögn |
<h2></h2> |
h2. Bootstrap fyrirsögn |
<h3></h3> |
h3. Bootstrap fyrirsögn |
<h4></h4> |
h4. Bootstrap fyrirsögn |
<h5></h5> |
h5. Bootstrap fyrirsögn |
<h6></h6> |
h6. Bootstrap fyrirsögn |
Listar
Allir listar <ul>
— , <ol>
, og <dl>
— hafa margin-top
fjarlægt og margin-bottom: 1rem
. Hreiður listar hafa engin margin-bottom
. Við höfum líka endurstillt kveikt padding-left
og <ul>
þætti <ol>
.
- Efstu spássían er fjarlægð á öllum listum
- Og botnframlegð þeirra varð eðlileg
- Hreiður listar hafa enga neðstu spássíu
- Þannig hafa þeir jafnara útlit
- Sérstaklega þegar fleiri listaatriði fylgja á eftir
- Vinstri bólstrunin hefur einnig verið endurstillt
- Hér er pantaður listi
- Með nokkrum listaatriðum
- Það hefur sama heildarútlit
- Eins og fyrri óraðaður listi
Fyrir einfaldari stíl, skýra stigveldi og betra bil hafa lýsingarlistar uppfært margin
s. <dd>
s endurstilla margin-left
á 0
og bæta við margin-bottom: .5rem
. <dt>
s eru feitletruð .
- Lýsingarlistar
- Lýsingarlisti er fullkominn til að skilgreina hugtök.
- Kjörtímabil
- Skilgreining á hugtakinu.
- Önnur skilgreining fyrir sama hugtak.
- Annað kjörtímabil
- Skilgreining á þessu öðru hugtaki.
Innbyggður kóða
Vefjið innbyggða kóðabúta með <code>
. Vertu viss um að forðast HTML hornsviga.
<section>
ætti að pakka inn sem inline.
For example, <code><section></code> should be wrapped as inline.
Kóða blokkir
Notaðu <pre>
s fyrir margar línur af kóða. Enn og aftur, vertu viss um að sleppa við allar hornsvigar í kóðanum fyrir rétta flutning. Einingin <pre>
er endurstillt til að fjarlægja margin-top
og nota rem
einingar fyrir 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>
Breytur
<var>
Notaðu merkið til að gefa til kynna breytur .
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Inntak notanda
Notaðu til <kbd>
að gefa til kynna inntak sem venjulega er slegið inn með lyklaborði.
Til að breyta stillingum, ýttu á 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>
Sýnishorn úttak
<samp>
Notaðu merkið til að gefa til kynna sýnishorn úr forriti .
<samp>This text is meant to be treated as sample output from a computer program.</samp>
Töflur
Töflur eru örlítið lagaðar að stíl <caption>
, hrynja saman landamæri og tryggja stöðugleika text-align
í gegn. Viðbótarbreytingar fyrir ramma, fyllingu og fleira koma með bekknum.table
.
Fyrirsögn töflu | Fyrirsögn töflu | Fyrirsögn töflu | Fyrirsögn töflu |
---|---|---|---|
Tafla klefi | Tafla klefi | Tafla klefi | Tafla klefi |
Tafla klefi | Tafla klefi | Tafla klefi | Tafla klefi |
Tafla klefi | Tafla klefi | Tafla klefi | Tafla klefi |
Eyðublöð
Ýmsir formþættir hafa verið endurræstir fyrir einfaldari grunnstíla. Hér eru nokkrar af athyglisverðustu breytingunum:
<fieldset>
s hafa engin landamæri, fyllingu eða spássíu svo auðvelt er að nota þau sem umbúðir fyrir einstök inntak eða hópa af inntakum.<legend>
s, eins og fieldsets, hafa einnig verið endurstílað til að birtast sem fyrirsögn.<label>
s eru stillt á tildisplay: inline-block
að leyfamargin
að vera beitt.<input>
s,<select>
s,<textarea>
s, og<button>
s eru að mestu leyti tekin fyrir með Normalize, en Reboot fjarlægir þaumargin
og seturline-height: inherit
líka.<textarea>
s eru breytt til að vera aðeins hægt að breyta stærðinni lóðrétt þar sem lárétt stærðarbreyting „brýtur“ oft síðuuppsetningu.<button>
s og<input>
hnappaþættir hafacursor: pointer
hvenær:not(:disabled)
.
Þessar breytingar og fleiri eru sýndar hér að neðan.
Stuðningur við innslátt dagsetningar og lita
Hafðu í huga að dagsetningarinntak er ekki að fullu studd af öllum vöfrum, nefnilega Safari.
Ábendingar á hnöppum
Endurræsa inniheldur aukningu til role="button"
að breyta sjálfgefna bendilinn í pointer
. Bættu þessari eigind við þætti til að gefa til kynna að þættir séu gagnvirkir. Þetta hlutverk er ekki nauðsynlegt fyrir <button>
þætti sem fá sína eigin cursor
breytingu.
<span role="button" tabindex="0">Non-button element button</span>
Ýmsir þættir
Heimilisfang
Einingin <address>
er uppfærð til að endurstilla sjálfgefna vafra font-style
úr italic
í normal
. line-height
er einnig nú erfður, og margin-bottom: 1rem
hefur verið bætt við. <address>
s eru til að kynna tengiliðaupplýsingar fyrir næsta forföður (eða allt verk). Varðveittu sniðið með því að enda línur með <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Fullt nafn
[email protected]
Blockquote
Sjálfgefið margin
á blokkatilvitnunum er 1em 40px
, svo við endurstillum það á 0 0 1rem
fyrir eitthvað meira í samræmi við aðra þætti.
Vel þekkt tilvitnun, sem er í blokkatilvitnun.
Einhver frægur í Source Title
Innbyggðir þættir
Einingin <abbr>
fær grunngerð til að gera hann áberandi meðal málsgreinatexta.
Samantekt
Sjálfgefið cursor
á samantekt er text
, svo við endurstillum það á til pointer
að koma því á framfæri að hægt sé að hafa samskipti við þáttinn með því að smella á hann.
Nokkur smáatriði
Nánari upplýsingar um smáatriðin.
Jafnvel fleiri smáatriði
Hér eru enn frekari upplýsingar um smáatriðin.
HTML5 [hidden]
eiginleiki
HTML5 bætir við nýjum alþjóðlegum eiginleikum sem heitir[hidden]
, sem er display: none
sjálfgefið stíll. Með því að fá lánaða hugmynd frá PureCSS bætum við þetta sjálfgefið með því [hidden] { display: none !important; }
að koma í veg fyrir display
að það verði óvart hnekkt.
<input type="text" hidden>
jQuery ósamrýmanleiki
[hidden]
er ekki samhæft við jQuery $(...).hide()
og $(...).show()
aðferðir. Þess vegna styðjum við nú ekki sérstaklega [hidden]
aðrar aðferðir til að stjórna display
þáttum.
Til að skipta aðeins um sýnileika staks, sem þýðir að því display
er ekki breytt og þátturinn getur samt haft áhrif á flæði skjalsins, notaðu flokkinn .invisible
í staðinn.