Source

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 kuhlelo <body>lokukala uhlobo oluphendulayo olulula ngemibuzo yemidiya ngenkathi ihlonishwa izintandokazi zabasebenzisi futhi iqinisekisa 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, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

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.

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

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

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.

Isibonelo senganekwane

100

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.

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

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 .