Kortelės

„Bootstrap“ kortelės suteikia lankstų ir išplečiamą turinio talpyklą su keliais variantais ir parinktimis.

Apie

Kortelė yra lankstus ir išplečiamas turinio konteineris. Jame yra antraštės ir poraštės, platus turinio pasirinkimas, kontekstinės fono spalvos ir galingos rodymo parinktys. Jei esate susipažinę su „Bootstrap 3“, kortelės pakeičia senas plokštes, šulinius ir miniatiūras. Panašios funkcijos kaip ir šių komponentų yra prieinamos kaip kortelių modifikavimo klasės.

Pavyzdys

Kortelės sukurtos naudojant kuo mažiau žymėjimo ir stilių, tačiau vis tiek gali suteikti daug valdymo ir tinkinimo. Sukurti naudojant „flexbox“, jie lengvai suderinami ir gerai sumaišomi su kitais „Bootstrap“ komponentais. marginPagal numatytuosius nustatymus jie neturi , todėl prireikus naudokite tarpų įrankius .

Toliau pateikiamas pagrindinės kortelės su mišraus turinio ir fiksuoto pločio pavyzdys. Kortelės neturi fiksuoto pločio pradėti, todėl jos natūraliai užpildys visą pagrindinio elemento plotį. Tai lengvai pritaikoma naudojant įvairias dydžių parinktis .

Kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Eik kur nors

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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>

Turinio tipai

Kortelės palaiko įvairų turinį, įskaitant vaizdus, tekstą, sąrašų grupes, nuorodas ir kt. Toliau pateikti pavyzdžiai, kas palaikoma.

kūnas

Kortelės kūrimo blokas yra .card-body. Naudokite jį, kai tik reikia paminkštintos dalies kortelėje.

Tai tam tikras tekstas kortelės turinyje.

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

Pavadinimai, tekstas ir nuorodos

Kortelių pavadinimai naudojami pridedant .card-titleprie <h*>žymos. Lygiai taip pat nuorodos pridedamos ir dedamos viena šalia kitos, pridedant .card-linkprie <a>žymos.

Subtitrai naudojami pridedant .card-subtitleprie <h*>žymos. Jei .card-titleir .card-subtitleelementai dedami į .card-bodyelementą, kortelės pavadinimas ir paantraštė yra gražiai sulygiuoti.

Kortelės pavadinimas

Kortelės subtitrai

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Kortelės nuoroda Kita nuoroda

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

Vaizdai

.card-img-topįdeda vaizdą kortelės viršuje. Naudodami .card-text, tekstą galima pridėti prie kortelės. Tekstas viduje .card-texttaip pat gali būti stilizuotas naudojant standartines HTML žymas.

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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>

Išvardykite grupes

Kurkite kortelės turinio sąrašus su nuleidimo sąrašo grupe.

Cras justo odio
Dapibus ac facilisis in
Vestibulumas ir erosas

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Teminiai

Cras justo odio
Dapibus ac facilisis in
Vestibulumas ir erosas

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Virtuvės kriauklė

Sumaišykite ir suderinkite kelis turinio tipus, kad sukurtumėte reikiamą kortelę arba sudėkite viską. Toliau pateikiami vaizdų stiliai, blokai, teksto stiliai ir sąrašų grupė – visa tai suvyniota į fiksuoto pločio kortelę.

Kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Cras justo odio
Dapibus ac facilisis in
Vestibulumas ir erosas

Kortelės nuoroda Kita nuoroda

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Antraštė ir Poraštė

Kortelėje pridėkite pasirenkamą antraštę ir (arba) poraštę.

Teminiai

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors

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

Kortelių antraštes galima stilizuoti pridedant .card-headerprie <h*>elementų.

Teminiai

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors

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

Citata

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante.

Kažkas žinomas šaltinio antraštėje

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

Teminiai

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors

prieš 2 dienas

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

Dydžio nustatymas

Manoma, kad kortelių widthpradžia nėra konkreti, todėl jos bus 100 % pločio, nebent nurodyta kitaip. Jei reikia, galite tai pakeisti naudodami tinkintą CSS, tinklelio klases, tinklelio Sass mišinius arba komunalines paslaugas.

Naudojant tinklelio žymėjimą

Naudodami tinklelį, pagal poreikį apvyniokite korteles į stulpelius ir eilutes.

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors

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

Komunalinių paslaugų naudojimas

Norėdami greitai nustatyti kortelės plotį , naudokite keletą galimų dydžio nustatymo paslaugų .

Kortelės pavadinimas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Mygtukas

Kortelės pavadinimas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Mygtukas

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

Naudojant tinkintą CSS

Norėdami nustatyti plotį, naudokite tinkintą CSS savo stilių lapuose arba kaip įterptus stilius.

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors

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

Teksto lygiavimas

Naudodami teksto lygiavimo klases galite greitai pakeisti bet kurios kortelės teksto lygiavimą (visą arba konkrečias dalis) .

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors

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

