KARATRA

Ny karatra Bootstrap dia manome fitoerana votoaty mora azo sy azo avela miaraka amina karazany sy safidy maro.

Amin'ity pejy ity

About

Ny karatra dia fitahirizana votoaty mora azo sy azo itarina. Ahitana safidy ho an'ny lohapejy sy tongotra, votoaty isan-karazany, lokon'ny lafin-javatra manodidina, ary safidy fampisehoana mahery vaika. Raha zatra amin'ny Bootstrap 3 ianao, dia soloy ny takelaka, fantsakana, ary thumbnail taloha ny karatra. Ny fiasa mitovy amin'ireo singa ireo dia azo alaina ho kilasy modifier ho an'ny karatra.

OHATRA

Namboarina miaraka amin'ny marika sy fomba kely araka izay azo atao ny karatra, saingy mbola mahavita manome fanaraha-maso sy fanamboarana taonina. Namboarina tamin'ny flexbox, manolotra fampifanarahana mora izy ireo ary mifangaro tsara amin'ny singa Bootstrap hafa. Tsy manana azy ireo marginamin'ny alàlan'ny default izy ireo, noho izany dia ampiasao ny fampitaovana spacing raha ilaina.

Ity ambany ity ny ohatra momba ny karatra fototra misy votoaty mifangaro sy sakany raikitra. Tsy manana sakany raikitra hanombohana ny karatra, noho izany dia hofenoin'izy ireo ho azy ny sakan'ny singa ray aman-dreniny. Izany dia mora amboarina miaraka amin'ireo safidy habe isan-karazany .

Lohateny karatra

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Mandehana any

html

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

Karazana votoaty

Ny karatra dia manohana karazana votoaty marobe, ao anatin'izany ny sary, lahatsoratra, vondrona lisitra, rohy, sy ny maro hafa. Ireto ambany ireto ny ohatra amin'izay tohana.

-kevi-pitantanana

Ny fototry ny karatra dia ny .card-body. Ampiasao izany isaky ny mila fizarana misy padded ao anaty karatra ianao.

Ity dia lahatsoratra sasantsasany ao anatin'ny vatan'ny karatra.

html

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Lohateny, lahatsoratra ary rohy

Ny lohatenin'ny karatra dia ampiasaina amin'ny fanampiana .card-titleamina <h*>marika. Toy izany koa, ny rohy dia ampiana sy apetraka eo akaikin'ny tsirairay amin'ny fanampiana .card-linkamin'ny <a>marika.

Ny dikanteny dia ampiasaina amin'ny fampidirana a .card-subtitleamin'ny <h*>marika. Raha apetraka ao anaty singa iray ny .card-titlesy ny entana dia mifanaraka tsara ny lohatenin'ny karatra sy ny dikanteny..card-subtitle.card-body

Lohateny karatra

dikanteny karatra

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Rohy karatra Rohy hafa

html

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

Sary

.card-img-topmametraka sary eo an-tampon'ny karatra. Miaraka amin'ny .card-text, dia azo ampiana lahatsoratra amin'ny karatra. Ny lahatsoratra ao anatiny .card-textdia azo alaina miaraka amin'ny marika HTML mahazatra.

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

html

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

Tanisao ny vondrona

Mamorona lisitr'ireo atiny amin'ny karatra miaraka amin'ny vondrona lisitra flush.

Zavatra iray
Zavatra faharoa
Singa fahatelo

html

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

nasongadina

Zavatra iray
Zavatra faharoa
Singa fahatelo

html

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

Zavatra iray
Zavatra faharoa
Singa fahatelo

Tohin'ny karatra

html

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

Lavin-dakozia

Afangaro ary ampifanaraho ireo karazana atiny maro mba hamoronana ny karatra ilainao, na atsipy ao daholo ny zava-drehetra. Aseho eto ambany ny endriky ny sary, ny sakana, ny endri-tsoratra, ary ny vondrona lisitra iray — nofonosina karatra mirefy raikitra avokoa.

Lohateny karatra

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Zavatra iray
Zavatra faharoa
Singa fahatelo

Rohy karatra Rohy hafa

html

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

Lohateny sy tongotra

Manampia lohapejy sy/na tohin-tongony tsy voatery ho ao anaty karatra.

nasongadina

Fitsaboana titre manokana

Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Mandehana any

html

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

Ny lohatenin'ny karatra dia azo atao amin'ny alalan'ny fanampiana .card-headerireo <h*>singa.

nasongadina

