Reporniți

Repornire, o colecție de modificări CSS specifice unui element într-un singur fișier, pornește Bootstrap pentru a oferi o linie de bază elegantă, consecventă și simplă pe care să o construiți.

Pe aceasta pagina

Abordare

Repornirea se bazează pe Normalize, oferind multe elemente HTML cu stiluri oarecum obișnuite, folosind doar selectori de elemente. Stilizarea suplimentară se face numai cu cursuri. De exemplu, repornim unele <table>stiluri pentru o linie de bază mai simplă și mai târziu oferim .table, .table-borderedși multe altele.

Iată instrucțiunile și motivele noastre pentru a alege ce să înlocuiți în repornire:

Actualizați unele valori implicite ale browserului pentru a utiliza rems în loc de ems pentru spațierea componentelor scalabilă.
Evitați margin-top. Marginile verticale se pot prăbuși, dând rezultate neașteptate. Mai important, totuși, o singură direcție margineste un model mental mai simplu.
Pentru o scalare mai ușoară pe dimensiunile dispozitivului, elementele bloc ar trebui să folosească rems pentru margins.
Păstrați declarațiile de fontproprietăți legate de -la un nivel minim, folosind ori de inheritcâte ori este posibil.

variabile CSS

Adăugat în v5.1.1

Cu v5.1.1, am standardizat elementele necesare @importîn toate pachetele noastre CSS (inclusiv bootstrap.css, bootstrap-reboot.css, și bootstrap-grid.csspentru a include _root.scss. Acest lucru adaugă :rootvariabile CSS de nivel la toate pachetele, indiferent de câte dintre ele sunt utilizate în acel pachet. În cele din urmă, Bootstrap 5 va continua să vedeți mai multe variabile CSS adăugate de-a lungul timpului.

Valori implicite ale paginii

Elementele <html>și <body>sunt actualizate pentru a oferi valori implicite mai bune la nivel de pagină. Mai exact:

Este box-sizingsetat global pentru fiecare element, inclusiv *::beforeși *::after, la border-box. Acest lucru asigură că lățimea declarată a elementului nu este niciodată depășită din cauza umpluturii sau a chenarului.
- Nicio bază nu font-sizeeste declarată pe <html>, dar 16pxeste presupusă (implicit browser). font-size: 1remeste aplicat <body>pentru o scalare a tipurilor cu răspunsuri ușoare prin interogări media, respectând în același timp preferințele utilizatorului și asigurând o abordare mai accesibilă. Acest browser implicit poate fi suprascris prin modificarea $font-size-rootvariabilei.
De <body>asemenea, setează un global font-family, font-weight, line-height, și color. Acest lucru este moștenit mai târziu de unele elemente de formular pentru a preveni inconsecvențele fonturilor.
Pentru siguranță, <body>are un declarat background-color, implicit la #fff.

Stiva de fonturi native

Bootstrap utilizează o „stivă de fonturi native” sau „stiva de fonturi de sistem” pentru redarea optimă a textului pe fiecare dispozitiv și sistem de operare. Aceste fonturi de sistem au fost concepute special ținând cont de dispozitivele de astăzi, cu randare îmbunătățită pe ecrane, suport pentru fonturi variabile și multe altele. Citiți mai multe despre stivele de fonturi native în acest articol 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;

Rețineți că, deoarece stiva de fonturi include fonturi emoji, multe simboluri comune/dingbat Unicode vor fi redate ca pictograme multicolore. Aspectul lor va varia, în funcție de stilul folosit în fontul emoji nativ al browserului/platformei și nu vor fi afectați de niciun colorstil CSS.

Acest lucru font-familyeste aplicat <body>și moștenit automat la nivel global prin Bootstrap. Pentru a comuta la nivel global font-family, actualizați $font-family-baseși recompilați Bootstrap.

variabile CSS

Pe măsură ce Bootstrap 5 continuă să se maturizeze, din ce în ce mai multe stiluri vor fi construite cu variabile CSS ca mijloc de a oferi mai multă personalizare în timp real, fără a fi nevoie să recompilați întotdeauna Sass. Abordarea noastră este să luăm variabilele noastre sursă Sass și să le transformăm în variabile CSS. În acest fel, chiar dacă nu folosiți variabile CSS, aveți totuși toată puterea Sass. Acest lucru este încă în desfășurare și va dura timp pentru a fi implementat pe deplin.

De exemplu, luați în considerare aceste :rootvariabile CSS pentru <body>stiluri comune:

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

În practică, acele variabile sunt apoi aplicate în Repornire astfel:

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

Ceea ce vă permite să faceți personalizări în timp real, după cum doriți:

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

Titluri și paragrafe

Toate elementele de antet, de exemplu, <h1>și <p>sunt resetate pentru a fi margin-topeliminate. S-au margin-bottom: .5remadăugat titluri și paragrafe margin-bottom: 1rempentru spațiere ușoară.

Titlu	Exemplu
`<h1></h1>`	h1. Titlu bootstrap
`<h2></h2>`	h2. Titlu bootstrap
`<h3></h3>`	h3. Titlu bootstrap
`<h4></h4>`	h4. Titlu bootstrap
`<h5></h5>`	h5. Titlu bootstrap
`<h6></h6>`	h6. Titlu bootstrap

Liste

Toate listele— <ul>, <ol>, și <dl>— au margin-topfost eliminate și un margin-bottom: 1rem. Listele imbricate nu au margin-bottom. Am resetat și elementele padding-leftpornit și .<ul><ol>

Toate listele au marja de sus eliminată
Și marja lor inferioară s-a normalizat
Listele imbricate nu au margine de jos
- Astfel au un aspect mai uniform
- În special atunci când este urmat de mai multe elemente din listă
Căptușeala din stânga a fost de asemenea resetată

Iată o listă ordonată
Cu câteva articole din listă
Are același aspect general
Ca și lista anterioară neordonată

Pentru un stil mai simplu, o ierarhie clară și o spațiere mai bună, listele de descriere au actualizate margins. s <dd>resetați și adăugați . s sunt îngroșate .margin-left0margin-bottom: .5rem<dt>

Liste de descriere: O listă de descriere este perfectă pentru definirea termenilor.
Termen: Definiție pentru termen.; O a doua definiție pentru același termen.
Un alt termen: Definiție pentru acest alt termen.

Cod inline

Înfășurați fragmente de cod inline cu <code>. Asigurați-vă că scăpați de parantezele unghiulare HTML.

De exemplu, <section>ar trebui să fie înfășurat ca inline.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Blocuri de cod

Utilizați <pre>s pentru mai multe linii de cod. Încă o dată, asigurați-vă că scăpați de orice paranteze unghiulare din cod pentru o redare corectă. Elementul <pre>este resetat pentru a-și elimina margin-topși pentru a utiliza remunități pentru margin-bottom.

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

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

Variabile

Pentru a indica variabile utilizați <var>eticheta.

y = m x + b

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Intrarea utilizatorului

Utilizați <kbd>pentru a indica intrarea care este de obicei introdusă prin tastatură.

Pentru a schimba directoare, tastați cdurmat de numele directorului.
Pentru a edita setările, apăsați 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>

Eșantion de ieșire

Pentru a indica rezultatul eșantionului dintr-un program, utilizați <samp>eticheta.

Acest text este menit să fie tratat ca exemplu de ieșire dintr-un program de calculator.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

Mese

Tabelele sunt ușor ajustate la stiluri <caption>, restrânge chenarele și asigură coerență text-alignpe tot parcursul. Modificări suplimentare pentru chenare, umplutură și multe altele vin cu clasa .table.

Acesta este un exemplu de tabel și aceasta este legenda sa pentru a descrie conținutul.
Titlul tabelului	Titlul tabelului	Titlul tabelului	Titlul tabelului
Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel
Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel
Celula de tabel	Celula de tabel	Celula de tabel	Celula de tabel

Forme

Diverse elemente de formular au fost repornite pentru stiluri de bază mai simple. Iată câteva dintre cele mai notabile schimbări:

<fieldset>Nu au margini, umplutură sau marjă, astfel încât acestea pot fi utilizate cu ușurință ca înveliș pentru intrări individuale sau grupuri de intrări.
<legend>S-urile, ca și seturile de câmpuri, au fost, de asemenea, modificate pentru a fi afișate ca un fel de titlu.
<label>s sunt setate pentru display: inline-blocka permite marginaplicarea.
<input>s, <select>s, <textarea>s și <button>s sunt abordate în cea mai mare parte de Normalize, dar Reboot elimină marginși seturile lor și line-height: inherit.
<textarea>E-urile sunt modificate pentru a putea fi redimensionate doar pe verticală, deoarece redimensionarea orizontală „întrerupe” adesea aspectul paginii.
<button>elementele s și <input>buton au cursor: pointercând :not(:disabled).

Aceste schimbări și multe altele sunt demonstrate mai jos.

Exemplu de legendă

Exemplu de intrare

Exemplu de e-mail

Exemplu de telefon

Exemplu de URL

Număr de exemplu

Exemplu de căutare

Exemplu de interval

Exemplu de introducere a fișierului

Selectare exemplu

Bifați această casetă de selectare

Opțiunea unu este asta și asta Opțiunea a doua este altceva care este, de asemenea, foarte lung pentru a demonstra împachetarea acestor comenzi fanteziste ale formularului. Opțiunea trei este dezactivată

Exemplu de zonă de text

Data exemplu

Exemplu de timp

Exemplu de parolă

Exemplu datetime-local

Săptămâna exemplu

Exemplu de lună

Exemplu de culoare

Exemplu de ieșire 100

Suport pentru introducerea datei și a culorilor

Rețineți că introducerea datei nu este pe deplin acceptată de toate browserele, și anume de Safari.

Indicatoare pe butoane

Repornirea include o îmbunătățire pentru role="button"a schimba cursorul implicit în pointer. Adăugați acest atribut elementelor pentru a indica elementele interactive. Acest rol nu este necesar pentru <button>elemente, care primesc propria lor cursorschimbare.

Buton element fără buton

<span role="button" tabindex="0">Non-button element button</span>

Diverse elemente

Abordare

Elementul <address>este actualizat pentru a reseta browserul implicit font-stylede italicla normal. line-heighteste și acum moștenit și margin-bottom: 1rema fost adăugat. <address>sunt pentru prezentarea informațiilor de contact pentru cel mai apropiat strămoș (sau un întreg corp de lucrare). Păstrați formatarea terminând liniile cu <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Nume complet
[email protected]

Blockquote

Valoarea implicită marginpentru ghilimelele este 1em 40px, așa că o resetam la 0 0 1remceva mai consistent cu alte elemente.

Un citat binecunoscut, conținut într-un element blockquote.

Cineva faimos în Source Title

Elemente în linie

Elementul <abbr>primește un stil de bază pentru a-l scoate în evidență printre textul paragrafului.

Elementul de abreviere HTML .

rezumat

cursorRezumatul implicit este text, așa că îl resetam la pointerpentru a transmite că elementul poate fi interacționat făcând clic pe el.

Câteva detalii

Mai multe informații despre detalii.

Chiar mai multe detalii

Iată și mai multe detalii despre detalii.

`[hidden]`atribut HTML5

HTML5 adaugă un nou atribut global numit[hidden] , care este stilat ca display: noneimplicit. Imprumutând o idee de la PureCSS , îmbunătățim această valoare implicită, ajutând la [hidden] { display: none !important; }prevenirea suprasolicitarii displayaccidentale.

<input type="text" hidden>

Incompatibilitate jQuery

[hidden]nu este compatibil cu jQuery $(...).hide()și $(...).show()metodele. Prin urmare, în prezent nu susținem în mod special [hidden]alte tehnici de gestionare displaya elementelor.

Pentru a comuta pur și simplu vizibilitatea unui element, adică displaynu este modificat și elementul poate afecta în continuare fluxul documentului, utilizați în schimb .invisibleclasa .

Reporniți

Abordare

variabile CSS

Valori implicite ale paginii

Stiva de fonturi native

variabile CSS

Titluri și paragrafe

Liste

Cod inline

Blocuri de cod

Variabile

Intrarea utilizatorului

Eșantion de ieșire

Mese

Forme

Suport pentru introducerea datei și a culorilor

Indicatoare pe butoane

Diverse elemente

Abordare

Blockquote

Elemente în linie

rezumat

[hidden]atribut HTML5

Incompatibilitate jQuery

`[hidden]`atribut HTML5