Kusamukira ku v4
Bootstrap 4 ndikulembanso kwakukulu kwa polojekiti yonse. Zosintha zodziwika bwino ndizofupikitsidwa pansipa, ndikutsatiridwa ndi kusintha kwapadera kwa zigawo zofunikira.
Kusintha kokhazikika
Kusuntha kuchokera ku Beta 3 kupita ku kumasulidwa kwathu kokhazikika kwa v4.x, palibe zosintha zosweka, koma pali zosintha zina zodziwika.
Kusindikiza
-
Zothandizira zosindikiza zosweka. M'mbuyomu, kugwiritsa ntchito
.d-print-*
kalasi kungawononge mosayembekezereka gulu lina lililonse.d-*
. Tsopano, amafanana ndi zida zathu zina zowonetsera ndipo amangogwira pa media (@media print
). -
Onjezani zida zowonetsera zosindikizidwa kuti zigwirizane ndi zida zina. Beta 3 ndi akulu okha anali ndi
block
,inline-block
,inline
, ndinone
. Wokhazikika v4 wawonjezedwaflex
,inline-flex
,table
,table-row
, nditable-cell
. -
Kuwonetseratu kosindikiza kokhazikika pamasakatuli onse okhala ndi masitayelo atsopano omwe amafotokozera
@page
size
.
Kusintha kwa Beta 3
Pomwe Beta 2 idawona kuchuluka kwakusintha kwathu pagawo la beta, komabe tili ndi zochepa zomwe zimayenera kuyankhidwa pakutulutsidwa kwa Beta 3. Zosinthazi zimagwira ntchito ngati mukusintha kukhala Beta 3 kuchokera ku Beta 2 kapena mtundu uliwonse wakale wa Bootstrap.
Zosiyanasiyana
- Anachotsa
$thumbnail-transition
kusintha kosagwiritsidwa ntchito. Sitinali kusintha kalikonse, kotero inali ma code owonjezera. - Phukusi la npm siliphatikizanso mafayilo ena kupatula mafayilo athu ndi dist; ngati mumawadalira ndikuyendetsa zolemba zathu kudzera
node_modules
mufoda, muyenera kusintha kachitidwe kanu.
Mafomu
-
Lembaninso mabokosi ndi mawailesi omwe mwamakonda komanso osasintha. Tsopano, onse ali ndi mawonekedwe a HTML ofananira (akunja
<div>
ndi abale )<input>
ndi<label>
masitayilo omwewo (osakhazikika, okhala ndi gulu losintha). Izi zimatilola kupanga masitayilo kutengera momwe zalembedwera, kufewetsa kuthandizira kwa mawonekedwedisabled
(omwe poyamba amafunikira kalasi ya makolo) komanso kuthandizira kutsimikizira mawonekedwe athu.Monga gawo la izi, tasintha CSS yoyang'anira ma angapo
background-image
pamabokosi amtundu wamtundu ndi mawayilesi. M'mbuyomu,.custom-control-indicator
chinthu chomwe chidachotsedwa tsopano chinali ndi mtundu wakumbuyo, gradient, ndi chithunzi cha SVG. Kusintha makonda akumbuyo kumatanthauza kusintha zonsezo nthawi iliyonse mukafuna kusintha chimodzi chokha. Tsopano, tili ndi.custom-control-label::before
kudzaza ndi gradient ndikugwirizira.custom-control-label::after
chithunzicho.Kuti mupange cheke chokhazikika pamzere, onjezani
.custom-control-inline
. -
Chosankha chosinthidwa chamagulu otengera mabatani. M'malo mwa
[data-toggle="buttons"] { }
kalembedwe ndi kachitidwe, timagwiritsa ntchito mawonekedwewodata
pamakhalidwe a JS ndikudalira.btn-group-toggle
kalasi yatsopano yamakongoletsedwe. -
Kuchotsedwa
.col-form-legend
mokomera pang'ono bwino.col-form-label
. Njira iyi.col-form-label-sm
ndipo.col-form-label-lg
ingagwiritsidwe ntchito pazinthu<legend>
zosavuta. -
Zolowetsa zamafayilo mwamakonda zidalandira kusintha kwamitundu yawo ya
$custom-file-text
Sass. Sikulinso mapu a Sass okhala ndi zisa ndipo tsopano akungopatsa mphamvu chingwe chimodzi -Browse
batani popeza ndiye chinthu chokhacho chomwe chimapangidwa kuchokera ku Sass yathu. MawuwaChoose file
tsopano akuchokera ku.custom-file-label
.
Magulu olowetsa
-
Zowonjezera zamagulu zolowetsa tsopano ndizokhazikika pakuyika kwawo mogwirizana ndi zolowetsa. Tasiya
.input-group-addon
ndipo.input-group-btn
m'makalasi awiri atsopano,.input-group-prepend
ndipo.input-group-append
. Muyenera kugwiritsa ntchito append kapena prepend tsopano, kufewetsa zambiri za CSS yathu. M'kati mwa zowonjezera kapena zokonzekera, ikani mabatani anu momwe angakhalire kwina kulikonse, koma sungani malemba mu.input-group-text
. -
Masitayelo otsimikizira tsopano athandizidwa, monganso zolowetsa zingapo (ngakhale mutha kutsimikizira zolowetsa kamodzi pagulu).
-
Makalasi akukula ayenera kukhala pa kholo
.input-group
osati mawonekedwe amunthu payekha.
Kusintha kwa Beta 2
Tili mu beta, tikufuna kusasintha. Komabe, zinthu sizimayenda monga momwe munakonzera. Pansipa pali zosintha zomwe muyenera kukumbukira mukachoka ku Beta 1 kupita ku Beta 2.
Kuswa
- Kusintha
$badge-color
kwachotsedwa ndikugwiritsa ntchito pa.badge
. Timagwiritsa ntchito mtundu wosiyanitsa mitundu kuti tisankhecolor
kutengerabackground-color
, chifukwa chake kusinthako sikofunikira. - Ntchito
grayscale()
yosinthidwa kuti mupewe kuswa mkangano ndi zoseferagray()
za CSS .grayscale
- Kusinthidwa
.table-inverse
,.thead-inverse
, ndi.thead-default
ku.*-dark
ndi.*-light
, kufananiza mitundu yathu yomwe imagwiritsidwa ntchito kwina. - Matebulo oyankha tsopano akupanga makalasi amtundu uliwonse wa grid. Izi zikuchokera ku Beta 1 chifukwa zomwe
.table-responsive
mwakhala mukugwiritsa ntchito ndizofanana.table-responsive-md
. Mutha kugwiritsa ntchito.table-responsive
kapena.table-responsive-{sm,md,lg,xl}
ngati pakufunika. - Thandizo la Bower lomwe lagwetsedwa pomwe woyang'anira phukusi wachotsedwa panjira zina (mwachitsanzo, Yarn kapena npm). Onani bower/bower#2298 kuti mumve zambiri.
- Bootstrap ikufunabe jQuery 1.9.1 kapena apamwamba, koma mukulangizidwa kugwiritsa ntchito mtundu wa 3.x popeza asakatuli othandizidwa ndi v3.x ndi omwe Bootstrap imathandizira kuphatikiza v3.x ili ndi zosintha zina zachitetezo.
- Anachotsa kalasi yosagwiritsidwa
.form-control-label
ntchito. Ngati munagwiritsapo ntchito kalasiyi, inali yofanana ndi.col-form-label
kalasi yomwe imayika pakati a<label>
ndi zomwe zimalumikizidwa ndi mawonekedwe opingasa. - Anasintha
color-yiq
kuchokera ku mixin yomwe imaphatikizapocolor
katunduyo kukhala ntchito yomwe imabweretsa mtengo, kukulolani kuti mugwiritse ntchito pa katundu aliyense wa CSS. Mwachitsanzo, m'malocolor-yiq(#000)
molembacolor: color-yiq(#000);
.
Mfundo zazikuluzikulu
- Adayambitsa kugwiritsidwa ntchito kwatsopano
pointer-events
pama modals. Zakunja.modal-dialog
zimadutsa muzochitika zomwepointer-events: none
zimangodinanso makonda (kupangitsa kuti zitheke kumvetsera pa.modal-backdrop
kudina kulikonse), ndiyeno kumatsutsana ndi zenizeni.modal-content
ndipointer-events: auto
.
Chidule
Nazi zinthu zazikulu zamatikiti zomwe mungafune kudziwa mukachoka ku v3 kupita ku v4.
Thandizo la msakatuli
- Adagwetsa thandizo la IE8, IE9, ndi iOS 6. v4 tsopano ndi IE10+ ndi iOS 7+ yokha. Pamasamba omwe akufunika chilichonse mwa izi, gwiritsani ntchito v3.
- Onjezani chithandizo chovomerezeka cha Android v5.0 Lollipop's Browser ndi WebView. Mitundu yam'mbuyomu ya Android Browser ndi WebView imakhalabe yothandizidwa mosavomerezeka.
Kusintha kwapadziko lonse
- Flexbox imayatsidwa mwachisawawa. Mwambiri izi zikutanthauza kuchoka pa zoyandama ndi zina kudutsa zigawo zathu.
- Kusintha kuchoka ku Less kupita ku Sass kuti tipeze mafayilo athu a CSS.
- Kusintha kuchokera
px
kurem
CSS ngati gawo lathu loyamba la CSS, ngakhale ma pixel amagwiritsidwabe ntchito pamafunso azama media ndi machitidwe a grid popeza mawonedwe a chipangizo samakhudzidwa ndi kukula kwa mtundu. - Kukula kwa zilembo padziko lonse lapansi kwawonjezeka kuchoka
14px
pa16px
. - Adasinthidwanso magawo a gridi kuti muwonjezere njira yachisanu (yoyang'anira zida zing'onozing'ono
576px
pansi ndi pansi) ndikuchotsa-xs
zosokoneza m'makalasi amenewo. Chitsanzo:.col-6.col-sm-4.col-md-3
. - M'malo mwa mutu womwe mwasankha ndikusankha zomwe mungasinthidwe kudzera pamitundu yosiyanasiyana ya SCSS (mwachitsanzo,
$enable-gradients: true
). - Pangani dongosolo losinthidwa kuti mugwiritse ntchito zolemba zingapo za npm m'malo mwa Grunt. Onani
package.json
zolemba zonse, kapena pulojekiti yathu yowerengera pazosowa zachitukuko zakomweko. - Kugwiritsa ntchito osayankha kwa Bootstrap sikukuthandizidwanso.
- Yagwetsa Customizer yapaintaneti m'malo mwazolemba zochulukira komanso zomanga makonda.
- Onjezani makalasi ofunikira ambiri amtundu wa CSS wamba wamtengo wapatali ndi njira zazifupi zapakati / padding.
Grid system
- Zasunthidwa ku flexbox.
- Thandizo lowonjezera la flexbox mu zosakaniza za gridi ndi makalasi ofotokozedwatu.
- Monga gawo la flexbox, kuphatikiza chithandizo chamagulu oyimirira ndi opingasa.
- Adasinthidwa mayina a gulu la grid ndi gawo latsopano la grid.
- Onjezani
sm
gululi latsopano pansipa768px
kuti muwongolere kwambiri. Tsopano tili ndixs
,sm
,md
,lg
ndixl
. Izi zikutanthawuzanso kuti gawo lililonse lakwera mulingo umodzi (kotero.col-md-6
mu v3 tsopano ili.col-lg-6
mu v4). xs
makalasi a gridi asinthidwa kuti asafune kuti infix iwonetsere molondola kuti ayamba kugwiritsa ntchito masitayelomin-width: 0
osati mtengo wa pixel. M'malo mwake.col-xs-6
, ndi tsopano.col-6
. Magawo ena onse a gridi amafunikira infix (mwachitsanzo,sm
).
- Onjezani
- Zasinthidwa kukula kwa gridi, zosakaniza, ndi zosinthika.
- Magetsi a ma gridi tsopano ali ndi mapu a Sass kotero mutha kufotokoza m'lifupi mwake panjira iliyonse.
- Kusinthidwa ma gridi osakaniza kuti agwiritse ntchito
make-col-ready
kusakaniza kokonzekera ndimake-col
kuyikaflex
ndi kukula kwa magawomax-width
. - Zosintha zamafunso amtundu wa grid system ndi m'lifupi mwa chidebe kuti ziwerengere gawo latsopano la grid ndikuwonetsetsa kuti mizati imagawika mofanana ndi
12
m'lifupi mwake. - Malo opumira ma gridi ndi makulidwe a chidebe tsopano akugwiridwa kudzera pa mamapu a Sass (
$grid-breakpoints
ndi$container-max-widths
) m'malo mwazosiyana zochepa. Izi zimalowetsa@screen-*
zosinthika kwathunthu ndikukulolani kuti musinthe magawo a gridi kwathunthu. - Mafunso azama media nawonso asintha. M'malo mobwereza zolengeza zathu pawailesi yakanema ndi mtengo womwewo nthawi iliyonse, tili ndi
@include media-breakpoint-up/down/only
. Tsopano, m'malo molemba@media (min-width: @screen-sm-min) { ... }
, mukhoza kulemba@include media-breakpoint-up(sm) { ... }
.
Zigawo
- Mapanelo ogwetsedwa, tizithunzi, ndi zitsime za gawo latsopano lazonse, makadi .
- Yagwetsa zilembo zazithunzi za Glyphicons. Ngati mukufuna zithunzi, zosankha zina ndi izi:
- mtundu wakumtunda wa Glyphicons
- Zochitika
- Font Awesome
- Onani Zowonjezera tsamba la mndandanda wa njira zina. Muli ndi malingaliro owonjezera? Chonde tsegulani vuto kapena PR.
- Yagwetsa pulogalamu yowonjezera ya Affix jQuery.
- Timalimbikitsa kugwiritsa ntchito
position: sticky
m'malo mwake. Onani HTML5 Chonde lowetsani kuti mudziwe zambiri komanso malingaliro enaake a polyfill. Lingaliro limodzi ndiloti mugwiritse ntchito@supports
lamulo kuti mukwaniritse (mwachitsanzo,@supports (position: sticky) { ... }
) - Mukadakhala mukugwiritsa ntchito Affix kuti mugwiritse ntchito zina zowonjezera, zopanda
position
masitayilo, ma polyfill mwina sangagwirizane ndi vuto lanu. Njira imodzi yogwiritsira ntchito izi ndi laibulale yachitatu ya ScrollPos-Styler .
- Timalimbikitsa kugwiritsa ntchito
- Inagwetsa gawo la pager popeza linali mabatani osinthidwa pang'ono.
- Anasinthanso pafupifupi zigawo zonse kuti agwiritse ntchito masankhidwe am'magulu opanda zisa m'malo mosankha ana enieni.
Mwa chigawo
Mndandandawu ukuwonetsa kusintha kwakukulu ndi chigawo pakati pa v3.xx ndi v4.0.0.
Yambitsaninso
Chatsopano ku Bootstrap 4 ndi Kuyambiransoko , pepala latsopano lomwe limamangidwa pa Normalize ndi masitaelo athu osintha malingaliro athu. Zosankha zomwe zikuwonekera mufayiloyi zimangogwiritsa ntchito zinthu-palibe makalasi pano. Izi zimatipatula masitayelo athu osinthika kuchokera kumitundu yathu kuti tigwiritse ntchito modula. Zina mwazosintha zofunika kwambiri izi zikuphatikiza box-sizing: border-box
ndikusintha, kusuntha kuchoka em
ku rem
mayunitsi pazinthu zambiri, masitayelo amalumikizidwe, ndi ma seti ambiri amitundu.
Kujambula
- Yasunthira
.text-
zofunikira zonse ku_utilities.scss
fayilo. - Atayidwa
.page-header
monga masitayelo ake angagwiritsidwe ntchito pogwiritsa ntchito zida. .dl-horizontal
wagwetsedwa. M'malo mwake, gwiritsani.row
ntchito<dl>
ndikugwiritsa ntchito makalasi amtundu wa gridi (kapena zosakaniza) pa ake<dt>
ndi<dd>
ana.- Ma blockquotes okonzedwanso, akusuntha masitayelo awo kuchoka pa
<blockquote>
chinthu kupita ku gulu limodzi,.blockquote
. Yagwetsa.blockquote-reverse
zosintha zamawu. .list-inline
tsopano imafuna kuti ana ake andandanda zinthu akhale ndi.list-inline-item
kalasi yatsopano yogwiritsidwa ntchito kwa iwo.
Zithunzi
- Adasinthidwa
.img-responsive
kukhala.img-fluid
. - Adasinthidwa
.img-rounded
kukhala.rounded
- Adasinthidwa
.img-circle
kukhala.rounded-circle
Matebulo
- Pafupifupi zochitika zonse za
>
osankhidwa achotsedwa, kutanthauza kuti matebulo omwe ali mu zisa adzalandira masitayelo kuchokera kwa makolo awo. Izi zimathandizira kwambiri osankha athu komanso makonda omwe angakhale nawo. - Adasinthidwa
.table-condensed
kukhala.table-sm
kusasinthasintha. - Anawonjezera njira yatsopano
.table-inverse
. - Zosintha zamutu wowonjezera patebulo:
.thead-default
ndi.thead-inverse
. - Adasinthidwanso makalasi okhazikika kuti akhale ndi
.table-
-prefix. Chifukwa chake.active
,.success
, ndi ku , , ndi ..warning
_.danger
.info
.table-active
.table-success
.table-warning
.table-danger
.table-info
Mafomu
- Zinthu zasunthidwa kukonzanso ku
_reboot.scss
fayilo. - Adasinthidwa
.control-label
kukhala.col-form-label
. - Adasinthidwanso
.input-lg
ndi.input-sm
ku.form-control-lg
ndi.form-control-sm
, motsatana. - Makalasi otsika
.form-group-*
chifukwa cha kuphweka. Gwiritsani ntchito.form-control-*
makalasi tsopano. - Adagwetsa
.help-block
ndikuyikamo.form-text
mawu athandizo a block-level. Pamalemba othandizira pa intaneti ndi zosankha zina zosinthika, gwiritsani ntchito makalasi othandizira ngati.text-muted
. - Wagwa
.radio-inline
ndi.checkbox-inline
. - Kuphatikizidwa
.checkbox
ndi.radio
kulowa.form-check
ndi magalasi osiyanasiyana.form-check-*
. - Mafomu opingasa asinthidwa:
- Anasiya
.form-horizontal
zofunikira za kalasi. .form-group
sichikugwiritsanso ntchito masitayelo kuchokera ku.row
mixin, kotero.row
tsopano ikufunika pamasanjidwe opingasa a gridi (mwachitsanzo,<div class="form-group row">
).- Onjezani kalasi yatsopano
.col-form-label
pama malembo apakatikati okhala ndi.form-control
s. - Zowonjezedwa zatsopano
.form-row
pamapangidwe amafomu ophatikizika ndi makalasi a gridi (sinthanani anu.row
ndi.form-row
kupita).
- Anasiya
- Kuthandizira mafomu owonjezera (mabokosi, mawailesi, zosankhidwa, ndi zolowetsa mafayilo).
- Osinthidwa
.has-error
,.has-warning
, ndi.has-success
makalasi okhala ndi mawonekedwe a HTML5 ovomerezeka kudzera pa CSS's:invalid
ndi:valid
pseudo-classes. - Adasinthidwa
.form-control-static
kukhala.form-control-plaintext
.
Mabatani
- Adasinthidwa
.btn-default
kukhala.btn-secondary
. - Adagwetsa
.btn-xs
kalasi yonse chifukwa.btn-sm
ndi yaying'ono kwambiri kuposa ma v3. - Mbali yodziwika bwino ya batani la
button.js
jQuery plugin yagwetsedwa. Izi zikuphatikizapo$().button(string)
ndi$().button('reset')
njira. Tikukulangizani kugwiritsa ntchito JavaScript yokhazikika m'malo mwake, yomwe ingakhale ndi phindu lochita momwe mukufunira.- Dziwani kuti zina za pulogalamu yowonjezera (mabokosi oyang'anira mabatani, mabatani a wailesi, mabatani osinthira kamodzi) zasungidwa mu v4.
- Sinthani mabatani'
[disabled]
kuti:disabled
akhale momwe IE9+ imathandizira:disabled
. Komabefieldset[disabled]
ndizofunikirabe chifukwa madera omwe ali olumala akadali ngolo mu IE11 .
Gulu la batani
- Lembaninso gawo ndi flexbox.
- Zachotsedwa
.btn-group-justified
. Monga choloweza m'malo mutha kugwiritsa ntchito<div class="btn-group d-flex" role="group"></div>
ngati chokulunga mozungulira zinthu ndi.w-100
. - Adagwetsa
.btn-group-xs
kalasi atapatsidwa kuchotsedwa kwa.btn-xs
. - Kuchotsa kusiyana pakati pamagulu a batani muzitsulo zazitsulo; gwiritsani ntchito zida zam'mphepete tsopano.
- Zolemba zokonzedwa kuti zigwiritsidwe ntchito ndi zigawo zina.
Zotsitsa
- Kusintha kuchoka kwa osankha makolo kupita m'makalasi amodzi azinthu zonse, zosintha, ndi zina.
- Masitayilo otsika osavuta kuti asatumizenso ndi mivi yoyang'ana m'mwamba kapena pansi yolumikizidwa pamenyu yotsitsa.
- Zotsitsa zitha kumangidwa ndi
<div>
s kapena<ul>
s tsopano. - Kumanganso masitayelo otsikira ndi zolembera kuti mupereke chithandizo chosavuta, chomangidwira
<a>
ndi<button>
zinthu zotsikira. - Adasinthidwa
.divider
kukhala.dropdown-divider
. - Zinthu zotsika zimafunikira
.dropdown-item
. - Matembenuzidwe otsitsa safunanso zachidziwitso
<span class="caret"></span>
; izi tsopano zimaperekedwa zokha kudzera pa CSS::after
pa.dropdown-toggle
.
Grid system
- Adawonjeza malo atsopano
576px
mongasm
, kutanthauza kuti pali magawo asanu (xs
,sm
,md
,lg
, ndixl
). - Anasinthanso magulu osinthika a gridi omvera kuchokera kumagulu
.col-{breakpoint}-{modifier}-{size}
osavuta.{modifier}-{breakpoint}-{size}
a gridi. - Makalasi ogwetsera okankhira ndi kukoka pamakalasi atsopano oyendetsedwa ndi flexbox
order
. Mwachitsanzo, m'malo mwa.col-8.push-4
ndi.col-4.pull-8
, mungagwiritse ntchito.col-8.order-2
ndi.col-4.order-1
. - Makalasi owonjezera a flexbox a grid system ndi zida.
Lembani magulu
- Lembaninso gawo ndi flexbox.
- M'malo
a.list-group-item
ndi kalasi yowonekera,.list-group-item-action
, ya masitayelo ulalo ndi mabatani a mndandanda wazinthu zamagulu. - Gulu lowonjezera
.list-group-flush
kuti mugwiritse ntchito ndi makadi.
Modali
- Lembaninso gawo ndi flexbox.
- Kutengera kusuntha kwa flexbox, kulumikizana kwa zithunzi zochotsa pamutu kumakhala kosweka chifukwa sitikugwiritsanso ntchito zoyandama. Zomwe zimayandama zimabwera poyamba, koma ndi flexbox sizili choncho. Sinthani zithunzi zanu zochotsa kuti zibwere pambuyo pa mitu ya modal kuti mukonze.
- Chosankha
remote
(chomwe chingagwiritsidwe ntchito kuyika zokha ndikulowetsa zakunja mu modal) ndipoloaded.bs.modal
chochitika chofananacho chinachotsedwa. M'malo mwake timalimbikitsa kugwiritsa ntchito matempu a kasitomala kapena chimango chomangirira deta, kapena kuyimbira jQuery.load nokha.
Navs
- Lembaninso gawo ndi flexbox.
- Yagwetsa pafupifupi
>
osankha onse kuti apange masitayelo osavuta kudzera m'makalasi opanda zisa. - M'malo mwa osankhidwa a HTML monga
.nav > li > a
, timagwiritsa ntchito makalasi osiyana a.nav
s,.nav-item
s, ndi.nav-link
s. Izi zimapangitsa HTML yanu kukhala yosinthika pamene ikubweretsa kuwonjezereka.
Navbar
Navbar yalembedweranso mu flexbox ndi chithandizo chokhazikika cha kuyanjanitsa, kuyankha, ndi makonda.
- Makhalidwe omvera a navbar tsopano akugwiritsidwa ntchito ku
.navbar
kalasi kudzera pakufunika.navbar-expand-{breakpoint}
komwe mumasankha komwe mungagwetse navbar. M'mbuyomu uku kunali kusinthidwa Kocheperako ndipo kumafunikira kubwezanso. .navbar-default
tsopano.navbar-light
, ngakhale.navbar-dark
idakali chimodzimodzi. Chimodzi mwa izi ndichofunika pa navbar iliyonse. Komabe, makalasi awa sakhalansobackground-color
s; m'malo mwake zimangokhudzacolor
.- Ma Navbar tsopano amafunikira chilengezo chakumbuyo chamtundu wina. Sankhani kuchokera kuzinthu zathu zakumbuyo (
.bg-*
) kapena ikani zanu ndi makalasi opepuka/osiyana pamwambapa kuti musinthe mwamisala . - Potengera masitayilo a flexbox, ma navbars tsopano atha kugwiritsa ntchito zida za flexbox pazosankha zosavuta.
.navbar-toggle
ili pano.navbar-toggler
ndipo ili ndi masitayelo osiyanasiyana ndi zolembera zamkati (palibenso ma<span>
s atatu).- Ndinasiya
.navbar-form
kalasi yonse. Sizikufunikanso; m'malo mwake, ingogwiritsani ntchito.form-inline
ndikugwiritsa ntchito malire ngati pakufunika. - Ma Navbar sakuphatikizanso
margin-bottom
kapenaborder-radius
mwachisawawa. Gwiritsani ntchito zofunikira ngati pakufunika. - Zitsanzo zonse zokhala ndi ma navbar zasinthidwa kuti ziphatikizepo chizindikiro chatsopano.
Pagination
- Lembaninso gawo ndi flexbox.
- Makalasi omveka bwino (
.page-item
,.page-link
) tsopano akufunika pa mbadwa za.pagination
s - Yagwetsera
.pager
gawo lonselo chifukwa linali locheperako kuposa mabatani amawu autilaini.
Zinyenyeswazi za mkate
- Kalasi yomveka,
.breadcrumb-item
, tsopano ikufunika pa mbadwa za.breadcrumb
s
Zolemba ndi mabaji
- Kuphatikizika
.label
ndi.badge
kulekanitsa kuchokera ku<label>
chinthucho ndikufewetsa zida zofananira. - Awonjezedwa
.badge-pill
ngati chosinthira cha mawonekedwe ozungulira a "mapiritsi". - Mabaji sakuyandamanso m'magulu amndandanda ndi zigawo zina. Maphunziro othandiza tsopano akufunika pa izi.
.badge-default
wagwetsedwa.badge-secondary
ndikuwonjezedwa kuti agwirizane ndi magulu osinthira omwe amagwiritsidwa ntchito kwina.
Mapanelo, tizithunzi, ndi zitsime
Zatsitsidwa kwathunthu ku gawo latsopano lamakhadi.
Magulu
.panel
ku.card
, tsopano yomangidwa ndi flexbox..panel-default
kuchotsedwa ndipo palibe cholowa m'malo..panel-group
kuchotsedwa ndipo palibe cholowa m'malo..card-group
si cholowa m'malo, ndi chosiyana..panel-heading
ku.card-header
.panel-title
ku.card-title
. Kutengera mawonekedwe omwe mukufuna, mutha kugwiritsanso ntchito mitu yamutu kapena makalasi (mwachitsanzo<h3>
,.h3
) kapena zida zolimba kapena makalasi (mwachitsanzo<strong>
,<b>
,.font-weight-bold
). Dziwani kuti.card-title
, ngakhale amatchulidwanso chimodzimodzi, amatulutsa mawonekedwe osiyana ndi.panel-title
..panel-body
ku.card-body
.panel-footer
ku.card-footer
.panel-primary
,.panel-success
,.panel-info
,.panel-warning
, ndipo.panel-danger
zatsitsidwa ku.bg-
,.text-
, ndi.border
zofunikira zochokera ku$theme-colors
mapu athu a Sass.
Kupita patsogolo
- M'malo mwa
.progress-bar-*
makalasi okhazikika ndi.bg-*
zofunikira. Mwachitsanzo,class="progress-bar progress-bar-danger"
amakhalaclass="progress-bar bg-danger"
. - M'malo
.active
mwa mipiringidzo yokongoletsedwa yokhala ndi.progress-bar-animated
.
Carousel
- Kuwongolera gawo lonse kuti muchepetse mapangidwe ndi masitayelo. Tili ndi masitayelo ochepera oti musinthe, zizindikiro zatsopano, ndi zithunzi zatsopano.
- CSS yonse sinakhazikitsidwe ndikusinthidwanso, kuwonetsetsa kuti kalasi iliyonse ili ndi
.carousel-
.- Kwa zinthu za carousel,
.next
,.prev
,.left
, ndi.right
tsopano.carousel-item-next
,.carousel-item-prev
,.carousel-item-left
, ndi.carousel-item-right
. .item
ndi tsopano.carousel-item
.- Kwa zowongolera zam'mbuyomu/zotsatira,
.carousel-control.right
ndipo.carousel-control.left
tsopano.carousel-control-next
ndi.carousel-control-prev
, kutanthauza kuti sizikufunikanso gulu linalake loyambira.
- Kwa zinthu za carousel,
- Yachotsa masitayelo onse omvera, kutengera zofunikira (mwachitsanzo, kuwonetsa mawu ofotokozera pamawonekedwe ena) ndi masitayelo anthawi zonse ngati pakufunika.
- Zithunzi zomwe zachotsedwa pazithunzi muzinthu za carousel, kutengera zofunikira.
- Tinasintha chitsanzo cha Carousel kuti chiphatikizepo mawonekedwe atsopano ndi masitayelo.
Matebulo
- Thandizo lachotsedwa pamatebulo okhala ndi masitayelo. Masitayilo onse a tebulo tsopano alowa mu v4 kwa osankha osavuta.
- Onjezani zosintha za tebulo.
Zothandizira
- Onetsani, zobisika, ndi zina zambiri:
- Adapanga zida zowonetsera kumvera (mwachitsanzo,
.d-none
ndid-{sm,md,lg,xl}-none
). - Zagwetsa zambiri
.hidden-*
zazinthu zatsopano zowonetsera . Mwachitsanzo, m'malo mwa.hidden-sm-up
, gwiritsani ntchito.d-sm-none
. Adasinthidwanso zida.hidden-print
kuti mugwiritse ntchito pulogalamu yowonetsera. Zambiri pansi pa gawo la Responsive utility la tsambali. - Makalasi
.float-{sm,md,lg,xl}-{left,right,none}
owonjezera a zoyandama zomvera ndikuchotsedwa.pull-left
ndipo.pull-right
popeza safunikira.float-left
ku.float-right
.
- Adapanga zida zowonetsera kumvera (mwachitsanzo,
- Mtundu:
- Adawonjezeranso kusiyanasiyana kwamakalasi athu akusintha mawu
.text-{sm,md,lg,xl}-{left,center,right}
.
- Adawonjezeranso kusiyanasiyana kwamakalasi athu akusintha mawu
- Kuyanjanitsa ndi mipata:
- Onjezani zida zatsopano zoyankhira mbali zonse, kuphatikiza zoyima ndi zopingasa.
- Zowonjezera ngalawa za flexbox utility .
- Watsitsidwa kalasi
.center-block
yatsopano.mx-auto
.
- Clearfix yasinthidwa kuti igwetse chithandizo chamitundu yakale.
Zosakaniza za prefix
Bootstrap 3's vedor prefix mixins, omwe adachotsedwa mu v3.2.0, achotsedwa mu Bootstrap 4. Popeza timagwiritsa ntchito Autoprefixer , sizilinso zofunika.
Anachotsa zosakaniza zotsatirazi : 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
Zolemba
Zolemba zathu zidawonjezedwanso pagulu lonse. Nayi zotsika pansi:
- Tikugwiritsabe ntchito Jekyll, koma tili ndi mapulagini osakanikirana:
bugify.rb
imagwiritsidwa ntchito kulemba bwino zomwe zalembedwa patsamba lathu la bugs .example.rb
ndi foloko yokhazikika ya pulogalamu yowonjezerahighlight.rb
yokhazikika, zomwe zimalola kuwongolera kosavuta kwachitsanzo.callout.rb
ndi foloko yomweyi, koma idapangidwira ma callout athu apadera.- jekyll-toc imagwiritsidwa ntchito kupanga zomwe zili mkati.
- Zolemba zonse zidalembedwanso ku Markdown (m'malo mwa HTML) kuti zisinthidwe mosavuta.
- Masamba akonzedwanso kuti akhale ndi zinthu zosavuta komanso kuti azitsogolera anthu osavuta kumva.
- Tidachoka ku CSS wamba kupita ku SCSS kuti tipeze mwayi pazosintha za Bootstrap, zosakaniza, ndi zina zambiri.
Zothandizira zomvera
Zosintha @screen-
zonse zachotsedwa mu v4.0.0. Gwiritsani ntchito media-breakpoint-up()
, media-breakpoint-down()
, kapena media-breakpoint-only()
Sass zosakaniza kapena $grid-breakpoints
mapu a Sass m'malo mwake.
Makalasi athu omvera achotsedwa makamaka m'malo mwazinthu display
zofunikira.
- The
.hidden
and.show
classes have been removed because they conflicted with jQuery’s$(...).hide()
and$(...).show()
methods. Instead, try toggling the[hidden]
attribute or use inline styles likestyle="display: none;"
andstyle="display: block;"
. - All
.hidden-
classes have been removed, save for the print utilities which have been renamed.- Removed from 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
- Removed from 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
- Removed from v3:
- Print utilities no longer start with
.hidden-
or.visible-
, but with.d-print-
.- Old names:
.visible-print-block
,.visible-print-inline
,.visible-print-inline-block
,.hidden-print
- New classes:
.d-print-block
,.d-print-inline
,.d-print-inline-block
,.d-print-none
- Old names:
M'malo mogwiritsa ntchito .visible-*
makalasi olaula, mumapangitsa kuti chinthucho chiwoneke posachibisa pazithunzizo. Mutha kuphatikiza .d-*-none
kalasi imodzi ndi .d-*-block
kalasi imodzi kuti muwonetse chinthu pakanthawi kochepa ka makulidwe a sikirini (monga .d-none.d-md-block.d-xl-none
amawonetsa chinthucho pazida zapakati ndi zazikulu).
Zindikirani kuti kusintha kwa grid breakpoints mu v4 kumatanthauza kuti muyenera kupita kumalo amodzi okulirapo kuti mukwaniritse zotsatira zomwezo. Makasitomala atsopano omvera samayesa kutengera zochitika zochepa pomwe mawonekedwe a chinthu sangathe kufotokozedwa ngati kukula kosiyana kosiyana; m'malo mwake muyenera kugwiritsa ntchito CSS yanthawi zonse.