Source

Znova zaženite

Reboot, zbirka sprememb CSS, specifičnih za element, v eni sami datoteki, kickstart Bootstrap za zagotavljanje elegantne, dosledne in preproste osnove za nadgradnjo.

Pristop

Reboot nadgrajuje Normalize in ponuja številne elemente HTML z nekoliko samozavestnimi slogi z uporabo samo izbirnikov elementov. Dodatni styling se izvaja samo z razredi. Na primer, znova zaženemo nekatere <table>sloge za enostavnejšo osnovo in pozneje zagotovimo .table, .table-borderedin še več.

Tu so naše smernice in razlogi za izbiro, kaj preglasiti pri ponovnem zagonu:

  • Posodobite nekatere privzete vrednosti brskalnika, da uporabite rems namesto ems za razširljiv razmik komponent.
  • Izogibajte se margin-top. Navpični robovi se lahko zrušijo, kar povzroči nepričakovane rezultate. Še pomembneje pa je, da je ena smer marginenostavnejši mentalni model.
  • Za lažje skaliranje po velikostih naprav morajo blokovni elementi uporabljati rems namesto margins.
  • Izjave o fontlastnostih, povezanih z -, zmanjšajte na minimum in uporabite, inheritkadar koli je to mogoče.

Privzete nastavitve strani

Elementi <html>in <body>so posodobljeni, da zagotovijo boljše privzete nastavitve za celotno stran. Natančneje:

  • Je box-sizingglobalno nastavljen za vsak element – ​​vključno z *::beforein *::afterdo border-box. To zagotavlja, da deklarirana širina elementa ni nikoli presežena zaradi oblazinjenja ali obrobe.
    • Nobena osnova font-sizeni deklarirana na <html>, ampak 16pxse predpostavlja (privzeta nastavitev brskalnika). font-size: 1remse uporablja na <body>za enostavno odzivno skaliranje tipov prek medijskih poizvedb ob spoštovanju uporabniških nastavitev in zagotavljanju bolj dostopnega pristopa.
  • Nastavi tudi <body>globalne font-family, line-height, in text-align. To pozneje podedujejo nekateri elementi obrazca, da preprečijo nedoslednosti pisav.
  • Zaradi varnosti <body>ima deklarirano background-color, privzeto je #fff.

Izvorni sklad pisav

Privzete spletne pisave (Helvetica Neue, Helvetica in Arial) so bile opuščene v Bootstrap 4 in nadomeščene z »nativnim skladom pisav« za optimalno upodabljanje besedila v vsaki napravi in ​​OS. Preberite več o izvornih skladih pisav v tem članku revije Smashing Magazine .

