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 rems í stað ems 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 stefna marginer einfaldara andlegt líkan.
Til að auðvelda mælikvarða á tækjastærðum ættu blokkeiningar að nota rems fyrir margins.
Haldið yfirlýsingum um font-tengda eiginleika í lágmarki, notaðu inheritþ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-sizinger á heimsvísu stillt á alla þætti—þar á meðal *::beforeog *::after, til border-box. Þetta tryggir að aldrei sé farið yfir uppgefin breidd frumefnis vegna fyllingar eða ramma.
Enginn grunnur font-sizeer tilgreindur á <html>, en 16pxgert er ráð fyrir (sjálfgefið vafra). font-size: 1remer 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.
Setur <body>einnig alþjóðlegt font-family, line-height, og text-align. Þetta erfist síðar af sumum formþáttum til að koma í veg fyrir ósamræmi í leturgerð.
Til öryggis <body>er lýst yfir background-color, sem er sjálfgefið #fff.

Innfæddur leturstafla

Sjálfgefin vefleturgerð (Helvetica Neue, Helvetica og Arial) hefur verið sleppt í Bootstrap 4 og skipt út fyrir „innfæddan leturstafla“ til að fá sem besta textaútgáfu í hverju tæki og stýrikerfi. Lestu meira um innfædda leturstafla í þessari grein í Smashing Magazine .

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

Athugaðu að vegna þess að leturstaflan inniheldur emoji leturgerðir, verða margir algengir Unicode-tákn/dingbat-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 colorstílum.

Þetta font-familyer notað á <body>og erfist sjálfkrafa um allan heim allan Bootstrap. Til að skipta um alþjóðlegt font-familyskaltu uppfæra $font-family-baseog setja saman Bootstrap aftur.

Fyrirsagnir og málsgreinar

Allar fyrirsagnir – td – <h1>og <p>eru endurstilltar til að margin-topfjarlægja þær. Fyrirsagnir hafa margin-bottom: .5rembætt við og málsgreinar margin-bottom: 1remtil 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-topfjarlægt og margin-bottom: 1rem. Hreiður listar hafa engin margin-bottom.

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 margins. <dd>s endurstilla margin-leftá 0og 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.

Forsniðinn texti

Einingin <pre>er endurstillt til að fjarlægja margin-topog nota remeiningar fyrir margin-bottom.

.example-element {
  spássíu-botn: 1rem;
}

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 .

Þetta er dæmi tafla og þetta er yfirskrift hennar til að lýsa innihaldinu.
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 á til display: inline-blockað leyfa marginað vera beitt.
<input>s, <select>s, <textarea>s, og <button>s eru að mestu leyti tekin fyrir með Normalize, en Reboot fjarlægir þau marginog setur line-height: inheritlí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 hafa cursor: pointerhvenær :not(:disabled).

Þessar breytingar og fleiri eru sýndar hér að neðan.

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

Hnappur sem ekki er hnappur

<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-heighter einnig nú erfður, og margin-bottom: 1remhefur 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>.

Twitter, Inc.
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 1remfyrir 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.

Nulla attr vitae elit libero, a pharetra augue.

Samantekt

Sjálfgefið cursorá samantekt er text, svo við endurstillum það á til pointerað 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: nonesjá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 displayað það verði óvart hnekkt. Þó að [hidden]hún sé ekki studd af IE10, þá kemur skýra yfirlýsingin í CSS okkar í kringum það vandamál.

<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í displayer ekki breytt og þátturinn getur samt haft áhrif á flæði skjalsins, notaðu flokkinn .invisibleí staðinn.