Saltatu eduki nagusira Saltatu dokumentuen nabigaziora
Check
in English

Txartelak

Bootstrap-en txartelek edukiontzi malgu eta hedagarria eskaintzen dute, aldaera eta aukera anitzekin.

Orrialde honetan

Buruz

Txartela edukiontzi malgu eta hedagarria da . Goiburuen eta oinen aukerak, askotariko edukiak, testuinguruko atzeko planoko koloreak eta bistaratzeko aukera indartsuak biltzen ditu. Bootstrap 3 ezagutzen baduzu, txartelek gure panel zaharrak, putzuak eta koadro txikiak ordezkatzen dituzte. Osagai horien antzeko funtzionaltasuna eskuragarri dago txartelen modifikatzaile klase gisa.

Adibidea

Txartelak ahalik eta marka eta estilo gutxienekin eraikitzen dira, baina hala ere kontrol eta pertsonalizazio asko ematen dituzte. Flexbox-ekin eraikita, lerrokatze erraza eskaintzen dute eta Bootstrap-eko beste osagai batzuekin ondo nahasten dute. Ez daukate marginlehenespenez, beraz, erabili tartekatzeko utilitateak behar den moduan.

Jarraian, eduki mistoa eta zabalera finkoa duen oinarrizko txartel baten adibidea dago. Txartelek ez dute zabalera finkorik hasteko, beraz, naturalki beteko dute bere elementu nagusiaren zabalera osoa. Hau erraz pertsonalizatzen da gure tamaina ezberdinekin .

Placeholder Image cap
Txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

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

Eduki motak

Txartelek askotariko edukiak onartzen dituzte, besteak beste, irudiak, testuak, zerrenda-taldeak, estekak eta abar. Jarraian, onartzen denaren adibideak daude.

Gorputza

Txartel baten eraikuntza-blokea .card-body. Erabili ezazu txartel baten barruan atal betea behar duzun bakoitzean.

Hau txartel baten gorputzeko testu bat da.
html 
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Izenburuak, testua eta estekak

Txartelaren izenburuak etiketa .card-titlebati gehituz erabiltzen dira . <h*>Modu berean, estekak gehitzen dira eta bata bestearen ondoan jartzen dira etiketa .card-linkbati gehituz.<a>

Azpitituluak etiketa .card-subtitlebati a gehituz erabiltzen dira . <h*>Elementuak .card-titleeta .card-subtitleelementuak elementu batean jartzen badira .card-body, txartelaren izenburua eta azpititulua ondo lerrokatzen dira.

Txartelaren izenburua
Txartelaren azpititulua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Txartelaren esteka Beste esteka bat
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>

Irudiak

.card-img-topirudi bat jartzen du txartelaren goialdean. , .card-texttestua gehi dakioke txartelari. Barneko testua .card-textHTML etiketa estandarrekin ere molda daiteke.

Placeholder Image cap

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

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>

Taldeak zerrenda

Sortu eduki-zerrendak txartel batean zerrenda-talde bat duen.

  • Elementu bat
  • Bigarren elementu bat
  • Hirugarren elementu bat
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>
Nabarmena
  • Elementu bat
  • Bigarren elementu bat
  • Hirugarren elementu bat
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>
  • Elementu bat
  • Bigarren elementu bat
  • Hirugarren elementu bat
Txartelaren oina
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>

Sukaldeko konketa

Nahastu eta lotu hainbat eduki mota behar duzun txartela sortzeko, edo bota dena bertan. Jarraian irudi-estiloak, blokeak, testu-estiloak eta zerrenda talde bat agertzen dira, guztiak zabalera finkoko txartel batean bilduta.

Placeholder Image cap
Txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

  • Elementu bat
  • Bigarren elementu bat
  • Hirugarren elementu bat
Txartelaren esteka Beste esteka bat
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>

Gehitu aukerako goiburua eta/edo orri-oina txartel baten barruan.

Nabarmena
Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

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

.card-headerTxartel-goiburuak elementuei gehituz estiloa jar daiteke <h*>.

Nabarmena
Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait
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>
Aipatu

Aipamen ezagun bat, blockquote elementu batean jasotakoa.

Iturria Tituluan ospetsua den norbait
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>
Nabarmena
Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait
Duela 2 egun
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>

Tamaina

Txartelek hasierako zehatzik ez dutela suposatzen widthdute, beraz, % 100eko zabalera izango dute, bestela adierazi ezean. Behar duzunean alda dezakezu CSS pertsonalizatuekin, sareko klaseekin, sareko Sass nahasketarekin edo utilitateekin.

