Tsibela kumxholo ophambili Tsiba uye kukhangelo lwamaxwebhu
Check
in English

Qalisa kwakhona

Qalisa kwakhona, ingqokelela yezinto ezithile zotshintsho lwe-CSS kwifayile enye, qalisa i-Bootstrap ukunika isiseko esihle, esingaguqukiyo, nesilula ukwakha phezu kwayo.

Kweli phepha

Indlela

Qalisa kwakhona ukwakha phezu kokuQinisekisa, unikezela ngezinto ezininzi ze-HTML ezinezimbo zoluvo oluthile usebenzisa abakhethi bamacandelo kuphela. Isitayile esongezelelweyo senziwe kuphela ngeeklasi. Umzekelo, siqalisa ngokutsha ezinye <table>izimbo kwisiseko esilula kwaye kamva sinikeze .table, .table-bordered, kunye nokunye.

Nazi izikhokelo zethu kunye nezizathu zokukhetha into ongayibhala ngaphezulu kwi-Reboot:

  • Hlaziya amaxabiso amiselweyo womkhangeli zincwadi ukuze usebenzise rems endaweni ka ems ukwenzela isithuba secandelo elinokwaleka.
  • Ziphephe margin-top. Imida emi nkqo ingawa, ivelise iziphumo ezingalindelekanga. Okubaluleke ngakumbi nangona kunjalo, isikhokelo marginesinye yimodeli yengqondo elula.
  • Ukukala lula kuzo zonke iisayizi zesixhobo, izakhi zebhloko kufuneka zisebenzise remu-s kwi- margins.
  • Gcina izibhengezo fontzeepropathi ezinxulumeneyo zibe ubuncinane, usebenzisa inheritnanini na kunokwenzeka.

Iinguqu zeCSS

Ifakwe kwi-v5.2.0

Nge-v5.1.1, silungelelanise ii- @imports zethu ezifunekayo kuzo zonke iinyanda zethu ze-CSS (kuquka bootstrap.css, bootstrap-reboot.css, kunye bootstrap-grid.css) ukuquka _root.scss. Oku kongeza :rootinqanaba eliguquguqukayo leCSS kuzo zonke iinyanda, nokuba zingaphi na ezisetyenziswayo kulo mthwalo. Ekugqibeleni i-Bootstrap 5 iya kuqhubeka nokubona izinto eziguquguqukayo ezininzi ze-CSS ezongeziweyo ngokuhamba kwexesha, ukuze unikeze uhlengahlengiso lwexesha lokwenyani ngaphandle kwesidingo sokuhlala ubuyisela i-Sass. Indlela yethu kukuthatha imithombo yethu ye-Sass eguquguqukayo kwaye siyiguqule ibe yi-CSS variables. Ngaloo ndlela, nokuba awusebenzisi iinguqu ze-CSS, usenawo onke amandla e-Sass. Oku kusaqhuba kwaye kuya kuthatha ixesha ukuphumeza ngokupheleleyo.

Umzekelo, qwalasela ezi :rootziguquko zeCSS kwizitayile eziqhelekileyo <body>:

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

Ukusebenza, ezo ziguquko zisetyenziswa kwi-Reboot ngolu hlobo:

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
}

Ekuvumela ukuba wenze uhlengahlengiso lwexesha lokwenyani nangona uthanda:

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

Ukusilela kwephepha

