Reboot

Reboot, berhevokek guheztinên CSS-ê yên taybetî yên di pelek yekane de, Bootstrap-ê dest pê dike da ku bingehek xweşik, domdar û hêsan peyda bike ku li ser were avakirin.

Li ser vê rûpelê

Nêzîkbûhatinî

Reboot li ser Normalîzekirinê ava dibe, ku gelek hêmanên HTML-ê bi şêwazên hinekî ramanbar peyda dike ku tenê hilbijêrên hêmanan bikar tînin. Şêweya pêvek tenê bi dersan re tê kirin. Mînakî, em hin <table>şêwazan ji bo bingehek hêsan ji nû ve dest pê dikin û paşê .table, .table-bordered, û bêtir peyda dikin.

Li vir rêwerz û sedemên me hene ku ji bo hilbijartina tiştê ku di Reboot-ê de derbas bikin:

Hin nirxên xwerû yên gerokê nûve bikin da ku rems-yê li şûna ems-ê ji bo veqetandina pêkhateyên berbelavkirî bikar bînin.
Xwe dûr bixin margin-top. Mercên vertîkal dikarin hilweşin, encamên nediyar derxînin. Lêbelê ya girîngtir, rêgezek yekane marginmodelek derûnî ya hêsan e.
Ji bo pîvandina hêsantir di nav mezinahiyên cîhazê de, divê hêmanên blokê s- remyê ji bo margins-yê bikar bînin.
Daxuyaniyên fonttaybetmendiyên -girêdayî herî kêm bihêlin, inheritgava ku gengaz be bikar bînin.

Guherbarên CSS

Di v5.1.1 de hate zêdekirin