Sare-marka erabiltzea

Sarea erabiliz, bildu txartelak zutabeetan eta errenkadetan behar den moduan.

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait
Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

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

Utilitateak erabiltzea

Erabili eskuragarri dauden neurrien erabilgarritasun gutxi txartel baten zabalera azkar ezartzeko.

Txartelaren izenburua

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Botoia
Txartelaren izenburua

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

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

CSS pertsonalizatua erabiliz

Erabili CSS pertsonalizatua zure estilo-orrietan edo lerroko estilo gisa zabalera bat ezartzeko.

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

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

Testuaren lerrokatzea

Edozein txartelen testu-lerrokatzea azkar alda dezakezu (osorik edo zati zehatzetan) gure testu-lerrokatzea klaseekin .

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait
Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait
Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

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

Gehitu nabigazio pixka bat txartel baten goiburuan (edo blokean) Bootstrap-en nabigazio osagaiekin .

Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

Zoaz nonbait
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>
Tituluaren tratamendu berezia

Beheko testu osagarriarekin eduki gehigarrirako sarrera natural gisa.

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

Irudiak

Txartelek irudiekin lan egiteko aukera batzuk dituzte. Aukeratu "irudi-txapelak" gehitzea txartel baten muturretan, irudiak txartelaren edukiarekin gainjartzea edo, besterik gabe, irudia txartel batean txertatzea.

Irudi-txapelak

Goiburuen eta oinen antzera, txartelek goiko eta beheko "irudi-txapelak" izan ditzakete, txartel baten goiko edo beheko irudiak.

Placeholder Image cap
Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea

Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea

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

Irudien gainjartzeak

Bihurtu irudi bat txartelaren atzeko planoan eta gainjarri zure txartelaren testua. Irudiaren arabera, baliteke estilo edo utilitate gehigarriak behar izatea edo ez.

Placeholder Card image
Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea

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>
Kontuan izan edukiak ez duela irudiaren altuera baino handiagoa izan behar. Edukia irudia baino handiagoa bada, edukia iruditik kanpo bistaratuko da.

Horizontala

Sarearen eta erabilgarritasun-klaseen konbinazioa erabiliz, txartelak horizontalean egin daitezke mugikorretarako eta erantzuteko moduan. Beheko adibidean, sareko erretenak kendu .g-0eta klaseak erabiltzen .col-md-*ditugu txartela mdeten puntuan horizontala izateko. Baliteke doikuntza gehiago behar izatea txartelaren edukiaren arabera.

Placeholder Image
Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea

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>

Txartel estiloak

Txartelek hainbat aukera dituzte atzeko planoak, ertzak eta koloreak pertsonalizatzeko.

Hondoa eta kolorea

v5.2.0-n gehitua

Ezarri lehen planobackground-color kontrastatua gurecolor laguntzaileekin . Lehenago zure aukera eta estilorako utilitateak eskuz parekatu behar ziren , nahiago baduzu oraindik erabil ditzakezu..text-bg-{color}.text-{color}.bg-{color}

Goiburua
Txartelaren titulu nagusia

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Bigarren txartelaren titulua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Arrakasta txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Arrisku txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Abisu txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Informazio txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Txartel argiaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Txartel ilunaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

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>
Laguntza-teknologiei esanahia ematea

Kolorea esanahi gehitzeko kolorea erabiltzeak adierazgarri bisual bat baino ez du ematen, eta hori ez zaie helaraziko laguntza-teknologien erabiltzaileei, adibidez, pantaila-irakurgailuei. Ziurtatu kolorez adierazten den informazioa edukitik bertatik agerikoa dela (adibidez, ikusgai dagoen testua) edo beste bitarteko batzuen bidez sartzen dela, adibidez .visually-hiddenklasearekin ezkutatuta dagoen testu gehigarria.

Muga

Erabili ertz-utilitateakborder-color txartel baten aldea soilik aldatzeko . Kontuan izan klaseak jarri ditzakezula .text-{color}gurasoari .cardedo txartelaren edukiaren azpimultzo batean behean erakusten den moduan.

Goiburua
Txartelaren titulu nagusia

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Bigarren txartelaren titulua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Arrakasta txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Arrisku txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Abisu txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Informazio txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Txartel argiaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

Goiburua
Txartel ilunaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

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 utilitateak

Txartelaren goiburuko eta orri-oineko ertzak ere alda ditzakezu behar izanez gero, eta baita horiek kendu background-colorere .bg-transparent.

