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 margin
taunoa, 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 poraka 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-title
ki tetahi <h*>
tohu. Waihoki, ka taapirihia nga hononga ka tuu ki te taha o tetahi ki tetahi ma te taapiri .card-link
ki tetahi <a>
tohu.
Ka whakamahia nga taitararoto ma te taapiri i te tohu .card-subtitle
ki tetahi <h*>
tohu. Mena ka whakauruhia nga taonga .card-title
me nga .card-subtitle
taonga ki roto i tetahi .card-body
mea, 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-top
tuu i te ahua ki runga o te kaari. Ma .card-text
te , ka taea te taapiri kupu ki te kaari. Ka .card-text
taea 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.
- He taonga
- He mea tuarua
- He mea tuatoru
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- He taonga
- He mea tuarua
- He mea tuatoru
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- He taonga
- He mea tuarua
- He mea tuatoru
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
Totohu kihini
Whakaranuhia me te taurite i nga momo ihirangi maha hei hanga i te kaari e hiahia ana koe, ka maka ranei nga mea katoa ki reira. Kei raro 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.
- He taonga
- He mea tuarua
- He mea tuatoru
<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">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</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, he hiku ranei ki roto i te kaari.
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-header
ki <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>
He korero rongonui, kei roto i te huānga blockquote.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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 width
tiimata, 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 Kuputuhi
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-end" 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" aria-current="true" 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">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">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 i raro nei hei arataki maori ki etahi atu ihirangi. He iti ake te roa o tenei ihirangi.
Whakahoutanga whakamutunga 3 mineti ki muri
taitara kāri
He kaari whanui ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti ake 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-bottom" 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>
Whakapae
Ma te whakamahi i te huinga o nga karaehe matiti me te whaipainga, ka taea te hanga whakapae i nga kaari i runga i te huarahi ngawari me te whakautu. I te tauira i raro nei, ka tangohia e matou nga awaawa matiti .g-0
me te whakamahi i .col-md-*
nga karaehe hei hanga whakapae i te kaari i te md
waahi 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 i raro nei hei arataki maori ki etahi atu ihirangi. He iti ake te roa o tenei ihirangi.
Whakahoutanga whakamutunga 3 mineti ki muri
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" 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 te tae kuputuhi me nga taputapu papamuri hei huri 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-dark 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-dark 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 text-dark 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 .visually-hidden
akomanga.
Taitapa
Whakamahia nga taputapu taitapa hei huri noa i border-color
te 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">
<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">
<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-color
me 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. Ko nga roopu kaari ka timata ki te tapae ka whakamahi display: flex;
kia piri me nga rahi rite ka timata mai i te sm
waahi pakaru.
taitara kāri
He kaari whanui ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti ake 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 i raro nei hei arataki maori 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 i raro nei hei arataki maori ki etahi atu ihirangi. He iti ake 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 i raro nei hei arataki maori 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>
Kāri mātiti
Whakamahia te punaha matiti Bootstrap me ona .row-cols
karaehe 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-1
whakatakoto i nga kaari ki runga i te pou kotahi, me .row-cols-md-2
te 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 ake 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 ake 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 ake te roa o tenei ihirangi.
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<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">
<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">
<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">
<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-3
a 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 ake 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 ake 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 ake te roa o tenei ihirangi.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<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">
<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">
<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">
<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-100
ki nga kaari. Mena kei te pirangi koe kia rite te teitei 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 ake 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 ake te roa o tenei ihirangi.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<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">
<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">
<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">
<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>
Pērā i ngā rōpū kāri, ka rārangi aunoa ngā hiku kāri.
taitara kāri
He kaari whanui ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi. He iti ake 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 i raro nei hei arataki maori 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="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<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 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>
<div class="col">
<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 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>
<div class="col">
<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 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>
</div>
Masonry
I v4
whakamahia e matou he tikanga CSS-anake ki te whakatauira i te whanonga o te Masonry -rite nga pou, engari i puta mai tenei tikanga me te maha o nga paanga kino kino . Ki te hiahia koe ki te whai i tenei momo tahora i roto i v5
, ka taea e koe te whakamahi noa i te Masonry monomai. Kaore i whakauruhia te Masonry ki Bootstrap , engari kua mahia e matou he tauira tauira hei awhina i a koe ki te timata.
Sass
Taurangi
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$card-border-radius: $border-radius;
$card-box-shadow: null;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;