in English

Reboot

Reboot — elementiem raksturīgu CSS izmaiņu kolekcija vienā failā — palaidiet Bootstrap, lai nodrošinātu elegantu, konsekventu un vienkāršu bāzes līniju, uz kuras balstīties.

Šajā lapā

Pieeja

Atsāknēšana balstās uz Normalize, nodrošinot daudzus HTML elementus ar zināmā mērā pārdomātiem stiliem, izmantojot tikai elementu atlasītājus. Papildu stils tiek veikts tikai ar klasēm. Piemēram, mēs atsāknējam dažus <table>stilus, lai iegūtu vienkāršāku bāzes līniju, un vēlāk nodrošinām .table, .table-bordered, un citus.

Tālāk ir sniegtas mūsu vadlīnijas un iemesli, kādēļ izvēlēties, ko ignorēt iestatījumā Reboot.

Atjauniniet dažas pārlūkprogrammas noklusējuma vērtības, lai mērogojamu komponentu atstarpēm izmantotu rems, nevis s.em
Izvairieties margin-top. Vertikālās piemales var sabrukt, radot negaidītus rezultātus. Tomēr vēl svarīgāk ir tas, ka viens virziens marginir vienkāršāks garīgais modelis.
Lai atvieglotu mērogošanu starp ierīču izmēriem, bloku elementos s ir jāizmanto rems margin.
Samaziniet ar saistīto rekvizītu deklarāciju skaitu fontlīdz minimumam, izmantojot, inheritkad vien iespējams.

CSS mainīgie

Pievienots v5.2.0

Izmantojot v5.1.1, mēs standartizējām vajadzīgās @imports visos mūsu CSS komplektos (tostarp bootstrap.css, bootstrap-reboot.css, un bootstrap-grid.css), lai iekļautu _root.scss. Tādējādi :rootvisiem komplektiem tiek pievienoti līmeņa CSS mainīgie neatkarīgi no tā, cik daudz no tiem tiek izmantots šajā komplektā. Galu galā Bootstrap 5 turpinās redzēt vairāk CSS mainīgo , kas laika gaitā tiks pievienoti, lai nodrošinātu lielāku pielāgošanu reāllaikā bez nepieciešamības vienmēr atkārtoti kompilēt Sass. Mūsu pieeja ir izmantot mūsu avota Sass mainīgos un pārveidot tos par CSS mainīgajiem. Tādā veidā, pat ja neizmantojat CSS mainīgos, jums joprojām ir visas Sass iespējas. Tas joprojām tiek īstenots, un būs vajadzīgs laiks, lai to pilnībā īstenotu.

Piemēram, apsveriet šos :rootCSS mainīgos izplatītākajiem <body>stiliem:

  @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};

Praksē šie mainīgie tiek lietoti Reboot šādi:

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
}

Kas ļauj veikt reāllaika pielāgojumus, kā vien vēlaties:

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

Lapas noklusējuma iestatījumi

Elementi <html>un <body>ir atjaunināti, lai nodrošinātu labākus visas lapas noklusējuma iestatījumus. Konkrētāk:

Ir box-sizingglobāli iestatīts katram elementam, tostarp *::beforeun *::after, uz border-box. Tas nodrošina, ka deklarētais elementa platums nekad netiek pārsniegts polsterējuma vai apmales dēļ.
- Nekāda bāze font-sizenav deklarēta <html>, bet 16pxtiek pieņemta (pārlūka noklusējuma iestatījums). font-size: 1remtiek izmantots, <body>lai viegli reaģētu tipa mērogošana, izmantojot multivides vaicājumus, vienlaikus ievērojot lietotāju preferences un nodrošinot pieejamāku pieeju. Šo pārlūkprogrammas noklusējumu var ignorēt, mainot $font-size-rootmainīgo.
Arī <body>nosaka globālo font-family, font-weight, line-height, un color. To vēlāk pārmanto daži formas elementi, lai novērstu fontu nekonsekvenci.
Drošības nolūkos <body>ir norādīts background-color, ka noklusējuma vērtība ir #fff.

Vietējā fontu kaudze

Bootstrap izmanto “native font steck” vai “system font steck” optimālai teksta renderēšanai katrā ierīcē un OS. Šie sistēmas fonti ir īpaši izstrādāti, ņemot vērā mūsdienu ierīces, ar uzlabotu renderēšanu ekrānos, mainīgo fontu atbalstu un daudz ko citu. Plašāku informāciju par vietējo fontu kaudzēm lasiet šajā Smashing Magazine rakstā .

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

Ņemiet vērā: tā kā fontu kaudze ietver emocijzīmju fontus, daudzas izplatītas simbolu/dingbat unikoda rakstzīmes tiks atveidotas kā daudzkrāsainas piktogrammas. To izskats var atšķirties atkarībā no stila, kas tiek izmantots pārlūkprogrammas/platformas vietējā emocijzīmju fontā, un tos neietekmēs nekādi CSS colorstili.

