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
rem
s umjestoem
s za skalabilni razmak komponenti. - Izbjegavajte
margin-top
. Vertikalne margine se mogu srušiti, dajući neočekivane rezultate. Što je još važnije, jedan pravacmargin
je jednostavniji mentalni model. - Za lakše skaliranje u različitim veličinama uređaja, blok elementi bi trebali koristiti
rem
s zamargin
s. - Deklaracije
font
svojstava vezanih za -svežite na minimum, koristećiinherit
kad 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-sizing
je postavljen na svaki element—uključujući*::before
i*::after
, doborder-box
. Ovo osigurava da deklarirana širina elementa nikada ne bude prekoračena zbog paddinga ili ivice. - Nijedna baza
font-size
nije deklarirana na<html>
, ali16px
se pretpostavlja (podrazumevani pretraživač).font-size: 1rem
primjenjuje 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-height
itext-align
. Ovo je kasnije naslijeđeno nekim elementima forme kako bi se spriječile nedosljednosti fontova.- Radi sigurnosti,
<body>
ima deklariranbackground-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 color
stil.
Ovo font-family
se primjenjuje na <body>
i automatski se nasljeđuje globalno kroz Bootstrap. Da biste prebacili globalni font-family
, ažurirajte $font-family-base
i ponovo kompajlirajte Bootstrap.
Naslovi i paragrafi
Svi elementi naslova—npr.— <h1>
i <p>
se resetuju da bi se margin-top
uklonili. Dodani su naslovi margin-bottom: .5rem
i paragrafi margin-bottom: 1rem
za 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-top
uklonjene 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 margin
s. <dd>
s resetirajte margin-left
na 0
i 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-top
i koristio rem
jedinice za svoj margin-bottom
.
.example-element { margin-bottom: 1rem; }
Stolovi
Tabele su malo prilagođene stilu <caption>
s, skupljaju granice i osiguravaju dosljednost text-align
u cijelom. Dodatne promjene za granice, padding i drugo dolaze s klasom .table
.
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 nadisplay: inline-block
da dozvolimargin
primjenu.<input>
s,<select>
s,<textarea>
s i<button>
s se uglavnom adresiraju pomoću Normalize, ali Reboot uklanja i njihovemargin
iline-height: inherit
takođ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 imajucursor: pointer
kada: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 cursor
promjenu.
<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-style
sa italic
na normal
. line-height
je također sada naslijeđen i margin-bottom: 1rem
dodat 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>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Puno ime
[email protected]
Blockquote
Podrazumevano margin
za blok citate je 1em 40px
, tako da smo to resetovali na 0 0 1rem
nešto što je konzistentnije sa drugim elementima.
Dobro poznati citat, sadržan u elementu blok citata.
Inline elementi
Element <abbr>
dobija osnovni stil kako bi se istakao među tekstom pasusa.
Sažetak
Podrazumevano cursor
u rezimeu je text
, tako da to resetujemo na da pointer
bismo 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: none
standardno stilizovan. Pozajmivši ideju od PureCSS-a , poboljšavamo ovu zadanu vrijednost tako što [hidden] { display: none !important; }
ćemo spriječiti display
da 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 display
elementima.
Da biste samo promijenili vidljivost elementa, što znači da display
nije izmijenjen i da element i dalje može utjecati na tok dokumenta, umjesto toga koristite klasu ..invisible