Pereiti prie pagrindinio turinio Pereiti prie dokumentų naršymo
Check
in English

Kortelės

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

Šiame puslapyje

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 .

Placeholder Image cap
Kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Eik kur nors
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>

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.
html 
<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 trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Kortelės nuoroda Kita nuoroda
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>

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.

Placeholder Image cap

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

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>

Išvardykite grupes

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

  • Daiktas
  • Antras elementas
  • Trečias daiktas
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>
Teminiai
  • Daiktas
  • Antras elementas
  • Trečias daiktas
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>
  • Daiktas
  • Antras elementas
  • Trečias daiktas
Kortelės poraštė
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>

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

Placeholder Image cap
Kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

  • Daiktas
  • Antras elementas
  • Trečias daiktas
Kortelės nuoroda Kita nuoroda
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>

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

Teminiai
Specialus titulinis gydymas

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

Eik kur nors
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>

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

Teminiai
Specialus titulinis gydymas

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

Eik kur nors
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>
Citata

Gerai žinoma citata, esanti blockquote elemente.

Kažkas žinomas šaltinio antraštėje
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>
Teminiai
Specialus titulinis gydymas

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

Eik kur nors
prieš 2 dienas
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>

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

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

Eik kur nors
Specialus titulinis gydymas

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

Eik kur nors
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>

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

Naudojant tinkintą CSS

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

Specialus titulinis gydymas

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

Eik kur nors
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>

Teksto lygiavimas

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

Specialus titulinis gydymas

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

Eik kur nors
Specialus titulinis gydymas

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

Eik kur nors
Specialus titulinis gydymas

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

Eik kur nors
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>

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

Specialus titulinis gydymas

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

Eik kur nors
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>
Specialus titulinis gydymas

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

Eik kur nors
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>

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.

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

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>

Vaizdo perdangos

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

Placeholder Card image
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

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>
Atminkite, kad turinys neturėtų būti didesnis nei vaizdo aukštis. Jei turinys yra didesnis nei vaizdas, turinys bus rodomas už vaizdo ribų.

Horizontaliai

Naudojant tinklelio ir naudingumo klasių derinį, kortelės gali būti paverstos horizontaliomis mobiliesiems patogiu ir reaguojančiu būdu. Toliau pateiktame pavyzdyje pašaliname tinklelio latakus .g-0ir naudojame .col-md-*klases, kad kortelė būtų horizontali lūžio taške md. Priklausomai nuo kortelės turinio, gali prireikti papildomų koregavimų.

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

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>

Kortelių stiliai

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

Fonas ir spalva

Pridėta 5.2.0 versijoje

Su mūsų pagalbininkais nustatykite background-colorkontrastingą priekinį planą . Anksčiau buvo reikalaujama rankiniu būdu susieti savo pasirinkimą ir stiliaus formavimo priemones, kurias vis tiek galite naudoti, jei norite.color.text-bg-{color}.text-{color}.bg-{color}

Antraštė
Pagrindinės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Antrinės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Sėkmės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Pavojaus kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Įspėjimo kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Informacinės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Šviesos kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Tamsios kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

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>
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ą .visually-hiddenklasė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ė
Pagrindinės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Antrinės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Sėkmės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Pavojaus kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Įspėjimo kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Informacinės kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Šviesos kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Antraštė
Tamsios kortelės pavadinimas

Keletas trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

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 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 trumpų teksto pavyzdžių, kuriuos galima sukurti remiantis kortelės pavadinimu ir sudaryti didžiąją kortelės turinio dalį.

Poraštė
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>

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 pradedamos sukrauti ir naudojamos display: flex;vienodų matmenų pritvirtinimui, pradedant nuo smlūžio taško.

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

Placeholder Image cap
Kortelės pavadinimas

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

Paskutinį kartą atnaujinta prieš 3 minutes

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

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>

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

Placeholder Image cap
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
Placeholder Image cap
Kortelės pavadinimas

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

Paskutinį kartą atnaujinta prieš 3 minutes
Placeholder Image cap
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
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>

Tinklelio kortelės

Naudokite Bootstrap tinklelio sistemą ir jos .row-colsklases , kad galėtumėte valdyti, kiek tinklelio stulpelių (apvyniotų aplink jūsų korteles) rodote vienoje eilutėje. Pavyzdžiui, .row-cols-1kortelių išdėstymas viename stulpelyje ir .row-cols-md-2keturių kortelių padalijimas į vienodą plotį keliose eilutėse, pradedant nuo vidutinės pertraukos taško.

Placeholder Image cap
Kortelės pavadinimas

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

Placeholder Image cap
Kortelės pavadinimas

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

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį.

Placeholder Image cap
Kortelės pavadinimas

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

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>

Pakeiskite jį į .row-cols-3ir pamatysite ketvirtą kortelės apvyniojimą.

Placeholder Image cap
Kortelės pavadinimas

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

Placeholder Image cap
Kortelės pavadinimas

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

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį.

Placeholder Image cap
Kortelės pavadinimas

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

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>

Kai jums reikia vienodo aukščio, pridėkite .h-100prie kortelių. Jei pagal numatytuosius nustatymus norite vienodo aukščio, galite nustatyti $card-height: 100%Sass.

Placeholder Image cap
Kortelės pavadinimas

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

Placeholder Image cap
Kortelės pavadinimas

Tai trumpa kortelė.

Placeholder Image cap
Kortelės pavadinimas

Tai ilgesnė kortelė su toliau pateiktu pagalbiniu tekstu, kaip natūraliu įėjimu į papildomą turinį.

Placeholder Image cap
Kortelės pavadinimas

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

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>

Kaip ir kortelių grupių atveju, kortelių poraštės bus automatiškai išdėstytos.

Placeholder Image cap
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
Placeholder Image cap
Kortelės pavadinimas

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

Paskutinį kartą atnaujinta prieš 3 minutes
Placeholder Image cap
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
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>

Mūras

Naudojome v4tik CSS metodą, kad imituotume mūrinius stulpelius, tačiau ši technika turėjo daug nemalonių šalutinių poveikių . Jei norite, kad tokio tipo išdėstymas būtų v5, galite tiesiog naudoti „Masonry“ papildinį. Mūras neįtrauktas į „Bootstrap “, bet sukūrėme demonstracinį pavyzdį , kuris padės jums pradėti.

CSS

Kintamieji

Pridėta 5.2.0 versijoje

Kaip „Bootstrap“ besivystančio CSS kintamųjų metodo dalis, kortelėse dabar naudojami vietiniai CSS kintamieji, .cardkad būtų galima patobulinti tinkinimą realiuoju laiku. CSS kintamųjų reikšmės nustatomos naudojant Sass, todėl Sass tinkinimas vis dar palaikomas.

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

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