Tas font-familytiek piemērots <body>un automātiski mantots globāli visā Bootstrap. Lai pārslēgtu globālo font-family, atjauniniet $font-family-baseun atkārtoti kompilējiet Bootstrap.

Virsraksti un rindkopas

Visi virsraksta elementi, piemēram, <h1>un <p>tiek atiestatīti, lai tos margin-topnoņemtu. Ir pievienoti virsraksti margin-bottom: .5remun rindkopas margin-bottom: 1rem, lai atvieglotu atstarpi.

Virsraksts	Piemērs
`<h1></h1>`	h1. Bootstrap virsraksts
`<h2></h2>`	h2. Bootstrap virsraksts
`<h3></h3>`	h3. Bootstrap virsraksts
`<h4></h4>`	h4. Bootstrap virsraksts
`<h5></h5>`	h5. Bootstrap virsraksts
`<h6></h6>`	h6. Bootstrap virsraksts

Horizontālie noteikumi

Elements <hr>ir vienkāršots. Līdzīgi kā pārlūkprogrammas noklusējuma iestatījumi, <hr>s ir veidoti, izmantojot border-top, tiem ir noklusējuma vērtība opacity: .25un tie tiek automātiski mantoti , tostarp, ja tiek iestatīts, border-colorizmantojot vecāku. Tos var modificēt, izmantojot teksta, apmaļu un necaurredzamības utilītas.colorcolor

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

Saraksti

Visiem sarakstiem <ul>— , <ol>, un <dl>— ir margin-topnoņemti un ir margin-bottom: 1rem. Ligzdotajos sarakstos nav margin-bottom. Esam arī atiestatījuši padding-leftieslēgšanu <ul>un <ol>elementus.

Visiem sarakstiem ir noņemta augšējā piemale
Un to apakšējā robeža normalizējās
Ligzdotajiem sarakstiem nav apakšējās malas
- Tādā veidā tiem ir vienmērīgāks izskats
- Īpaši tad, ja tam seko vairāk saraksta vienumu
Arī kreisais polsterējums ir atiestatīts

Šeit ir sakārtots saraksts
Ar dažiem saraksta elementiem
Tam ir tāds pats kopējais izskats
Tāpat kā iepriekšējais nesakārtotais saraksts

Lai nodrošinātu vienkāršāku stilu, skaidru hierarhiju un labāku atstarpi, aprakstu saraksti ir atjaunināti margin. <dd>s atiestatīt un margin-leftpievienot . s ir treknrakstā .0margin-bottom: .5rem<dt>

Aprakstu saraksti: Aprakstu saraksts ir lieliski piemērots terminu definēšanai.
Jēdziens: Termina definīcija.; Otra definīcija šim pašam terminam.
Vēl viens termins: Šī cita termina definīcija.

Iekļauts kods

Aptiniet iekļautos koda fragmentus ar <code>. Noteikti izvairieties no HTML leņķiekavām.

Piemēram, <section>jāiesaiņo kā iekļauts.

html

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

Kodu bloki

Izmantojiet <pre>s vairākām koda rindām. Vēlreiz, lai nodrošinātu pareizu renderēšanu, kodā noteikti neizmantojiet leņķa iekavas. Elements <pre>tiek atiestatīts, lai to noņemtu margin-topun tam izmantotu remvienības margin-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>

Mainīgie lielumi

Lai norādītu mainīgos, izmantojiet <var>tagu.

y = m x + b

html

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

Lietotāja ievade

Izmantojiet, <kbd>lai norādītu ievadi, kas parasti tiek ievadīta, izmantojot tastatūru.

Lai pārslēgtu direktorijus, ierakstiet cdpēc tam direktorija nosaukumu.
Lai rediģētu iestatījumus, nospiediet 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>

Parauga izvade

Lai norādītu programmas izvades paraugu, izmantojiet <samp>tagu.

Šis teksts ir paredzēts kā datorprogrammas izvades paraugs.

html

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

Tabulas

Tabulas ir nedaudz pielāgotas stilam <caption>s, sakļautas apmales un nodrošināta konsekvence text-alignvisā. Papildu izmaiņas apmalēm, polsterējumam un citam saturam ir iekļautas .tableklasē .

Šis ir tabulas piemērs, un šis ir tās paraksts, lai aprakstītu saturu.
Tabulas virsraksts	Tabulas virsraksts	Tabulas virsraksts	Tabulas virsraksts
Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna
Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna
Tabulas šūna	Tabulas šūna	Tabulas šūna	Tabulas šūna

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>

Veidlapas

Dažādi formas elementi ir pārstartēti vienkāršākiem bāzes stiliem. Šeit ir dažas no visievērojamākajām izmaiņām:

