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.
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.
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 obruba.- 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.
- Nijedna baza
<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
.
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 .
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.
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. Bootstrap naslov |
|
h2. Bootstrap naslov |
|
h3. Bootstrap naslov |
|
h4. Bootstrap naslov |
|
h5. Bootstrap naslov |
|
h6. Bootstrap naslov |
Sve liste <ul>
— , <ol>
, i <dl>
— su margin-top
uklonjene i a margin-bottom: 1rem
. Ugniježđene liste nemaju 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
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
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.
- 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.
Element <pre>
se resetuje kako bi se uklonio margin-top
i koristio rem
jedinice za svoj margin-bottom
.
.example-element { margin-bottom: 1rem; }
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 |
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 "lomi" izgled stranice.
Ove promjene, i još mnogo toga, prikazane su u nastavku.
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]
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Element <abbr>
dobija osnovni stil kako bi se istakao među tekstom pasusa.
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 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.
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