in English

Qalisa kabusha

Qalisa kabusha, iqoqo lezinguquko ze-CSS zesici esithile efayeleni elilodwa, qala i-Bootstrap ukuze unikeze isisekelo esihle, esingaguquki, nesilula ongakhela phezu kwaso.

Kuleli khasi

Indlela

Qalisa kabusha yakhela phezu kwe-Nomalise, ihlinzeka ngezinto eziningi ze-HTML ezinezitayela ezicatshangelwe imibono ethile usebenzisa izikhethi zezinto kuphela. Isitayela esengeziwe senziwa kuphela ngamakilasi. Isibonelo, siqalisa kabusha ezinye <table>izitayela ukuze sithole isisekelo esilula futhi kamuva sinikeze .table, .table-bordered, nokuningi.

Nansi imihlahlandlela yethu nezizathu zokukhetha ukuthi yini ongayibhala ekuqaliseni kabusha:

Buyekeza amanani amisiwe esiphequluli ukuze uwasebenzise u rem-s esikhundleni sika- ems ukuze uthole izikhala zezingxenye ezingakala.
Gwema margin-top. Amamajini aqondile angawa, aveze imiphumela engalindelekile. Okubaluleke nakakhulu, isiqondiso esisodwa marginsiyimodeli yengqondo elula.
Ukuze kube lula ukukala kuwo wonke amasayizi wedivayisi, ama-elementi ebhulokhi kufanele asebenzise remu-s ku- margins.
Gcina izimemezelo fontzezakhiwo ezihlobene zibe zincane, usebenzisa inheritnoma nini lapho kunokwenzeka.

Izinguquko ze-CSS

Kwengezwe ku-v5.2.0

Nge-v5.1.1, silinganisele okwethu okudingekayo @importkuzo zonke izinqwaba zethu ze-CSS (okuhlanganisa bootstrap.css, bootstrap-reboot.css, kanye bootstrap-grid.css) ukuze kufakwe _root.scss. Lokhu kwengeza :rootokuguquguqukayo kweleveli ye-CSS kuzo zonke izinqwaba, kungakhathaliseki ukuthi zingaki zazo ezisetshenziswa kuleyo nqwaba. Ekugcineni i-Bootstrap 5 izoqhubeka nokubona okuguquguqukayo okwengeziwe kwe-CSS kwengezwe ngokuhamba kwesikhathi, ukuze kuhlinzekwe ngokwezifiso zesikhathi sangempela ngaphandle kwesidingo sokuhlala uhlanganisa i-Sass. Indlela yethu ukuthatha okuguquguqukayo komthombo wethu we-Sass futhi siziguqule zibe eziguquguqukayo ze-CSS. Ngaleyo ndlela, noma ungasebenzisi okuguquguqukayo kwe-CSS, usenawo wonke amandla e-Sass. Lokhu kusaqhubeka futhi kuzothatha isikhathi ukukusebenzisa ngokugcwele.

Isibonelo, cabangela lezi :rootziguquko ze-CSS <body>zezitayela ezivamile:

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

Empeleni, lezo ziguquguqukayo zibe sezisetshenziswa ku-Reboot kanje:

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
}

Okukuvumela ukuthi wenze ngokwezifiso ngesikhathi sangempela ngendlela othanda ngayo:

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

Okuzenzakalelayo kwekhasi

Ama- elementi <html>kanye nama - <body>elementi abuyekeziwe ukuze anikeze okuzenzakalelayo okungcono ekhasini lonke. Ngokuqondile:

I box-sizing-elementi isethwe emhlabeni wonke kuwo wonke ama-elementi—kuhlanganise *::beforefuthi *::after, kuya ku- border-box. Lokhu kuqinisekisa ukuthi ububanzi obushiwo be-elementi abulokothi budlulwe ngenxa yokupheda noma umngcele.
- Asikho isisekelo font-sizeesimenyezelwe ku- <html>, kodwa 16pxkuyacatshangelwa (okuzenzakalelayo kwesiphequluli). font-size: 1remisetshenziswa kuhlelo <body>lokukala uhlobo oluphendulayo olulula ngemibuzo yemidiya ngenkathi ihlonishwa izintandokazi zabasebenzisi futhi iqinisekisa indlela efinyeleleka kakhudlwana. Lokhu okumisiwe kwesiphequluli kungakhishwa ngokulungisa $font-size-rootokuguquguqukayo.
I-The <body>futhi isetha umhlaba wonke font-family, font-weight, line-height, kanye color. Lokhu kuzuzwa njengefa kamuva ezinye izici zefomu ukuvimbela ukungqubuzana kwefonti.
Ukuze uvikeleke, i- inesimemezelo <body>esimisiwe background-color, esishintshashintshayo sithi #fff.

