Ponovno podizanje sustava

Reboot, kolekcija CSS promjena specifičnih za elemente u jednoj datoteci, pokreće Bootstrap za pružanje elegantne, dosljedne i jednostavne osnove za nadogradnju.

Pristup

Reboot se nadograđuje na Normalize, pružajući mnoge HTML elemente s pomalo tvrdoglavim stilovima koristeći samo birače elemenata. Dodatni stil se radi samo s klasama. Na primjer, ponovno pokrećemo neke <table>stilove za jednostavniju osnovnu liniju i kasnije pružamo .table, .table-borderedi više.

Ovo su naše smjernice i razlozi za odabir onoga što ćete nadjačati u ponovnom pokretanju:

Ažurirajte neke zadane vrijednosti preglednika za korištenje rems umjesto ems za skalabilni razmak komponenti.
Izbjegavajte margin-top. Okomite margine mogu se skupiti, što dovodi do neočekivanih rezultata. Što je još važnije, jedan smjer marginje jednostavniji mentalni model.
Radi lakšeg skaliranja između veličina uređaja, elementi bloka trebali bi koristiti rems umjesto margins.
Svedite deklaracije o fontsvojstvima vezanim uz - na minimum, koristeći inheritkad god je to moguće.

Zadane postavke stranice

Elementi <html>i <body>ažuriraju se kako bi pružili bolje zadane postavke za cijelu stranicu. Točnije:

Globalno je box-sizingpostavljen na svaki element—uključujući *::beforei *::after, do border-box. To osigurava da se deklarirana širina elementa nikada ne premaši zbog ispune ili obruba.
Nijedna baza font-sizenije deklarirana na <html>, ali 16pxse pretpostavlja (zadana postavka preglednika). font-size: 1remprimjenjuje se na <body>za jednostavno responzivno skaliranje tipa putem medijskih upita uz poštovanje korisničkih preferencija i osiguravanje pristupačnijeg pristupa.
Također <body>postavlja globalne font-family, line-height, i text-align. To kasnije nasljeđuju neki elementi obrasca kako bi se spriječile nedosljednosti fonta.
Radi sigurnosti, <body>ima deklariran background-color, zadano je #fff.

Stog izvornih fontova

Zadani web fontovi (Helvetica Neue, Helvetica i Arial) izbačeni su u Bootstrap 4 i zamijenjeni "nativnim hrpom fontova" za optimalno prikazivanje teksta na svakom uređaju i OS-u. Pročitajte više o izvornim hrpama fontova u ovom članku časopisa 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;

Budući da hrpa fontova uključuje fontove emotikona, imajte na umu da će se mnogi uobičajeni simboli/dingbat Unicode znakovi prikazati kao višebojni piktogrami. Njihov će izgled varirati, ovisno o stilu koji se koristi u izvornom fontu emotikona preglednika/platforme i na njih neće utjecati nikakvi CSS colorstilovi.

Ovo font-familyse primjenjuje na <body>i automatski nasljeđuje globalno kroz Bootstrap. Da biste promijenili globalni font-family, ažurirajte $font-family-basei ponovno kompajlirajte Bootstrap.

Naslovi i paragrafi

Svi elementi naslova—npr.— <h1>i <p>poništavaju se da bi se margin-topuklonili. Dodani su naslovi margin-bottom: .5remi odlomci margin-bottom: 1remradi lakšeg razmaka.

Naslov	Primjer
`<h1></h1>`	h1. Bootstrap naslov
`<h2></h2>`	h2. Bootstrap naslov
`<h3></h3>`	h3. Bootstrap naslov
`<h4></h4>`	h4. Bootstrap naslov
`<h5></h5>`	h5. Bootstrap naslov
`<h6></h6>`	h6. Bootstrap naslov

Popisi

Svi popisi— <ul>, <ol>, i <dl>—su margin-topuklonjeni i a margin-bottom: 1rem. Ugniježđene liste nemaju margin-bottom.

Svim listama uklonjena je gornja margina
I njihova donja margina se normalizirala
Ugniježđene liste nemaju donju marginu
- Na taj način imaju ujednačeniji izgled
- Osobito kada slijedi više stavki popisa
Lijevi ispun je također poništen

Evo sređenog popisa
S nekoliko stavki popisa
Ima isti ukupni izgled
Kao i prethodni nesređeni popis

