Source

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

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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Täisarv molestie lorem ja mass
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat juures
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Täisarv molestie lorem ja mass
  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

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.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida ja eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

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.

Näidislegend

100

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.

Lorem ipsum dolor sit amet, consectetur adipiscing eliit. Täisarv posuere erat a ante.

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 .