in English

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 bază elegantă, consecventă și simplă pe care să o construiți.

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.

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 căptușelii sau a chenarului.
  • Nicio bază nu font-sizeeste declarată pe <html>, dar 16pxeste presupusă (prestabilit browser). font-size: 1remeste aplicat <body>pentru o scalare ușoară a tipului de răspuns prin interogări media, respectând în același timp preferințele utilizatorului și asigurând o abordare mai accesibilă.
  • De <body>asemenea, setează un global font-family, line-height, și text-align. 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

Fonturile web implicite (Helvetica Neue, Helvetica și Arial) au fost eliminate în Bootstrap 4 și înlocuite cu o „stivă de fonturi native” pentru redarea optimă a textului pe fiecare dispozitiv și sistem de operare. Citiți mai multe despre stivele de fonturi native în acest articol 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;

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.

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.

  • 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ă
  1. Iată o listă ordonată
  2. Cu câteva elemente din listă
  3. Are același aspect general
  4. 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.

Text preformatat

Elementul <pre>este resetat pentru a-și elimina margin-topși pentru a utiliza remunități pentru margin-bottom.

.example-element {
  margine-jos: 1rem;
}

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ă

100

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 la 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 celebru în Titlul sursă

Elemente în linie

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

Nulla attr vitae elit libero, a pharetra augue.

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. Împrumutând o idee de la PureCSS , îmbunătățim această valoare implicită, ajutând la [hidden] { display: none !important; }prevenirea suprasolicitarii displayaccidentale. Deși [hidden]nu este suportat nativ de IE10, declarația explicită din CSS-ul nostru rezolvă această problemă.

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