Pridėkite šiek tiek naršymo prie kortelės antraštės (arba bloko) naudodami „Bootstrap“ navigacijos komponentus .

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors

<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" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">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>

Specialus titulo gydymas

Toliau pateikiamas pagalbinis tekstas, kaip natūralus įėjimas į papildomą turinį.

Eik kur nors

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">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>

Vaizdai

Kortelėse yra keletas darbo su vaizdais parinkčių. Galite pasirinkti pridėti „vaizdo dangtelius“ prie bet kurio kortelės galo, perdengti vaizdus su kortelės turiniu arba tiesiog įterpti vaizdą į kortelę.

Vaizdo dangteliai

Panašiai kaip antraštės ir poraštės, kortelės gali turėti viršutinę ir apatinę „vaizdo dangtelius“ – vaizdus kortelės viršuje arba apačioje.

Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes

Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes

<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</div>

Vaizdo perdangos

Paverskite vaizdą kortelės fonu ir perdenkite kortelės tekstą. Priklausomai nuo vaizdo, jums gali prireikti papildomų stilių ar paslaugų.

Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <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>

Kortelių stiliai

Kortelėse yra įvairių fono, kraštinių ir spalvos tinkinimo parinkčių.

Fonas ir spalva

Norėdami pakeisti kortelės išvaizdą, naudokite teksto ir fono priemones .

Antraštė

Pirminės kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Antrinės kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Sėkmės kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Pavojaus kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Įspėjimo kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Informacinės kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Šviesos kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Tamsios kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

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

Pagalbinių technologijų prasmės perteikimas

Spalvų naudojimas reikšmei pridėti suteikia tik vaizdinę nuorodą, kuri nebus perduota pagalbinių technologijų, pvz., ekrano skaitytuvų, naudotojams. Užtikrinkite, kad informacija, pažymėta spalva, būtų akivaizdi iš paties turinio (pvz., matomas tekstas), arba būtų įtraukta naudojant alternatyvias priemones, pvz., papildomą tekstą, paslėptą .sr-onlyklasėje.

Sienos

Norėdami pakeisti tik kortelės pavadinimą, naudokite pasienio įrankius . Atminkite, kad klases border-colorgalite priskirti pirminiam kortelės turinio pogrupiui, kaip parodyta toliau..text-{color}.card

Antraštė

Pirminės kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Antrinės kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Sėkmės kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Pavojaus kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Įspėjimo kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Informacinės kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Šviesos kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė

Tamsios kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

<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 text-warning">
    <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 text-info">
    <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 komunalinės paslaugos

Taip pat galite pakeisti kortelės antraštės ir poraštės kraštines, jei reikia, ir netgi pašalinti jas background-colornaudodami .bg-transparent.

Antraštė

Sėkmės kortelės pavadinimas

Keletas trumpo teksto pavyzdžio, kurį galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Poraštė

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

Kortelės išdėstymas

Be kortelių turinio stiliaus, „Bootstrap“ apima keletą kortelių serijų išdėstymo parinkčių. Kol kas šios išdėstymo parinktys dar nereaguoja .

Kortelių grupės

Naudokite kortelių grupes, kad pateiktumėte korteles kaip vieną prisegtą elementą su vienodo pločio ir aukščio stulpeliais. Kortelių grupės naudoja display: flex;vienodą dydį.

Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes

Kortelės pavadinimas

Šioje kortelėje toliau pateikiamas pagalbinis tekstas, kaip natūralus įvestis į papildomą turinį.

Paskutinį kartą atnaujinta prieš 3 minutes

Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Ši kortelė turi dar ilgesnį turinį nei pirmoji, rodanti vienodo aukščio veiksmą.

Paskutinį kartą atnaujinta prieš 3 minutes

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Naudojant kortelių grupes su poraštėmis, jų turinys automatiškai išsirikiuoja.

Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes

Kortelės pavadinimas

Šioje kortelėje toliau pateikiamas pagalbinis tekstas, kaip natūralus įvestis į papildomą turinį.

Paskutinį kartą atnaujinta prieš 3 minutes

Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Ši kortelė turi dar ilgesnį turinį nei pirmoji, rodanti vienodo aukščio veiksmą.

Paskutinį kartą atnaujinta prieš 3 minutes

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Kortų kaladės

Reikia vienodo pločio ir aukščio kortelių, kurios nėra pritvirtintos viena prie kitos? Naudokite kortų kaladės.

Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes

Kortelės pavadinimas

Šioje kortelėje toliau pateikiamas pagalbinis tekstas, kaip natūralus įvestis į papildomą turinį.

Paskutinį kartą atnaujinta prieš 3 minutes

Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Ši kortelė turi dar ilgesnį turinį nei pirmoji, rodanti vienodo aukščio veiksmą.

Paskutinį kartą atnaujinta prieš 3 minutes

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>

Kaip ir kortų grupių atveju, kortų poraštės kaladėse automatiškai išsirikiuoja.

Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Paskutinį kartą atnaujinta prieš 3 minutes

Kortelės pavadinimas

