Kortit
Bootstrapin kortit tarjoavat joustavan ja laajennettavan sisältösäiliön, jossa on useita muunnelmia ja vaihtoehtoja.
Noin
Kortti on joustava ja laajennettava sisältösäiliö. Se sisältää vaihtoehtoja ylä- ja alatunnisteille, laajan valikoiman sisältöä, kontekstuaalisia taustavärejä ja tehokkaita näyttövaihtoehtoja. Jos Bootstrap 3 on sinulle tuttu, kortit korvaavat vanhat paneelimme, kuopat ja pikkukuvamme. Näitä komponentteja vastaavat toiminnot ovat saatavilla korttien modifiointiluokina.
Esimerkki
Kortit on rakennettu mahdollisimman pienellä merkinnällä ja tyyleillä, mutta ne tarjoavat silti paljon hallintaa ja mukauttamista. Ne on rakennettu flexboxilla, ja ne tarjoavat helpon kohdistuksen ja sekoittuvat hyvin muiden Bootstrap-komponenttien kanssa. Niissä ei ole marginoletuksena, joten käytä välilyöntejä tarpeen mukaan.
Alla on esimerkki peruskortista, jossa on sekoitettu sisältö ja kiinteä leveys. Korteilla ei ole kiinteää aloitusleveyttä, joten ne täyttävät luonnollisesti koko pääelementin leveyden. Tämä on helposti räätälöitävissä erilaisilla kokovaihtoehdoillamme .
Kortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Mennä jonnekin<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>Sisältötyypit
Kortit tukevat monenlaista sisältöä, kuten kuvia, tekstiä, luetteloryhmiä, linkkejä ja paljon muuta. Alla on esimerkkejä tuetuista asioista.
Runko
Kortin rakennuspalikka on .card-body. Käytä sitä aina, kun tarvitset pehmustetun osan kortissa.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>Otsikot, tekstit ja linkit
Korttien otsikoita käytetään lisäämällä .card-titletunnisteeseen <h*>. Samalla tavalla linkit lisätään ja sijoitetaan vierekkäin lisäämällä .card-linktunnisteeseen <a>.
Tekstityksiä käytetään lisäämällä .card-subtitletunnisteeseen <h*>. Jos .card-titleja .card-subtitlekohteet sijoitetaan .card-bodykohteeseen, kortin otsikko ja alaotsikko on kohdistettu kauniisti.
Kortin otsikko
Kortin tekstitys
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Korttilinkki Toinen linkki<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>Kuvat
.card-img-topasettaa kuvan kortin yläosaan. -painikkeella .card-textkorttiin voidaan lisätä tekstiä. Sisäinen teksti .card-textvoidaan myös muotoilla tavallisilla HTML-tageilla.
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
<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>Listaa ryhmät
Luo sisältöluetteloita kortille tyhjennysluetteloryhmällä.
- Esine
- Toinen kohde
- Kolmas kohde
<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>- Esine
- Toinen kohde
- Kolmas kohde
<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>- Esine
- Toinen kohde
- Kolmas kohde
<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>Tiskiallas
Yhdistele useita sisältötyyppejä luodaksesi tarvitsemasi kortin tai laita kaikki sinne. Alla näkyvät kuvatyylit, lohkot, tekstityylit ja luetteloryhmä – kaikki käärittynä kiinteän leveyden korttiin.
Kortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
- Esine
- Toinen kohde
- Kolmas kohde
<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>Ylä-ja alatunniste
Lisää valinnainen ylä- ja/tai alatunniste korttiin.
<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>Kortin otsikoita voidaan muokata lisäämällä .card-headerelementteihin <h*>.
Esittelyssä
<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>Tunnettu lainaus, joka sisältyy blockquote-elementtiin.
<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><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>Mitoitus
Kortit eivät ole erityisen widthalkavia, joten ne ovat 100 % leveitä, ellei toisin mainita. Voit muuttaa tätä tarpeen mukaan mukautetulla CSS:llä, grid-luokilla, grid Sass -sekoituksilla tai apuohjelmilla.
Käytä ruudukkomerkintää
Kääri kortit ruudukon avulla sarakkeisiin ja riveihin tarpeen mukaan.
<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>Apuohjelmien käyttö
Käytä kourallista käytettävissä olevia mitoitusapuohjelmia asettaaksesi nopeasti kortin leveyden.
<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>Mukautetun CSS:n käyttö
Käytä mukautettua CSS:ää tyylitaulukoissasi tai upotettuina tyyleinä leveyden määrittämiseen.
<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>Tekstin tasaus
Voit nopeasti muuttaa minkä tahansa kortin tekstin tasausta – kokonaisuudessaan tai tietyissä osissa – tekstin tasausluokillamme .
<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>Navigointi
Lisää navigointia kortin otsikkoon (tai lohkoon) Bootstrapin navigointikomponenteilla .
<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><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>Kuvat
Kortit sisältävät muutamia vaihtoehtoja kuvien käsittelyyn. Valitse joko "kuvasuojan" lisääminen kortin kumpaankin päähän, kuvien peittäminen kortin sisällön kanssa tai yksinkertaisesti kuvan upottaminen korttiin.
Kuvakorkit
Kuten ylä- ja alatunnisteet, kortit voivat sisältää ylä- ja alareunan "kuvasuojat" eli kuvat kortin ylä- tai alaosassa.
Kortin otsikko
Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
Viimeksi päivitetty 3 minuuttia sitten
Kortin otsikko
Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
Viimeksi päivitetty 3 minuuttia sitten
<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>Peittokuvat
Muuta kuva kortin taustaksi ja peitä korttisi teksti. Kuvasta riippuen saatat tarvita tai et tarvitse lisätyylejä tai apuohjelmia.
<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>Vaakasuora
Ristikko- ja hyödyllisyysluokkien yhdistelmällä kortit voidaan tehdä vaakasuoriksi mobiiliystävällisesti ja responsiivisesti. Alla olevassa esimerkissä poistamme ruudukon kourut .g-0ja käytämme .col-md-*luokkia tehdäksemme kortista vaakasuoran mdkatkaisupisteessä. Lisäsäätöjä saatetaan tarvita korttisi sisällöstä riippuen.
Kortin otsikko
Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
Viimeksi päivitetty 3 minuuttia sitten
<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>Korttityylit
Kortit sisältävät erilaisia vaihtoehtoja taustan, reunusten ja värin mukauttamiseen.
Tausta ja väri
Käytä tekstin värin ja taustan apuohjelmia muuttaaksesi kortin ulkoasua.
Ensisijainen kortin nimi
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Toissijaisen kortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Menestyskortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Vaarakortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Varoituskortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Tietokortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Kevyen kortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Tumman kortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
<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>Avustavan tekniikan merkityksen välittäminen
Värien käyttö merkityksen lisäämiseen antaa vain visuaalisen osoituksen, jota ei välitetä avustavien tekniikoiden, kuten näytönlukijoiden, käyttäjille. Varmista, että värillä merkitty tieto näkyy joko itsestään sisällöstä (esim. näkyvä teksti) tai sisällytetään vaihtoehtoisin keinoin, kuten .visually-hiddenluokan mukana piilotettu lisäteksti.
Raja
Käytä raja-apuohjelmia muuttaaksesi vain border-colorkortin muotoa. Huomaa, että voit lisätä .text-{color}luokkia ylätason .cardtai kortin sisällön osajoukkoon alla olevan kuvan mukaisesti.
Ensisijainen kortin nimi
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Toissijaisen kortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Menestyskortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Vaarakortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Varoituskortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Tietokortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Kevyen kortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
Tumman kortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
<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 apuohjelmat
Voit myös muuttaa kortin ylä- ja alatunnisteen reunoja tarpeen mukaan ja jopa poistaa ne background-color-painikkeella .bg-transparent.
Menestyskortin otsikko
Nopea esimerkkiteksti kortin otsikon pohjalta ja muodostaa suurimman osan kortin sisällöstä.
<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>Kortin asettelu
Korttien sisällön muotoilun lisäksi Bootstrap sisältää muutamia vaihtoehtoja korttisarjan asettamiseen. Toistaiseksi nämä asetteluvaihtoehdot eivät ole vielä reagoivia .
Korttiryhmät
Käytä korttiryhmiä renderöidäksesi kortit yhdeksi liitetyksi elementiksi, jonka sarakkeet ovat yhtä leveitä ja korkeita. Korttiryhmät alkavat pinottuna ja niitä käytetään display: flex;kiinnittymiseen yhtenäisin mitoin katkeamiskohdasta alkaen sm.
Kortin otsikko
Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
Viimeksi päivitetty 3 minuuttia sitten
Kortin otsikko
Tämän kortin alla on tukiteksti luonnollisena johdatuksena lisäsisältöön.
Viimeksi päivitetty 3 minuuttia sitten
Kortin otsikko
Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tässä kortissa on vielä pidempi sisältö kuin ensimmäisessä, joka näyttää samankorkeuden toiminnon.
Viimeksi päivitetty 3 minuuttia sitten
<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>Kun käytät alatunnisteilla varustettuja korttiryhmiä, niiden sisältö asettuu automaattisesti riviin.
Kortin otsikko
Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
Kortin otsikko
Tämän kortin alla on tukiteksti luonnollisena johdatuksena lisäsisältöön.
Kortin otsikko
Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tässä kortissa on vielä pidempi sisältö kuin ensimmäisessä, joka näyttää samankorkeuden toiminnon.
<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>Ruudukkokortit
Bootstrap-ruudukkojärjestelmän ja sen .row-colsluokkien avulla voit hallita, kuinka monta ruudukkosaraketta (korttien ympärillä) näytät riviä kohden. Tässä on esimerkiksi .row-cols-1korttien asettaminen yhteen sarakkeeseen ja .row-cols-md-2neljän kortin jakaminen samalle leveydelle useille riveille keskitasosta ylöspäin.
Kortin otsikko
Tämä on pidempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
Kortin otsikko
Tämä on pidempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
Kortin otsikko
Tämä on pidempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön.
Kortin otsikko
Tämä on pidempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
<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>Vaihda se .row-cols-3ja näet neljännen kortin kääreen.
Kortin otsikko
Tämä on pidempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
Kortin otsikko
Tämä on pidempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
Kortin otsikko
Tämä on pidempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön.
Kortin otsikko
Tämä on pidempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
<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>Kun tarvitset saman korkeuden, lisää .h-100kortteihin. Jos haluat oletusarvoisesti yhtä suuret korkeudet, voit määrittää $card-height: 100%Sassissa.
Kortin otsikko
Tämä on pidempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
Kortin otsikko
Tämä on lyhyt kortti.
Kortin otsikko
Tämä on pidempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön.
Kortin otsikko
Tämä on pidempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
<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>Aivan kuten korttiryhmissä, korttien alatunnisteet asettuvat automaattisesti kohdalleen.
Kortin otsikko
Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tämä sisältö on hieman pidempi.
Kortin otsikko
Tämän kortin alla on tukiteksti luonnollisena johdatuksena lisäsisältöön.
Kortin otsikko
Tämä on laajempi kortti, jonka alla on tukiteksti luonnollisena johdatuksena lisäsisältöön. Tässä kortissa on vielä pidempi sisältö kuin ensimmäisessä, joka näyttää samankorkeuden toiminnon.
<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>Muuraus
Vuonna v4käytimme vain CSS-tekniikkaa matkimaan muurattujen pylväiden käyttäytymistä, mutta tällä tekniikalla oli paljon epämiellyttäviä sivuvaikutuksia . Jos haluat käyttää tämäntyyppistä asettelua kohteessa v5, voit vain käyttää Masonry-laajennusta. Muuraus ei sisälly Bootstrapiin , mutta olemme tehneet esittelyesimerkin , joka auttaa sinua pääsemään alkuun.
Sass
Muuttujat
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$card-border-radius: $border-radius;
$card-box-shadow: null;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;