Isitaki sefonti yomdabu

I-Bootstrap isebenzisa "isitaki sefonti yomdabu" noma "isitaki sefonti yesistimu" ukuze kunikezwe umbhalo ophelele kuwo wonke amadivayisi ne-OS. Lawa mafonti esistimu aklanywe ngokukhethekile kucatshangelwa amadivayisi anamuhla, ngokunikezwa okuthuthukisiwe ezikrinini, ukusekelwa kwefonti eguquguqukayo, nokuningi. Funda kabanzi mayelana nezitaki zefonti zomdabu kulesi sihloko se - 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,
  // 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;

Qaphela ukuthi ngenxa yokuthi isitaki sefonti sihlanganisa amafonti e-emoji, izinhlamvu eziningi ezivamile zophawu/i-dingbat Unicode zizonikezwa njengezithombe zezithombe ezinemibala eminingi. Ukubukeka kwazo kuzohluka, kuye ngesitayela esisetshenziswe kufonti ye-emoji yomdabu yesiphequluli/inkundla, futhi ngeke zithintwe yinoma yiziphi colorizitayela ze-CSS.

Lokhu font-familykusetshenziselwa <body>futhi kuzuzwe njengefa ngokuzenzakalelayo emhlabeni wonke kuyo yonke i-Bootstrap. Ukuze ushintshe okomhlaba font-family, buyekeza $font-family-baseuphinde uhlanganise i-Bootstrap.

Izihloko nezigaba

Zonke izakhi zesihloko—isb, <h1>—futhi zisethwa <p>kabusha ukuze margin-topzisuswe. Izihloko margin-bottom: .5remzengeziwe kanye nezigaba margin-bottom: 1remukuze kube lula ukuhlukanisa.

Isihloko	Isibonelo
`<h1></h1>`	h1. Isihloko se-Bootstrap
`<h2></h2>`	h2. Isihloko se-Bootstrap
`<h3></h3>`	h3. Isihloko se-Bootstrap
`<h4></h4>`	h4. Isihloko se-Bootstrap
`<h5></h5>`	h5. Isihloko se-Bootstrap
`<h6></h6>`	h6. Isihloko se-Bootstrap

Imithetho evundlile

Isici <hr>senziwe lula. Ngokufanayo nokuzenzakalelayo kwesiphequluli, okuthi <hr>s kwenziwa ngendlela yokuthi border-top, kube nokuzenzakalelayo opacity: .25, futhi kuzuze ngokuzenzakalelayo border-colornge- color, okuhlanganisa nokuthi colorkusethwa nini ngomzali. Angashintshwa ngombhalo, imingcele, nezinsiza zokungaboni kahle.

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

Uhlu

Zonke izinhlu— <ul>, <ol>, kanye <dl>— zisusiwe margin-topfuthi a margin-bottom: 1rem. Uhlu olufakiwe alunazo margin-bottom. Sisethe kabusha i- padding-lefton <ul>kanye nama - <ol>elementi.

Zonke izinhlu zinemajini yazo ephezulu isusiwe
Futhi umkhawulo wabo ophansi ujwayelekile
Uhlu olufakwe kusidleke alunayo imajini engezansi
- Ngale ndlela banokubukeka okulinganayo
- Ikakhulukazi uma kulandelwa ezinye izinto zohlu
I-padding yesokunxele nayo isethwe kabusha

Nalu uhlu olu-odwe
Ngezinto ezimbalwa zohlu
Inokubukeka okufanayo jikelele
Njengohlu lwangaphambilini olunga-odwe

Ukuze uthole isitayela esilula, isigaba esicacile, nezikhala ezingcono, izinhlu zezincazelo zibuyekeziwe margins. <dd>s setha kabusha margin-leftfuthi 0wengeze margin-bottom: .5rem. <dt>s banesibindi .

