Reboot nakambe

Reboot, nhlengeleto wa ku cinca ka CSS loku kongomeke ka elemente eka fayili yin’we, kickstart Bootstrap ku nyika xisekelo xo saseka, lexi nga cincekiki, na xo olova xo aka eka xona.

Eka tluka leri

Manghenelo

Reboot yi aka eka Normalize, yi nyika swiaki swo tala swa HTML hi switayele leswi nga na mavonelo yo karhi hi ku tirhisa ntsena swihlawulekisi swa swiaki. Ku engetela switayili swi endliwa ntsena hi titlilasi. Xikombiso, hi tlhela hi pfula <table>switayele swin’wana ku kuma xisekelo xo olova ivi endzhaku hi nyika .table, .table-bordered, na swin’wana.

Hi leswi swiletelo swa hina na swivangelo swo hlawula leswi u faneleke ku swi tlula eka Reboot:

Pfuxeta mimpimo yin’wana ya xiviri ya browser ku tirhisa rems ematshan’wini ya ems eka ku hambana ka swiphemu loku ringanisiwaka.
Papalata margin-top. Ti margin leti yimisiweke tinga wa, ti humesa mbuyelo lowu nga languteriwangiki. Kambe xa nkoka swinene, nkongomiso wun’we wa margini xikombiso xo olova xa mianakanyo.
Ku olova ku ringanisa ku tsemakanya vukulu bya switirhisiwa, swiaki swa xibokisana swi fanele ku tirhisa rems eka margins.
Hlayisa switiviso swa fontswihlawulekisi leswi fambelanaka na swona swi ri ehansi, u tirhisa inheritloko swi koteka.

Swilo leswi cinca-cincaka swa CSS

Ku engeteriwe eka v5.1.1

Hi v5.1.1, hi ringanise @imports ya hina leyi lavekaka eka swiyenge swa hina hinkwaswo swa CSS (ku katsa na bootstrap.css, bootstrap-reboot.css, na bootstrap-grid.cssku katsa _root.scss. Leswi swi engetela :rootswilo leswi cinca-cincaka swa CSS swa xiyimo eka swihlanganisi hinkwaswo, ku nga khathariseki leswaku i swingani swa swona leswi tirhisiwaka eka nxaxamelo wolowo. Eku heteleleni Bootstrap 5 yi ta ya emahlweni yi endla tano vona swin’wana leswi cinca-cincaka swa CSS leswi engeteriweke hi ku famba ka nkarhi.

Swihlawulekisi swa matluka

Swiaki swa <html>na <body>swi pfuxetiwa ku nyika swihlawulekisi swo antswa swa tluka hinkwaro. Hi ku kongoma swinene:

The box-sizingyi vekiwile emisaveni hinkwayo eka xiaki xin’wana ni xin’wana—ku katsa *::beforeni na *::after, ku ya eka border-box. Leswi switiyisisa leswaku ku anama loku tivisiweke ka elemente ayi tshuki yi tlula hikokwalaho ka padding kumbe border.
- Ku hava xisekelo font-sizelexi tivisiweke eka <html>, kambe 16pxxi tekiwa (xihlawulekisi xa browser). font-size: 1remyi tirhisiwa eka the <body>for easy responsive type-scaling hi ku tirhisa swivutiso swa vuhangalasi bya mahungu loko ku ri karhi ku xixima swihlawulekisi swa vatirhisi na ku tiyisisa endlelo leri fikelelaka swinene. Xihlawulekisi lexi xa xihlamusela-marito xi nga ha tluriwa hi ku cinca $font-size-rootxihlawulekisi.
The <body>yi tlhela yi veka global font-family, font-weight, line-height, na color. Leswi swi dya ndzhaka endzhaku hi swiaki swin’wana swa xivumbeko ku sivela ku nga fambisani ka fonto.
Ku kuma vuhlayiseki, the <body>has a declared background-color, ku tsandzeka ku hakela #fff.

Xithaki xa fonto ya ntumbuluko

Bootstrap yi tirhisa “native font stack” kumbe “system font stack” eka ku hundzuluxela ka matsalwa lokunene eka xitirhisiwa xin’wana na xin’wana na OS. Tifonto leti ta sisiteme ti endliwe hi ku kongoma hi ku anakanya hi switirhisiwa swa namuntlha, hi ku antswisiwa ka ku hundzuluxeriwa eka swikirini, nseketelo wa tifonto leti cinca-cincaka ni swin’wana. Hlaya swo tala hi switachi swa tifonto ta ntumbuluko eka xihloko lexi xa Smashing Magazine .

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

Xiya leswaku hikuva xithaki xa tifonto xi katsa tifonto ta emoji, swihlawulekisi swo tala leswi tolovelekeke swa xikombiso/dingbat unicode swi ta endliwa tanihi swifaniso swa mihlovo yo tala. Ku languteka ka tona ku ta hambana, ku ya hi xitayili lexi tirhisiwaka eka fonto ya emoji ya ntumbuluko ya browser/platform, naswona a va nge khumbeki hi colorswitayele swihi na swihi swa CSS.

Leswi font-familyswi tirhisiwa eka <body>naswona hi ku tisungulela swi dya ndzhaka ya misava hinkwayo eka Bootstrap hinkwayo. Ku cinca global font-family, pfuxeta $font-family-basena ku tlhela u hlengeleta Bootstrap.

Swilo leswi cinca-cincaka swa CSS

Loko Bootstrap 5 yi ya emahlweni yi kula, switayele swo tala swi ta akiwa hi swilo leswi cinca-cincaka swa CSS tanihi ndlela yo nyika ku cinca-cinca ko tala ka nkarhi wa xiviri handle ka xilaveko xo tshama u ri karhi u hlengeleta nakambe Sass. Endlelo ra hina i ku teka swilo swa hina swa Sass swa xihlovo ivi hi swi hundzula swi va swilo leswi cinca-cincaka swa CSS. Hi ndlela yoleyo, hambiloko u nga tirhisi swilo leswi cinca-cincaka swa CSS, wa ha ri ni matimba hinkwawo ya Sass. Leswi swa ha ya emahlweni naswona swi ta teka nkarhi ku swi tirhisa hi ku hetiseka.

Xikombiso, languta swilo leswi swa :rootCSS swa <body>switayele leswi tolovelekeke:

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

Hi ku tirhisa, swilo sweswo leswi cinca-cincaka swi tlhela swi tirhisiwa eka Reboot ku fana na sweswo:

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
}

