Taaskäivitage

Reboot, elemendispetsiifiliste CSS-i muudatuste kogum ühes failis, käivitab Bootstrapi, et pakkuda elegantset, järjepidevat ja lihtsat baasjoont, millele tugineda.

Lähenemine

Taaskäivitamine põhineb normaliseerimisel, pakkudes paljusid HTML-i elemente mõnevõrra arvamuslike stiilidega, kasutades ainult elemendivalijaid. Täiendav stiil tehakse ainult klassidega. Näiteks taaskäivitame mõned <table>stiilid lihtsama baasjoone jaoks ning pakume hiljem .table, .table-borderedja palju muud.

Siin on meie juhised ja põhjused, miks valida, mida rebootis alistada.

Värskendage mõnda brauseri vaikeväärtust, et kasutada skaleeritavate komponentide vahekauguste jaoks rems-i asemel s.em
Vältida margin-top. Vertikaalsed veerised võivad kokku kukkuda, andes ootamatuid tulemusi. Veelgi olulisem on aga see, et üks suund marginon lihtsam vaimne mudel.
Seadme suuruste hõlpsamaks skaleerimiseks peaksid plokielemendid kasutama rems-i jaoks margins.
fontHoidke seotud atribuutide deklaratsioonid minimaalsena, kasutades inheritvõimalusel.

Lehe vaikeseaded

Elemente ja värskendatakse <html>, <body>et pakkuda paremaid leheüleseid vaikeseadeid. Täpsemalt:

Määratakse box-sizingglobaalselt igale elemendile, sealhulgas *::beforeja *::after, kuni border-box. See tagab, et elemendi deklareeritud laiust ei ületata polsterduse või äärise tõttu.
Alust font-sizeei deklareerita <html>, vaid 16pxeeldatakse (brauseri vaikeseade). font-size: 1remkasutatakse <body>meediumipäringute kaudu hõlpsaks reageerivaks tüübi skaleerimiseks, austades samal ajal kasutaja eelistusi ja tagades ligipääsetavama lähenemisviisi.
Samuti <body>määrab see globaalse font-family, line-heightja text-align. Selle pärivad hiljem mõned vormielemendid, et vältida fontide ebakõlasid.
Ohutuse huvides <body>on sellel deklareeritud background-color, vaikimisi #fff.

Algne fondivirn

Vaikeveebifondid (Helvetica Neue, Helvetica ja Arial) on Bootstrap 4-s välja jäetud ja asendatud "natiivse fondivirnaga", et optimaalne teksti renderdamine igas seadmes ja OS-is. Lisateavet omafondide virnade kohta leiate sellest Smashing Magazine'i artiklist .

$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;

Pange tähele, et kuna fondivirn sisaldab emotikonide fonte, renderdatakse paljud levinud sümbolid/dingbat Unicode märgid mitmevärviliste piltidena. Nende välimus varieerub olenevalt brauseri/platvormi emotikonide fondi stiilist ja neid ei mõjuta ükski CSS- colorstiil.

Seda font-familyrakendatakse <body>Bootstrapis ja see päritakse automaatselt globaalselt kogu Bootstrapis. Globaalse versiooni vahetamiseks font-familyvärskendage $font-family-baseja kompileerige Bootstrap uuesti.

Pealkirjad ja lõigud

Kõik pealkirja elemendid – nt – <h1>ja lähtestatakse <p>nende margin-topeemaldamiseks. Lisatud on pealkirjad margin-bottom: .5remja lõigud margin-bottom: 1rem, mis võimaldavad hõlpsat vahekaugust.

Pealkiri	Näide
`<h1></h1>`	h1. Bootstrapi pealkiri
`<h2></h2>`	h2. Bootstrapi pealkiri
`<h3></h3>`	h3. Bootstrapi pealkiri
`<h4></h4>`	h4. Bootstrapi pealkiri
`<h5></h5>`	h5. Bootstrapi pealkiri
`<h6></h6>`	h6. Bootstrapi pealkiri

Loendid

Kõik loendid – <ul>, <ol>, ja <dl>– margin-topon eemaldatud ja margin-bottom: 1rem. Pesastatud loenditel pole margin-bottom.

Kõigil loenditel on ülemine veeris eemaldatud
Ja nende alumine veeris normaliseerus
Pesastatud loenditel puudub alumine veeris
- Nii on neil ühtlasem välimus
- Eriti kui sellele järgneb rohkem loendi üksusi
Vasak polster on samuti lähtestatud

Siin on järjestatud nimekiri
Mõne loendi elemendiga
Sellel on sama üldine välimus
Nagu eelmine järjestamata nimekiri

Lihtsama stiili, selge hierarhia ja paremate vahekauguste jaoks on kirjeldusloendeid värskendatud margins. <dd>s lähtestada ja margin-leftlisada . s on paksus kirjas .0margin-bottom: .5rem<dt>

