Reboot nakambe
Reboot, nhlengeleto wa ku cinca ka CSS loku kongomeke ka elemente eka fayili yin’we, kickstart Bootstrap ku nyika xisekelo xo saseka, lexi nga cincekiki, na xo olova xo aka eka xona.
Manghenelo
Reboot yi aka eka Normalize, yi nyika swiaki swo tala swa HTML hi switayele leswi nga na mavonelo yo karhi hi ku tirhisa ntsena swihlawulekisi swa swiaki. Ku engetela switayili swi endliwa ntsena hi titlilasi. Xikombiso, hi tlhela hi pfula <table>
switayele swin’wana ku kuma xisekelo xo olova ivi endzhaku hi nyika .table
, .table-bordered
, na swin’wana.
Hi leswi swiletelo swa hina na swivangelo swo hlawula leswi u faneleke ku swi tlula eka Reboot:
- Pfuxeta mimpimo yin’wana ya xiviri ya browser ku tirhisa
rem
s ematshan’wini yaem
s eka ku hambana ka swiphemu loku ringanisiwaka. - Papalata
margin-top
. Ti margin leti yimisiweke tinga wa, ti humesa mbuyelo lowu nga languteriwangiki. Kambe xa nkoka swinene, nkongomiso wun’we wamargin
i xikombiso xo olova xa mianakanyo. - Ku olova ku ringanisa ku tsemakanya vukulu bya switirhisiwa, swiaki swa xibokisana swi fanele ku tirhisa
rem
s ekamargin
s. - Hlayisa switiviso swa
font
swihlawulekisi leswi fambelanaka na swona swi ri ehansi, u tirhisainherit
loko swi koteka.
Swihlawulekisi swa matluka
Swiaki swa <html>
na <body>
swi pfuxetiwa ku nyika swihlawulekisi swo antswa swa tluka hinkwaro. Hi ku kongoma swinene:
- The
box-sizing
yi vekiwile emisaveni hinkwayo eka xiaki xin’wana ni xin’wana—ku katsa*::before
ni na*::after
, ku ya ekaborder-box
. Leswi switiyisisa leswaku ku anama loku tivisiweke ka elemente ayi tshuki yi tlula hikokwalaho ka padding kumbe border. - Ku hava xisekelo
font-size
lexi tivisiweke eka<html>
, kambe16px
xi tekiwa (xihlawulekisi xa browser).font-size: 1rem
yi tirhisiwa eka the<body>
for easy responsive type-scaling hi ku tirhisa swivutiso swa vuhangalasi bya mahungu loko ku ri karhi ku xixima swihlawulekisi swa vatirhisi na ku tiyisisa endlelo leri fikelelaka swinene. - The
<body>
yi tlhela yi veka globalfont-family
,line-height
, natext-align
. Leswi swi dya ndzhaka endzhaku hi swiaki swin’wana swa xivumbeko ku sivela ku nga fambisani ka fonto. - Ku kuma vuhlayiseki, the
<body>
has a declaredbackground-color
, ku tsandzeka ku#fff
.
Xithaki xa fonto ya ntumbuluko
Tifonto ta webu ta ntolovelo (Helvetica Neue, Helvetica, na Arial) ti hoxiwile eka Bootstrap 4 naswona ti siviwe hi “xithaki xa tifonto ta ntumbuluko” leswaku ku ta endliwa matsalwa lamanene eka xitirhisiwa xin’wana ni xin’wana ni le ka OS. Hlaya swo tala hi switachi swa tifonto ta ntumbuluko eka xihloko lexi xa 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;
Xiya leswaku hikuva xithaki xa tifonto xi katsa tifonto ta emoji, swihlawulekisi swo tala swa Unicode swa swikombiso/dingbat leswi tolovelekeke swi ta endliwa tanihi swifaniso swa mihlovo yo tala. Ku languteka ka tona ku ta hambana, ku ya hi xitayili lexi tirhisiwaka eka fonto ya emoji ya ntumbuluko ya browser/platform, naswona a va nge khumbeki hi color
switayele swihi na swihi swa CSS.
Leswi font-family
swi tirhisiwa eka <body>
na ku tisungulela ku dya ndzhaka ya misava hinkwayo eka Bootstrap hinkwayo. Ku cinca global font-family
, pfuxeta $font-family-base
na ku tlhela u hlengeleta Bootstrap.
Tinhloko-mhaka ni tindzimana
Swiaki hinkwaswo swa nhlokomhaka—xikombiso, <h1>
—naswona <p>
swi tlhela swi vekiwa leswaku swi margin-top
susiwa. Ku engeteriwe tinhloko-mhaka margin-bottom: .5rem
ni tindzimana margin-bottom: 1rem
leswaku swi olova ku swi veka exikarhi.
Nhlokomhaka | Xikombiso |
---|---|
<h1></h1> |
h1. Nhlokomhaka ya bootstrap |
<h2></h2> |
h2. Nhlokomhaka ya bootstrap |
<h3></h3> |
h3. Nhlokomhaka ya bootstrap |
<h4></h4> |
h4. Nhlokomhaka ya bootstrap |
<h5></h5> |
h5. Nhlokomhaka ya bootstrap |
<h6></h6> |
h6. Nhlokomhaka ya bootstrap |
Minxaxamelo ya swilo
Minxaxamelo hinkwayo— <ul>
, <ol>
, na <dl>
—yi margin-top
susiwile ya yona na a margin-bottom: 1rem
. Minxaxamelo leyi pfanganisiweke a yi na margin-bottom
.
- Minxaxamelo hinkwayo yi susiwile margin ya yona ya le henhla
- Naswona margin ya vona ya le hansi yi ve ya ntolovelo
- Minxaxamelo leyi pfanganisiweke a yi na margin ya le hansi
- Hi ndlela leyi va va ni xivumbeko lexi ringanaka swinene
- Ngopfu-ngopfu loko ku landzeriwa hi swilo swo tala swa nxaxamelo
- Padding ya left na yona yi tlhele yi vekiwa
- Hi lowu nxaxamelo lowu odaweke
- Hi swilo swi nga ri swingani swa nxaxamelo
- Yi ni ku languteka loku fanaka hi ku angarhela
- Tanihi nxaxamelo lowu hundzeke lowu nga hlelekangiki
Ku kuma xitayili xo olova, xiyimo xa le henhla lexi nga erivaleni, na ku hambana ko antswa, minxaxamelo ya tinhlamuselo yi pfuxetile margin
s. <dd>
s tlherisela margin-left
eka 0
na ku engetela margin-bottom: .5rem
. <dt>
s yi tsariwile hi ku olova .
- Minxaxamelo ya tinhlamuselo
- Nxaxamelo wa tinhlamuselo wu hetisekile ku hlamusela marito.
- Thema
- Nhlamuselo ya rito leri.
- Nhlamuselo ya vumbirhi ya rito leri fanaka.
- Rito rin’wana
- Nhlamuselo ya rito leri rin’wana.
Tsalwa leri fomatiweke ka ha ri emahlweni
Xiaki <pre>
xi tlhela xi vekiwa ku susa xa xona margin-top
ni ku tirhisa rem
tiyuniti ta xona margin-bottom
.
.xikombiso-xiaki { . margin-ehansi: 1rem; } .
Matafula
Matafula ya lulamisiwile nyana eka xitayili <caption>
s, ku wisa mindzilakano, naswona ya tiyisisa ku nga cinci text-align
hinkwako. Ku cinca loku engetelekeke ka mindzilakano, ku padding ni swin’wana swi ta ni .table
tlilasi .
Nhlokomhaka ya tafula | Nhlokomhaka ya tafula | Nhlokomhaka ya tafula | Nhlokomhaka ya tafula |
---|---|---|---|
Sele ya tafula | Sele ya tafula | Sele ya tafula | Sele ya tafula |
Sele ya tafula | Sele ya tafula | Sele ya tafula | Sele ya tafula |
Sele ya tafula | Sele ya tafula | Sele ya tafula | Sele ya tafula |
Swivumbeko
Swiaki swo hambana swa xivumbeko swi pfuriwile nakambe eka switayele swa xisekelo swo olova. Hi leswi swin’wana swa ku cinca loku xiyekaka swinene:
<fieldset>
s a yi na mindzilakano, padding, kumbe margin leswaku yi ta tirhisiwa hi ku olova tanihi swifunengeto swa swingheniso swa munhu hi xiyexe kumbe mintlawa ya swingheniso.<legend>
s, ku fana na ti fieldsets, na tona ti endliwile hi vuntshwa leswaku ti kombisiwa tanihi nhlokomhaka ya tinxaka.<label>
s ti vekiwile ekadisplay: inline-block
ku pfumelelamargin
ku tirhisiwa.<input>
s,<select>
s,<textarea>
s, na<button>
s ti langutisiwa ngopfu hi Normalize, kambe Reboot yi susa ya vonamargin
na yi vekaline-height: inherit
, na yona.<textarea>
s ti cinciwa leswaku ti nga cinciwa ntsena hi ndlela yo yima tanihi leswi ku cinca sayizi loku nga etlhelo hakanyingi ku “tshovaka” xivumbeko xa pheji.<button>
s na<input>
swiaki swa buti swi nacursor: pointer
loko:not(:disabled)
.
Ku cinca loku, ni swin’wana, swi kombisiwile laha hansi.
Swikombiso eka swikomba-nkarhi
Reboot yi katsa ku antswisiwa ka role="button"
ku cinca xikombiso xa ntolovelo ku va pointer
. Engetela xihlawulekisi lexi eka swiaki ku pfuneta ku kombisa leswaku swiaki swa tirhisana. Ntirho lowu a wu laveki eka <button>
swiaki, leswi kumaka ku cursor
cinca ka swona.
<span role="button" tabindex="0">Non-button element button</span>
Swiaki swo hambana-hambana
Kherefu
Xiaki <address>
xi pfuxetiwa ku tlhela xi veka xivumbeko xa browser ku font-style
suka eka italic
ku ya eka normal
. line-height
na yona sweswi yi kumiwile ndzhaka, naswona margin-bottom: 1rem
yi engeteriwile. <address>
s i ya ku humesa vuxokoxoko bya vuhlanganisi bya kokwa wa le kusuhi (kumbe nhlengeletano hinkwayo ya ntirho). Hlayisa ku fometa hi ku heta milayeni hi <br>
.
1355 Market St, Suite 900
San Francisco, CA 94103
P: (123) 456-7890. Xihlamusela-marito xa Xitsonga Vito leri heleleke
ro [email protected]
Xibokisana xa swilo
Default margin
eka blockquotes i 1em 40px
, kutani hi tlherisela sweswo eka 0 0 1rem
eka nchumu wun’wana lowu fambelanaka swinene na swiaki swin’wana.
Xitlhokovetselo lexi tivekaka swinene, lexi nga eka elemente ya blockquote.
Swiaki swa le ndzeni ka layini
Xiaki <abbr>
xi amukela xitayili xa masungulo ku endla leswaku xi humelela exikarhi ka tsalwa ra ndzimana.
Nkomiso
Default cursor
eka nkatsakanyo i text
, kutani hi tlherisela sweswo eka pointer
ku hundzisela leswaku elemente yi nga tirhisana na yona hi ku yi tsindziyela.
Vuxokoxoko byin’wana
More info hi vuxokoxoko.
Vuxokoxoko lebyi engetelekeke swinene
Hi lebyi vuxokoxoko lebyi engetelekeke swinene malunghana ni vuxokoxoko bya kona.
[hidden]
Xihlawulekisi xa HTML5
HTML5 yi engetela xihlawulekisi lexintshwa xa misava hinkwayo lexi vuriwaka[hidden]
, lexi endliweke hi xitayili tanihi display: none
hi ku tiyimisela. Ku lomba mianakanyo ku suka eka PureCSS , hi antswisa eka ku tiyimisela loku hi ku endla [hidden] { display: none !important; }
ku pfuneta ku sivela ya yona display
ku va yi tluleriwi hi xihoxo. Hambileswi [hidden]
yi nga seketeriwiki hi ntumbuluko hi IE10, xitiviso lexi nga erivaleni eka CSS ya hina xi rhendzeleka ni xiphiqo xexo.
<input type="text" hidden>
Ku nga fambisani ka jQuery
[hidden]
a yi fambisani na jQuery's $(...).hide()
na $(...).show()
tindlela. Hikwalaho, sweswi a hi seketeli ngopfu-ngopfu ku [hidden]
tlula tindlela tin’wana to lawula display
ta swiaki.
Ku cinca ntsena ku vonaka ka xiaki, leswi vulaka leswaku xa xona display
a xi cinciwanga naswona xiaki xa ha kota ku khumba ku khuluka ka tsalwa, tirhisa tlilasi ematshan’wini ya sweswo..invisible