Leswi swi ku pfumelelaka ku endla ku cinca ka nkarhi wa xiviri hambi swi ri tano u swi tsakela:

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

Tinhloko-mhaka ni tindzimana

Swiaki hinkwaswo swa nhlokomhaka—xikombiso, <h1>—naswona <p>swi tlhela swi vekiwa leswaku swi margin-topsusiwa. Ku engeteriwe tinhloko-mhaka margin-bottom: .5remni tindzimana margin-bottom: 1remleswaku swi olova ku swi veka exikarhi.

Nhlokomhaka	Xikombiso
`<h1></h1>`	h1. Nhlokomhaka ya bootstrap
`<h2></h2>`	h2. Nhlokomhaka ya bootstrap
`<h3></h3>`	h3. Nhlokomhaka ya bootstrap
`<h4></h4>`	h4. Nhlokomhaka ya bootstrap
`<h5></h5>`	h5. Nhlokomhaka ya bootstrap
`<h6></h6>`	h6. Nhlokomhaka ya bootstrap

Minxaxamelo ya swilo

Minxaxamelo hinkwayo— <ul>, <ol>, na <dl>—yi margin-topsusiwile ya yona na a margin-bottom: 1rem. Minxaxamelo leyi pfanganisiweke a yi na margin-bottom. Hi tlhele hi tlhela hi veka swilo swa padding-lefton <ul>na <ol>.

Minxaxamelo hinkwayo yi susiwile margin ya yona ya le henhla
Naswona margin ya vona ya le hansi yi ve ya ntolovelo
Minxaxamelo leyi pfanganisiweke a yi na margin ya le hansi
- Hi ndlela leyi va va ni xivumbeko lexi ringanaka swinene
- Ngopfu-ngopfu loko ku landzeriwa hi swilo swo tala swa nxaxamelo
Padding ya left na yona yi tlhele yi vekiwa

Hi lowu nxaxamelo lowu odaweke
Hi swilo swi nga ri swingani swa nxaxamelo
Yi ni ku languteka loku fanaka hi ku angarhela
Tanihi nxaxamelo lowu hundzeke lowu nga hlelekangiki

Ku kuma xitayili xo olova, xiyimo xa le henhla lexi nga erivaleni, na ku hambana ko antswa, minxaxamelo ya tinhlamuselo yi pfuxetile margins. <dd>s tlherisela margin-lefteka 0na ku engetela margin-bottom: .5rem. <dt>s yi tsariwile hi ku olova .

