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

Á þessari síðu

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.

CSS breytur

Bætt við í v5.2.0

Með v5.1.1 staðlaðum við nauðsynlegar upplýsingar @importí öllum CSS-búntum okkar (þar á meðal bootstrap.css, bootstrap-reboot.css, og bootstrap-grid.css) til að innihalda _root.scss. Þetta bætir :rootstig CSS breytum við alla búnta, óháð því hversu margar þeirra eru notaðar í þeim búnti. Að lokum mun Bootstrap 5 halda áfram að sjá fleiri CSS breytum bætt við með tímanum, til að veita meiri rauntíma aðlögun án þess að þurfa alltaf að setja Sass saman aftur. Nálgun okkar er að taka uppruna Sass breyturnar okkar og umbreyta þeim í CSS breytur. Þannig, jafnvel þótt þú notir ekki CSS breytur, hefurðu samt allan kraft Sass. Þetta er enn í vinnslu og mun taka tíma að framkvæma að fullu.

Til dæmis skaltu íhuga þessar :rootCSS breytur fyrir algenga <body>stíla:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

Í reynd er þessum breytum síðan beitt í endurræsingu á þennan hátt:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

Sem gerir þér kleift að gera sérstillingar í rauntíma eins og þú vilt:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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. Hægt er að hnekkja þessum sjálfgefna vafra með því að $font-size-rootbreyta breytunni.
Setur <body>einnig alþjóðlegt font-family, font-weight, line-height, og color. Þ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

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,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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

Láréttar reglur

Þátturinn <hr>hefur verið einfaldaður. Svipað og sjálfgefið vafra, <hr>eru s stílaðir með border-top, hafa sjálfgefið opacity: .25, og erfa sjálfkrafa þeirra border-colorvia color, þar á meðal hvenær colorer stillt í gegnum foreldri. Hægt er að breyta þeim með texta-, ramma- og ógagnsæi tólum.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Listar

Allir listar <ul>— , <ol>, og <dl>— hafa margin-topfjarlægt og margin-bottom: 1rem. Hreiður listar hafa engin margin-bottom. Við höfum líka endurstillt kveikt padding-leftog <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 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.

Innbyggður kóða

Vefjið innbyggða kóðabúta með <code>. Vertu viss um að forðast HTML hornsviga.

Til dæmis <section>ætti að pakka inn sem inline.

html

For example, <code>&lt;section&gt;</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-topog nota remeiningar fyrir margin-bottom.

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Breytur

<var>Notaðu merkið til að gefa til kynna breytur .

y = m x + b

html

<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ð skipta um möppu, sláðu inn cdá eftir nafni möppunnar.
Til að breyta stillingum, ýttu á ctrl + ,

html

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 .

Það er ætlað að meðhöndla þennan texta sem sýnishorn úr tölvuforriti.

html

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

Þ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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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.

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

Hnappur sem ekki er hnappur

html

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

HTML skammstöfunarþátturinn .

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.

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

Endurræstu

Nálgun

CSS breytur

Sjálfgefnar síður

Innfæddur leturstafla

Fyrirsagnir og málsgreinar

Láréttar reglur

Listar

Innbyggður kóða

Kóða blokkir

Breytur

Inntak notanda

Sýnishorn úttak

Töflur

Eyðublöð

Stuðningur við innslátt dagsetningar og lita

Ábendingar á hnöppum

Ýmsir þættir

Heimilisfang

Blockquote

Innbyggðir þættir

Samantekt

HTML5 [hidden]eiginleiki

jQuery ósamrýmanleiki

HTML5 `[hidden]`eiginleiki