SourceIkarita
Ikarita ya Bootstrap itanga ibintu byoroshye kandi byagutse birimo ibintu byinshi hamwe namahitamo.
Ibyerekeye
Ikarita ni ibintu byoroshye kandi byagutse. Harimo amahitamo kumitwe na footers, ibintu byinshi bitandukanye, ibara ryinyuma yibara, hamwe nuburyo bukomeye bwo kwerekana. Niba umenyereye Bootstrap 3, amakarita asimbuza panne yacu ishaje, amariba, na thumbnail. Imikorere isa nibi bice irahari nkamasomo yo guhindura amakarita.
Urugero
Ikarita yubatswe hamwe na marike ntoya nuburyo bushoboka, ariko iracyashobora gutanga toni yo kugenzura no kwihindura. Yubatswe na flexbox, itanga guhuza byoroshye no kuvanga neza nibindi bikoresho bya Bootstrap. Ntabwo bafite margin
muburyo busanzwe, koresha rero umwanya utandukanye nkuko bikenewe.
Hasi ni urugero rwikarita yibanze irimo ibintu bivanze nubugari buhamye. Ikarita idafite ubugari buhamye bwo gutangira, bityo izuzuza bisanzwe ubugari bwuzuye bwibintu byababyeyi. Ibi biroroshye guhindurwa hamwe nuburyo butandukanye bwo guhitamo .
Umutwe w'amakarita
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Genda ahantu runaka
Ubwoko bwibirimo
Ikarita ishyigikira ibintu byinshi bitandukanye, birimo amashusho, inyandiko, amatsinda y'urutonde, amahuza, nibindi byinshi. Hano hari ingero zibyashyigikiwe.
Umubiri
Inyubako yikarita ni .card-body
. Koresha igihe cyose ukeneye igice cya padi mu ikarita.
Iyi ni inyandiko imwe mumubiri wikarita.
Amazina, inyandiko, hamwe
.card-title
Amazina yamakarita akoreshwa mukongeramo <h*>
tagi. .card-link
Muri ubwo buryo , amahuza yongeweho kandi ashyirwa kuruhande hagati yongeyeho <a>
tagi.
Subtitles zikoreshwa mukongeramo .card-subtitle
a <h*>
kurirango. Niba i .card-title
hamwe .card-subtitle
nibintu byashyizwe .card-body
mubintu, ikarita yumutwe na subtitle bihujwe neza.
Umutwe w'amakarita
Ikarita subtitle
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Ihuza Ikarita
Undi murongo
Amashusho
.card-img-top
shyira ishusho hejuru yikarita. Hamwe .card-text
, inyandiko irashobora kongerwaho ikarita. Inyandiko imbere .card-text
irashobora kandi kwandikwa hamwe nibisanzwe bya HTML.
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Andika amatsinda
Kora urutonde rwibirimo mu ikarita hamwe na flush urutonde rwitsinda.
- Cras justo odio
- Dapibus ac facilisis muri
- Vestibulum kuri eros
- Cras justo odio
- Dapibus ac facilisis muri
- Vestibulum kuri eros
Igikoni
Kuvanga no guhuza ubwoko bwinshi bwibirimo kugirango ukore ikarita ukeneye, cyangwa uta ibintu byose aho. Hano herekanwa amashusho yuburyo, guhagarika, imiterere yinyandiko, hamwe nitsinda ryurutonde - byose bipfunyitse mukarita yagutse.
Umutwe w'amakarita
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
- Cras justo odio
- Dapibus ac facilisis muri
- Vestibulum kuri eros
Ongeraho umutwe utabishaka hamwe na / cyangwa ikirenge mu ikarita.
Kuvura umutwe wihariye
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Genda ahantu runaka
Imitwe yamakarita irashobora gutunganywa wongeyeho .card-header
ibintu <h*>
.
Kuvura umutwe wihariye
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Genda ahantu runaka
Lorem ipsum dolor icara amet, consectetur adipiscing elit. Byuzuye posuere erat ante.
Kuvura umutwe wihariye
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Genda ahantu runaka
Ingano
Ikarita ifata ko idasanzwe width
yo gutangira, bityo izaba yagutse 100% keretse bivuzwe ukundi. Urashobora guhindura ibi nkuko bikenewe hamwe na CSS yihariye, ibyiciro bya grid, grid Sass ivanga, cyangwa ibikorwa.
Gukoresha marike
Ukoresheje gride, funga amakarita mumirongo nimirongo nkuko bikenewe.
Kuvura umutwe wihariye
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Genda ahantu runaka
Kuvura umutwe wihariye
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Genda ahantu runaka
Gukoresha ibikorwa byingirakamaro
Koresha intoki zacu ziboneka zingirakamaro kugirango ushireho ubugari bwikarita.
Umutwe w'amakarita
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Button
Umutwe w'amakarita
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Button
Ukoresheje CSS yihariye
Koresha CSS yihariye mumpapuro zawe cyangwa nkuburyo bwo kumurongo kugirango ushire ubugari.
Kuvura umutwe wihariye
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Genda ahantu runaka
Guhuza inyandiko
Urashobora guhindura byihuse guhuza ikarita iyo ari yo yose - mubice byose cyangwa ibice byihariye - hamwe namasomo yacu ahuza amasomo .
Kuvura umutwe wihariye
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Genda ahantu runaka
Kuvura umutwe wihariye
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Genda ahantu runaka
Kuvura umutwe wihariye
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Genda ahantu runaka
Kugenda
Ongeraho kugendagenda kumutwe wikarita (cyangwa guhagarika) hamwe nibice bya Bootstrap .
Kuvura umutwe wihariye
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Genda ahantu runaka
Kuvura umutwe wihariye
Hamwe ninyandiko ishigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Genda ahantu runaka
Amashusho
Ikarita irimo amahitamo make yo gukorana namashusho. Hitamo mugushyiramo "caps caps" kumpera yikarita, gutwikira amashusho hamwe nibikarita, cyangwa gushyiramo ishusho mukarita.
Amashusho
Bisa n'imitwe n'ibirenge, amakarita arashobora gushiramo hejuru no hepfo "ishusho yerekana amashusho" - amashusho hejuru cyangwa hepfo yikarita.
Umutwe w'amakarita
Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.
Iheruka kuvugururwa 3 mins ishize
Umutwe w'amakarita
Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.
Iheruka kuvugururwa 3 mins ishize
Ishusho
Hindura ishusho mumakarita hanyuma ushireho inyandiko yikarita yawe. Ukurikije ishusho, urashobora cyangwa udakeneye ubundi buryo cyangwa ibikorwa byingirakamaro.
Umutwe w'amakarita
Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.
Iheruka kuvugururwa 3 mins ishize
Menya ko ibirimo bitagomba kuba binini kurenza uburebure bwishusho. Niba ibirimo binini kuruta ishusho ibirimo bizerekanwa hanze yishusho.
Uhagaritse
Ukoresheje urusobekerane rwa gride hamwe nibyiciro byingirakamaro, amakarita arashobora gukorwa atambitse muburyo bugendanwa kandi bworoshye. Murugero rukurikira, dukuraho imiyoboro ya gride hamwe .no-gutters
no gukoresha .col-md-*
amasomo kugirango ikarita itambike kuri md
point point. Ibindi byahinduwe birashobora gukenerwa bitewe nibikarita yawe.
Umutwe w'amakarita
Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.
Iheruka kuvugururwa 3 mins ishize
Imiterere yamakarita
Ikarita ikubiyemo amahitamo atandukanye yo gutandukanya imiterere yabo, imipaka, n'ibara.
Amavu n'amavuko
Koresha inyandiko ninyuma yibikorwa kugirango uhindure isura yikarita.
Umutwe w'ikarita y'ibanze
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Ikarita yicyiciro cya kabiri
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Intsinzi yikarita
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'amakarita y'akaga
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'ikarita yo kuburira
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'amakarita y'amakuru
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'ikarita yoroheje
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'ikarita yijimye
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Gutanga ibisobanuro kubuhanga bufasha
Gukoresha ibara kugirango wongere ibisobanuro bitanga gusa icyerekezo cyerekana, kitazashyikirizwa abakoresha tekinoroji ifasha - nk'abasoma ecran. Menya neza ko amakuru yerekanwe n'ibara agaragara uhereye kubirimo ubwabyo (urugero: inyandiko igaragara), cyangwa bigashyirwa muburyo butandukanye, nk'inyandiko y'inyongera ihishe hamwe .sr-only
n'ishuri.
Imipaka
Koresha imipaka ikoreshwa kugirango uhindure gusa border-color
ikarita. Menya ko ushobora gushyira .text-{color}
amasomo kubabyeyi .card
cyangwa agace k'ibikarita nkuko bigaragara hano hepfo.
Umutwe w'ikarita y'ibanze
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Ikarita yicyiciro cya kabiri
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Intsinzi yikarita
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'amakarita y'akaga
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'ikarita yo kuburira
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'amakarita y'amakuru
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'ikarita yoroheje
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Umutwe w'ikarita yijimye
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Kuvanga ibikorwa byingirakamaro
Urashobora kandi guhindura imipaka kumutwe wikarita na footer nkuko bikenewe, ndetse background-color
ukanakuraho .bg-transparent
.
Intsinzi yikarita
Bimwe mubyihuta byanditse byubaka kumutwe wikarita no gukora igice kinini cyibirimo.
Imiterere y'amakarita
Usibye gutunganya ibiri mu makarita, Bootstrap ikubiyemo amahitamo make yo gushiraho amakarita. Kugeza magingo aya, amahitamo yimiterere ntabwo aritabira .
Amatsinda yamakarita
Koresha amatsinda yamakarita kugirango utange amakarita nkimwe, ifatanye nibintu bifite ubugari bungana nuburebure bwinkingi. Amatsinda yamakarita akoresha display: flex;
kugirango agere ku bunini bumwe.
Umutwe w'amakarita
Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.
Iheruka kuvugururwa 3 mins ishize
Umutwe w'amakarita
Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe byinjira mubindi bintu.
Iheruka kuvugururwa 3 mins ishize
Umutwe w'amakarita
Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Iyi karita ifite ibintu birebire kuruta ibya mbere byerekana ko ibikorwa bingana bingana.
Iheruka kuvugururwa 3 mins ishize
Iyo ukoresheje amakarita yamakarita afite ibirenge, ibiyirimo bizahita bitonda umurongo.
Umutwe w'amakarita
Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe byinjira mubindi bintu.
Umutwe w'amakarita
Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Iyi karita ifite ibintu birebire kuruta ibya mbere byerekana ko ibikorwa bingana bingana.
Ikarita
Ukeneye urutonde rwubugari buringaniye namakarita yuburebure adafatanye? Koresha amakarita.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Iheruka kuvugururwa 3 mins ishize
Umutwe w'amakarita
Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe byinjira mubindi bintu.
Iheruka kuvugururwa 3 mins ishize
Umutwe w'amakarita
Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Iyi karita ifite ibintu birebire kuruta ibya mbere byerekana ko ibikorwa bingana bingana.
Iheruka kuvugururwa 3 mins ishize
Nka hamwe nitsinda ryamakarita, amakarita yikarita mumagorofa azahita atonda umurongo.
Umutwe w'amakarita
Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe byinjira mubindi bintu.
Umutwe w'amakarita
Iyi ni ikarita yagutse ifite inyandiko zishyigikira hepfo nkibisanzwe biganisha kubintu byiyongera. Iyi karita ifite ibintu birebire kuruta ibya mbere byerekana ko ibikorwa bingana bingana.
Ikarita ya gride
Koresha sisitemu ya Bootstrap hamwe .row-cols
namasomo yayo kugirango ugenzure umubare wa grid inkingi (uzengurutse amakarita yawe) werekana kumurongo. Kurugero, hano .row-cols-1
dushira amakarita kumurongo umwe, hanyuma .row-cols-md-2
ugabanye amakarita ane kugirango ubugari bungana mumirongo myinshi, uhereye kumurongo wo hagati.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Hindura .row-cols-3
hanyuma uzabona ikarita ya kane ipfunyitse.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Mugihe ukeneye uburebure bungana, ongeraho .h-100
amakarita. Niba ushaka uburebure bungana muburyo budasanzwe, urashobora gushira $card-height: 100%
muri Sass.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Umutwe w'amakarita
Iyi ni ikarita ngufi.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu.
Umutwe w'amakarita
Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Inkingi
Ikarita irashobora gutondekwa muburyo bwa Masonry busa na CSS gusa ubiziritse .card-columns
. Ikarita yubatswe hamwe na CSS column
aho kuba flexbox kugirango byoroshye guhuza. Ikarita yatumijwe kuva hejuru kugeza hasi hanyuma ibumoso ugana iburyo.
Umutwe! Mileage yawe hamwe namakarita yinkingi irashobora gutandukana. Kugirango wirinde amakarita kumena inkingi, tugomba kuyashyiraho display: inline-block
nkuko column-break-inside: avoid
atari igisubizo cyamasasu.
Umutwe w'amakarita uzengurutse umurongo mushya
Iyi ni ikarita ndende ifite inyandiko zishyigikira hepfo nkibisanzwe-byinjira mubindi bintu. Ibirimo ni birebire.
Lorem ipsum dolor icara amet, consectetur adipiscing elit. Byuzuye posuere erat ante.
Umutwe w'amakarita
Iyi karita ifite inyandiko zishyigikira hepfo nkibisanzwe byinjira mubindi bintu.
Iheruka kuvugururwa 3 mins ishize
Lorem ipsum dolor icara amet, consectetur adipiscing elit. Byuzuye posuere erat.
Umutwe w'amakarita
Iyi karita ifite umutwe usanzwe hamwe na paragraphe ngufi yinyandiko munsi yacyo.
Iheruka kuvugururwa 3 mins ishize
Lorem ipsum dolor icara amet, consectetur adipiscing elit. Byuzuye posuere erat ante.
Umutwe w'amakarita
Iyi ni indi karita ifite umutwe hamwe ninyandiko ishyigikira hepfo. Iyi karita ifite ibintu byongeweho kugirango birebire gato muri rusange.
Iheruka kuvugururwa 3 mins ishize
Inkingi yamakarita irashobora kandi kwagurwa no gutegekwa hamwe na kode yinyongera. Iyerekanwa hepfo .card-columns
niyagurwa ryishuri dukoresheje CSS imwe dukoresha-Inkingi ya CSS - kugirango tubyare urutonde rwibisubizo kugirango duhindure umubare winkingi.