Minxaxamelo ya tinhlamuselo: Nxaxamelo wa tinhlamuselo wu hetisekile ku hlamusela marito.
Thema: Nhlamuselo ya rito leri.; Nhlamuselo ya vumbirhi ya rito leri fanaka.
Rito rin’wana: Nhlamuselo ya rito leri rin’wana.

Khodi ya le ndzeni ka layini

Pfuxeta swiphemu swa khodi ya le ndzeni ka layini hi <code>. Tiyiseka leswaku u balekela swikhomela-ndhawu swa HTML.

Hi xikombiso, <section>yi fanele yi phutseriwe tanihi leyi nga endzeni ka layini.

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

Swibokisana swa khodi

Tirhisa <pre>s eka milayeni yo tala ya khodi. Nakambe, tiyiseka leswaku u balekela swikhomela-ndhawu swihi na swihi swa angle eka khodi leswaku u ta hundzuluxeriwa kahle. Xiaki <pre>xi tlhela xi vekiwa ku susa xa xona margin-topni ku tirhisa remtiyuniti ta xona 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>

Swilo leswi cinca-cincaka

Ku kombisa swilo leswi cinca-cincaka tirhisa <var>thegi.

y = m x + b

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

Ku nghenisa ka mutirhisi

Tirhisa <kbd>ku kombisa ku nghenisa loku hi ntolovelo ku nghenisiwaka hi ku tirhisa khibhodi.

Ku cinca swikombo, thayipa u cdlandzela vito ra swikombo.
Ku hlela swiyimiso, cinca 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>

Xikombiso xa vuhumelerisi

Ku kombisa vuhumelerisi bya xikombiso ku suka eka nongonoko tirhisa <samp>thegi.

Tsalwa leri ri endleriwe ku tekiwa tanihi xikombiso xa vuhumelerisi lebyi humaka eka nongonoko wa khompyuta.

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

Matafula

Matafula ya lulamisiwile nyana eka xitayili <caption>s, ku wisa mindzilakano, naswona ya tiyisisa ku nga cinci text-alignhinkwako. Ku cinca loku engetelekeke ka mindzilakano, ku padding ni swin’wana swi ta ni .tabletlilasi .

Leri i tafula ra xikombiso, naswona leri i xitlhokovetselo xa rona xo hlamusela leswi nga endzeni.
Nhlokomhaka ya tafula	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula	Nhlokomhaka ya tafula
Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula
Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula
Sele ya tafula	Sele ya tafula	Sele ya tafula	Sele ya tafula

Swivumbeko

Swiaki swo hambana swa xivumbeko swi pfuriwile nakambe eka switayele swa xisekelo swo olova. Hi leswi swin’wana swa ku cinca loku xiyekaka swinene:

<fieldset>s a yi na mindzilakano, padding, kumbe margin leswaku yi ta tirhisiwa hi ku olova tanihi swifunengeto swa swingheniso swa munhu hi xiyexe kumbe mintlawa ya swingheniso.
<legend>s, ku fana na ti fieldsets, na tona ti endliwile hi vuntshwa leswaku ti kombisiwa tanihi nhlokomhaka ya tinxaka.
<label>s ti vekiwile eka display: inline-blockku pfumelela marginku tirhisiwa.
<input>s, <select>s, <textarea>s, na <button>s ti langutisiwa ngopfu hi Normalize, kambe Reboot yi susa ya vona marginna yi veka line-height: inherit, na yona.
<textarea>s ti cinciwa leswaku ti nga cinciwa ntsena hi ndlela yo yima tanihi leswi ku cinca sayizi loku nga etlhelo hakanyingi ku “tshovaka” xivumbeko xa pheji.
<button>s na <input>swiaki swa buti swi na cursor: pointerloko :not(:disabled).

Ku cinca loku, ni swin’wana, swi kombisiwile laha hansi.

Xikombiso xa ntsheketo

Xikombiso xa ku nghenisa

Xikombiso xa email

Xikombiso xa riqingho

Xikombiso xa url

Xikombiso xa nomboro

Xikombiso xa ku lavisisa

Xikombiso xa rhengu

Xikombiso xa ku nghenisa fayili

Xikombiso xa ku hlawula

Cheka bokisi leri ro kambela

Nhlawulo wo sungula i lowu na lowu Nhlawulo wa vumbirhi i nchumu wun’wana lowu na wona wu nga super long ku kombisa ku phutsela ka swilawuri leswi swa xivumbeko xo saseka. Nhlawulo wa vunharhu wu pfaleriwile

Xikombiso xa ndhawu ya matsalwa

Xikombiso xa siku

Xikombiso xa nkarhi

Xikombiso xa password

Xikombiso datetime-local

Xikombiso xa vhiki