<fieldset>s nav apmaļu, polsterējuma vai piemales, tāpēc tos var viegli izmantot kā atsevišķu ievadu vai ievades grupu iesaiņojumus.
<legend>s, tāpat kā lauku kopas, arī ir pārveidotas, lai tās tiktu parādītas kā sava veida virsraksti.
<label>s ir iestatīti uz, display: inline-blocklai ļautu marginto lietot.
<input>s, <select>s, <textarea>s un <button>s galvenokārt risina Normalize, bet Reboot noņem tos marginun nosaka line-height: inheritarī .
<textarea>s ir modificēti, lai to izmērus varētu mainīt tikai vertikāli, jo horizontālā izmēra maiņa bieži vien “salauž” lapas izkārtojumu.
<button>s un <input>pogu elementiem ir cursor: pointer, kad :not(:disabled).

Šīs un citas izmaiņas ir parādītas tālāk.

Leģendas piemērs

Ievades piemērs

E-pasta piemērs

Tālruņa piemērs

URL piemērs

Piemēra numurs

Meklēšanas piemērs

Piemēra diapazons

Faila ievades piemērs

Piemēra atlase

Atzīmējiet šo izvēles rūtiņu

Pirmais variants ir tas un tas Otrā iespēja ir kaut kas cits, kas arī ir ļoti garš, lai demonstrētu šo izdomāto formu vadīklu iesaiņojumu. Trešā iespēja ir atspējota

Teksta apgabala piemērs

Datuma piemērs

Piemēra laiks

Paroles piemērs

Piemērs datetime-local

Nedēļas piemērs

Mēneša piemērs

Krāsu piemērs

Izvades piemērs 100

Datuma un krāsu ievades atbalsts

Ņemiet vērā, ka datuma ievadi pilnībā neatbalsta visas pārlūkprogrammas, proti, Safari.

Norādes uz pogām

Reboot ietver uzlabojumu, role="button"lai mainītu noklusējuma kursoru uz pointer. Pievienojiet šo atribūtu elementiem, lai palīdzētu norādīt, ka elementi ir interaktīvi. Šī loma nav nepieciešama <button>elementiem, kas paši cursormainās.

Bezpogu elementa poga

html

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

Dažādi elementi

Adrese

Elements <address>tiek atjaunināts, lai atiestatītu pārlūkprogrammas noklusējuma iestatījumus font-styleno italicuz normal. line-heighttagad ir arī mantots un margin-bottom: 1remir pievienots. <address>s ir paredzēti tuvākā senča (vai visa darba kopuma) kontaktinformācijas uzrādīšanai. Saglabājiet formatējumu, rindiņas beidzot ar <br>.

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

Pilns vārds
[email protected]

Blockquote

Blockquotes noklusējuma iestatījums marginir 1em 40px, tāpēc mēs to atiestatām, lai 0 0 1remiegūtu vairāk atbilstības citiem elementiem.

Labi zināms citāts, kas ietverts blockquote elementā.

Kāds slavens avota nosaukumā

Iekļautie elementi

Elementam <abbr>tiek piešķirts pamata stils, lai tas izceltos starp rindkopas tekstu.

HTML saīsinājuma elements .

Kopsavilkums

Kopsavilkuma noklusējuma cursorvērtība ir text, tāpēc mēs to atiestatām uz, pointerlai norādītu, ka elementu var mijiedarboties, noklikšķinot uz tā.

Dažas detaļas

Vairāk informācijas par detaļām.

Vēl sīkāka informācija

Šeit ir vēl sīkāka informācija par detaļām.

HTML5 `[hidden]`atribūts

HTML5 pievieno jaunu globālo atribūtu ar nosaukumu[hidden]display: none , kas pēc noklusējuma tiek veidots kā stils . Aizņemoties ideju no PureCSS , mēs uzlabojam šo noklusējuma iestatījumu, [hidden] { display: none !important; }palīdzot novērst tās displaynejaušu ignorēšanu.

<input type="text" hidden>

jQuery nesaderība

[hidden]nav saderīgs ar jQuery $(...).hide()un $(...).show()metodēm. Tāpēc mēs pašlaik īpaši neatbalstām [hidden]citus elementu pārvaldības paņēmienus display.

Lai vienkārši pārslēgtu elementa redzamību, kas nozīmē, ka displaytas netiek mainīts un elements joprojām var ietekmēt dokumenta plūsmu, izmantojiet .invisibleklasi .

Reboot

Pieeja

CSS mainīgie

Lapas noklusējuma iestatījumi

Vietējā fontu kaudze

Virsraksti un rindkopas

Horizontālie noteikumi

Saraksti

Iekļauts kods

Kodu bloki

Mainīgie lielumi

Lietotāja ievade

Parauga izvade

Tabulas

Veidlapas

Datuma un krāsu ievades atbalsts

Norādes uz pogām

Dažādi elementi

Adrese

Blockquote

Iekļautie elementi

Kopsavilkums

HTML5 [hidden]atribūts

jQuery nesaderība

HTML5 `[hidden]`atribūts