Radi jednostavnijeg oblikovanja, jasne hijerarhije i boljeg razmaka, popisi opisa su ažurirani margin. <dd>s resetirati margin-leftna 0i dodati margin-bottom: .5rem. <dt>s su podebljani .

Liste opisa: Popis opisa savršen je za definiranje pojmova.
Termin: Definicija pojma.; Druga definicija za isti pojam.
Drugi termin: Definicija za ovaj drugi pojam.

Preformatirani tekst

Element <pre>se poništava kako bi se uklonio njegov margin-topi koristile remjedinice za njegov margin-bottom.

.example-element {
  margina-dno: 1rem;
}

Stolovi

Tablice su malo prilagođene stilu <caption>s, skupljaju granice i osiguravaju dosljednost text-alignu cijelom dijelu. Dodatne promjene za obrube, ispune i drugo dolaze s .tableklasom .

Ovo je primjer tablice, a ovo je njezin naslov koji opisuje sadržaj.
Naslov tablice	Naslov tablice	Naslov tablice	Naslov tablice
Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice
Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice
Ćelija tablice	Ćelija tablice	Ćelija tablice	Ćelija tablice

Obrasci

Različiti elementi oblika ponovno su pokrenuti za jednostavnije osnovne stilove. Evo nekih od najznačajnijih promjena:

<fieldset>nemaju obrube, ispune ili margine pa se lako mogu koristiti kao omoti za pojedinačne unose ili grupe unosa.
<legend>s, kao i skupovi polja, također su preoblikovani kako bi se prikazivali kao svojevrsni naslov.
<label>s su postavljeni display: inline-blockda dopuštaju marginprimjenu.
<input>s, <select>s, <textarea>s i <button>s uglavnom rješava Normalize, ali Reboot uklanja i njihove margini postavlja line-height: inherittakođer.
<textarea>modificirani su tako da im se veličina može mijenjati samo vertikalno jer horizontalna promjena veličine često "lomi" izgled stranice.
<button>s i <input>elementi gumba imaju cursor: pointerkada :not(:disabled).

Ove promjene, i više, prikazane su u nastavku.

Pokazivači na gumbima

Ponovno pokretanje uključuje poboljšanje za role="button"promjenu zadanog kursora u pointer. Dodajte ovaj atribut elementima kako biste naznačili da su elementi interaktivni. Ova uloga nije potrebna za <button>elemente koji dobivaju vlastitu cursorpromjenu.

Gumb elementa koji nije gumb

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

Razni elementi

Adresa

Element <address>se ažurira kako bi se poništile zadane postavke preglednika font-styles italicna normal. line-heighttakođer je sada naslijeđen i margin-bottom: 1remdodan. <address>s služe za predstavljanje kontakt informacija za najbližeg pretka (ili cijelog opusa). Sačuvajte formatiranje završavajući retke s <br>.

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

Puno ime
[email protected]

Blok citat

Zadana postavka marginblok citata je 1em 40px, pa smo to vratili na 0 0 1remnešto što je dosljednije drugim elementima.

Dobro poznati citat, sadržan u elementu blockquote.

Netko poznat u naslovu izvora

Inline elementi

Element <abbr>dobiva osnovni stil kako bi se istaknuo među tekstom odlomka.

Nulla attr vitae elit libero, a pharetra augue.

Sažetak

Zadana postavka cursorsažetka je text, pa smo to vratili na kako pointerbismo poručili da se s elementom može komunicirati klikom na njega.

Neki detalji

Više informacija o detaljima.

Još više detalja

Evo još detalja o detaljima.

HTML5 `[hidden]`atribut

HTML5 dodaje novi globalni atribut pod nazivom[hidden] , koji je stiliziran display: noneprema zadanim postavkama. Posuđujući ideju od PureCSS-a , poboljšavamo ovu zadanu postavku tako [hidden] { display: none !important; }da spriječimo njezino displayslučajno nadjačavanje. Iako [hidden]ga IE10 izvorno ne podržava, eksplicitna deklaracija u našem CSS-u zaobilazi taj problem.

<input type="text" hidden>

jQuery nekompatibilnost

[hidden]nije kompatibilan s jQueryjem $(...).hide()i $(...).show()metodama. Stoga trenutno posebno ne podržavamo [hidden]druge tehnike za upravljanje displayelementima.

Da biste samo prebacili vidljivost elementa, što znači da displaynije modificiran i da element i dalje može utjecati na tijek dokumenta, umjesto toga upotrijebite .invisibleklasu .