Source

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

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.

  • 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
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer 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

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

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.

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

Primjer legende

100

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.

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

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