Šioje kortelėje toliau pateikiamas pagalbinis tekstas, kaip natūralus įvestis į papildomą turinį.

Paskutinį kartą atnaujinta prieš 3 minutes

Kortelės pavadinimas

Tai platesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Ši kortelė turi dar ilgesnį turinį nei pirmoji, rodanti vienodo aukščio veiksmą.

Paskutinį kartą atnaujinta prieš 3 minutes

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Kortelių stulpeliai

Kortelės gali būti suskirstytos į mūrinius stulpelius, naudojant tik CSS, suvyniojus jas į .card-columns. Kortelės sukurtos naudojant CSS columnypatybes, o ne „flexbox“, kad būtų lengviau suderinti. Kortelės rūšiuojamos iš viršaus į apačią ir iš kairės į dešinę.

Galvas aukštyn! Jūsų rida su kortelių stulpeliais gali skirtis. Kad kortelės neišsiskaldytų per stulpelius, turime jas nustatyti, display: inline-blocknes column-break-inside: avoidtai dar nėra neperšaunamas sprendimas.

Kortelės pavadinimas, kuris perkeliamas į naują eilutę

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį. Šis turinys yra šiek tiek ilgesnis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante.

Kažkas žinomas šaltinio antraštėje

Kortelės pavadinimas

Šioje kortelėje toliau pateikiamas pagalbinis tekstas, kaip natūralus įvestis į papildomą turinį.

Paskutinį kartą atnaujinta prieš 3 minutes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius pozuere erat.

Kažkas žinomas šaltinio antraštėje

Kortelės pavadinimas

Šioje kortelėje yra įprastas pavadinimas ir trumpa teksto pastraipa po juo.

Paskutinį kartą atnaujinta prieš 3 minutes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sveikasis skaičius posuere erat a ante.

Kažkas žinomas šaltinio antraštėje

Kortelės pavadinimas

Tai dar viena kortelė su pavadinimu ir pagalbiniu tekstu žemiau. Šioje kortelėje yra šiek tiek papildomo turinio, kad ji būtų šiek tiek aukštesnė.

Paskutinį kartą atnaujinta prieš 3 minutes

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src=".../100px260/" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Kortelių stulpelius taip pat galima išplėsti ir pritaikyti tam tikru papildomu kodu. Žemiau parodytas klasės plėtinys, .card-columnsnaudojant tą patį CSS, kurį naudojame – CSS stulpelius – kad sugeneruotų reaguojančių pakopų rinkinį, skirtą pakeisti stulpelių skaičių.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

Kortelės

Apie

Pavyzdys

Kortelės pavadinimas

Turinio tipai

kūnas

Pavadinimai, tekstas ir nuorodos

Kortelės pavadinimas

Kortelės subtitrai

Vaizdai

Išvardykite grupes

Virtuvės kriauklė

Kortelės pavadinimas

Antraštė ir Poraštė

Specialus titulo gydymas

Teminiai

Specialus titulo gydymas

Specialus titulo gydymas

Dydžio nustatymas

Naudojant tinklelio žymėjimą

Specialus titulo gydymas

Specialus titulo gydymas

Komunalinių paslaugų naudojimas

Kortelės pavadinimas

Kortelės pavadinimas

Naudojant tinkintą CSS

Specialus titulo gydymas

Teksto lygiavimas

Specialus titulo gydymas

Specialus titulo gydymas

Specialus titulo gydymas

Navigacija

Specialus titulo gydymas

Specialus titulo gydymas

Vaizdai

Vaizdo dangteliai

Kortelės pavadinimas

Kortelės pavadinimas

Vaizdo perdangos

Kortelės pavadinimas

Kortelių stiliai

Fonas ir spalva

Pirminės kortelės pavadinimas

Antrinės kortelės pavadinimas

Sėkmės kortelės pavadinimas

Pavojaus kortelės pavadinimas

Įspėjimo kortelės pavadinimas

Informacinės kortelės pavadinimas

Šviesos kortelės pavadinimas

Tamsios kortelės pavadinimas

Pagalbinių technologijų prasmės perteikimas

Sienos

Pirminės kortelės pavadinimas

Antrinės kortelės pavadinimas

Sėkmės kortelės pavadinimas

Pavojaus kortelės pavadinimas

Įspėjimo kortelės pavadinimas

Informacinės kortelės pavadinimas

Šviesos kortelės pavadinimas

Tamsios kortelės pavadinimas

Mixins komunalinės paslaugos

Sėkmės kortelės pavadinimas

Kortelės išdėstymas

Kortelių grupės

Kortelės pavadinimas

Kortelės pavadinimas

Kortelės pavadinimas

Kortelės pavadinimas

Kortelės pavadinimas

Kortelės pavadinimas

Kortų kaladės

Kortelės pavadinimas

Kortelės pavadinimas

Kortelės pavadinimas

Kortelės pavadinimas

Kortelės pavadinimas

Kortelės pavadinimas

Kortelių stulpeliai

Kortelės pavadinimas, kuris perkeliamas į naują eilutę

Kortelės pavadinimas