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 kuhlelo<body>
lokukala uhlobo oluphendulayo olulula ngemibuzo yemidiya ngenkathi ihlonishwa izintandokazi zabasebenzisi futhi iqinisekisa indlela efinyeleleka kakhudlwana. Lokhu okumisiwe kwesiphequluli kungakhishwa ngokulungisa$font-size-root
okuguquguqukayo.
- Asikho isisekelo
- I-The
<body>
futhi isetha umhlaba wonkefont-family
,font-weight
,line-height
, kanyecolor
. Lokhu kuzuzwa njengefa kamuva ezinye izici zefomu ukuvimbela ukungqubuzana kwefonti. - Ukuze uvikeleke, i- inesimemezelo
<body>
esimisiwebackground-color
, esishintshashintshayo sithi#fff
.
Isitaki sefonti yomdabu
I-Bootstrap isebenzisa "isitaki sefonti yomdabu" noma "isitaki sefonti yesistimu" ukuze kunikezwe umbhalo ophelele kuwo wonke amadivayisi ne-OS. Lawa mafonti esistimu aklanywe ngokukhethekile kucatshangelwa amadivayisi anamuhla, ngokunikezwa okuthuthukisiwe ezikrinini, ukusekelwa kwefonti eguquguqukayo, nokuningi. Funda kabanzi mayelana nezitaki zefonti zomdabu kulesi sihloko se - Smashing Magazine .
$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 ukuthi ngenxa yokuthi isitaki sefonti sihlanganisa amafonti e-emoji, izinhlamvu eziningi ezivamile zophawu/i-dingbat zizonikezwa njengama-pictograph anemibala 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
. Sisethe kabusha i- padding-left
on <ul>
kanye nama - <ol>
elementi.
- 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.
Ikhodi esemgqeni
Goqa amazwibela ekhodi nge- <code>
. Qiniseka ukuthi ubalekela kubakaki be-engeli ye-HTML.
<section>
kufanele isongwe njenge-inline.
For example, <code><section></code> should be wrapped as inline.
Amabhulokhi ekhodi
Sebenzisa <pre>
u-s emigqeni eminingi yekhodi. Nakulokhu, qiniseka ukuthi ubalekela noma yibaphi abakaki be-engeli kukhodi ukuze unikezwe ngendlela efanele. I- <pre>
elementi isethwe kabusha ukuze kukhishwe margin-top
futhi kusetshenziswe rem
amayunithi ayo margin-bottom
.
<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre><code><p>Sample text here...</p>
<p>And another line of sample text here...</p>
</code></pre>
Okuguquguqukayo
Ukuze ubonise okuguquguqukayo sebenzisa <var>
ithegi.
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
Okokufaka komsebenzisi
Sebenzisa <kbd>
ukukhombisa okokufaka okuvamise ukufakwa ngekhibhodi.
Ukuze uhlele izilungiselelo, cindezela 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>
Okukhiphayo okuyisampula
Ukuze ubonise ukuphuma kwesampula kuhlelo sebenzisa <samp>
ithegi.
<samp>This text is meant to be treated as sample output from a computer program.</samp>
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.
Ukusekelwa kokufaka kwedethi nombala
Khumbula okokufaka kwedethi akusekelwe ngokugcwele yizo zonke iziphequluli, okuyiSafari.
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.
Umuntu odumile ku- Source Title
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.
<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 .