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, 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
rem
s endaweni kaem
s ukwenzela isithuba secandelo elinokwaleka. - Ziphephe
margin-top
. Imida ethe nkqo ingawa, ivelise iziphumo ezingalindelekanga. Okubaluleke ngakumbi nangona kunjalo, isikhokelomargin
esinye yimodeli yengqondo elula. - Ukukala lula kuzo zonke iisayizi zesixhobo, izakhi zebhloko kufuneka zisebenzise
rem
u-s kwi-margin
s. - Gcina izibhengezo
font
zeepropathi ezinxulumeneyo zibe ubuncinane, usebenzisainherit
nanini na kunokwenzeka.
Ukusilela kwephepha
I- element <html>
kunye ne - <body>
elementi zihlaziywa ukubonelela ngeendawo ezingcono zephepha ngokubanzi. Ngakumbi ngakumbi:
- Isetiwe
box-sizing
kwihlabathi liphela kuyo yonke into-kubandakanywa*::before
kunye*::after
, ukuyaborder-box
. Oku kuqinisekisa ukuba ububanzi obuchaziweyo bento abugqithwanga ngenxa yokukhuselwa okanye umda. - Akukho siseko
font-size
sibhengezwe kwi-<html>
, kodwa16px
sithathwa (isikhangeli esimiselweyo).font-size: 1rem
isetyenziswa kwindlela<body>
yokuphendula ngokulula uhlobo-ukulinganisa ngokusebenzisa imibuzo yemidiya ngelixa kuhlonitshwa ukhetho lwabasebenzisi kunye nokuqinisekisa indlela efikeleleka ngakumbi. - Le
<body>
ikwaseta iglobalfont-family
,line-height
, kunyetext-align
. Oku kufunyanwa njengelifa kamva ngezinye iifom zezakhi ukunqanda ukungangqinelani kwefonti. - Ngokhuseleko, i
<body>
-background-color
imeyli 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,
// 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 lweesimboli eziqhelekileyo/iimpawu ze-dingbat ze-Unicode 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-family
kusetyenziswa <body>
kwaye ngokuzenzekelayo kuzuzwe njengelifa kwihlabathi liphela kwiBootstrap. Ukutshintsha jikelele font-family
, hlaziya $font-family-base
kwaye uphinde uqokelele i-Bootstrap.
Izihloko kunye nemihlathi
Zonke izihloko zesihloko-umz., <h1>
-kwaye zisetwa <p>
ngokutsha ukuze margin-top
zisuswe. Izihloko margin-bottom: .5rem
zongezwe kunye nemihlathi margin-bottom: 1rem
ukwenzela 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-top
kwaye a margin-bottom: 1rem
. Uluhlu olufakwe kwindlwane aluna margin-bottom
.
- 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 margin
s. <dd>
s cwangcisa kwakhona margin-left
kwaye 0
wongeze 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.
Umbhalo olungiswe kwangaphambili
Into <pre>
iphinda icwangciswe ukususa margin-top
kwaye isebenzise rem
iiyunithi zayo margin-bottom
.
.umzekelo-isiqalelo { umda-phantsi: 1rem; }
Iitafile
Iitheyibhile zihlengahlengiswa kancinci kwisitayile <caption>
s, ukudilika kwemida, kwaye kuqinisekiswe ukuhambelana text-align
kuyo yonke indawo. Utshintsho olongezelelweyo lwemida, i-padding, kunye nokunye kuza kunye neklasi.table
.
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 zimiselwedisplay: inline-block
ukuvumelamargin
ukuba zisetyenziswe.<input>
s,<select>
s,<textarea>
s, kunye<button>
nes zijongwa ikakhulu yi-Normalize, kodwa Qalisa kwakhona isusa ezomargin
kunye nezicwangcisoline-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 zeqhoshacursor: pointer
zinexesha:not(:disabled)
.
Olu tshintsho, kunye nokunye, kuboniswe ngezantsi.
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
<span role="button" tabindex="0">Non-button element button</span>
Izinto ezahlukeneyo
Idilesi
Isiqalelo <address>
sihlaziywa ukuseta kwakhona isikhangeli esingagqibekanga font-style
ukusuka italic
kwi normal
. line-height
nalo ngoku lilifa, kwaye margin-bottom: 1rem
longezelelwe. <address>
s zezokubonisa iinkcukacha zoqhagamshelwano zoyena khokho ukufutshane (okanye umsebenzi wonke). Gcina ukufomatha ngemigca ephela nge <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890 Igama elipheleleyo
[email protected]
I-Blockquote
Ukungagqibekanga margin
kocaphulo lwebhloko ngu 1em 40px
, ngoko ke siseta kwakhona ukuba 0 0 1rem
into ehambelanayo nezinye izinto.
Isicatshulwa esaziwayo, esiqulethwe kwi-blockquote element.
Izinto ezingaphakathi
Isiqalelo <abbr>
sifumana isimbo esisisiseko sokuyenza icace phakathi kwesicatshulwa somhlathi.
Isishwankathelo
Ukungagqibeki cursor
kwisishwankathelo ngu text
, ke siseta ngokutsha ukuba sibonise pointer
into 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 display
ukuba 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 display
izinto.
Ukuguqula nje ukubonakala kwento, okuthetha display
ukuba ayilungiswanga kwaye isiqalelo sisenokuchaphazela ukuhamba koxwebhu, sebenzisa udidi endaweni.invisible
yoko.