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.
Izinguquko ze-CSS
Kwengezwe ku-v5.1.1
Nge-v5.1.1, silinganisele okwethu okudingekayo @import
kuzo zonke izinqwaba zethu ze-CSS (okuhlanganisa , bootstrap.css
, bootstrap-reboot.css
kanye nokuhlanganisa . Lokhu kwengeza okuguquguqukayo kweleveli ye-CSS kuzo zonke izinqwaba, kungakhathaliseki ukuthi zingaki zazo ezisetshenziswa kuleyo nqwaba. Ekugcineni i-Bootstrap 5 izoqhubeka bona okunye okuguquguqukayo kwe-CSS okwengezwe ngokuhamba kwesikhathi.bootstrap-grid.css
_root.scss
:root
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. 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 yomdabu ye-emoji 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.
Izinguquko ze-CSS
Njengoba i-Bootstrap 5 iqhubeka nokuvuthwa, izitayela ezengeziwe zizokwakhiwa ngeziguquguqukayo ze-CSS njengendlela yokuhlinzeka ngokwezifiso zesikhathi sangempela ngaphandle kwesidingo sokuhlala uhlanganisa i-Sass. Indlela yethu ukuthatha okuguquguqukayo komthombo wethu we-Sass futhi siziguqule zibe eziguquguqukayo ze-CSS. Ngaleyo ndlela, noma ungasebenzisi okuguquguqukayo kwe-CSS, usenawo wonke amandla e-Sass. Lokhu kusaqhubeka futhi kuzothatha isikhathi ukukusebenzisa ngokugcwele.
Isibonelo, cabangela lezi :root
ziguquko ze-CSS <body>
zezitayela ezivamile:
@if $font-size-root != null {
--#{$variable-prefix}root-font-size: #{$font-size-root};
}
--#{$variable-prefix}body-font-family: #{$font-family-base};
--#{$variable-prefix}body-font-size: #{$font-size-base};
--#{$variable-prefix}body-font-weight: #{$font-weight-base};
--#{$variable-prefix}body-line-height: #{$line-height-base};
--#{$variable-prefix}body-color: #{$body-color};
@if $body-text-align != null {
--#{$variable-prefix}body-text-align: #{$body-text-align};
}
--#{$variable-prefix}body-bg: #{$body-bg};
Empeleni, lezo ziguquko zibe sezisetshenziswa ku-Reboot kanje:
body {
margin: 0; // 1
font-family: var(--#{$variable-prefix}body-font-family);
@include font-size(var(--#{$variable-prefix}body-font-size));
font-weight: var(--#{$variable-prefix}body-font-weight);
line-height: var(--#{$variable-prefix}body-line-height);
color: var(--#{$variable-prefix}body-color);
text-align: var(--#{$variable-prefix}body-text-align);
background-color: var(--#{$variable-prefix}body-bg); // 2
-webkit-text-size-adjust: 100%; // 3
-webkit-tap-highlight-color: rgba($black, 0); // 4
}
Okukuvumela ukuthi wenze ngokwezifiso ngesikhathi sangempela ngendlela othanda ngayo:
<body style="--bs-body-color: #333;">
<!-- ... -->
</body>
Izihloko nezigaba
Zonke izakhi zesihloko—isb, <h1>
—futhi zisethwa <p>
kabusha ukuze margin-top
zikhishwe. 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 wekhodi 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 ukuze siyenze 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 kusuka 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 .