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.

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,
  // 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 lweempawu zesimboli eziqhelekileyo/iimpawu ze-dingbat 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 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

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.

Ikhowudi yangaphakathi

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

Umzekelo, <section>kufuneka isongwe njengomgca.

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>

<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

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

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.

<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

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

Umzekelo igalelo

Umzekelo we-imeyile

Umzekelo womnxeba

Umzekelo url

Inombolo yomzekelo

Ukukhangela umzekelo

Uluhlu lwemizekelo

Umzekelo wokufakwa kwefayile

Umzekelo khetha

Khangela le bhokisi yokukhangela

Ukhetho lokuqala yile kwaye leya Ukhetho lwesibini luyenye into ekwalude kakhulu ukubonisa ukusongwa kolu lawulo lwefomu entle. Ukhetho lwesithathu luvaliwe

Umzekelo indawo yombhalo

Umzekelo umhla

Ixesha lomzekelo

Umzekelo wokugqitha

Umzekelo wexesha-kwindawo

Umzekelo weveki

Umzekelo wenyanga

Umzekelo umbala

Imveliso yomzekelo 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

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

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.

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