Ponovo pokreni

Reboot, kolekcija CSS promjena specifičnih za elemente u jednoj datoteci, pokrenite Bootstrap kako biste pružili elegantnu, dosljednu i jednostavnu osnovu za nadogradnju.

Pristup

Reboot se nadovezuje na Normalize, pružajući mnoge HTML elemente sa pomalo tvrdnjavim stilovima koristeći samo selektore elemenata. Dodatni stil se radi samo sa klasama. Na primjer, ponovo pokrećemo neke <table>stilove za jednostavniju osnovnu liniju i kasnije pružamo .table, .table-bordered, i više.

Evo naših smjernica i razloga za odabir onoga što ćete nadjačati u Reboot-u:

Ažurirajte neke zadane vrijednosti pretraživača da koristite rems umjesto ems za skalabilni razmak komponenti.
Izbjegavajte margin-top. Vertikalne margine se mogu srušiti, dajući neočekivane rezultate. Što je još važnije, jedan pravac marginje jednostavniji mentalni model.
Za lakše skaliranje u različitim veličinama uređaja, blok elementi bi trebali koristiti rems za margins.
Deklaracije fontsvojstava vezanih za -svežite na minimum, koristeći inheritkad god je to moguće.

Zadane postavke stranice

Elementi <html>i <body>su ažurirani kako bi pružili bolje zadane postavke za cijelu stranicu. Preciznije:

Globalno box-sizingje postavljen na svaki element—uključujući *::beforei *::after, do border-box. Ovo osigurava da deklarirana širina elementa nikada ne bude prekoračena zbog paddinga ili ivice.
Nijedna baza font-sizenije deklarirana na <html>, ali 16pxse pretpostavlja (podrazumevani pretraživač). font-size: 1remprimjenjuje se na <body>za jednostavno skaliranje tipa putem medijskih upita uz poštovanje korisničkih preferencija i osiguravajući pristupačniji pristup.
<body>Također postavlja globalne , font-family, line-heighti text-align. Ovo je kasnije naslijeđeno nekim elementima forme kako bi se spriječile nedosljednosti fontova.
Radi sigurnosti, <body>ima deklariran background-color, zadano na #fff.

Nativni skup fontova

Zadani web fontovi (Helvetica Neue, Helvetica i Arial) su izbačeni u Bootstrap 4 i zamijenjeni "nativnim fontovima" za optimalno prikazivanje teksta na svakom uređaju i OS. Pročitajte više o izvornim skupovima fontova u ovom članku Smashing Magazina .

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

Imajte na umu da će, budući da skup fontova uključuje emoji fontove, mnogi uobičajeni simboli/dingbat Unicode znakovi biti prikazani kao višebojni piktogrami. Njihov izgled će se razlikovati u zavisnosti od stila koji se koristi u izvornom fontu emotikona pretraživača/platforme, i na njih neće uticati nijedan CSS colorstil.

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

Naslovi i paragrafi

Svi elementi naslova—npr.— <h1>i <p>se resetuju da bi se margin-topuklonili. Dodani su naslovi margin-bottom: .5remi paragrafi margin-bottom: 1remza lakši razmak.

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

Liste

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

Gornja margina svih lista je uklonjena
I njihova donja margina se normalizirala
Ugniježđene liste nemaju donju marginu
- Na taj način imaju ujednačeniji izgled
- Naročito kada slijedi više stavki na listi
Lijevi padding je također resetovan

Evo uređene liste
Sa nekoliko stavki na listi
Ima isti ukupni izgled
Kao prethodna neuređena lista

Za jednostavniji stil, jasnu hijerarhiju i bolji razmak, liste opisa su ažurirale margins. <dd>s resetirajte margin-leftna 0i dodajte margin-bottom: .5rem. <dt>s su podebljane .

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

Unaprijed formatirani tekst

Element <pre>se resetuje kako bi se uklonio margin-topi koristio remjedinice za svoj margin-bottom.

.example-element {
  margin-bottom: 1rem;
}

Stolovi

Tabele su malo prilagođene stilu <caption>s, skupljaju granice i osiguravaju dosljednost text-alignu cijelom. Dodatne promjene za granice, padding i drugo dolaze s klasom .table.

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

Forms

Različiti elementi forme su ponovo pokrenuti radi jednostavnijih osnovnih stilova. Evo nekih od najznačajnijih promjena:

<fieldset>s nemaju ivice, padding ili margine tako da se mogu lako koristiti kao omoti za pojedinačne ulaze ili grupe ulaza.
<legend>s, kao i skupovi polja, također su restilizirani da se prikazuju kao neka vrsta naslova.
<label>s je postavljeno na display: inline-blockda dozvoli marginprimjenu.
<input>s, <select>s, <textarea>s i <button>s se uglavnom adresiraju pomoću Normalize, ali Reboot uklanja i njihove margini line-height: inherittakođer postavlja .
<textarea>s se modificiraju tako da se mogu mijenjati samo okomito jer horizontalna promjena veličine često "razbija" izgled stranice.
<button>s i <input>elementi gumba imaju cursor: pointerkada :not(:disabled).

Ove promjene, i još mnogo toga, prikazane su u nastavku.

Pokazivači na dugmadima

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 neophodna za <button>elemente koji dobijaju vlastitu cursorpromjenu.

Dugme elementa bez dugmeta

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

Razni elementi

Adresa

Element <address>je ažuriran da resetuje podrazumevane vrednosti pretraživača font-stylesa italicna normal. line-heightje također sada naslijeđen i margin-bottom: 1remdodat je. <address>s služe za predstavljanje kontakt informacija za najbližeg pretka (ili cijeli skup radova). Sačuvajte formatiranje završavajući redove sa <br>.

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

Puno ime
[email protected]

Blockquote

Podrazumevano marginza blok citate je 1em 40px, tako da smo to resetovali na 0 0 1remnešto što je konzistentnije sa drugim elementima.

Dobro poznati citat, sadržan u elementu blok citata.

Neko poznat u naslovu izvora

Inline elementi

Element <abbr>dobija osnovni stil kako bi se istakao među tekstom pasusa.

Nulla attr vitae elit libero, a pharetra augue.

Sažetak

Podrazumevano cursoru rezimeu je text, tako da to resetujemo na da pointerbismo preneli da se sa elementom može stupiti u interakciju klikom na njega.

Neki detalji

Više informacija o detaljima.

Još više detalja

Evo još više detalja o detaljima.

HTML5 `[hidden]`atribut

HTML5 dodaje novi globalni atribut pod nazivom[hidden] , koji je display: nonestandardno stilizovan. Pozajmivši ideju od PureCSS-a , poboljšavamo ovu zadanu vrijednost tako što [hidden] { display: none !important; }ćemo spriječiti displayda se slučajno zaobiđe. Iako [hidden]nije izvorno podržan od IE10, eksplicitna deklaracija u našem CSS-u zaobilazi taj problem.

<input type="text" hidden>

jQuery nekompatibilnost

[hidden]nije kompatibilan sa jQuery-jem $(...).hide()i $(...).show()metodama. Stoga trenutno ne podržavamo [hidden]druge tehnike za upravljanje displayelementima.

Da biste samo promijenili vidljivost elementa, što znači da displaynije izmijenjen i da element i dalje može utjecati na tok dokumenta, umjesto toga koristite klasu ..invisible