Fitsaboana titre manokana

Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Mandehana any

html

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

notsongaina

Teny nalaina fanta-daza, voarakitra ao anaty singa blockquote.

Olona malaza amin'ny Lohateny Loharano

html

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

nasongadina

Fitsaboana titre manokana

Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Mandehana any

2 andro lasa izay

html

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

Famaritana

Ny karatra dia mihevitra fa tsy voafaritra widthny fanombohana, ka ho 100% ny sakany raha tsy misy filazana hafa. Azonao atao ny manova izany araka izay ilaina amin'ny CSS mahazatra, kilasy grid, grid Sass mixins, na fitaovana.

Mampiasa marika marika

Amin'ny fampiasana ny tsipika, aforeto ny karatra amin'ny tsanganana sy andalana raha ilaina.

Fitsaboana titre manokana

Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Mandehana any

Fitsaboana titre manokana

Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Mandehana any

html

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

Mampiasa fitaovana

Mampiasà fitaovana fandrefesana vitsivitsy azo atao mba hametrahana haingana ny sakan'ny karatra.

Lohateny karatra

Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

bokotra

Lohateny karatra

Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

bokotra

html

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

Mampiasa CSS mahazatra

Mampiasà CSS mahazatra ao amin'ny stylesheets na amin'ny endrika inline mba hametrahana ny sakany.

Fitsaboana titre manokana

Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Mandehana any

html

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

Fandrindrana lahatsoratra

Azonao atao ny manova haingana ny fampifanarahana lahatsoratra amin'ny karatra rehetra — amin'ny ampahany manontolo na amin'ny ampahany manokana — miaraka amin'ireo kilasy fampifanarahana lahatsoratra .

Fitsaboana titre manokana

Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Mandehana any

Fitsaboana titre manokana

Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Mandehana any

Fitsaboana titre manokana

Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Mandehana any

html

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

Manampia fitetezana sasany amin'ny lohatenin'ny karatra (na sakana) miaraka amin'ny singa nav an'ny Bootstrap .

Fitsaboana titre manokana

Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Mandehana any

html

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

Fitsaboana titre manokana

Miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Mandehana any

html

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

Sary

Misy safidy vitsivitsy amin'ny fiasana sary ny karatra. Misafidiana amin'ny fanampina "satroka sary" amin'ny faran'ny karatra iray, manarona sary miaraka amin'ny atiny karatra, na mampiditra fotsiny ny sary ao anaty karatra.

Satroka sary

Mitovy amin'ny lohapejy sy tongotra, ny karatra dia mety ahitana “satroka satroka” ambony sy ambany — sary eo ambony na ambany amin'ny karatra.

Lohateny karatra

Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

Nohavaozina farany 3 min lasa izay

Lohateny karatra

Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

Nohavaozina farany 3 min lasa izay

html

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

Fisompiana sary

Avadiho ho lafin'ny karatra ny sary iray ary apetaho ny lahatsoratry ny karatrao. Miankina amin'ny sary, mety mila endrika na fitaovana fanampiny ianao.

Lohateny karatra

Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

Nohavaozina farany 3 min lasa izay

html

<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

Mariho fa tsy tokony ho lehibe noho ny haavon'ny sary ny atiny. Raha lehibe noho ny sary ny atiny dia haseho ivelan'ny sary ny atiny.

Marindrano

Amin'ny alalan'ny fitambaran'ny kilasy grid sy utility, ny karatra dia azo atao marindrano amin'ny fomba mora sy mora raisina. Ao amin'ny ohatra etsy ambany, dia esorintsika ny tata-drano miaraka amin'ny tsipika .g-0ary mampiasa .col-md-*kilasy hanaovana ny karatra mitsivalana eo amin'ny mdteboka tapaka. Mety ilaina ny fanitsiana fanampiny arakaraka ny votoatin'ny karatrao.

Lohateny karatra

Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

Nohavaozina farany 3 min lasa izay

html

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

Karazana fomba

Ny karatra dia misy safidy isan-karazany amin'ny fanamboarana ny fiaviany, ny sisintany ary ny lokony.

Background sy loko

Nampiana v5.2.0

Mametraha background-colorsarintany mifanipaka colormiaraka amin'ireo .text-bg-{color}mpanampy anay . Talohan'izay dia ilaina ny mampiaraka amin'ny tananao ny safidinao .text-{color}sy ny .bg-{color}fitaovana ilaina amin'ny famolavolana, izay mbola azonao ampiasaina raha tianao.

