Taaskäivitage

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

Sellel lehel

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.

CSS-i muutujad

Lisatud versioonisse v5.2.0

Versiooniga 5.1.1 standardisime oma nõutavad @imports-id kõigis meie CSS-pakettides (sh bootstrap.css, bootstrap-reboot.css, ja bootstrap-grid.css), et hõlmata _root.scss. See lisab :roottasemele CSS-muutujad kõikidele pakettidele, olenemata sellest, kui paljusid neist selles komplektis kasutatakse. Lõppkokkuvõttes näeb Bootstrap 5 aja jooksul ka edaspidi rohkem CSS-i muutujaid , et pakkuda reaalajas rohkem kohandamist, ilma et oleks vaja Sassi alati uuesti kompileerida. Meie lähenemisviis on võtta meie allika Sassi muutujad ja teisendada need CSS-i muutujateks. Nii saate isegi siis, kui te CSS-i muutujaid ei kasuta, kogu Sassi jõud. See on veel pooleli ja selle täielik rakendamine võtab aega.

Näiteks kaaluge neid :rootCSS-i muutujaid levinud <body>stiilide jaoks:

  @if $font-size-root != null {
    --#{$prefix}root-font-size: #{$font-size-root};
  }
  --#{$prefix}body-font-family: #{$font-family-base};
  @include rfs($font-size-base, --#{$prefix}body-font-size);
  --#{$prefix}body-font-weight: #{$font-weight-base};
  --#{$prefix}body-line-height: #{$line-height-base};
  --#{$prefix}body-color: #{$body-color};
  @if $body-text-align != null {
    --#{$prefix}body-text-align: #{$body-text-align};
  }
  --#{$prefix}body-bg: #{$body-bg};

Praktikas rakendatakse neid muutujaid Rebootis järgmiselt:

body {
  margin: 0; // 1
  font-family: var(--#{$prefix}body-font-family);
  @include font-size(var(--#{$prefix}body-font-size));
  font-weight: var(--#{$prefix}body-font-weight);
  line-height: var(--#{$prefix}body-line-height);
  color: var(--#{$prefix}body-color);
  text-align: var(--#{$prefix}body-text-align);
  background-color: var(--#{$prefix}body-bg); // 2
  -webkit-text-size-adjust: 100%; // 3
  -webkit-tap-highlight-color: rgba($black, 0); // 4
}

See võimaldab teil teha reaalajas kohandusi, kuidas soovite:

<body style="--bs-body-color: #333;">
  <!-- ... -->
</body>

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. Selle brauseri vaikeväärtuse saab $font-size-rootmuutujat muutes alistada.
Samuti <body>määrab see globaalse font-family, font-weight, line-heightja color. 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

Bootstrap kasutab teksti optimaalseks renderdamiseks igas seadmes ja OS-is "natiivset fondivirna" või "süsteemi fondivirnu". Need süsteemifondid on loodud spetsiaalselt tänapäeva seadmeid silmas pidades, täiustatud renderdamisega ekraanidel, muutuva fondi toega ja palju muud. Lisateavet omafondide virnade kohta leiate sellest Smashing Magazine'i artiklist .

$font-family-sans-serif:
  // Cross-platform generic font family (default user interface font)
  system-ui,
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Windows
  "Segoe UI",
  // Android
  Roboto,
  // older macOS and iOS
  "Helvetica Neue"
  // Linux
  "Noto Sans",
  "Liberation Sans",
  // Basic web fallback
  Arial,
  // 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

Horisontaalsed reeglid

Elementi <hr>on lihtsustatud. Sarnaselt brauseri vaikeseadetele on <hr>s-i stiilid läbi border-top, neil on vaikeväärtus opacity: .25ja need pärivad automaatselt nende border-colorkaudu color, sealhulgas siis, kui colorsee on määratud vanema kaudu. Neid saab muuta teksti, äärise ja läbipaistmatuse utiliitidega.

html

<hr>

<div class="text-success">
  <hr>
</div>

<hr class="border border-danger border-2 opacity-50">
<hr class="border border-primary border-3 opacity-75">

Loendid

Kõik loendid – <ul>, <ol>, ja <dl>– margin-topon eemaldatud ja margin-bottom: 1rem. Pesastatud loenditel pole margin-bottom. Lähtestasime ka padding-leftsisselülitamise <ul>ja <ol>elemendid.

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.

Tekstisisene kood

Mähi tekstisisesed koodilõigud märgiga <code>. Vältige kindlasti HTML-i nurksulgusid.

Näiteks <section>tuleks mähitud sees.

html

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Koodiplokid

Kasutage <pre>s-i mitme koodirea jaoks. Korralikuks renderdamiseks eemaldage kindlasti koodis kõik nurksulgud. <pre>Element lähtestatakse selle eemaldamiseks ja selle jaoks ühikute margin-topkasutamiseks .remmargin-bottom

<p>Sample text here...</p>
<p>And another line of sample text here...</p>

html

<pre><code>&lt;p&gt;Sample text here...&lt;/p&gt;
&lt;p&gt;And another line of sample text here...&lt;/p&gt;
</code></pre>

Muutujad

Muutujate näitamiseks kasutage <var>silti.

y = m x + b

html

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

Kasutaja sisend

Kasutage <kbd>sisendi tähistamiseks, mis tavaliselt sisestatakse klaviatuuri kaudu.

Kataloogide vahetamiseks tippige cdja seejärel kataloogi nimi.
Seadete muutmiseks vajutage ctrl + ,

html

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Näidisväljund

Programmi näidisväljundi näitamiseks kasutage <samp>silti.

Seda teksti tuleb käsitleda arvutiprogrammi näidisväljundina.

html

<samp>This text is meant to be treated as sample output from a computer program.</samp>

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

html

<table>
  <caption>
    This is an example table, and this is its caption to describe the contents.
  </caption>
  <thead>
    <tr>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
      <th>Table heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
    <tr>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
      <td>Table cell</td>
    </tr>
  </tbody>
</table>

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.

Kuupäeva ja värvi sisestamise tugi

Pidage meeles , et kõik brauserid, nimelt Safari, ei toeta täielikult kuupäeva sisestamist.

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

html

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

HTML - i lühendi element.

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.

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

Taaskäivitage

Lähenemine

CSS-i muutujad

Lehe vaikeseaded

Algne fondivirn

Pealkirjad ja lõigud

Horisontaalsed reeglid

Loendid

Tekstisisene kood

Koodiplokid

Muutujad

Kasutaja sisend

Näidisväljund

Tabelid

Vormid

Kuupäeva ja värvi sisestamise tugi

Osutajad nuppudel

Erinevad elemendid

Aadress

Plokktsitaat

Tekstisisesed elemendid

Kokkuvõte

HTML5 [hidden]atribuut

jQuery ühildumatus

HTML5 `[hidden]`atribuut