$font-family-sans-serif:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for OS X (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;

To font-familyvelja za <body>in samodejno podedovano globalno v celotnem Bootstrapu. Če želite preklopiti globalno font-family, posodobite $font-family-basein znova prevedite Bootstrap.

Naslovi in ​​odstavki

Vsi elementi naslova – npr. <h1>– in <p>so ponastavljeni, da jih margin-topodstranimo. Dodani so margin-bottom: .5remnaslovi in ​​odstavki margin-bottom: 1remza lažji razmik.

Naslov Primer

<h1></h1>

 h1. Naslov Bootstrap

<h2></h2>

 h2. Naslov Bootstrap

<h3></h3>

 h3. Naslov Bootstrap

<h4></h4>

 h4. Naslov Bootstrap

<h5></h5>

 h5. Naslov Bootstrap

<h6></h6>

 h6. Naslov Bootstrap

Seznami

Vsi seznami – <ul>, <ol>in <dl>– so margin-topodstranjeni in margin-bottom: 1rem. Ugnezdeni seznami nimajo margin-bottom.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molesteie lorem in 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 molesteie lorem in 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 preprostejši slog, jasno hierarhijo in boljši razmik so seznami opisov posodobljeni margins. <dd>ponastavite margin-leftna 0in dodajte margin-bottom: .5rem. <dt>s so krepko .

Seznami opisov
Opisni seznam je kot nalašč za definiranje izrazov.
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.

Vnaprej oblikovano besedilo

Element <pre>se ponastavi, da se odstrani margin-topin uporabi remenote za svoj margin-bottom.

.example-element {
  rob-spodaj: 1rem;
}

Mize

Tabele so nekoliko prilagojene slogu <caption>s, strnjene meje in zagotavljajo doslednost text-alignv celotnem besedilu. Dodatne spremembe za obrobe, oblazinjenje in drugo prihajajo z .tablerazredom .

To je primer tabele in to je njen naslov za opis vsebine.
Naslov tabele Naslov tabele Naslov tabele Naslov tabele
Celica tabele Celica tabele Celica tabele Celica tabele
Celica tabele Celica tabele Celica tabele Celica tabele
Celica tabele Celica tabele Celica tabele Celica tabele

Obrazci

Različni elementi obrazca so bili znova zagnani za enostavnejše osnovne sloge. Tukaj je nekaj najbolj opaznih sprememb:

  • <fieldset>nimajo robov, oblazinjenja ali robov, zato jih je mogoče enostavno uporabiti kot ovoje za posamezne vnose ali skupine vnosov.
  • <legend>s, tako kot nabori polj, so bili prav tako spremenjeni, da so prikazani kot nekakšen naslov.
  • <label>s so nastavljeni tako, display: inline-blockda omogočajo marginuporabo.
  • <input>s, <select>s, <textarea>s in <button>s večinoma obravnava Normalize, vendar Reboot odstrani tudi njihove marginin nastavi line-height: inherit.
  • <textarea>so spremenjeni tako, da jih je mogoče spreminjati samo navpično, saj vodoravno spreminjanje velikosti pogosto "pokvari" postavitev strani.

Te spremembe in še več so prikazane spodaj.

Primer legende

100

Razni elementi

Naslov

Element <address>je posodobljen za ponastavitev privzete nastavitve brskalnika font-stylez italicna normal. line-heightje tudi zdaj podedovan in margin-bottom: 1remje bil dodan. <address>so za predstavitev kontaktnih informacij za najbližjega prednika (ali celotnega dela). Ohranite oblikovanje tako, da končate vrstice z <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Polno ime
[email protected]

Blockquote

Privzeto marginza narekovaje je 1em 40px, zato smo to ponastavili na 0 0 1remnekaj, kar je bolj skladno z drugimi elementi.

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

Nekdo znan v naslovu vira

Inline elementi

Element <abbr>prejme osnovni slog, da izstopa med besedilom odstavka.

Nulla attr vitae elit libero, a pharetra augue.

Povzetek

Privzeta vrednost cursorza povzetek je text, zato smo to ponastavili na, pointerda sporočimo, da je z elementom mogoče komunicirati s klikom nanj.

Nekaj ​​podrobnosti

Več informacij o podrobnostih.

Še več podrobnosti

Tukaj je še več podrobnosti o podrobnostih.

[hidden]atribut HTML5

HTML5 doda nov globalni atribut z imenom[hidden] , ki je display: noneprivzeto oblikovan. Z izposojo ideje od PureCSS izboljšamo to privzeto vrednost tako, [hidden] { display: none !important; }da pomagamo preprečiti njeno displaynenamerno preglasitev. Čeprav [hidden]ga IE10 ne podpira izvorno, izrecna deklaracija v našem CSS odpravi to težavo.

<input type="text" hidden>
Nezdružljivost jQuery

[hidden]ni združljiv z jQuery $(...).hide()in $(...).show()metodami. Zato trenutno še posebej ne podpiramo [hidden]drugih tehnik za upravljanje displayelementov.

Če želite samo preklopiti vidnost elementa, kar pomeni, da displayni spremenjen in lahko element še vedno vpliva na potek dokumenta, namesto tega uporabite .invisiblerazred .