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-em
s ukuze uthole izikhala zezingxenye ezingakala. - Gwema
margin-top
. Amamajini aqondile angawa, aveze imiphumela engalindelekile. Okubaluleke nakakhulu, isiqondiso esisodwamargin
siyimodeli yengqondo elula. - Ukuze kube lula ukukala kuwo wonke amasayizi wedivayisi, ama-elementi ebhulokhi kufanele asebenzise
rem
u-s ku-margin
s. - Gcina izimemezelo
font
zezakhiwo ezihlobene zibe zincane, usebenzisainherit
noma 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*::before
futhi*::after
, kuya ku-border-box
. Lokhu kuqinisekisa ukuthi ububanzi obushiwo be-elementi abulokothi budlulwe ngenxa yokupheda noma umngcele. - Asikho isisekelo
font-size
esimenyezelwe ku-<html>
, kodwa16px
kuyacatshangelwa (okuzenzakalelayo kwesiphequluli).font-size: 1rem
isetshenziswa<body>
ekulinganiseni uhlobo olusabelayo olulula ngemibuzo yemidiya kuyilapho kuhlonishwa izintandokazi zabasebenzisi nokuqinisekisa indlela efinyeleleka kakhudlwana. - I
<body>
futhi isetha umhlaba wonkefont-family
,line-height
, kanyetext-align
. Lokhu kuzuzwa njengefa kamuva ezinye izici zefomu ukuvimbela ukungqubuzana kwefonti. - Ukuze uvikeleke, i- inesimemezelo
<body>
esimisiwebackground-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 color
izitayela ze-CSS.
Lokhu font-family
kusetshenziselwa <body>
futhi kuzuzwe njengefa ngokuzenzakalelayo emhlabeni wonke kuyo yonke i-Bootstrap. Ukuze ushintshe okomhlaba font-family
, buyekeza $font-family-base
uphinde uhlanganise i-Bootstrap.
Izihloko nezigaba
Zonke izakhi zesihloko—isb, <h1>
—futhi zisethwa <p>
kabusha ukuze margin-top
zisuswe. Izihloko margin-bottom: .5rem
zengeziwe kanye nezigaba margin-bottom: 1rem
ukuze 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-top
futhi 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 margin
s. <dd>
s setha kabusha margin-left
futhi 0
wengeze 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-top
futhi kusetshenziswe rem
amayunithi ayo margin-bottom
.
.ingxenye-yesibonelo { imajini-phansi: 1rem; }
Amathebula
Amathebula alungiswa kancane ukuze abe yisitayela <caption>
sika-s, agoqe imingcele, futhi aqinisekise ukuhambisana text-align
kulo lonke. Izinguquko ezengeziwe zemingcele, iziphedi, nokunye kuza nekilasi ..table
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 isethwedisplay: inline-block
ukuze ivumelemargin
ukusetshenziswa.<input>
s,<select>
s,<textarea>
s, kanye no-<button>
s abhekiswa kakhulu ngokuthi Normalize, kodwa Qalisa kabusha kususamargin
futhi namasethiline-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 zinaninicursor: pointer
lapho: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
<span role="button" tabindex="0">Non-button element button</span>
Izakhi ezixubile
Ikheli
Isici <address>
sibuyekezwa ukuze kusethwe kabusha okuzenzakalelayo kwesiphequluli font-style
ukusuka italic
ku- normal
. line-height
nayo manje izuzwe njengefa, futhi margin-bottom: 1rem
yengeziwe. <address>
s ezokwethula imininingwane yokuxhumana yedlozi eliseduze (noma wonke umsebenzi). Londoloza ukufometha ngokuphetha imigqa nge- <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Igama
Eligcwele [email protected]
I-blockquote
Okuzenzakalelayo margin
kuma-blockquotes ngu- 1em 40px
, ngakho-ke sikusetha kabusha lokho 0 0 1rem
kokuthile okuhambisana kakhulu nezinye izakhi.
Isicaphuna esaziwayo, esiqukethwe kusici se-blockquote.
Izakhi ezingaphakathi komugqa
I- <abbr>
elementi ithola isitayela esiyisisekelo sokuyenza ivelele phakathi kombhalo wendima.
Isifinyezo
Okuzenzakalelayo cursor
kusifinyezo ngu- text
, ngakho-ke sisetha kabusha lokho pointer
ukuze 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: none
ngokuzenzakalela. Ukuboleka umbono ku- PureCSS , sithuthukisa kulokhu okuzenzakalelayo ngokwenza [hidden] { display: none !important; }
ukusiza ukuvimbela display
ukuthi 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 display
okuphatha ama-elementi.
Ukuze nje uguqule ukubonakala kwento ethile, okusho ukuthi display
ayilungiswanga futhi isici sisengaphazamisa ukuhamba kwedokhumenti, sebenzisa isigaba.invisible
esikhundleni salokho .