Uhlu lwezincazelo: Uhlu lwezincazelo luphelele ekuchazeni amagama.
Ithemu: Incazelo yetemu.; Incazelo yesibili yetemu elifanayo.
Elinye igama: Incazelo yaleli elinye igama.

Ikhodi esemgqeni

Goqa amazwibela ekhodi nge- <code>. Qiniseka ukuthi ubalekela kubakaki be-engeli ye-HTML.

Isibonelo, <section>kufanele isongwe njenge-inline.

html

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

Amabhulokhi ekhodi

Sebenzisa <pre>u-s emigqeni eminingi yekhodi. Nakulokhu, qiniseka ukuthi ubalekela noma yibaphi abakaki be-engeli kukhodi ukuze unikezwe ngendlela efanele. I- <pre>elementi isethwe kabusha ukuze kukhishwe margin-topfuthi kusetshenziswe remamayunithi ayo 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>

Okuguquguqukayo

Ukuze ubonise okuguquguqukayo sebenzisa <var>ithegi.

y = m x + b

html

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

Okokufaka komsebenzisi

Sebenzisa <kbd>ukukhombisa okokufaka okuvamise ukufakwa ngekhibhodi.

Ukuze ushintshe uhla lwemibhalo, thayipha cdulandelwe yigama lohla lwemibhalo.
Ukuze uhlele izilungiselelo, cindezela 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>

Okukhiphayo okuyisampula

Ukuze ubonise ukuphuma kwesampula kuhlelo sebenzisa <samp>ithegi.

Lo mbhalo uhloselwe ukuthi uthathwe njengesampula ephuma ohlelweni lwekhompyutha.

html

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

Amathebula

Amathebula alungiswa kancane ukuze abe yisitayela <caption>sika-s, agoqe imingcele, futhi aqinisekise ukuhambisana text-alignkulo lonke. Izinguquko ezengeziwe zemingcele, iziphedi, nokunye kuza nekilasi ..table

Leli yithebula eliyisibonelo, futhi leli yigama-ncazo elichaza okuqukethwe.
Isihloko sethebula	Isihloko sethebula	Isihloko sethebula	Isihloko sethebula
Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula
Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula
Iseli yethebula	Iseli yethebula	Iseli yethebula	Iseli yethebula

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>

Amafomu

Izakhi zefomu ezahlukahlukene ziqaliswe kabusha ngezitayela zesisekelo ezilula. Nazi ezinye zezinguquko eziphawuleka kakhulu:

<fieldset>s ayinayo imingcele, i-padding, noma imajini ukuze isetshenziswe kalula njengama-wrappers okokufaka ngakunye noma amaqembu okokufaka.
<legend>s, njengama-fieldsets, aphinde ashintshwa ukuze aboniswe njengesihloko sezinhlobo.
<label>s isethwe display: inline-blockukuze ivumele marginukusetshenziswa.
<input>s, <select>s, <textarea>s, kanye no- <button>s abhekiswa kakhulu ngokuthi Normalize, kodwa Qalisa kabusha kususa marginfuthi namasethi line-height: inherit, futhi.
<textarea>ama-s alungiswa ukuze akwazi ukukhulisa usayizi oqondile kuphela njengoba usayizi ovundlile ngokuvamile "uphula" ukwakheka kwekhasi.
<button>s kanye <input>nezakhi zenkinobho zinanini cursor: pointerlapho :not(:disabled).

Lezi zinguquko, nokunye okwengeziwe, kuboniswa ngezansi.

Isibonelo senganekwane

Okokufaka okuyisibonelo

Isibonelo se-imeyili

Isibonelo socingo

Isibonelo se-url

Inombolo yesibonelo

Ukusesha okuyisibonelo

Ibanga lesibonelo

Okokufaka kwefayela okuyisibonelo

Isibonelo khetha

Thikha leli bhokisi

Inketho yokuqala yile nalokhuya Inketho yesibili ingenye into futhi eyinde kakhulu ukukhombisa ukugoqwa kwalezi zilawuli zefomu elihle. Inketho yesithathu ivaliwe

Isibonelo sombhalo