Goiburua
Arrakasta txartelaren izenburua

Testu adibide azkar batzuk txartelaren izenburuan eraikitzeko eta txartelaren edukiaren zati handiena osatzeko.

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

Txartelaren diseinua

Txartelen edukia diseinatzeaz gain, Bootstrap-ek txartel-serieak jartzeko aukera batzuk ditu. Momentuz, diseinu-aukera hauek ez dira oraindik erantzuten .

Txartel taldeak

Erabili txartel-taldeak txartelak errendatzeko, zabalera eta altuera berdineko zutabeekin erantsitako elementu bakar gisa. Txartel-taldeak pilatuta hasten dira eta eten puntutik display: flex;hasita dimentsio uniformeekin lotzen dira .sm

Placeholder Image cap
Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea

Placeholder Image cap
Txartelaren izenburua

Txartel honek beheko testu osagarria du eduki gehigarrirako sarrera natural gisa.

Duela 3 minutu azken eguneratzea

Placeholder Image cap
Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Txartel honek lehenak baino eduki handiagoa du altuera berdineko ekintza hori erakusteko.

Duela 3 minutu azken eguneratzea

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>

Oin-oinak dituzten txartel-taldeak erabiltzean, haien edukia automatikoki lerrokatuko da.

Placeholder Image cap
Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea
Placeholder Image cap
Txartelaren izenburua

Txartel honek beheko testu osagarria du eduki gehigarrirako sarrera natural gisa.

Duela 3 minutu azken eguneratzea
Placeholder Image cap
Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Txartel honek lehenak baino eduki handiagoa du altuera berdineko ekintza hori erakusteko.

Duela 3 minutu azken eguneratzea
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>

Sare-txartelak

Erabili Bootstrap sare-sistema eta bere .row-colsklaseak errenkada bakoitzeko zenbat sare-zutabe (zure txartelen inguruan bilduta) erakusten dituzun kontrolatzeko. Adibidez, hona hemen .row-cols-1txartelak zutabe batean finkatzea eta .row-cols-md-2lau karta banatzen ditu hainbat errenkadatan zabalera berdinean, eten puntu ertainetik gora.

Placeholder Image cap
Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Placeholder Image cap
Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Placeholder Image cap
Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa.

Placeholder Image cap
Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

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>

Aldatu .row-cols-3eta laugarren txartela ikusiko duzu.

Placeholder Image cap
Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Placeholder Image cap
Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Placeholder Image cap
Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa.

Placeholder Image cap
Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

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>

Altuera berdina behar duzunean, gehitu .h-100kartetara. $card-height: 100%Lehenespenez altuera berdina nahi baduzu, Sass-en ezar dezakezu .

Placeholder Image cap
Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Placeholder Image cap
Txartelaren izenburua

Hau txartel laburra da.

Placeholder Image cap
Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa.

Placeholder Image cap
Txartelaren izenburua

Txartel luzeagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

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>

Txartel taldeekin bezala, txartelen oinak automatikoki lerrokatuko dira.

Placeholder Image cap
Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Eduki hau pixka bat luzeagoa da.

Duela 3 minutu azken eguneratzea
Placeholder Image cap
Txartelaren izenburua

Txartel honek beheko testu osagarria du eduki gehigarrirako sarrera natural gisa.

Duela 3 minutu azken eguneratzea
Placeholder Image cap
Txartelaren izenburua

Txartel zabalagoa da behean testu osagarria duena, eduki gehigarrirako sarrera natural gisa. Txartel honek lehenak baino eduki handiagoa du altuera berdineko ekintza hori erakusteko.

Duela 3 minutu azken eguneratzea
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>

Igeltserotza

Harlangintzaren antzekov4 zutabeen portaera imitatzeko CSS soilik erabili genuen , baina teknika honek bigarren mailako efektu desatsegin ugari ekarri zituen . Diseinu mota hau eduki nahi baduzu , Masonry plugina erabil dezakezu. Masonry ez dago Bootstrap-en sartzen , baina demo adibide bat egin dugu hasten laguntzeko.v5

CSS

Aldagaiak

v5.2.0-n gehitua

Bootstrap-en CSS aldagaien bilakaeraren ikuspegiaren barruan, txartelek orain CSS aldagai lokalak erabiltzen dituzte .carddenbora errealean pertsonalizatzeko. CSS aldagaien balioak Sass bidez ezartzen dira, beraz, Sass pertsonalizazioa ere onartzen da oraindik ere.

  --#{$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 aldagaiak

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