Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
in English

Kaari

Ka whakaratohia e nga kaari Bootstrap he ipu ihirangi ngawari me te whanui me nga momo rereke me nga whiringa maha.

I tenei wharangi

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 .

Placeholder Image cap
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.

He kuputuhi tenei kei roto i te tinana 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.

Placeholder Image cap

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>
Kua whakaatuhia
  • 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
Hiku kāri 
<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 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.

Placeholder Image cap
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
Hononga kaari He hononga ano 
<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>

Tāpirihia he pane kōwhiri, hiku rānei ki roto i tētahi kāri.

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">
  <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>
Korero

He korero rongonui, kei roto i te huānga blockquote.

He tangata rongonui i te Taitara Puna 
<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>
Kua whakaatuhia
Te maimoatanga taitara motuhake

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Haere ki tetahi wahi
2 ra ki muri 
<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 wahi
Te 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.

taitara kāri

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Pātene
taitara kāri

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Pātene 
<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 wahi
Te maimoatanga taitara motuhake

Me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Haere ki tetahi wahi
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>

<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>

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" 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.

Placeholder Image cap
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

Placeholder Image cap 
<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.

Placeholder Card image
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 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 .g-0me 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.

Placeholder Image
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 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.

Pane
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.

Pane
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.

Pane
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.

Pane
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.

Pane
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.

Pane
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.

Pane
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.

Pane
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-hiddenakomanga.

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.

Pane
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.

Pane
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.

Pane
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.

Pane
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.

Pane
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.

Pane
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.

Pane
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.

Pane
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-colorme te .bg-transparent.

Pane
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.

Hiku 
<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 smwaahi pakaru.

Placeholder Image cap
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

Placeholder Image cap
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

Placeholder Image cap
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.

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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>
    </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.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
taitara kāri

He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Placeholder Image cap
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 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-3a ka kite koe i te takai kaari tuawha.

Placeholder Image cap
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.

Placeholder Image cap
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.

Placeholder Image cap
taitara kāri

He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Placeholder Image cap
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 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-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.

Placeholder Image cap
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.

Placeholder Image cap
taitara kāri

He kaari poto tenei.

Placeholder Image cap
taitara kāri

He kaari roa ake tenei me nga kupu tautoko i raro nei hei arataki maori ki etahi atu ihirangi.

Placeholder Image cap
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 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.

Placeholder Image cap
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
Placeholder Image cap
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
Placeholder Image cap
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="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 v4whakamahia 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-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$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;