SourceMakadhi
Makadhi eBootstrap anopa chinochinjika uye chinowedzera chemukati chigadziko chine akawanda akasiyana uye sarudzo.
Kadhi igaba rinochinjika uye rinowedzerwa. Inosanganisira sarudzo dzemusoro uye tsoka, zvakasiyana siyana zvemukati, mamiriro emukati mavara, uye ane simba ekuratidzira sarudzo. Kana iwe uchijairana neBootstrap 3, makadhi anotsiva edu ekare mapaneru, matsime, uye zvigunwe. Kuita kwakafanana kune izvo zvikamu zvinowanikwa semakirasi ekugadzirisa emakadhi.
Makadhi anovakwa ane madiki markup uye masitaera sezvinobvira, asi achiri kugona kuendesa toni yekutonga uye kugadzirisa. Yakavakwa neflexbox, ivo vanopa kurongeka kuri nyore uye kusanganisa zvakanaka nezvimwe zvinhu zveBootstrap. Ivo havana margin
nekusarudzika, saka shandisa nzvimbo dzekushandisa sezvinodiwa.
Pazasi pane muenzaniso wekadhi yekutanga ine zvakasanganiswa zvemukati uye yakasarudzika hupamhi. Makadhi haana hupamhi hwakatarwa kuti atange, saka ivo vanongozadza hupamhi hwakazara hwemubereki chinhu. Izvi zvinogadziriswa zviri nyore nemaitiro edu akasiyana-siyana ekuyera saizi .
Kadhi zita
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Enda kune imwe nzvimbo
Makadhi anotsigira zvakasiyana-siyana zvemukati, zvinosanganisira mifananidzo, zvinyorwa, rondedzero mapoka, zvinongedzo, nezvimwe. Pazasi pane mienzaniso yezvinotsigirwa.
Nzvimbo yekuvaka yekadhi ndiyo .card-body
. Ishandise pese paunenge uchida chikamu chakaputirwa mukati mekadhi.
Aya mamwe mavara mukati meboka remakadhi.
Mazita, zvinyorwa, uye zvinongedzo
Mazita emakadhi anoshandiswa nekuwedzera .card-title
kune <h*>
tag. Nenzira imwecheteyo, zvinongedzo zvinowedzerwa uye zvinoiswa padivi peumwe nekuwedzera .card-link
kune <a>
tag.
Subtitles anoshandiswa nekuwedzera a .card-subtitle
kune <h*>
tag. Kana iyo .card-title
uye .card-subtitle
zvinhu zvakaiswa .card-body
muchimwe chinhu, zita rekadhi uye subtitle inowirirana zvakanaka.
Kadhi zita
Kadhi subtitle
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Kadhi link
Imwe link
.card-img-top
inoisa mufananidzo kumusoro kwekadhi. Ne .card-text
, mavara anogona kuwedzerwa pakadhi. Mavara ari mukati .card-text
anogona zvakare kunyorwa neakajairwa HTML tag.
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Gadzira zvinyorwa zvemukati mukadhi ine flush list group.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum uye eros
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum uye eros
Sanganisa uye sanganisa akawanda emukati mhando kugadzira kadhi raunoda, kana kukanda zvese imomo. Pazasi panoratidzwa masitaera emifananidzo, mabhuroko, masitaera emavara, neboka rerondedzero — zvese zvakaputirwa mukadhi rakafara.
Kadhi zita
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum uye eros
Wedzera zvingasarudzwa musoro uye/kana tsoka mukati mekadhi.
Special title treatment
Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Enda kune imwe nzvimbo
Misoro yemakadhi inogona kunyorwa nekuwedzera .card-header
kune <h*>
zvinhu.
Special title treatment
Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Enda kune imwe nzvimbo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Special title treatment
Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Enda kune imwe nzvimbo
Makadhi haafungi nezvekutanga width
, saka anozove akafara 100% kunze kwekunge zvataurwa neimwe nzira. Iwe unogona kushandura izvi sezvinodiwa netsika CSS, makirasi egidhi, grid Sass musanganiswa, kana zvishandiso.
Uchishandisa gidhi, putira makadhi mumakoramu nemitsetse sezvinodiwa.
Special title treatment
Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Enda kune imwe nzvimbo
Special title treatment
Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Enda kune imwe nzvimbo
Shandisa edu mashoma eanowanikwa saizi ekushandisa kukurumidza kuseta hupamhi hwekadhi.
Kadhi zita
Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Bhatani
Kadhi zita
Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Bhatani
Shandisa CSS yakajairwa mumashiti ako ezvitaera kana semataera emukati kuseta hupamhi.
Special title treatment
Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Enda kune imwe nzvimbo
Unogona kukurumidza kushandura kurongeka kwemavara echero kadhi-rikazara kana zvikamu zvakati- nemakirasi edu ekugadzirisa zvinyorwa .
Special title treatment
Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Enda kune imwe nzvimbo
Special title treatment
Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Enda kune imwe nzvimbo
Special title treatment
Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Enda kune imwe nzvimbo
Wedzera kumwe kufamba kune musoro wekadhi (kana block) neBootstrap's nav components .
Special title treatment
Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Enda kune imwe nzvimbo
Special title treatment
Nezvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Enda kune imwe nzvimbo
Makadhi anosanganisira mashoma sarudzo dzekushanda nemifananidzo. Sarudza kubva pakuwedzera "makepisi emifananidzo" kune chero kumagumo kwekadhi, kuvhara mifananidzo ine kadhi zvirimo, kana kungoisa mufananidzo wacho mukadhi.
Zvakafanana nemusoro uye tsoka, makadhi anogona kusanganisira kumusoro uye pasi "mapikicha emifananidzo" - mifananidzo iri kumusoro kana pasi pekadhi.
Kadhi zita
Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.
Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Kadhi zita
Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.
Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Shandura mufananidzo kuseri kwekadhi uye wovharira zvinyorwa zvekadhi rako. Zvichienderana nemufananidzo, unogona kana kusada mamwe masitaera kana zvishandiso.
Kadhi zita
Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.
Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Makadhi anosanganisira akasiyana sarudzo dzekugadzirisa mabviro avo, miganhu, uye ruvara.
Shandisa zvinyorwa uye zvemashure zvinoshandiswa kuti uchinje kutaridzika kwekadhi.
Musoro wekadhi rekutanga
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Sekondari kadhi zita
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Kubudirira kadhi zita
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Danger card title
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Yambiro kadhi zita
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Info kadhi zita
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Chiedza kadhi zita
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Musoro wekadhi rakasviba
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Kuendesa zvinoreva kunobatsira matekinoroji
Kushandisa ruvara kuwedzera zvinoreva kunongopa chiratidzo chekuona, icho chisingazopirwe kune vashandisi vetekinoroji yekubatsira - senge zvidzitiro zvekuverenga. Ita shuwa kuti ruzivo rwunoratidzwa neruvara rwuri pachena kubva pane zvirimo (semuzvinyorwa zvinooneka), kana kuti zvinosanganisirwa neimwe nzira, senge mamwe mavara akavigwa .sr-only
nekirasi.
Shandisa bhodha utilities kuchinja chete border-color
kadhi. Ziva kuti unogona kuisa .text-{color}
makirasi kumubereki .card
kana chikamu chidiki chezviri mukati mekadhi sezvakaratidzwa pasi apa.
Musoro wekadhi rekutanga
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Sekondari kadhi zita
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Kubudirira kadhi zita
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Danger card title
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Yambiro kadhi zita
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Info kadhi zita
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Chiedza kadhi zita
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Musoro wekadhi rakasviba
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Iwe unogona zvakare kushandura miganhu pane kadhi musoro uye tsoka sezvinodiwa, uye kunyange kubvisa yavo background-color
ne .bg-transparent
.
Kubudirira kadhi zita
Mamwe mameseji emuenzaniso wekukurumidza kuvaka pane zita remakadhi uye kugadzira iyo yakawanda yemukati kadhi.
Pamusoro pekugadzira zviri mukati memakadhi, Bootstrap inosanganisira mashoma sarudzo yekuisa kunze akateedzana emakadhi. Parizvino, sarudzo dzemarongerwo idzi hadzisati dzapindura .
Shandisa mapoka emakadhi kupa makadhi sechinhu chimwe chete, chakanamirwa chinhu chine hupamhi hwakaenzana uye kureba makoramu. Mapoka emakadhi anoshandisa display: flex;
kuzadzisa saizi yavo yakafanana.
Kadhi zita
Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.
Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Kadhi zita
Iri kadhi rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Kadhi zita
Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Iri kadhi rine zvakato rebesa kupfuura rekutanga kuratidza kuti yakaenzana kureba chiito.
Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Paunenge uchishandisa mapoka emakadhi ane tsoka, izvo zvirimo zvinongoerekana zvamira.
Kadhi zita
Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.
Kadhi zita
Iri kadhi rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Kadhi zita
Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Iri kadhi rine zvakato rebesa kupfuura rekutanga kuratidza kuti yakaenzana kureba chiito.
Unoda seti yehupamhi hwakaenzana uye makadhi akareba asina kubatanidzwa kune mumwe? Shandisa mapepa emakadhi.
Kadhi zita
Iri ikaradhi refu rine mavara anotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.
Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Kadhi zita
Iri kadhi rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Kadhi zita
Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Iri kadhi rine zvakato rebesa kupfuura rekutanga kuratidza kuti yakaenzana kureba chiito.
Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Sezvakangoita nemapoka emakadhi, ma footer emakadhi mumadhishi anozongoerekana asimuka.
Kadhi zita
Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.
Kadhi zita
Iri kadhi rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Kadhi zita
Iri ikadhi rakakura rine mavara anotsigira pazasi seanotungamira echisikigo kune zvimwe zvemukati. Iri kadhi rine zvakato rebesa kupfuura rekutanga kuratidza kuti yakaenzana kureba chiito.
Makadhi anogona kurongeka kuita Masonry -senge makoramu ane CSS chete nekuaputira mu .card-columns
. Makadhi anovakwa ane CSS column
zvivakwa panzvimbo yeflexbox kuitira kurongeka kuri nyore. Makadhi anoodha kubva kumusoro kusvika pasi uye kuruboshwe kuenda kurudyi.
Musoro! Mileage yako nemakoramu emakadhi inogona kusiyana. Kuti makadhi asatyoke pamakoramu, tinofanira kuamisa kuti display: inline-block
ave sezvo column-break-inside: avoid
asati apedza bulletproof.
Musoro wekadhi unopeta kumutsara mutsva
Iri ikaradhi refu rine mavara anotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati. Izvi zvirimo zvati rebei zvishoma.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Kadhi zita
Iri kadhi rine zvinyorwa zvinotsigira pazasi sechisikigo chinotungamira kune zvimwe zvemukati.
Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Kadhi zita
Iri kadhi rine musoro wenguva dzose uye ndima pfupi yezvinyorwa pazasi paro.
Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat ante.
Kadhi zita
Iri nderimwe kadhi rine musoro uye zvinyorwa zvinotsigira pazasi. Iri kadhi rine zvimwe zvekuwedzera kuita kuti rirebe zvishoma pazere.
Yakapedzisira kugadziridzwa maminetsi matatu apfuura
Makolamu emakadhi anogonawo kuwedzerwa uye kugadziridzwa neimwe kodhi yekuwedzera. Inoratidzwa pazasi ndeyekuwedzera .card-columns
kwekirasi tichishandisa iyo yakafanana CSS yatinoshandisa-CSS makolamu- kugadzira seti yeanoteerera tiers yekushandura nhamba yemakoramu.