Kirjeldusloendid: Kirjeldusloend sobib suurepäraselt terminite määratlemiseks.
Tähtaeg: Mõiste definitsioon.; Teine määratlus samale terminile.
Teine termin: Selle teise termini definitsioon.

Eelvormindatud tekst

<pre>Element lähtestatakse selle eemaldamiseks ja selle jaoks ühikute margin-topkasutamiseks .remmargin-bottom

.example-element {
  veeris-alumine: 1rem;
}

Tabelid

Tabelid on veidi kohandatud stiili <caption>s järgi, ahendavad ääriseid ja tagavad text-alignkogu ühtsuse. Täiendavad muudatused ääriste, polsterduse ja muu osas tulevad klassiga kaasa.table .

See on näidistabel ja see on selle pealkiri sisu kirjeldamiseks.
Tabeli pealkiri	Tabeli pealkiri	Tabeli pealkiri	Tabeli pealkiri
Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter
Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter
Tabeli lahter	Tabeli lahter	Tabeli lahter	Tabeli lahter

Vormid

Erinevad vormielemendid on lihtsamate baasstiilide jaoks taaskäivitatud. Siin on mõned kõige tähelepanuväärsemad muudatused:

<fieldset>s-tel pole ääriseid, polsterdust ega veerisid, nii et neid saab hõlpsasti kasutada üksikute sisendite või sisendite rühmade ümbrisena.
<legend>s, nagu väljakomplektid, on samuti ümber kujundatud, et neid kuvada teatud tüüpi pealkirjadena.
<label>s on seadistatud display: inline-blocklubama marginrakendada.
<input>s-i, <select>s-i, <textarea>s-i ja <button>s-i käsitleb enamasti Normalize, kuid Reboot eemaldab need marginja seab line-height: inheritka .
<textarea>s on muudetud nii, et nende suurust saab muuta ainult vertikaalselt, kuna horisontaalne suuruse muutmine katkestab sageli lehe paigutuse.
<button>s ja <input>nupuelementidel on cursor: pointermillal :not(:disabled).

Neid muudatusi ja palju muud on näidatud allpool.

Osutajad nuppudel

Taaskäivitamine sisaldab täiustust, role="button"et muuta vaikekursoriks pointer. Lisage see atribuut elementidele, et aidata näidata, et elemendid on interaktiivsed. See roll pole vajalik <button>elementide jaoks, mis muutuvad ise cursor.

Nupuvaba elemendi nupp

<span role="button" tabindex="0">Non-button element button</span>

Erinevad elemendid

Aadress

Elementi värskendatakse, et <address>lähtestada brauseri vaikeseade font-styleväärtuselt . on ka nüüd päritud ja lisatud. s on lähima esivanema (või kogu töö) kontaktandmete esitamiseks. Säilitage vorming, lõpetades read tähega .italicnormalline-heightmargin-bottom: 1rem<address><br>

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890

Täisnimi
[email protected]

Plokktsitaat

Vaikimisi marginplokitsitaatide puhul on 1em 40px, seega lähtestame selle 0 0 1remmuude elementidega ühtsemaks muutmiseks.

Tuntud tsitaat, mis sisaldub blockquote elemendis.

Keegi kuulus allika pealkirjas

Tekstisisesed elemendid

<abbr>Element saab põhilise stiili, et see lõiguteksti hulgast silma paistaks .

Nulla attr vitae elit libero, a pharetra augue.

Kokkuvõte

Kokkuvõtte vaikeseade cursoron text, seega lähtestasime selle väärtusele, et pointernäidata, et elemendiga saab sellel klõpsates suhelda.

Mõned detailid

Lisateave üksikasjade kohta.

Veelgi rohkem üksikasju

Siin on üksikasjade kohta veelgi rohkem üksikasju.

HTML5 `[hidden]`atribuut

HTML5 lisab uue globaalse atribuudi nimega[hidden]display: none , mis on vaikimisi kujundatud . Laenates ideed PureCSS -ilt , täiustame seda vaikeseadet, [hidden] { display: none !important; }aidates vältida selle displayjuhuslikku ülekirjutamist. Kuigi [hidden]IE10 seda algselt ei toeta, saab meie CSS-i selgesõnaline deklaratsioon sellest probleemist mööda.

<input type="text" hidden>

jQuery ühildumatus

[hidden]ei ühildu jQuery $(...).hide()ja $(...).show()meetoditega. Seetõttu ei toeta me praegu eriti teisi elementide [hidden]haldamise tehnikaid .display

Elemendi nähtavuse muutmiseks, mis tähendab, et displayseda ei muudeta ja element võib siiski mõjutada dokumendi voogu, kasutage selle asemel .invisibleklassi .