I- element <html>kunye ne - <body>elementi zihlaziywa ukubonelela ngeendawo ezingcono zephepha ngokubanzi. Ngakumbi ngakumbi:

  • Isetiwe box-sizingkwihlabathi liphela kuyo yonke into-kubandakanywa *::beforekunye *::after, ukuya border-box. Oku kuqinisekisa ukuba ububanzi obuchaziweyo bento abugqithwanga ngenxa yokukhuselwa okanye umda.
    • Akukho siseko font-sizesibhengezwe kwi- <html>, kodwa 16pxsithathwa (isikhangeli esimiselweyo). font-size: 1remisetyenziswa kwindlela <body>yokuphendula ngokulula uhlobo-ukulinganisa ngokusebenzisa imibuzo yemidiya ngelixa kuhlonitshwa ukhetho lwabasebenzisi kunye nokuqinisekisa indlela efikeleleka ngakumbi. Oku kungagqibekanga kwesikhangeli kungabhalwa ngaphezulu ngokuguqula $font-size-rootokuguquguqukayo.
  • I <body>kwakhona iseta jikelele font-family, font-weight, line-height, kunye color. Oku kufunyanwa njengelifa kamva ngezinye iifom zezakhi ukunqanda ukungangqinelani kwefonti.
  • Ngokhuseleko, i <body>- background-colorimeyli echaziweyo, engagqibekanga ku #fff.

Uluhlu lweefonti zomthonyama

I-Bootstrap isebenzisa "isitaki sefonti yemveli" okanye "isitaki sefonti yenkqubo" kunikezelo lombhalo olufanelekileyo kwisixhobo ngasinye kunye ne-OS. Ezi fonti zenkqubo ziyilwe ngokukodwa ngezixhobo zanamhlanje engqondweni, ngonikezelo oluphuculweyo kwizikrini, inkxaso yefonti eguquguqukayo, kunye nokunye. Funda ngakumbi malunga nokupakishwa kwefonti kweli nqaku lemagazini iSmashing .

$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 ukuba ngenxa yokuba isitakhi sefonti siquka iifonti ze-emoji, uninzi lweesimboli eziqhelekileyo/iimpawu ze-dingbat ze-Unicode ziya kunikezelwa njengeepictographs ezinemibala emininzi. Inkangeleko yabo iya kwahluka, kuxhomekeke kwisitayile esisetyenziswe kwisikhangeli / iqonga lefonti yemveli ye-emoji, kwaye abayi kuchaphazeleka naziphi na izitayile zeCSS color.

Oku font-familykusetyenziswa <body>kwaye ngokuzenzekelayo kuzuzwe njengelifa kwihlabathi liphela kwiBootstrap. Ukutshintsha jikelele font-family, hlaziya $font-family-basekwaye uphinde uqokelele i-Bootstrap.

Izihloko kunye nemihlathi

Zonke izihloko zesihloko-umz., <h1>-kwaye zisetwa <p>ngokutsha ukuze margin-topzisuswe. Izihloko margin-bottom: .5remzongezwe kunye nemihlathi margin-bottom: 1remukwenzela izithuba ezilula.

Isihloko Umzekelo
<h1></h1> h1. Isihloko seBootstrap
<h2></h2> h2. Isihloko seBootstrap
<h3></h3> h3. Isihloko seBootstrap
<h4></h4> h4. Isihloko seBootstrap
<h5></h5> h5. Isihloko seBootstrap
<h6></h6> h6. Isihloko seBootstrap

Imithetho ethe tye

Isiqalelo <hr>senziwe lula. Ngokufanayo nokusilela komkhangeli zincwadi, <hr>s zibhalwe nge border-top, zinokusilela opacity: .25, kwaye ngokuzenzekelayo zizuze ilifa border-colornge color, kuqukwa xa coloricwangciswa ngomzali. Zinokuguqulwa ngokubhaliweyo, umda, kunye nezixhobo zokungabonakali.

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

Uluhlu

Zonke izintlu— <ul>, <ol>, kunye — <dl>zisusiwe margin-topkwaye a margin-bottom: 1rem. Uluhlu olufakwe kwindlwane azikho margin-bottom. Siphinde sisete kwakhona i- padding-lefton <ul>kunye <ol>nezinto.

  • Zonke izintlu zinemida yazo ephezulu isusiwe
  • Kwaye umda wabo osezantsi uqhelekile
  • Uluhlu olufakwe kwindlwane alunamda ongezantsi
    • Ngaloo ndlela banembonakalo ethe kratya
    • Ngokukodwa xa kulandelwa zizinto zoluhlu ngakumbi
  • Iphedi yasekhohlo nayo isetyenzisiwe
  1. Nalu uluhlu olucwangcisiweyo
  2. Ngezinto ezimbalwa zoluhlu
  3. Inenkangeleko efanayo jikelele
  4. Njengoluhlu olungacwangciswanga lwangaphambili

