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-bordered
i 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
rem
s umjestoem
s za skalabilni razmak komponenti. - Izbjegavajte
margin-top
. Okomite margine mogu se skupiti, što dovodi do neočekivanih rezultata. Što je još važnije, jedan smjermargin
je jednostavniji mentalni model. - Radi lakšeg skaliranja između veličina uređaja, elementi bloka trebali bi koristiti
rem
s umjestomargin
s. - Svedite deklaracije o
font
svojstvima vezanim uz - na minimum, koristećiinherit
kad 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-sizing
postavljen na svaki element—uključujući*::before
i*::after
, doborder-box
. To osigurava da se deklarirana širina elementa nikada ne premaši zbog ispune ili obruba. - Nijedna baza
font-size
nije deklarirana na<html>
, ali16px
se pretpostavlja (zadana postavka preglednika).font-size: 1rem
primjenjuje 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 globalnefont-family
,line-height
, itext-align
. To kasnije nasljeđuju neki elementi obrasca kako bi se spriječile nedosljednosti fonta. - Radi sigurnosti,
<body>
ima deklariranbackground-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 color
stilovi.
Ovo font-family
se primjenjuje na <body>
i automatski nasljeđuje globalno kroz Bootstrap. Da biste promijenili globalni font-family
, ažurirajte $font-family-base
i ponovno kompajlirajte Bootstrap.
Naslovi i paragrafi
Svi elementi naslova—npr.— <h1>
i <p>
poništavaju se da bi se margin-top
uklonili. Dodani su naslovi margin-bottom: .5rem
i odlomci margin-bottom: 1rem
radi 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-top
uklonjeni 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-left
na 0
i 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-top
i koristile rem
jedinice za njegov margin-bottom
.
.example-element { margina-dno: 1rem; }
Stolovi
Tablice su malo prilagođene stilu <caption>
s, skupljaju granice i osiguravaju dosljednost text-align
u cijelom dijelu. Dodatne promjene za obrube, ispune i drugo dolaze s .table
klasom .
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 postavljenidisplay: inline-block
da dopuštajumargin
primjenu.<input>
s,<select>
s,<textarea>
s i<button>
s uglavnom rješava Normalize, ali Reboot uklanja i njihovemargin
i postavljaline-height: inherit
takođ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 imajucursor: pointer
kada: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 cursor
promjenu.
<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-style
s italic
na normal
. line-height
također je sada naslijeđen i margin-bottom: 1rem
dodan. <address>
s služe za predstavljanje kontakt informacija za najbližeg pretka (ili cijelog opusa). Sačuvajte formatiranje završavajući retke s <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Puno ime
[email protected]
Blok citat
Zadana postavka margin
blok citata je 1em 40px
, pa smo to vratili na 0 0 1rem
nešto što je dosljednije drugim elementima.
Dobro poznati citat, sadržan u elementu blockquote.
Inline elementi
Element <abbr>
dobiva osnovni stil kako bi se istaknuo među tekstom odlomka.
Sažetak
Zadana postavka cursor
sažetka je text
, pa smo to vratili na kako pointer
bismo 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: none
prema zadanim postavkama. Posuđujući ideju od PureCSS-a , poboljšavamo ovu zadanu postavku tako [hidden] { display: none !important; }
da spriječimo njezino display
sluč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 display
elementima.
Da biste samo prebacili vidljivost elementa, što znači da display
nije modificiran i da element i dalje može utjecati na tijek dokumenta, umjesto toga upotrijebite .invisible
klasu .