Qalisa kabusha

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

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.

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 <body>ekulinganiseni uhlobo olusabelayo olulula ngemibuzo yemidiya kuyilapho kuhlonishwa izintandokazi zabasebenzisi nokuqinisekisa indlela efinyeleleka kakhudlwana.
I <body>futhi isetha umhlaba wonke font-family, line-height, kanye text-align. Lokhu kuzuzwa njengefa kamuva ezinye izici zefomu ukuvimbela ukungqubuzana kwefonti.
Ukuze uvikeleke, i- inesimemezelo <body>esimisiwe background-color, esishintshashintshayo sithi #fff.

Isitaki sefonti yomdabu

Amafonti ewebhu azenzakalelayo (i-Helvetica Neue, i-Helvetica, ne-Arial) ehlisiwe ku-Bootstrap 4 futhi kwathathelwa indawo “isitaki sefonti yomdabu” ukuze kusetshenziswe umbhalo ophelele kuwo wonke amadivayisi ne-OS. Funda kabanzi mayelana nezitaki zefonti zomdabu kulesi sihloko se - Smashing Magazine .

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

Uhlu

Zonke izinhlu— <ul>, <ol>, kanye <dl>— zisusiwe margin-topfuthi a margin-bottom: 1rem. Uhlu olufakiwe alunazo margin-bottom.

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.

Umbhalo ofomethiwe ngaphambilini

I- <pre>elementi isethwe kabusha ukuze kukhishwe margin-topfuthi kusetshenziswe remamayunithi ayo margin-bottom.

.ingxenye-yesibonelo {
  imajini-phansi: 1rem;
}

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

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.

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

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

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

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. Nakuba [hidden]ngokwemvelo ingasekelwe yi-IE10, isimemezelo esicacile ku-CSS yethu sithinta leyo nkinga.

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