Isibonelo sosuku

Isikhathi sesibonelo

Isibonelo sephasiwedi

Isibonelo sesikhathi sosuku-sendawo

Isibonelo seviki

Isibonelo senyanga

Isibonelo sombala

Okukhiphayo okuyisibonelo 100

Ukusekelwa kokufaka kwedethi nombala

Khumbula okokufaka kwedethi akusekelwe ngokugcwele yizo zonke iziphequluli, okuyiSafari.

Izikhombisi ezinkinobho

Ukuqalisa kabusha kufaka phakathi isithuthukisi role="button"sokushintsha ikhesa ezenzakalelayo ibe yi- pointer. Engeza lesi sibaluli kuma-elementi ukusiza ukukhombisa ukuthi ama-elementi ayasebenzisana. Le ndima ayidingekile kuma- elementi, athola ushintsho <button>lwawo .cursor

Inkinobho yento engeyona inkinobho

html

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

Izakhi ezixubile

Ikheli

Isici <address>sibuyekezwa ukuze kusethwe kabusha okuzenzakalelayo kwesiphequluli font-styleukusuka italicku- normal. line-heightnayo manje izuzwe njengefa, futhi margin-bottom: 1remyengeziwe. <address>s ezokwethula imininingwane yokuxhumana yedlozi eliseduze (noma wonke umsebenzi). Londoloza ukufometha ngokuphetha imigqa nge- <br>.

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

Igama
Eligcwele [email protected]

I-blockquote

Okuzenzakalelayo marginkuma-blockquotes ngu- 1em 40px, ngakho-ke sikusetha kabusha lokho 0 0 1remkokuthile okuhambisana kakhulu nezinye izakhi.

Isicaphuna esaziwayo, esiqukethwe kusici se-blockquote.

Umuntu odumile ku- Source Title

Izakhi ezingaphakathi komugqa

I- <abbr>elementi ithola isitayela esiyisisekelo sokuyenza ivelele phakathi kombhalo wendima.

Isici sesifinyezo se- HTML .

Isifinyezo

Okuzenzakalelayo cursorkusifinyezo ngu- text, ngakho-ke sisetha kabusha lokho pointerukuze sidlulisele ukuthi isici kungaxhunyanwa naso ngokuchofoza kuso.

Eminye imininingwane

Ulwazi olwengeziwe mayelana nemininingwane.

Imininingwane eyengeziwe

Nansi imininingwane eyengeziwe mayelana nemininingwane.

HTML5 `[hidden]`isibaluli

I- HTML5 yengeza isibaluli esisha somhlaba wonke esiqanjwe ngokuthi[hidden] , esiqanjwe ngokuthi display: nonengokuzenzakalela. Ukuboleka umbono ku- PureCSS , sithuthukisa kulokhu okuzenzakalelayo ngokwenza [hidden] { display: none !important; }ukusiza ukuvimbela displayukuthi ingaphumi ngephutha.

<input type="text" hidden>

ukungahambisani kwe-jQuery

[hidden]ayihambisani ne-jQuery $(...).hide()kanye $(...).show()nezindlela. Ngakho-ke, okwamanje asikhuthazi kakhulu [hidden]phezu kwamanye amasu displayokuphatha ama-elementi.

Ukuze nje uguqule ukubonakala kwento ethile, okusho ukuthi displayayilungiswanga futhi isici sisengaphazamisa ukuhamba kwedokhumenti, sebenzisa isigaba.invisible esikhundleni salokho .

Qalisa kabusha

Indlela

Izinguquko ze-CSS

Okuzenzakalelayo kwekhasi

Isitaki sefonti yomdabu

Izihloko nezigaba

Imithetho evundlile

Uhlu

Ikhodi esemgqeni

Amabhulokhi ekhodi

Okuguquguqukayo

Okokufaka komsebenzisi

Okukhiphayo okuyisampula

Amathebula

Amafomu

Ukusekelwa kokufaka kwedethi nombala

Izikhombisi ezinkinobho

Izakhi ezixubile

Ikheli

I-blockquote

Izakhi ezingaphakathi komugqa

Isifinyezo

HTML5 [hidden]isibaluli

ukungahambisani kwe-jQuery

HTML5 `[hidden]`isibaluli