Source

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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Cijeli broj 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
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Cijeli broj molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

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.
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.

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.

Primjer legende

100

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

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 .