Kwisitayile esilula, ulawulo olucacileyo, kunye nezithuba ezingcono, uluhlu lwenkcazo luhlaziyiwe margins. <dd>s cwangcisa kwakhona margin-leftkwaye 0wongeze margin-bottom: .5rem. bakhaliphile . <dt>_

Uluhlu lweenkcazelo
Uluhlu lwenkcazo lufanelekile ukuchaza amagama.
Ixesha
Inkcazo yegama.
Inkcazo yesibini yegama elifanayo.
Elinye ixesha
Inkcazo yeli elinye igama.

Ikhowudi yangaphakathi

Songa iziqwengana zekhowudi nge <code>. Qiniseka ukuba ubaleka izibiyeli ze-HTML.

Umzekelo, <section>kufuneka isongwe njengomgca.
html 
For example, <code>&lt;section&gt;</code> should be wrapped as inline.

Iibhloko zekhowudi

Sebenzisa <pre>u-s kwimigca emininzi yekhowudi. Kwakhona, qiniseka ukuba ubaleka naziphi na izibiyeli ze-engile kwikhowudi yonikezelo olufanelekileyo. Into <pre>iphinda icwangciswe ukuze isuswe margin-topkwaye isebenzise remiiyunithi zayo 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>

Izinto eziguquguqukayo

Ukubonisa izinto ezahlukeneyo sebenzisa <var>ithegi.

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

Igalelo lomsebenzisi

Sebenzisa i- <kbd>ukubonisa igalelo elidla ngokungeniswa nge-keyboard.

Ukutshintsha abalawuli, chwetheza cdulandelwe ligama likavimba weefayili.
Ukuhlela useto, cofa 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>

Imveliso yesampuli

Ukubonisa iziphumo zesampulu kwinkqubo sebenzisa <samp>ithegi.

Oku kubhaliweyo kujongwe ukuba kuthathwe njengesampulu ephuma kwiprogram yekhompyutha.
html 
<samp>This text is meant to be treated as sample output from a computer program.</samp>

Iitafile

Iitheyibhile zihlengahlengiswa kancinci kwisitayile <caption>s, ukudilika kwemida, kwaye kuqinisekiswe ukuhambelana text-alignkuyo yonke indawo. Utshintsho olongezelelweyo lwemida, i-padding, kunye nokunye kuza kunye neklasi.table .

Lo ngumzekelo wetheyibhile, kwaye le yinkcazelo yayo yokuchaza imixholo.
Isihloko setheyibhile Isihloko setheyibhile Isihloko setheyibhile Isihloko setheyibhile
Iseli yetafile Iseli yetafile Iseli yetafile Iseli yetafile
Iseli yetafile Iseli yetafile Iseli yetafile Iseli yetafile
Iseli yetafile Iseli yetafile Iseli yetafile Iseli yetafile
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>

Iifom

Izinto ezahlukeneyo zeefom ziye zaqalwa ngokutsha kwizitayile zesiseko ezilula. Nalu olunye utshintsho oluphawulekayo:

  • <fieldset>s ayinayo imida, ikhusi, okanye umjikelo ukuze isetyenziswe ngokulula njengezinto ezisongayo zamagalelo ngamanye okanye amaqela amagalelo.
  • <legend>s, njengeseti zemimandla, ziphinde zaphinda zaboniswa njengesihloko sohlobo.
  • <label>s zimiselwe display: inline-blockukuvumela marginukuba zisetyenziswe.
  • <input>s, <select>s, <textarea>s, kunye <button>nes zijongwa ikakhulu yi-Normalize, kodwa Qalisa kwakhona isusa ezo marginkunye nezicwangciso line-height: inherit, nazo.
  • <textarea>s zihlengahlengiswa ukuze zibe nobungakanani obuphindwe ngokuthe nkqo kuphela njengohlengahlengiso oluthe tye rhoqo "lophula" uyilo lwephepha.
  • <button>s kunye <input>neziqalelo zeqhosha banalo cursor: pointerxa :not(:disabled).

