Source

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, siphinda siqalise 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.
  • 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem kunye ne-massa
  • I-Facilisis kwi-pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • I-Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • I-Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem kunye ne-massa
  4. I-Facilisis kwi-pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. I-Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

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.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Umbhalo olungiswe kwangaphambili

Into <pre>iphinda icwangciswe ukuze isuswe 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 banalo cursor: pointerxa :not(:disabled).

Olu tshintsho, kunye nokunye, kuboniswe ngezantsi.

Umzekelo ilivo

100

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. I-integer posuere erat ante.

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.