Qalisa kwakhona

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

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

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.
Le <body>ikwaseta iglobal font-family, line-height, kunye text-align. Oku kufunyanwa njengelifa kamva ngezinye iifom zezakhi ukunqanda ukungangqinelani kwefonti.
Ngokhuseleko, i <body>- background-colorimeyli echaziweyo, engagqibekanga ku #fff.

Uluhlu lweefonti zomthonyama

Iifonti zewebhu ezingagqibekanga (i-Helvetica Neue, i-Helvetica, kunye ne-Arial) ziye zalahlwa kwi-Bootstrap 4 kwaye endaweni yayo kwafakwa "isitaki sefonti yemveli" yonikezelo lombhalo olungcono kwisixhobo ngasinye kunye ne-OS. Funda ngakumbi malunga nokupakishwa kwefonti kweli nqaku lemagazini iSmashing .

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // 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;

Qaphela ukuba ngenxa yokuba isitakhi sefonti siquka iifonti ze-emoji, uninzi lweesimboli eziqhelekileyo/iimpawu ze-dingbat ze-Unicode ziya kunikezelwa njengeepictograph 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

Uluhlu

Zonke izintlu— <ul>, <ol>, kunye — <dl>zisusiwe margin-topkwaye a margin-bottom: 1rem. Uluhlu olufakwe kwindlwane aluna margin-bottom.

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

Nalu uluhlu olucwangcisiweyo
Ngezinto ezimbalwa zoluhlu
Inenkangeleko efanayo jikelele
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.

Umbhalo olungiswe kwangaphambili

Into <pre>iphinda icwangciswe ukususa margin-topkwaye isebenzise remiiyunithi zayo margin-bottom.

.umzekelo-isiqalelo {
  umda-phantsi: 1rem;
}

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

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 cursor: pointerzinexesha :not(:disabled).

Olu tshintsho, kunye nokunye, kuboniswe ngezantsi.

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

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

Izinto ezahlukeneyo

Idilesi

Isiqalelo <address>sihlaziywa ukuseta kwakhona 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 ngu 1em 40px, ngoko ke siseta kwakhona ukuba 0 0 1reminto 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.

I- Nulla attr vitae elit libero, i-pharetra augue.

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. Ngelixa [hidden]ingaxhaswanga ngokwemveli yi-IE10, isibhengezo esicacileyo kwiCSS yethu siyayijikeleza loo ngxaki.

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