Bi v5.1.1-ê re, me sên xwe yên pêwîst li ser hemî pakêtên xwe yên CSS standardîze kir ( @importdi nav bootstrap.cssde bêtir guhêrbarên CSS-ê ku bi demê re hatine zêdekirin bibînin.bootstrap-reboot.cssbootstrap-grid.css_root.scss:root

Pêşniyarên rûpelê

Hêman <html>û <body>hêman têne nûve kirin da ku pêşnumayên li seranserê rûpelê çêtir peyda bikin. Bi taybetî bêtir:

Di box-sizinggerdûnî de li ser her hêmanek tête danîn-di nav de *::beforeû *::after, ji bo border-box. Ev piştrast dike ku firehiya diyarkirî ya hêmanê ji ber peldank an sînor qet derbas nabe.
- No bingehek font-sizeli ser <html>, lê 16pxtê texmîn kirin (geroka xwerû). font-size: 1remji <body>bo pîvandina tîpa bersivdar a hêsan bi navgîniya pirsnameyên medyayê ve tê sepandin dema ku rêz li tercîhên bikarhêner digire û nêzîkatiyek gihîştîtir peyda dike. Ev xwerû ya gerokê dikare bi guheztina guhêrbar were paşguh kirin $font-size-root.
Di <body>heman demê de cîhanek gerdûnî font-family, font-weight, line-heightû color. Ev paşê ji hêla hin hêmanên formê ve tê mîras kirin da ku pêşî li nakokiyên tîpan bigire.
Ji bo ewlehiyê, <body>xwedan navnîşek diyarkirî ye background-color, ku ji #fff.

Pişka tîpên xwemalî

Bootstrap ji bo veguheztina nivîsê ya herî baş li ser her amûr û OS-ê "staka tîpên xwemalî" an "pergala tîpên pergalê" bikar tîne. Van tîpên pergalê bi taybetî bi cîhazên îroyîn di hişê xwe de hatine sêwirandin, bi renderkirina çêtir li ser ekranan, piştgiriya tîpên guhêrbar, û hêj bêtir. Di vê gotara Kovara Smashing de li ser stûnên tîpên xwemalî bêtir bixwînin .

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

Bala xwe bidinê ku ji ber ku stûna tîpan tîpên emoji dihewîne, gelek karakterên unicode yên hevpar/dingbat dê wekî wêneyên pirreng werin pêşkêş kirin. Dê xuyangê wan cûda be, li gorî şêwaza ku di fontê emoji ya xwemalî ya gerok/platformê de tê bikar anîn, û ew ê ji tu colorşêwazên CSS-ê bandor nebin.

Ev li seranserê Bootstrap-ê li seranserê gerdûnî û bixweber mîras font-familytê sepandin . <body>Ji bo veguherîna gerdûnî , Bootstrap- ê font-familynûve bikin û ji nû ve berhev bikin.$font-family-base

Guherbarên CSS

Her ku Bootstrap 5 mezinbûna xwe berdewam dike, dê bêtir û bêtir şêwaz bi guhêrbarên CSS- ê ve werin çêkirin wekî amûrek ku bêtir xwerûkirina rast-demê peyda bike bêyî ku hewce bike ku her gav Sass ji nû ve berhev bike. Nêzîkatiya me ev e ku em guhêrbarên Sass-a çavkaniya xwe bigirin û wan veguherînin guhêrbarên CSS. Bi vî rengî, her çend hûn guhêrbarên CSS-ê bikar neynin jî, hûn hîn jî hemî hêza Sass-ê heye. Ev hê jî di pêşveçûnê de ye û dê dem bigire ku bi tevahî were bicîh kirin.

Mînakî, van guherbarên CSS-ê ji bo şêwazên :roothevpar bihesibînin:<body>

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

Di pratîkê de, ew guhêrbar wê hingê di Reboot-ê de weha têne sepandin:

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

Ya ku destûrê dide we ku hûn lê hez dikin xwerûkirina rast-demê bikin:

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

Sernav û paragraf

Hemî hêmanên sernavê - mînak, - û ji bo <h1>rakirina <p>wan têne nûve margin-topkirin. Sernav margin-bottom: .5remû paragraf margin-bottom: 1remji bo veqetandina hêsan lê zêde kirine.

Sernivîs	Mînak
`<h1></h1>`	h1. Sernavê Bootstrap
`<h2></h2>`	h2. Sernavê Bootstrap
`<h3></h3>`	h3. Sernavê Bootstrap
`<h4></h4>`	h4. Sernavê Bootstrap
`<h5></h5>`	h5. Sernavê Bootstrap
`<h6></h6>`	h6. Sernavê Bootstrap

Lists

Hemî navnîşan- <ul>, <ol>, û <dl>- wan margin-topjêbirin û a margin-bottom: 1rem. Lîsteyên nested tune margin-bottom. Me li padding-leftser <ul>û <ol>hêmanan jî sifir kir.

Hemî navnîşan marjîna wan ya jorîn jêbirin
Û margina wan ya jêrîn normal bû
Lîsteyên hêlînkirî ti marjîna jêrîn tune
- Bi vî rengî ew xuyangek hêniktir in
- Bi taybetî dema ku li dû hêmanên navnîşê yên bêtir têne şopandin
Pelê çepê jî ji nû ve hatî vegerandin

Li vir navnîşek rêzkirî ye
Bi çend hêmanên lîsteyê
Ew heman xuyangê giştî heye
Wekî navnîşa nerêkûpêk a berê

Ji bo şêwazek hêsan, hiyerarşiya zelal, û cîhê çêtir, navnîşên ravekirinê margins nûve kirine. <dd>s reset margin-leftbike 0û lê zêde bike margin-bottom: .5rem. <dt>s têne stûr kirin.

Navnîşan lîsteyên: Lîsteya ravekirinê ji bo diyarkirina terman bêkêmasî ye.
Îfade: Pênaseya termê.; Ji bo heman peyvê pênaseyek duyemîn.
Termek din: Pênaseya vê termê din.

Koda hundurîn

Parçeyên kodê yên hundurîn bi <code>. Bawer bikin ku hûn ji bendên goşeya HTML-ê birevin.

Mînakî, <section>divê wekî hundur were pêçan.

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

Blokên kodê

Ji <pre>bo gelek rêzikên kodê s bikar bînin. Carek din, pê ewle bin ku hûn ji bo veguheztina rast di kodê de ji berikên goşeyê birevin. Hêman <pre>ji nû ve tê rakirin da ku wê jê bibe margin-topû ji rembo wê yekîneyan bikar bîne margin-bottom.

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

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

Variables

Ji bo nîşankirina guherbaran <var>tagê bikar bînin.

y = m x + b

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

Têketina bikarhêner

Ji <kbd>bo nîşankirina têketina ku bi gelemperî bi klavyeyê ve tê navnîş kirin bikar bînin.

Ji bo veguhertina pelrêçan, cdli pey navê pelrêçê binivîsin.
Ji bo guherandina mîhengan, pêl bikin ctrl + ,

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>

Hilberîna nimûne

Ji bo nîşankirina encamek nimûneyê ji bernameyekê <samp>tagê bikar bînin.

Ev metn tê wateya ku wekî encamek nimûne ji bernameyek komputerê were hesibandin.

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

Tables

Tablo li gorî şêwaza s-yê hinekî têne guheztin , sînoran hilweşînin, û li seranserê <caption>domdar peyda dikin. text-alignGuhertinên pêvek ên ji bo sînor, peldank, û hêj bêtir bi polê .tablere têne.

Ev tabloyek nimûne ye, û ev sernavê wê ye ku naverokê diyar dike.
Sernavê sifrê	Sernavê sifrê	Sernavê sifrê	Sernavê sifrê
Hucreya sifrê	Hucreya sifrê	Hucreya sifrê	Hucreya sifrê
Hucreya sifrê	Hucreya sifrê	Hucreya sifrê	Hucreya sifrê
Hucreya sifrê	Hucreya sifrê	Hucreya sifrê	Hucreya sifrê

Forms

Ji bo şêwazên bingehîn ên hêsan hêmanên cûrbecûr ji nû ve hatine destpêkirin. Li vir hinek guhertinên herî berbiçav hene:

<fieldset>Sînor, peldank, an marjîna wan tune ji ber vê yekê ew dikarin bi hêsanî ji bo têketinên kesane an komên têketinê wekî pêçan werin bikar anîn.
<legend>s, mîna berhevokên zeviyan, di heman demê de ji nû ve hatine şêwazkirin da ku wekî sernavek cûrbecûr werin xuyang kirin.
<label>s têne destnîşan kirin display: inline-blockku destûr bidin marginku bêne sepandin.
<input>s, <select>s, <textarea>s, û <button>s bi piranî ji hêla Normalize ve têne navnîş kirin, lê Reboot wan jî radike marginû destnîşan dike line-height: inherit.
<textarea>s têne guheztin da ku tenê bi rengek vertîkal werin veguheztin ji ber ku veguheztina horizontî pirê caran xêzkirina rûpelê "diqetîne".
<button>s û <input>hêmanên bişkojka heye cursor: pointerdema :not(:disabled).

Ev guhertin, û bêtir, li jêr têne destnîşan kirin.

Piştgiriya têketina tarîx û reng

Bînin bîra xwe ku têketinên tarîxê ji hêla hemî gerokan ve, ango Safari, bi tevahî nayên piştgirî kirin.

Nîşaneyên li ser bişkokan

Reboot pêşkeftinek ji role="button"bo guheztina rêzika xwerû li pointer. Vê taybetmendiyê li hêmanan zêde bikin da ku bibin alîkar ku hêmanên înteraktîf in. Ev rol ji bo hêmanên ku guhartina <button>xwe bi xwe digirin ne hewce ye.cursor

Bişkojka elementa ne-button

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

hêmanên cuda

Navnîşan

Hêman <address>tê nûvekirin da ku geroka xwerû font-styleji italicbo vegere normal. line-heightjî niha mîras e, û margin-bottom: 1remhatiye zêdekirin. <address>s ji bo pêşkêşkirina agahdariya pêwendiyê ji bo bav û kalê herî nêzîk (an tevahiya laşê xebatê) ne. Bi qedandina rêzan bi <br>.

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

Navê
Tev [email protected]

Blockquote

Veguhastina marginli ser blokan ev e 1em 40px, ji ber vê yekê em wê ji 0 0 1rembo tiştek bi hêmanên din re hevahengtir ji nû ve dikin.

Gotinek naskirî, ku di hêmanek blokê de heye.

Kesek di Sernavê Çavkaniyê de navdar e

hêmanên Inline

Hêman <abbr>şêweya bingehîn distîne da ku ew di nav nivîsa paragrafê de derkeve holê.

Hêmana kurteya HTML .

Berhevkirinî

Pêşniyara cursorkurteyê ev e text, ji ber vê yekê em wê ji nû pointerve vedigirin da ku ragihînin ku hêman dikare bi tikandina li ser wê re têkilî daynin.

Hin hûrgulî

Agahiyên bêtir li ser hûrguliyan.

Hîn bêtir hûrgulî

Li vir hûrguliyên bêtir li ser hûrguliyan hene.

`[hidden]`taybetmendiya HTML5

HTML5 taybetmendiyek gerdûnî ya nû ya bi navê[hidden] , ku ji hêla xwerû ve hatî şêwaz kirin lê zêde dike display: none. Ji PureCSS ramanek deyn dikin , em li ser vê pêşnumayê çêtir dikin ku [hidden] { display: none !important; }ji bo pêşîgirtina wê ya bêserûber were paşguh kirin alîkar bikin display.

<input type="text" hidden>

jQuery nelihevhatî

[hidden]bi jQuery $(...).hide()û $(...).show()rêbazên ne lihevhatî ye. Ji ber vê yekê, em niha bi taybetî [hidden]teknîkên din ên ji bo birêvebirina displayhêmanan napejirînin.

Ji bo ku tenê xuyabûna hêmanek biguhezîne, tê vê wateyê ku displayew nayê guheztin û hêman hîn jî dikare bandorê li herikîna belgeyê bike, li şûna wê .invisiblepolê bikar bînin.

Reboot

Nêzîkbûhatinî

Guherbarên CSS

Pêşniyarên rûpelê

Pişka tîpên xwemalî

Guherbarên CSS

Sernav û paragraf

Lists

Koda hundurîn

Blokên kodê

Variables

Têketina bikarhêner

Hilberîna nimûne

Tables

Forms

Piştgiriya têketina tarîx û reng

Nîşaneyên li ser bişkokan

hêmanên cuda

Navnîşan

Blockquote

hêmanên Inline

Berhevkirinî

[hidden]taybetmendiya HTML5

jQuery nelihevhatî

`[hidden]`taybetmendiya HTML5