Source

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 OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

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.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

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.

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

Exemplu de legendă

100

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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 .