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.

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,
  // 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 zizonikezwa njengama-pictograph anemibala 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. 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.

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>

<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

<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 + ,

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.

<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

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

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

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