Na-akwaga na v4
Bootstrap 4 bụ nnukwu idegharị nke ọrụ ahụ dum. A na-achịkọta mgbanwe ndị kachasị ama ama n'okpuru, na-esote mgbanwe ndị ọzọ akọwapụtara na ihe ndị dị mkpa.
Mgbanwe kwụsiri ike
Site na Beta 3 gaa na ntọhapụ v4.x anyị kwụsiri ike, enweghị mgbanwe ọ bụla na-emebi emebi, mana enwere mgbanwe ụfọdụ ama ama.
Na-ebi akwụkwọ
-
Ngwa ebipụta agbajiri agbaji. Na mbụ, iji
.d-print-*
klas ga-emebi klaasị ọ bụla na mberede.d-*
. Ugbu a, ha dabara na ihe ngosi anyị ndị ọzọ ma tinye naanị na mgbasa ozi ahụ (@media print
). -
Urụ ọrụ ngosi mbipụta agbasawanye ka ọ dabara na ngwa ndị ọzọ. Beta 3 na karịa nwere naanị
block
,inline-block
,inline
, nanone
. Stable v4 agbakwunyereflex
,inline-flex
,table
,table-row
natable-cell
. -
Ngosipụta nhụchalụ ebipụta edobere n'ofe ihe nchọgharị nwere ụdị mbipụta ọhụrụ na-akọwapụta
@page
size
.
Beta 3 gbanwere
Ọ bụ ezie na Beta 2 hụrụ ọtụtụ mgbanwe mgbanwe anyị n'oge oge beta, mana anyị ka nwere ole na ole achọrọ ka a gwa ya na ntọhapụ Beta 3. Mgbanwe ndị a na-emetụta ma ọ bụrụ na ị na-emelite na Beta 3 site na Beta 2 ma ọ bụ ụdị Bootstrap ochie ọ bụla.
Dị iche iche
- Wepụrụ
$thumbnail-transition
mgbanwe ejighi ya. Anyị anaghị agbanwe ihe ọ bụla, yabụ na ọ bụ naanị koodu mgbakwunye. - Ngwungwu npm anaghịzi agụnye faịlụ ọ bụla na-abụghị isi iyi na faịlụ dist; Ọ bụrụ na ị dabere na ha ma na-agba ọsọ edemede anyị site na
node_modules
nchekwa, ị kwesịrị ịmegharị usoro ọrụ gị.
Ụdị
-
Degharịa ma igbe nrịbama omenala na nke ndabara na redio. Ugbu a, ha abụọ nwere nhazi HTML dakọtara (mpụta
<div>
ya na nwanne ya<input>
na<label>
) yana otu ụdị nhazi ahụ (nhazi nke etinyere, inline na klas modifier). Nke a na-enye anyị ohere ịke akara akara dabere na steeti ntinye, na-eme ka nkwado dị mfe makadisabled
njirimara ahụ (na mbụ chọrọ klas nne na nna) yana ịkwado nkwado nke ọma ụdị anyị.Dịka akụkụ nke nke a, anyị agbanweela CSS maka ijikwa ọtụtụ
background-image
s na igbe nlele na redio. Na mbụ, ihe ewepụrụ ugbu a.custom-control-indicator
nwere agba ndabere, gradient na akara SVG. Ịhazi gradient n'azụ pụtara ịdochi ndị ahụ niile oge ọ bụla ịchọrọ ịgbanwe naanị otu. Ugbu a, anyị nwere.custom-control-label::before
maka njupụta na gradient na.custom-control-label::after
ejiri akara ngosi.Ka ịmee nleba anya n'ahịrị, tinye
.custom-control-inline
. -
Onye nhọpụta emelitere maka otu bọtịnụ ndenye. Kama
[data-toggle="buttons"] { }
maka ụdị na omume, anyị na-ejidata
njirimara naanị maka omume JS ma dabere na.btn-group-toggle
klas ọhụrụ maka ịke. -
Wepụrụ
.col-form-legend
na ihu ọma nke dịtụ mma.col-form-label
. N'ụzọ dị otú a.col-form-label-sm
na.col-form-label-lg
ike ga-eji na<legend>
ọcha na mfe. -
Ntinye faịlụ omenala nwetara mgbanwe na mgbanwe
$custom-file-text
Sass ha. Ọ bụghịzi maapụ Sass akwụ ụgwọ ma na-enye naanị otu eriri -Browse
bọtịnụ dịka nke ahụ bụ naanị ihe pseudo-emepụtara na Sass anyị. EderedeChoose file
a si na.custom-file-label
.
Otu ntinye
-
Addons otu ntinye bụ kpọmkwem maka ntinye ha n'ihe metụtara ntinye. Anyị adaala
.input-group-addon
na.input-group-btn
klaasị abụọ ọhụrụ,.input-group-prepend
na.input-group-append
. Ị ga-ejirịrị ngwa ngwa ma ọ bụ prepend ugbu a, na-eme ka ọtụtụ CSS anyị dị mfe. N'ime ngwa mgbakwunye ma ọ bụ prepend, tinye bọtịnụ gị ka ha ga-adị ebe ọ bụla ọzọ, mana kechie ederede na.input-group-text
. -
A na-akwado ụdị nkwado ugbu a, dịka ọtụtụ ntinye (n'agbanyeghị na ị nwere ike kwado naanị otu ntinye n'otu otu).
-
klaasị nha ga-adịrịrị na nne
.input-group
ma ọ bụ nna ọ bụghị n'ụdị nke ọ bụla.
Beta 2 gbanwere
Mgbe anyị nọ na beta, ebumnuche anyị enweghị mgbanwe ọ bụla na-emebi emebi. Otú ọ dị, ọ bụghị mgbe nile ka ihe na-aga ka e mere atụmatụ. N'okpuru bụ mgbanwe nbibi ị ga-eburu n'uche mgbe ị na-esi na Beta 1 gaa Beta 2.
Na-agbaji
- Wepụrụ
$badge-color
mgbanwe na ojiji ya na.badge
. Anyị na-eji ọrụ ọdịiche agba were werecolor
dabere nabackground-color
, yabụ mgbanwe adịghị mkpa. - Ọrụ akpọgharịrị aha
grayscale()
ya ka ịzenarị imebi esemokwu na nzachagray()
ala CSS .grayscale
- Akpọgharịrị aha
.table-inverse
,.thead-inverse
, na.thead-default
na.*-dark
na.*-light
, dabara na atụmatụ agba anyị ejiri ebe ọzọ. - Tebụl na-anabata ihe ugbu a na-ewepụta klaasị maka ebe nkwụsị grid ọ bụla. Nke a na-agbaji na Beta 1 n'ihi na nke
.table-responsive
ị na-eji dị ka.table-responsive-md
. Ị nwere ike iji ugbu a.table-responsive
ma ọ bụ.table-responsive-{sm,md,lg,xl}
dị ka achọrọ. - Nkwado Bower ewedara dị ka onye njikwa ngwugwu ewepụla maka ihe ọzọ (dịka, Yarn ma ọ bụ npm). Lee bower/bower#2298 maka nkọwa.
- Bootstrap ka chọrọ jQuery 1.9.1 ma ọ bụ karịa, mana a na-adụ gị ọdụ ka ị jiri ụdị 3.x ebe ọ bụ na ihe nchọgharị v3.x na-akwado bụ ndị Bootstrap na-akwado gbakwunyere v3.x nwere ụfọdụ ndozi nchekwa.
- Wepụrụ
.form-control-label
klaasị ejighi ya. Ọ bụrụ na ị jiri klaasị a, ọ bụ oyiri nke.col-form-label
klaasị ahụ gbadoro ụkwụ<label>
na ya na ntinye ejikọta ya na nhazi ụdị kwụ ọtọ. - Gbanwee ihe
color-yiq
site na mixin nke gụnyere akụrụngwa kacolor
ọ bụrụ ọrụ na-eweghachite uru, na-enye gị ohere iji ya maka akụrụngwa CSS ọ bụla. Dịka ọmụmaatụ, kamacolor-yiq(#000)
ị ga-edecolor: color-yiq(#000);
.
Isi ihe
- Ewebata
pointer-events
ojiji ọhụrụ na modal. Mpụta.modal-dialog
na-agafe mmemme napointer-events: none
maka njikwa ọpịpị omenala (na-eme ka o kwe omume ịge ntị naanị.modal-backdrop
maka ọpịpị ọ bụla), wee.modal-content
werepointer-events: auto
.
Nchịkọta
Nke a bụ nnukwu ihe tiketi ị ga-achọ ịma mgbe ị na-esi na v3 gaa v4.
Nkwado ihe nchọgharị
- Wepụrụ nkwado IE8, IE9 na iOS 6. v4 bụ naanị IE10+ na iOS 7+. Maka saịtị chọrọ nke ọ bụla n'ime ndị ahụ, jiri v3.
- Nkwado gọọmentị agbakwunyere maka ihe nchọgharị gam akporo v5.0 Lollipop na WebView. Ụdị ihe nchọgharị gam akporo na WebView gara aga ka na-akwado naanị na-akwadoghị.
Mgbanwe zuru ụwa ọnụ
- Agbanyere Flexbox site na ndabara. N'ozuzu nke a pụtara ịpụnarị ụgbọ mmiri na ihe ndị ọzọ n'ofe akụkụ anyị.
- Si na Obere gaa na Sass maka faịlụ CSS isi iyi anyị.
- Si
px
na yarem
bụrụ ngalaba CSS bụ isi anyị, n'agbanyeghị na a ka na-eji pikselụ maka ajụjụ mgbasa ozi yana omume grid ka ụdị nha anaghị emetụta ihe nlele ngwaọrụ. - Ogo mkpụrụedemede zuru ụwa ọnụ si
14px
na16px
. - Tiers grid emegharịrị ka ịgbakwunye nhọrọ nke ise (na-agwa obere ngwaọrụ na
576px
na n'okpuru) wee wepụ-xs
infix na klaasị ndị ahụ. Ọmụmaatụ.col-6.col-sm-4.col-md-3
:. - Dochie isiokwu nhọrọ dị iche na nhọrọ nhazi site na mgbanwe SCSS (dịka ọmụmaatụ,
$enable-gradients: true
). - Mepụta sistemu arụrụ iji jiri usoro npm script kama Grunt. Hụ
package.json
maka scripts niile, ma ọ bụ readme ọrụ anyị maka mkpa mmepe obodo. - Anaghị akwado ojiji Bootstrap anaghị anabata ya.
- Wepụrụ ihe nhazi ọnlaịnụ iji kwado akwụkwọ ntọlite n'ọba yana ihe arụrụ arụ.
- Agbakwunyere ọtụtụ klaasị akụrụngwa ọhụrụ maka ụzọ mkpirisi uru ihe onwunwe CSS na oke/padding spacing.
Sistemụ grid
- Ebugara na flexbox.
- Nkwado agbakwunyere maka flexbox na grid mixins na klaasị akọpụtagoro.
- Dịka akụkụ nke flexbox, gụnyere nkwado maka klaasị kwụ n'ahịrị na kwụ n'ahịrị.
- Aha klas grid emelitere yana ọkwa grid ọhụrụ.
sm
Etinyere ọkwa grid ọhụrụ n'okpuru768px
maka njikwa granular ọzọ. Anyị nwere ugbu axs
,sm
,md
,lg
naxl
. Nke a pụtakwara na ọkwa ọ bụla agbadala otu ọkwa (ya mere.col-md-6
na v3 dị ugbu a.col-lg-6
na v4).xs
emegharịla klaasị grid ka ọ ghara ịchọ infix ka ọ gosipụta nke ọma na ha na-amalite itinye ụdị namin-width: 0
ọ bụghị uru pixel atọrọ. Kama.col-xs-6
, ọ bụ ugbu a.col-6
. Ọkwa grid ndị ọzọ chọrọ infix (dịka ọmụmaatụ,sm
).
- Nha grid emelitere, mixins na mgbanwe.
- Ọwa mmiri grid ugbu a nwere maapụ Sass ka ị nwee ike ịkọwapụta obosara gọta n'ebe nkwụsịtụ ọ bụla.
- Ngwakọta grid emelitere ka
make-col-ready
ijiri mixin prep yanamake-col
ka ịtọọflex
namax-width
maka nha kọlụm nke ọ bụla. - Gbanwee njụta ajụjụ mgbasa ozi usoro grid na obosara akpa ka ọ bụrụ ọkwa grid ọhụrụ wee hụ na a na-ekewa kọlụm n'otu n'otu site
12
na oke obosara ha. - A na-edozi ebe nkwụsịtụ grid na obosara akpa site na maapụ Sass (
$grid-breakpoints
na$container-max-widths
) kama ntakịrị mgbanwe dị iche iche. Ndị a na-edochi@screen-*
mgbanwe kpamkpam ma na-enye gị ohere ịhazi nke ọma grid tiers. - Ajụjụ mgbasa ozi agbanweela. Kama ikwughachi nkwupụta ajụjụ mgbasa ozi anyị n'otu uru oge ọ bụla, anyị nwere ugbu a
@include media-breakpoint-up/down/only
. Ugbu a, kama ide@media (min-width: @screen-sm-min) { ... }
, ị nwere ike dee@include media-breakpoint-up(sm) { ... }
.
Ngwa
- Ogwe ndị wụfuru, obere mkpịsị aka, na olulu mmiri maka akụrụngwa nwere ihe niile, kaadị .
- Wepụrụ mkpụrụedemede akara ngosi Glyphicons. Ọ bụrụ na ịchọrọ akara ngosi, ụfọdụ nhọrọ bụ:
- ụdị elu nke Glyphicons
- Oct
- Font dị egwu
- Lee ibe gbatịa maka ndepụta ndị ọzọ. Nwere aro ndị ọzọ? Biko mepee mbipụta ma ọ bụ PR.
- Wepụrụ ngwa mgbakwunye Affix jQuery.
- Anyị na-akwado iji
position: sticky
kama. Hụ HTML5 Biko tinye maka nkọwa yana ndụmọdụ polyfill akọwapụtara. Otu ntụnye bụ iji@supports
iwu iji mejuputa ya (dịka ọmụmaatụ,@supports (position: sticky) { ... }
) - Ọ bụrụ na ị na-eji Affix tinye mgbakwunye, ụdị na-abụghị
position
ụdị, polyfills nwere ike ọ gaghị akwado ikpe ojiji gị. Otu nhọrọ maka ojiji dị otú ahụ bụ ọba akwụkwọ ScrollPos-Styler nke ndị ọzọ .
- Anyị na-akwado iji
- Wepụrụ akụrụngwa pager ka ọ bụ bọtịnụ ahaziri nke ọma.
- Emegharịrị ihe fọrọ nke nta ka ọ bụrụ ihe niile iji jiri ndị ahọpụtara klaasị na-enweghị akwụghị karịa karịa ndị ahọpụtara ụmụaka akọwapụtara nke ọma.
Site na akụrụngwa
Ndepụta a na-egosipụta mgbanwe isi site na mpaghara n'etiti v3.xx na v4.0.0.
Malitegharịa ekwentị
Ọhụrụ na Bootstrap 4 bụ Reboot , ụdị ụdị ọhụrụ nke na-ewulite na Normalize na ụdị nrụpụta nke echiche nke anyị nwere. Ndị na-ahọpụta ndị na-apụta na faịlụ a na-eji naanị ọcha-enweghị klaasị ebe a. Nke a na-ewepụ ụdị nrụpụta anyị na ụdị akụrụngwa anyị maka ụzọ modular ka ukwuu. Ụfọdụ n'ime ihe nrụpụta kachasị mkpa nke a gụnyere bụ box-sizing: border-box
mgbanwe, na-aga site em
na rem
nkeji na ọtụtụ ihe, ụdị njikọ, na ọtụtụ ụdị nrụpụta.
Ederede
- Bugharịa akụrụngwa niile
.text-
na_utilities.scss
faịlụ ahụ. - Etufuru
.page-header
ka enwere ike itinye ụdị ya site na akụrụngwa. .dl-horizontal
agbahapụla. Kama, jiri.row
ma<dl>
jiri klaasị kọlụm grid (ma ọ bụ mixins) na ya<dt>
na<dd>
ụmụaka.- Ihe mgbochi ndị emegharịrị, na-ebugharị ụdị ha site na
<blockquote>
mmewere gaa na otu klas,.blockquote
. Wepụrụ ihe.blockquote-reverse
mgbanwe maka akụrụngwa ederede. .list-inline
ugbu a na-achọ ka ụmụ ya depụta ihe ka.list-inline-item
etinyere klas ọhụrụ n'ọrụ.
Onyonyo
- Akpọgharịrị aha
.img-responsive
ya ka.img-fluid
. - Akpọgharịrị aha
.img-rounded
ya.rounded
- Akpọgharịrị aha
.img-circle
ya.rounded-circle
Tebụl
- Ihe fọrọ nke nta ka ọ bụrụ oge niile nke onye
>
ahọpụtara ewepụla, nke pụtara na tebụl akwụ ụgwọ ga-eketa ụdị n'aka nne na nna ha ozugbo. Nke a na-eme ka ndị na-ahọrọ anyị dị mfe na nhazi nke nwere ike ime. - A kpọgharịrị aha
.table-condensed
ya.table-sm
maka ịdịgide. - Agbakwunyere
.table-inverse
nhọrọ ọhụrụ. - Ihe ndozi nkụnye eji isi mee tebụl agbakwunyere:
.thead-default
na.thead-inverse
. - Edegharịrị aha klaasị gburugburu ka ọ nwee
.table-
prefix. N'ihi ya.active
,.success
,.warning
,.danger
na.info
,.table-active
,.table-success
,.table-warning
na.table-danger
..table-info
Ụdị
- Ntọgharị mmewere ebugharị na
_reboot.scss
faịlụ ahụ. - Akpọgharịrị aha
.control-label
ya ka.col-form-label
. - A kpọgharịrị aha
.input-lg
na.input-sm
nye.form-control-lg
na.form-control-sm
, n'otu n'otu. - Wepụrụ
.form-group-*
klaasị maka ịdị mfe. Jiri.form-control-*
klaasị ugbu a. - Wepu
.help-block
ma jiri dochie ya.form-text
maka ederede enyemaka ngọngọ. Maka ederede enyemaka inline na nhọrọ ndị ọzọ na-agbanwe agbanwe, jiri klas ịba uru dị ka.text-muted
. - Wepụrụ
.radio-inline
na.checkbox-inline
. - Ejikọtara
.checkbox
na.radio
n'ime.form-check
na klaasị dị iche.form-check-*
iche. - E megharịala ụdị kwụ ọtọ:
- Wepụrụ
.form-horizontal
klas chọrọ. .form-group
anaghịzi emetụta ụdị si na.row
mixin, yabụ.row
achọrọ ugbu a maka nhazi grid kwụ ọtọ (dịka ọmụmaatụ,<div class="form-group row">
).- Agbakwunyere klaasị ọhụrụ
.col-form-label
na akara n'etiti kwụ ọtọ nwere.form-control
s. - Agbakwunyere ọhụrụ
.form-row
maka nhazi ụdị kọmpat yana klaasị grid (gbanwee gị.row
maka a.form-row
wee gaa).
- Wepụrụ
- Nkwado ụdị omenala agbakwunyere (maka igbe nlele, redio, nhọrọ na ntinye faịlụ).
- Dochiri
.has-error
,.has-warning
, na.has-success
klaasị jiri HTML5 ụdị nkwado site na klaasị CSS:invalid
na:valid
pseudo-class. - Akpọgharịrị aha
.form-control-static
ya ka.form-control-plaintext
.
Bọtịnụ
- Akpọgharịrị aha
.btn-default
ya ka.btn-secondary
. - Wepụrụ
.btn-xs
klaasị ahụ kpamkpam dịka.btn-sm
ọ dị obere karịa v3's. - Ahapụla atụmatụ bọtịnụ steeti nke
button.js
ngwa mgbakwunye jQuery. Nke a gụnyere usoro$().button(string)
na$().button('reset')
usoro. Anyị na-adụ ọdụ ka iji obere Javascript omenala, nke ga-erite uru nke ịme otu ị chọrọ ka ọ mee.- Rịba ama na njirimara ndị ọzọ nke ngwa mgbakwunye ahụ (igbe nlele bọtịnụ, redio bọtịnụ, bọtịnụ otu ngbanwe) ka edobere na v4.
- Gbanwee bọtịnụ
[disabled]
ka ọ:disabled
bụrụ IE9+ na-akwado:disabled
. Otú ọ dị , ọfieldset[disabled]
ka dị mkpa n'ihi na oghere ndị nwere nkwarụ ka na-akpa ike na IE11 .
Otu bọtịnụ
- Jiri flexbox degharịa akụrụngwa.
- Ewepụrụ
.btn-group-justified
. Dị ka nnọchi ị nwere ike iji<div class="btn-group d-flex" role="group"></div>
dị ka ihe mkpuchi gburugburu ihe nwere.w-100
. - Wepụrụ
.btn-group-xs
klaasị ahụ kpamkpam ewepụrụ.btn-xs
. - Wepụrụ oghere doro anya n'etiti otu bọtịnụ na bọtịnụ ngwaọrụ; jiri oke utilities ugbu a.
- Akwụkwọ emelitere maka iji ya na ihe ndị ọzọ.
Mbelata
- Agbanwere site na ndị nne na nna ahọpụtara gaa na klaasị otu maka akụrụngwa niile, ndị mgbanwe, wdg.
- Ụdị mwụda dị mfe ka agaghịzi eji akụ chere ihu elu ma ọ bụ ala agbakwunyere na menu ndọpụta.
- Enwere ike iji
<div>
s ma ọ bụ<ul>
s wulite mkpọda ugbu a. - Ewugharịrị ụdị mwụda na akara iji nye nkwado dị mfe, arụnyere n'ime
<a>
yana<button>
ihe mgbada dabere. - Akpọgharịrị aha
.divider
ya ka.dropdown-divider
. - Ihe mwepu chọrọ ugbu a
.dropdown-item
. - Mgbanwe mkpọda anaghịzi achọ ihe doro anya
<span class="caret"></span>
; A na-enye nke a na-akpaghị aka site na CSS::after
na.dropdown-toggle
.
Sistemụ grid
576px
Agbakwunyere ebe nkwụsịtụ grid ọhụrụ dị kasm
, nke pụtara na enwere ngụkọta ọkwa ise (xs
,sm
,md
,lg
, naxl
).- A kpọgharịrị klaasị mgbanwe grid na-anabata aha
.col-{breakpoint}-{modifier}-{size}
maka.{modifier}-{breakpoint}-{size}
klaasị grid dị mfe. - Ewepụla ma dọpụta klaasị mgbanwe maka klaasị nwere ike flexbox ọhụrụ
order
. Dịka ọmụmaatụ, kama.col-8.push-4
na.col-4.pull-8
, ị ga-eji.col-8.order-2
na.col-4.order-1
. - Klas flexbox agbakwunyere maka sistemụ grid na akụrụngwa.
Ndepụta otu
- Jiri flexbox degharịa akụrụngwa.
- Dochie
a.list-group-item
ya na klas doro anya,.list-group-item-action
, maka nhazi nhazi na ụdị bọtịnụ nke ndepụta ihe otu. - Klas agbakwunyere
.list-group-flush
maka iji kaadị.
Modal
- Jiri flexbox degharịa akụrụngwa.
- Nyere ịkwaga na flexbox, nhazi nke akara ngosi ịchụpụ na nkụnye eji isi mee nwere ike gbajiri n'ihi na anyị anaghịzi eji floats. Ọdịnaya na-ese n'elu na-abịa na mbụ, mana yana flexbox nke ahụ abụghịzi ikpe. Melite akara ngosi ịchụpụ gị ka ọ bịa na aha modal iji dozie.
- Nhọrọ
remote
(nke enwere ike iji buo ya na ntinye ọdịnaya mpụga n'ime modal) naloaded.bs.modal
wepụrụ ihe omume kwekọrọ. Anyị na-akwado kama iji templating-akụkụ ndị ahịa ma ọ bụ usoro njikọ data, ma ọ bụ kpọọ jQuery.load onwe gị.
Ndị agha mmiri
- Jiri flexbox degharịa akụrụngwa.
- Wepụrụ ihe fọrọ nke nta ka ọ bụrụ ndị niile
>
na-ahọpụta maka ịke dị mfe site na klaasị enweghị akwụ. - Kama HTML-kpọmkwem nhọrọ dị ka
.nav > li > a
, anyị na-eji iche iche klaasị maka.nav
s,.nav-item
s, na.nav-link
s. Nke a na-eme ka HTML gị gbanwee ka ọ na-ebute mmụba dị ukwuu.
Navbar
Edegharịrị navbar kpamkpam na flexbox site na nkwado emelitere maka nhazi, nzaghachi na nhazi.
- A na-etinye omume navbar na-anabata ugbu a na
.navbar
klaasị site na achọrọ.navbar-expand-{breakpoint}
ebe ịhọrọ ebe ị ga-adaba navbar. Na mbụ, nke a bụ mgbanwe dị obere na nchikota achọrọ. .navbar-default
bụ ugbu a.navbar-light
, ezie.navbar-dark
na-anọgide otu. A chọrọ otu n'ime ihe ndị a na ụgbọ mmiri nke ọ bụla. Agbanyeghị, klaasị ndị a anaghịzi edobebackground-color
s; kama ha na-emetụta naanịcolor
.- Navbars chọrọ ugbu a nkwupụta ndabere nke ụdị ụfọdụ. Họrọ site na akụrụngwa ndabere anyị (
.bg-*
) ma ọ bụ tinye nke gị na klaasị ọkụ/inverse dị n'elu maka ịhazi ara ara . - Nyere ụdị flexbox, navbars nwere ike iji ngwa flexbox ugbu a maka nhọrọ nhazi dị mfe.
.navbar-toggle
dị ugbu a.navbar-toggler
ma nwee ụdị dị iche iche na akara n'ime (ọkwaghị atọ<span>
s).- Wepụrụ
.navbar-form
klas ahụ kpamkpam. Ọ dịghịzi mkpa; kama, jiri naanị.form-inline
tinye akụrụngwa oke dị ka ọ dị mkpa. - Navbars anaghịzi agụnye
margin-bottom
ma ọ bụborder-radius
na ndabara. Jiri akụrụngwa dịka ọ dị mkpa. - A na-emelite ihe atụ niile na-egosi navbars ka ịgụnye akara ọhụrụ.
Pagination
- Jiri flexbox degharịa akụrụngwa.
- Klas ndị doro anya (
.page-item
,.page-link
) ka achọrọ ugbu a na ụmụ ụmụ.pagination
s - Wepụrụ
.pager
akụrụngwa kpamkpam n'ihi na ọ dị ntakịrị karịa bọtịnụ ndetu ahaziri.
Nri achịcha
- klaasị doro anya,
.breadcrumb-item
, chọrọ ugbu a na ụmụ ụmụ.breadcrumb
s
Akara na baajị
- Ejikọtara
.label
na.badge
iji mebie na<label>
mmewere ma mee ka ihe ndị metụtara ya dị mfe. - Agbakwunyere
.badge-pill
dị ka ihe mgbanwe maka anya “ọgwụ” gbara okirikiri. - A naghị ebugharị baajị na-akpaghị aka na otu ndetu na ihe ndị ọzọ. Achọrọ klaasị ịba uru maka nke ahụ.
.badge-default
Ewetula ma.badge-secondary
tinye ya na klaasị mgbanwe akụrụngwa ejiri ebe ọzọ.
Panel, thumbnails, na olulu mmiri
Etufuru kpamkpam maka akụrụngwa kaadị ọhụrụ.
Ogwe
.panel
ka.card
, ejiri flexbox arụ ya ugbu a..panel-default
wepụrụ na enweghị nnọchi..panel-group
wepụrụ na enweghị nnọchi..card-group
abụghị nnọchi, ọ dị iche..panel-heading
ka.card-header
.panel-title
ka.card-title
. Dabere n'ọdịdị ịchọrọ, ị nwekwara ike iji isi ihe ma ọ bụ klaasị (dịka<h3>
,.h3
) ma ọ bụ ihe nkwuwa okwu ma ọ bụ klaasị (dịka<strong>
,<b>
,.font-weight-bold
). Rịba ama na.card-title
, ebe aha ya bụ aha ya, na-emepụta ọdịdị dị iche karịa.panel-title
..panel-body
ka.card-body
.panel-footer
ka.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
, ma.panel-danger
wepụrụ ya maka.bg-
,.text-
, na.border
akụrụngwa emepụtara na$theme-colors
map Sass anyị
Ọganihu
- Jiri akụrụngwa dochie
.progress-bar-*
klaasị gburugburu.bg-*
. Dị ka ihe atụ,class="progress-bar progress-bar-danger"
na-aghọclass="progress-bar bg-danger"
. - Dochiri
.active
maka ogwe ọganihu animated na.progress-bar-animated
.
Carousel
- Mechie akụkụ ahụ niile iji mee ka imewe na nhazi dị mfe. Anyị nwere ụdị dị ole na ole ka ị ga-ewepụ, ihe ngosi ọhụrụ na akara ngosi ọhụrụ.
- CSS niile enwebeghị ọnụ ma nyegharịa aha ha, na-ahụ na etinyere klaasị ọ bụla na prefixed
.carousel-
.- Maka ihe carousel,
.next
,.prev
,.left
, ma.right
dị ugbu a.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, na.carousel-item-right
. .item
dịkwa ugbu a.carousel-item
.- Maka njikwa gara aga/ na-esote,
.carousel-control.right
ma.carousel-control.left
dị ugbu a.carousel-control-next
na.carousel-control-prev
, nke pụtara na ha anaghị achọkwa klas ntọala akọwapụtara.
- Maka ihe carousel,
- Wepụrụ ụdị niile na-anabata ya, na-aga n'ihu na akụrụngwa (dịka ọmụmaatụ, na-egosi nkọwa okwu na ụfọdụ ebe nlele) na ụdị omenala dị ka achọrọ.
- Oyiyi ewepụrụ na-agafe maka onyonyo dị n'ime ihe carousel, na-ebugharị na akụrụngwa.
- Tweaked ihe atụ Carousel iji tinye akara ọhụrụ na ụdị.
Tebụl
- E wepụrụ nkwado maka tebụl akwụ akwụrụ. A na-eketa ụdị tebụl niile na v4 maka ndị na-ahọpụta ndị dị mfe.
- Ụdị tebụl dị iche agbakwunyere.
Ngwa ọrụ
- Gosipụta, zoro ezo na ndị ọzọ:
- Emere ka ngwa ngosi na-anabata (dịka,
.d-none
nad-{sm,md,lg,xl}-none
). - Wepụrụ ọtụtụ
.hidden-*
ngwa maka ngwa ngosi ọhụrụ . Dị ka ihe atụ, kama.hidden-sm-up
, jiri.d-sm-none
. A gbanwegharịrị aha ndị.hidden-print
ọrụ ahụ ka ọ jiri atụmatụ ịkpọ aha njirimara ngosi. Ozi ndị ọzọ n'okpuru ngalaba akụrụngwa na- anabata nke ibe a. - Klas agbakwunyere
.float-{sm,md,lg,xl}-{left,right,none}
maka ịse n'elu na-anabata ma wepụ ya.pull-left
na.pull-right
ebe ọ bụ na ha anaghị arụ ọrụ.float-left
na.float-right
.
- Emere ka ngwa ngosi na-anabata (dịka,
- Ụdị:
- Etinyere ndịiche na-anabata na klaasị nhazi ederede anyị
.text-{sm,md,lg,xl}-{left,center,right}
.
- Etinyere ndịiche na-anabata na klaasị nhazi ederede anyị
- Nhazi na oghere:
- Agbakwunyere oke na-anabata ihe na ihe mgbochi maka akụkụ niile, gbakwunyere mkpịrị mkpirisi kwụ ọtọ na kwụ ọtọ.
- agbakwunyere ibu ụgbọ mmiri nke akụrụngwa flexbox .
- Wepụrụ
.center-block
maka.mx-auto
klaasị ọhụrụ.
- Clearfix emelitere iji wedata nkwado maka ụdị ihe nchọgharị ochie.
Ngwakọta ndị na-ere ihe nrịbama
Ndị na- ere ahịa prefix mixins nke Bootstrap 3 , bụ ndị a kwụsịrị na v3.2.0, ewepụla na Bootstrap 4. Ebe ọ bụ na anyị na-eji Autoprefixer , ha adịghịzi mkpa.
Wepụrụ ngwakọta ndị a : animation
, animation-delay
, animation-direction
, animation-duration
, . animation-fill-mode
_ animation-iteration-count
_ animation-name
_ animation-timing-function
_ backface-visibility
_ box-sizing
_ content-columns
_ hyphens
_ opacity
_ perspective
_ perspective-origin
_ rotate
_ rotateX
_ rotateY
_ scale
_ scaleX
_ scaleY
_ skew
_ transform-origin
_ transition-delay
_ transition-duration
_transition-property
transition-timing-function
transition-transform
translate
translate3d
user-select
Akwụkwọ
Akwụkwọ anyị nwetara nkwalite n'ofe bọọdụ. Nke a bụ ala ala:
- Anyị ka na-eji Jekyll, mana anyị nwere plugins na ngwakọta:
bugify.rb
a na-eji iji depụta nke ọma ndenye na ibe mperi ihe nchọgharị anyị .example.rb
bụ ndụdụ omenala nkehighlight.rb
ngwa mgbakwunye ndabara, na-enye ohere ijikwa ihe atụ-koodu dị mfe.callout.rb
bụ ndụdụ omenala yiri nke ahụ, mana emebere ya maka ịkpọ oku docs anyị pụrụ iche.- a na-eji jekyll-toc ewepụta tebụl ọdịnaya anyị.
- Edegharịrị ọdịnaya docs niile na Markdown (kama HTML) maka ndezi dị mfe.
- Ahazigharịrị ibe akwụkwọ maka ọdịnaya dị mfe yana usoro ndị nwere ike ịbịaru nso.
- Anyị si na CSS oge niile gaa SCSS iji nweta ohere nke mgbanwe Bootstrap, mixins, na ndị ọzọ.
Ngwa na-anabata
E @screen-
wepụrụ mgbanwe niile na v4.0.0. Jiri media-breakpoint-up()
, media-breakpoint-down()
, ma ọ bụ media-breakpoint-only()
Sass mixins ma ọ bụ $grid-breakpoints
maapụ Sass kama.
E wepụrụ klaasị ngwa ọrụ anyị na-anabata nke ọma maka ịkwado akụrụngwa doro anya display
.
- Ewepụla klaasị
.hidden
na.show
klaasị n'ihi na ha megidere jQuery$(...).hide()
na$(...).show()
usoro. Kama, gbalịa gbanwee[hidden]
àgwà ahụ ma ọ bụ jiri ụdị inline dị kastyle="display: none;"
nastyle="display: block;"
. - Ewepụla klaasị niile
.hidden-
, chekwaa maka ngwa mbipụta nke akpọgharịrị aha.- E wepụrụ na v3:
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg
.visible-xs-block
.visible-xs-inline
.visible-xs-inline-block
.visible-sm-block
.visible-sm-inline
.visible-sm-inline-block
.visible-md-block
.visible-md-inline
.visible-md-inline-block
.visible-lg-block
.visible-lg-inline
.visible-lg-inline-block
- E wepụrụ na v4 alphas:
.hidden-xs-up
.hidden-xs-down
.hidden-sm-up
.hidden-sm-down
.hidden-md-up
.hidden-md-down
.hidden-lg-up
.hidden-lg-down
- E wepụrụ na v3:
- Ejikwa
.hidden-
ma ọ bụ.visible-
, ma ọ bụ , bipụta akụrụngwa bipụta.d-print-
.- Aha ochie :
.visible-print-block
,.visible-print-inline
,.visible-print-inline-block
.hidden-print
- Klas ọhụrụ :
.d-print-block
,.d-print-inline
,.d-print-inline-block
.d-print-none
- Aha ochie :
Kama iji .visible-*
klaasị doro anya, ị na-eme ka ihe ahụ na-ahụ anya site na ịghara izobe ya na nha ihuenyo ahụ. Ị nwere ike ijikọ otu .d-*-none
klaasị na otu .d-*-block
klaasị iji gosi mmewere naanị na etiti oge nke nha ihuenyo (dịka ọmụmaatụ .d-none.d-md-block.d-xl-none
na-egosi mmewere naanị na ọkara na ngwaọrụ buru ibu).
Rịba ama na mgbanwe na ebe nkwụsịtụ grid na v4 pụtara na ị ga-achọ ịga otu nkwụsịtụ buru ibu iji nweta otu nsonaazụ ahụ. Klas ọhụrụ na-anabata nke ọma anaghị anwa ịnabata ikpe ndị na-adịkarị obere ebe enweghị ike igosipụta visibiliti ihe dị ka otu ihe na-aga n'ihu nke nha nlele anya; Kama ị ga-achọ iji CSS omenala n'ụdị ikpe ahụ.