Lohapejy

Lohatenin'ny karatra voalohany

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohatenin'ny karatra faharoa

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohateny karatra fahombiazana

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohateny karatra loza

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohatenin'ny karatra fampitandremana

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohatenin'ny karatra fampahalalana

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohateny karatra maivana

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohatenin'ny karatra maizina

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

html

<div class="card text-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-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-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-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-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-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-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-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>

Fampitaovana ny dikan'ny teknôlôjia manampy

Ny fampiasana loko hanampiana dikany dia manome famantarana hita maso ihany, izay tsy hampitaina amin'ireo mpampiasa teknolojia manampy - toy ny mpamaky efijery. Ataovy azo antoka fa ny fampahalalana voatondro amin'ny loko dia na miharihary amin'ny atiny (ohatra ny lahatsoratra hita maso), na ampidirina amin'ny fomba hafa, toy ny lahatsoratra fanampiny miafina miaraka amin'ny .visually-hiddenkilasy.

Sisintany

Mampiasà fampiasa sisintany hanovana ny border-colorkaratra fotsiny. Mariho fa azonao atao ny mametraka .text-{color}kilasy amin'ny ray aman-dreny .cardna ampahany amin'ny votoatin'ny karatra araka ny aseho etsy ambany.

Lohapejy

Lohatenin'ny karatra voalohany

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohatenin'ny karatra faharoa

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohateny karatra fahombiazana

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohateny karatra loza

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohatenin'ny karatra fampitandremana

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohatenin'ny karatra fampahalalana

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohateny karatra maivana

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Lohapejy

Lohatenin'ny karatra maizina

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

html

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

Azonao atao ihany koa ny manova ny sisin-tany eo amin'ny lohatenin'ny karatra sy ny footer raha ilaina, ary esorinao background-colormiaraka amin'ny .bg-transparent.

Lohapejy

Lohateny karatra fahombiazana

Lahatsoratra ohatra haingana hanorina eo amin'ny lohatenin'ny karatra ary mandrafitra ny ampahany betsaka amin'ny atiny.

Footer

html

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

Fametrahana karatra

Ho fanampin'ny famolavolana ny atiny ao anaty karatra, ny Bootstrap dia misy safidy vitsivitsy amin'ny fametrahana andian-karatra. Amin'izao fotoana izao, tsy mbola mamaly ireo safidy fandrindrana ireo .

Vondrona karatra

Mampiasà vondrona karatra hamadika karatra ho singa tokana mifamatotra miaraka amin'ny tsanganana mitovy sakany sy haavony. Ny vondrona karatra dia manomboka mivondrona ary ampiasaina display: flex;mba hiraikitra amin'ny refy fanamiana manomboka eo amin'ny smteboka tapaka.

Lohateny karatra

Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

Nohavaozina farany 3 min lasa izay

Lohateny karatra

Ity karatra ity dia manana lahatsoratra manohana eto ambany ho toy ny fitarihana voajanahary amin'ny atiny fanampiny.

Nohavaozina farany 3 min lasa izay

Lohateny karatra

Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Ity karatra ity dia manana atiny lava kokoa noho ny voalohany mampiseho an'io hetsika mitovy amin'ny haavony io.

Nohavaozina farany 3 min lasa izay

html

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

Rehefa mampiasa vondrona karatra misy footers dia milahatra ho azy ny votoatiny.

Lohateny karatra

Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

Nohavaozina farany 3 min lasa izay

Lohateny karatra

Ity karatra ity dia manana lahatsoratra manohana eto ambany ho toy ny fitarihana voajanahary amin'ny atiny fanampiny.

Nohavaozina farany 3 min lasa izay

Lohateny karatra

Nohavaozina farany 3 min lasa izay

html

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

Karatra Grid

Ampiasao ny rafitra grid Bootstrap sy ny .row-colskilasiny mba hifehezana ny isan'ny tsanganana grid (mihodidina ny karatrao) asehonao isaky ny andalana. Ohatra, eto ny .row-cols-1fametrahana ny karatra amin'ny tsanganana iray, ary .row-cols-md-2mizara karatra efatra amin'ny sakany mitovy amin'ny andalana maromaro, manomboka amin'ny tsipika antonony miakatra.

Lohateny karatra

Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

Lohateny karatra

Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

Lohateny karatra

Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Lohateny karatra

Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

html

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

Ovay izany .row-cols-3ary ho hitanao ny fonon'ny karatra fahefatra.