Xikombiso xa n’hweti

Xikombiso xa muvala

Xikombiso xa vuhumelerisi 100.

Nseketelo wa ku nghenisa siku & mihlovo

Hlayisa emiehleketweni leswaku ku nghenisiwa ka siku a ku seketeriwi hi ku helela hi swihlamusela-marito hinkwaswo, ku nga Safari.

Swikombiso eka swikomba-nkarhi

Reboot yi katsa ku antswisiwa ka role="button"ku cinca xikombiso xa ntolovelo ku va pointer. Engetela xihlawulekisi lexi eka swiaki ku pfuneta ku kombisa leswaku swiaki swa tirhisana. Ntirho lowu a wu laveki eka <button>swiaki, leswi kumaka ku cursorcinca ka swona.

Batani ya elemente leyi nga riki ya buti

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

Swiaki swo hambana-hambana

Kherefu

Xiaki <address>xi pfuxetiwa ku tlhela xi veka xivumbeko xa browser ku font-stylesuka eka italicku ya eka normal. line-heightna yona sweswi yi kumiwile ndzhaka, naswona margin-bottom: 1remyi engeteriwile. <address>s i ya ku humesa vuxokoxoko bya vuhlanganisi bya kokwa wa le kusuhi (kumbe nhlengeletano hinkwayo ya ntirho). Hlayisa ku fometa hi ku heta milayeni hi <br>.

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

Vito leri heleleke
ro [email protected]

Xibokisana xa swilo

Default margineka blockquotes i 1em 40px, kutani hi tlherisela sweswo eka 0 0 1remeka nchumu wun’wana lowu fambelanaka swinene na swiaki swin’wana.

Xitlhokovetselo lexi tivekaka swinene, lexi nga eka elemente ya blockquote.

Munhu loyi a dumeke eka Source Title

Swiaki swa le ndzeni ka layini

Xiaki <abbr>xi amukela xitayili xa masungulo ku endla leswaku xi humelela exikarhi ka tsalwa ra ndzimana.

Xiphemu xa xifunengeto xa HTML .

Nkomiso

Default cursoreka nkatsakanyo i text, kutani hi tlherisela sweswo eka pointerku hundzisela leswaku elemente yi nga tirhisana na yona hi ku yi tsindziyela.

Vuxokoxoko byin’wana

More info hi vuxokoxoko.

Vuxokoxoko lebyi engetelekeke swinene

Hi lebyi vuxokoxoko lebyi engetelekeke swinene malunghana ni vuxokoxoko bya kona.

`[hidden]`Xihlawulekisi xa HTML5

HTML5 yi engetela xihlawulekisi lexintshwa xa misava hinkwayo lexi vuriwaka[hidden] , lexi endliweke hi xitayili tanihi display: nonehi ku tiyimisela. Ku lomba mianakanyo ku suka eka PureCSS , hi antswisa eka ku tiyimisela loku hi ku endla [hidden] { display: none !important; }ku pfuneta ku sivela ya yona displayku va yi tluleriwi hi xihoxo.

<input type="text" hidden>

Ku nga fambisani ka jQuery

[hidden]a yi fambisani na jQuery's $(...).hide()na $(...).show()tindlela. Hikwalaho, sweswi a hi seketeli ngopfu-ngopfu ku [hidden]tlula tindlela tin’wana to lawula displayta swiaki.

Ku cinca ntsena ku vonaka ka xiaki, leswi vulaka leswaku xa xona displaya xi cinciwanga naswona xiaki xa ha kota ku khumba ku khuluka ka tsalwa, tirhisa tlilasi ematshan’wini ya sweswo..invisible

Reboot nakambe

Manghenelo

Swilo leswi cinca-cincaka swa CSS

Swihlawulekisi swa matluka

Xithaki xa fonto ya ntumbuluko

Swilo leswi cinca-cincaka swa CSS

Tinhloko-mhaka ni tindzimana

Minxaxamelo ya swilo

Khodi ya le ndzeni ka layini

Swibokisana swa khodi

Swilo leswi cinca-cincaka

Ku nghenisa ka mutirhisi

Xikombiso xa vuhumelerisi

Matafula

Swivumbeko

Nseketelo wa ku nghenisa siku & mihlovo

Swikombiso eka swikomba-nkarhi

Swiaki swo hambana-hambana

Kherefu

Xibokisana xa swilo

Swiaki swa le ndzeni ka layini

Nkomiso

[hidden]Xihlawulekisi xa HTML5

Ku nga fambisani ka jQuery

`[hidden]`Xihlawulekisi xa HTML5