Olu tshintsho, kunye nokunye, kuboniswe ngezantsi.

Umzekelo ilivo

100

Umhla & inkxaso yegalelo lombala

Gcina ukhumbula amagalelo omhla awaxhaswanga ngokupheleleyo ngabo bonke abakhangeli, oko kukuthi, iSafari.

Izalathisi kumaqhosha

Ukuqalisa kwakhona kubandakanya uphuculo role="button"lokutshintsha ikhesa engagqibekanga ibe pointer. Yongeza olu phawu kwiziqalelo ukunceda ukubonisa izinto ziyasebenzisana. Le ndima ayifuneki kwizinto, ezifumana utshintsho <button>lwazo .cursor

Iqhosha lesiqalelo esingeloqhosha
html 
<span role="button" tabindex="0">Non-button element button</span>

Izinto ezahlukeneyo

Idilesi

Isiqalelo <address>sihlaziywa ukuseta ngokutsha isikhangeli esingagqibekanga font-styleukusuka italickwi normal. line-heightnalo ngoku lilifa, kwaye margin-bottom: 1remlongezelelwe. <address>s zezokubonisa iinkcukacha zoqhagamshelwano zoyena khokho ukufutshane (okanye umsebenzi wonke). Gcina ukufomatha ngemigca ephela nge <br>.

Twitter, Inc.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890
Igama elipheleleyo
[email protected]

I-Blockquote

Ukungagqibekanga marginkocaphulo lwebhloko ngulo 1em 40px, ngoko ke siseta ngokutsha siye 0 0 1remkwinto ehambelanayo nezinye izinto.

Isicatshulwa esaziwayo, esiqulethwe kwi-blockquote element.

Umntu odumileyo kwiSihloko soMthombo

Izinto ezingaphakathi

Isiqalelo <abbr>sifumana isimbo esisisiseko sokuyenza icace phakathi kwesicatshulwa somhlathi.

Isishunqulelo seHTML .

Isishwankathelo

Ukungagqibeki cursorkwisishwankathelo ngu text, ke siseta ngokutsha ukuba sibonise pointerinto enokunxibelelana nayo ngokunqakraza kuyo.

Ezinye iinkcukacha

Ulwazi oluninzi malunga neenkcukacha.

Iinkcukacha ezingakumbi

Nazi iinkcukacha ezingakumbi malunga neenkcukacha.

[hidden]Uphawu loyelelwano lwe-HTML5

I -HTML5 yongeza uphawu olutsha lwehlabathi olubizwa ngokuba[hidden] , olubhalwe njengesiqhelo display: none. Ukuboleka umbono kwiPureCSS , siphucula koku kungagqibekanga ngokwenza [hidden] { display: none !important; }ukunceda ukunqanda displayukuba ingabhalwa ngaphezulu ngempazamo.

<input type="text" hidden>
Ukungahambelani kwe-jQuery

[hidden]ayihambelani neejQuery $(...).hide()kunye $(...).show()neendlela. Ke ngoko, asikukhuthazi ngakumbi ngoku [hidden]ngaphezulu kwezinye iindlela zokulawula displayizinto.

Ukuguqula nje ukubonakala kwento, okuthetha displayukuba ayilungiswanga kwaye isiqalelo sisenokuchaphazela ukuhamba koxwebhu, sebenzisa udidi endaweni.invisible yoko.