Lohateny karatra

Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

Lohateny karatra

Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

Lohateny karatra

Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Lohateny karatra

Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

html

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

Rehefa mila haavony mitovy ianao dia ampio .h-100amin'ny karatra. Raha mila haavony mitovy amin'ny default ianao dia azonao atao ny mametraka $card-height: 100%ao amin'ny Sass.

Lohateny karatra

Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

Lohateny karatra

Karatra fohy ity.

Lohateny karatra

Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny.

Lohateny karatra

Ity dia karatra lava kokoa misy lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

html

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

Tahaka ny amin'ny vondrona karatra, ny tongotry ny karatra dia milahatra ho azy.

Lohateny karatra

Ity dia karatra midadasika kokoa miaraka amin'ny lahatsoratra fanohanana etsy ambany ho fitarihana voajanahary mankany amin'ny atiny fanampiny. Lava kely ity atiny ity.

Nohavaozina farany 3 min lasa izay

Lohateny karatra

Ity karatra ity dia manana lahatsoratra manohana eto ambany ho toy ny fitarihana voajanahary amin'ny atiny fanampiny.

Nohavaozina farany 3 min lasa izay

Lohateny karatra

Nohavaozina farany 3 min lasa izay

html

<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

Tao v4amin'ny teknika CSS ihany no nampiasanay mba haka tahaka ny fihetsiky ny tsanganana Masonry , saingy ity teknika ity dia nisy fiantraikany ratsy maro . Raha te hanana ity karazana layout ity v5ianao dia azonao ampiasaina fotsiny ny plugin Masonry. Tsy tafiditra ao amin'ny Bootstrap ny masonry , fa nanao ohatra demo izahay hanampy anao hanomboka.

CSS

hiovaova

Nampiana v5.2.0

Ao anatin'ny fomba fiovaovan'ny CSS mivoatra an'ny Bootstrap, ny karatra izao dia mampiasa ny fari-piadidiana CSS eo an -toerana .cardho an'ny fanatsarana ny fotoana tena izy. Ny soatoavina ho an'ny fari-piainan'ny CSS dia apetraka amin'ny alàlan'ny Sass, noho izany dia mbola tohanana ihany koa ny fanamboarana Sass.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass variables

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$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;

KARATRA

About

OHATRA

Lohateny karatra

Karazana votoaty

-kevi-pitantanana

Lohateny, lahatsoratra ary rohy

Lohateny karatra

dikanteny karatra

Sary

Tanisao ny vondrona

Lavin-dakozia

Lohateny karatra

Lohateny sy tongotra

Fitsaboana titre manokana

nasongadina

Fitsaboana titre manokana

Fitsaboana titre manokana

Famaritana

Mampiasa marika marika

Fitsaboana titre manokana

Fitsaboana titre manokana

Mampiasa fitaovana

Lohateny karatra

Lohateny karatra

Mampiasa CSS mahazatra

Fitsaboana titre manokana

Fandrindrana lahatsoratra

Fitsaboana titre manokana

Fitsaboana titre manokana

Fitsaboana titre manokana

Fikarohana

Fitsaboana titre manokana

Fitsaboana titre manokana

Sary

Satroka sary

Lohateny karatra

Lohateny karatra

Fisompiana sary

Lohateny karatra

Marindrano

Lohateny karatra

Karazana fomba

Background sy loko

Lohatenin'ny karatra voalohany

Lohatenin'ny karatra faharoa

Lohateny karatra fahombiazana

Lohateny karatra loza

Lohatenin'ny karatra fampitandremana

Lohatenin'ny karatra fampahalalana

Lohateny karatra maivana

Lohatenin'ny karatra maizina

Fampitaovana ny dikan'ny teknôlôjia manampy

Sisintany

Lohatenin'ny karatra voalohany

Lohatenin'ny karatra faharoa

Lohateny karatra fahombiazana

Lohateny karatra loza

Lohatenin'ny karatra fampitandremana

Lohatenin'ny karatra fampahalalana

Lohateny karatra maivana

Lohatenin'ny karatra maizina

Mixins utilities

Lohateny karatra fahombiazana

Fametrahana karatra

Vondrona karatra

Lohateny karatra

Lohateny karatra

Lohateny karatra

Lohateny karatra

Lohateny karatra

Lohateny karatra

Karatra Grid

Lohateny karatra

Lohateny karatra

Lohateny karatra

Lohateny karatra

Lohateny karatra

Lohateny karatra

Lohateny karatra