Kaari
Ka whakaratohia e nga kaari Bootstrap he ipu ihirangi ngawari me te whanui me nga momo rereke me nga whiringa maha.
Mō
Ko te kaari he ipu ihirangi ngawari me te whakawhanui. Kei roto ko nga whiringa mo nga pane me nga hiku, te tini o nga momo ihirangi, nga tae papamuri horopaki, me nga whiringa whakaatu kaha. Mena kei te mohio koe ki a Bootstrap 3, ka whakakapihia e nga kaari o maatau panui tawhito, puna, me nga karakōnui. He rite nga mahi ki era waahanga e waatea ana hei karaehe whakarereke mo nga kaari.
Tauira
Ka hangaia nga kaari me nga tohu iti me nga momo ka taea, engari kei te whakahaere tonu ki te kawe i te tone mana me te whakaritenga. He mea hanga ki te flexbox, he ngawari te whakarite me te uru pai ki etahi atu waahanga Bootstrap. Karekau he margintaunoa, na reira whakamahia nga taputapu mokowhiti ina hiahiatia.
Kei raro nei he tauira o te kaari taketake me nga ihirangi whakauru me te whanui pumau. Karekau he whanui tuturu o nga kaari hei tiimata, no reira ka whakakiia te whanuitanga o tona huānga matua. He ngawari te whakarite me o maatau momo momo rahinga .
taitara kāri
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
Haere ki tetahi wahi<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Momo ihirangi
Ka tautokohia e nga kaari te maha o nga momo ihirangi, tae atu ki nga whakaahua, nga tuhinga, nga roopu rarangi, nga hononga, me etahi atu. Kei raro nei nga tauira o nga mea e tautokohia ana.
Tinana
Ko te paraka hanga o te kaari ko te .card-body. Whakamahia i nga wa katoa e hiahia ana koe ki tetahi waahanga kapi i roto i te kaari.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Nga taitara, nga tuhinga me nga hononga
Ka whakamahia nga taitara kaari ma te taapiri .card-titleki tetahi <h*>tohu. Waihoki, ka taapirihia nga hononga ka tuu ki te taha o tetahi ki tetahi ma te taapiri .card-linkki tetahi <a>tohu.
Ka whakamahia nga taitararoto ma te taapiri i te tohu .card-subtitleki tetahi <h*>tohu. Mena ka whakauruhia nga taonga .card-titleme nga .card-subtitletaonga ki roto i tetahi .card-bodymea, he pai te hono o te taitara kaari me te taitararoto.
taitara kāri
Taitararoto kāri
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
Hononga kaari He hononga ano<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>Whakaahua
.card-img-toptuu i te ahua ki runga o te kaari. Ma .card-textte , ka taea te taapiri kupu ki te kaari. Ka .card-texttaea hoki te whakaingoatia nga kupu o roto ki nga tohu HTML paerewa.
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Whakarārangihia ngā rōpū
Waihangahia he rarangi o nga ihirangi ki roto i te kaari me te roopu rarangi ma.
- Kore noa odio
- Dapibus ac facilisis in
- Vestibulum me te eros
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>- Kore noa odio
- Dapibus ac facilisis in
- Vestibulum me te eros
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>Totohu kihini
Whakaranuhia me te whakahono i nga momo ihirangi maha hei hanga i te kaari e hiahia ana koe, ka maka ranei nga mea katoa ki reira. Kei raro nei ko nga ahua ahua, poraka, momo tuhinga, me tetahi roopu rarangi—ka takai katoa ki te kaari whanui-whanui.
taitara kāri
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
- Kore noa odio
- Dapibus ac facilisis in
- Vestibulum me te eros
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>Pane me te hiku
Tāpirihia he pane kōwhiri, hiku rānei ki roto i tētahi kāri.
Te maimoatanga taitara motuhake
Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
Haere ki tetahi wahi<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Ka taea te whakaahua nga pane kaari ma te taapiri .card-headerki <h*>nga huānga.
Kua whakaatuhia
Te maimoatanga taitara motuhake
Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
Haere ki tetahi wahi<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>Te maimoatanga taitara motuhake
Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
Haere ki tetahi wahi<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>Te rahinga
Karekau he kaari ka widthtiimata, no reira ka 100% te whanui ki te kore e kii. Ka taea e koe te whakarereke i te mea e hiahiatia ana me te CSS ritenga, nga karaehe matiti, nga whakaranu Sass matiti, me nga taputapu.
Te whakamahi tohu matiti
Ma te whakamahi i te matiti, takai nga kaari ki nga pou me nga rarangi ka hiahiatia.
Te maimoatanga taitara motuhake
Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
Haere ki tetahi wahiTe maimoatanga taitara motuhake
Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
Haere ki tetahi wahi<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>Te whakamahi taputapu
Whakamahia a maatau ringaringa o nga taputapu rahi e waatea ana ki te whakarite tere i te whanui o te kaari.
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>Ma te whakamahi i te CSS ritenga
Whakamahia te CSS ritenga i roto i o pepa ahua, hei momo raina ranei hei tautuhi whanui.
Te maimoatanga taitara motuhake
Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
Haere ki tetahi wahi<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Tirohanga kupu
Ka taea e koe te whakarereke tere i te tirohanga kupu o tetahi kaari—i tona katoa, i nga waahanga motuhake ranei—me o maatau karaehe whakatika kupu .
Te maimoatanga taitara motuhake
Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
Haere ki tetahi wahiTe maimoatanga taitara motuhake
Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
Haere ki tetahi wahiTe maimoatanga taitara motuhake
Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
Haere ki tetahi wahi<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-right" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Whakaterenga
Tāpirihia etahi whakaterenga ki te pane o te kaari (paraka ranei) me nga waahanga whakaterenga a Bootstrap .
Te maimoatanga taitara motuhake
Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
Haere ki tetahi wahi<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Te maimoatanga taitara motuhake
Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
Haere ki tetahi wahi<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Whakaahua
Kei roto i nga kaari etahi whiringa mo te mahi me nga whakaahua. Whiriwhiria mai i te taapiri i nga "potae atahanga" ki tetahi pito o te kaari, whakakikorua i nga whakaahua me te ihirangi kaari, te whakauru noa ranei i te ahua ki roto i te kaari.
Nga potae whakaahua
He rite ki nga pane me nga hiku, ka taea e nga kaari te whakauru i runga me raro nga "potae whakaahua" - nga whakaahua kei runga, i raro ranei o te kaari.
taitara kāri
He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
Whakahoutanga whakamutunga 3 mineti ki muri
taitara kāri
He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
Whakahoutanga whakamutunga 3 mineti ki muri
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-top" alt="...">
</div>Whakakikorua pikitia
Hurihia he atahanga hei papamuri kaari ka whakakikoruatia te tuhinga o to kaari. I runga i te ahua, ka hiahia pea koe ki etahi atu momo, taputapu taputapu ranei.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>Kia mahara ko te ihirangi kia kaua e nui ake i te teitei o te ahua. Mena he nui ake te ihirangi i te ahua ka whakaatuhia nga ihirangi ki waho o te ahua.
Whakapae
Ma te whakamahi i te huinga o nga karaehe matiti me te whaipainga, ka taea te hanga whakapae i nga kaari i roto i te huarahi ngawari me te urupare. I roto i te tauira i raro nei, ka tangohia e matou nga awaawa matiti .no-guttersme te whakamahi i .col-md-*nga karaehe ki te hanga whakapae i te kaari i te mdwaahi pakaru. Ka hiahiatia etahi atu whakatikatika i runga ano i to ihirangi kaari.
taitara kāri
He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
Whakahoutanga whakamutunga 3 mineti ki muri
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>Nga momo kaari
Kei roto i nga kaari nga momo whiringa mo te whakarite i o raatau papamuri, taitapa me te tae.
Papamuri me te tae
Whakamahia nga taputapu kuputuhi me te papamuri hei whakarereke i te ahua o te kaari.
taitara kāri tuatahi
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
taitara kāri tuarua
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
taitara kāri angitu
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
Te taitara kāri mōrearea
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
Taitara kāri whakatūpato
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
Taitara kaari korero
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
Te taitara kaari marama
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
Te taitara kāri pouri
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Te kawe i te tikanga ki nga hangarau awhina
Ko te whakamahi i te tae ki te taapiri i te tikanga he tohu tirohanga noa iho, kaore e tukuna ki nga kaiwhakamahi hangarau awhina - penei i nga kaipanui mata. Me mohio kei te kitea nga korero e tohuhia ana e te tae mai i te ihirangi ake (hei tauira, te tuhinga ka kitea), ka whakaurua ranei ma etahi atu huarahi, penei i etahi atu tuhinga huna ki te .sr-onlyakomanga.
Taitapa
Whakamahia nga taputapu taitapa hei huri noa i border-colorte kaari. Kia mahara ka taea e koe te whakatakoto .text-{color}i nga karaehe ki runga i te matua .card, ki tetahi waahanga iti ranei o nga ihirangi o te kaari penei i te whakaaturanga i raro nei.
taitara kāri tuatahi
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
taitara kāri tuarua
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
taitara kāri angitu
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
Te taitara kāri mōrearea
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
Taitara kāri whakatūpato
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
Taitara kaari korero
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
Te taitara kaari marama
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
Te taitara kāri pouri
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-warning">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-info">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>Mixins taputapu
Ka taea hoki e koe te huri i nga taitapa i runga i te pane o te kaari me te hiku ina hiahiatia, me te tango ano i a raatau background-colorme te .bg-transparent.
taitara kāri angitu
Ko etahi kupu tauira tere hei hanga ki runga i te taitara kaari me te hanga i te nuinga o nga ihirangi o te kaari.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>Tahora kaari
I tua atu i te hanga i nga korero i roto i nga kaari, kei roto i a Bootstrap etahi whiringa mo te whakatakoto i nga raupapa kaari. I tenei wa, kaore ano kia aro mai enei whiringa whakatakotoranga .
Nga roopu kaari
Whakamahia nga roopu kaari hei whakaputa i nga kaari hei huānga hono kotahi me nga pou whanui me te teitei. Ka whakamahia display: flex;e nga roopu kaari ki te whakatutuki i o raatau rahinga.
taitara kāri
He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
Whakahoutanga whakamutunga 3 mineti ki muri
taitara kāri
Kei roto i tenei kaari nga kupu tautoko i raro hei arataki maori ki etahi atu ihirangi.
Whakahoutanga whakamutunga 3 mineti ki muri
taitara kāri
He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He roa ake te ihirangi o tenei kaari i te tuatahi ki te whakaatu i taua mahinga teitei rite.
Whakahoutanga whakamutunga 3 mineti ki muri
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>I te wa e whakamahi ana i nga roopu kaari me nga hiku, ka raina aunoa o raatau ihirangi.
taitara kāri
He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
taitara kāri
Kei roto i tenei kaari nga kupu tautoko i raro hei arataki maori ki etahi atu ihirangi.
taitara kāri
He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He roa ake te ihirangi o tenei kaari i te tuatahi ki te whakaatu i taua mahinga teitei rite.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>Nga papa kaari
Kei te hiahia he huinga o nga kaari whanui me te teitei e rite ana kaore i te piri tetahi ki tetahi? Whakamahia nga papa kaari.
taitara kāri
He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
Whakahoutanga whakamutunga 3 mineti ki muri
taitara kāri
Kei roto i tenei kaari nga kupu tautoko i raro hei arataki maori ki etahi atu ihirangi.
Whakahoutanga whakamutunga 3 mineti ki muri
taitara kāri
He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He roa ake te ihirangi o tenei kaari i te tuatahi ki te whakaatu i taua mahinga teitei rite.
Whakahoutanga whakamutunga 3 mineti ki muri
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Pērā i ngā rōpū kāri, ka whakarārangi aunoatia ngā hiku kāri i roto i ngā rahoraho.
taitara kāri
He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
taitara kāri
Kei roto i tenei kaari nga kupu tautoko i raro hei arataki maori ki etahi atu ihirangi.
taitara kāri
He kaari whanui ake tenei me nga kupu tautoko kei raro nei hei arataki tuuturu ki etahi atu ihirangi. He roa ake te ihirangi o tenei kaari i te tuatahi ki te whakaatu i taua mahinga teitei rite.
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>Kāri mātiti
Whakamahia te punaha matiti Bootstrap me ona .row-colskaraehe hei whakahaere i te maha o nga pou matiti (ka takai ki o kaari) ka whakaatuhia e koe mo ia rarangi. Hei tauira, kei konei te .row-cols-1whakatakoto i nga kaari ki runga i te pou kotahi, me .row-cols-md-2te wehe i nga kaari e wha kia rite te whanui puta noa i nga rarangi maha, mai i te wehenga waenga ki runga.
taitara kāri
He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
taitara kāri
He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
taitara kāri
He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
taitara kāri
He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Hurihia ki .row-cols-3a ka kite koe i te takai kaari tuawha.
taitara kāri
He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
taitara kāri
He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
taitara kāri
He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
taitara kāri
He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Ina hiahia koe kia rite te teitei, taapiri atu .h-100ki nga kaari. Mena kei te pirangi koe ki nga teitei rite ma te taunoa, ka taea e koe te whakanoho $card-height: 100%ki Sass.
taitara kāri
He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
taitara kāri
He kaari poto tenei.
taitara kāri
He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.
taitara kāri
He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>Ngā tīwae kāri
Ka taea te whakariterite i nga kaari ki roto i nga pou Masonry -like me te CSS noa ma te takai ki roto .card-columns. Ka hangaia nga kaari me nga taonga CSS columnhei utu mo te flexbox kia maamaa ake te tirohanga. Ka ota nga kaari mai i runga ki raro, maui ki matau.
Mahunga ake! Ka rereke pea to maero me nga pou kaari. Kia kore ai e pakaru nga kaari puta noa i nga pou, me whakanoho ki display: inline-blockte column-break-inside: avoidmea ehara i te otinga matā.
Ko te taitara kaari ka takai ki tetahi raina hou
He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti te roa o tenei ihirangi.
Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.
taitara kāri
Kei roto i tenei kaari nga kupu tautoko i raro hei arataki maori ki etahi atu ihirangi.
Whakahoutanga whakamutunga 3 mineti ki muri
Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat.
taitara kāri
He taitara rite tonu tenei kaari me tetahi waahanga kupu poto kei raro iho.
Whakahoutanga whakamutunga 3 mineti ki muri
Kei te noho tonu koe, ka whakatauhia e koe. Integer posuere erat a ante.
taitara kāri
He kaari ano tenei me te taitara me nga tuhinga tautoko kei raro nei. Kei roto i tenei kaari etahi mea taapiri kia paku ake te teitei o te katoa.
Whakahoutanga whakamutunga 3 mineti ki muri
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>Ka taea hoki te whakaroa me te whakarite i nga pou kaari me etahi waehere taapiri. E whakaatuhia ana i raro nei he toronga o te .card-columnskaraehe e whakamahi ana i te CSS ano e whakamahia ana e matou—nga pou CSS— ki te whakaputa i te huinga o nga taumata whakautu mo te huri i te maha o nga pou.
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 4;
}
@include media-breakpoint-only(xl) {
column-count: 5;
}
}