Карточкалар

Bootstrap карталары сыгылучан һәм киңәйтелгән эчтәлек контейнерын тәкъдим итә.

Бу биттә

Турында

Карт - сыгылучан һәм киңәйтелгән эчтәлек контейнеры. Анда башлам һәм аскы өлешләр, төрле эчтәлек, контекст фон төсләре, көчле күрсәтү вариантлары бар. Әгәр сез Bootstrap 3 белән таныш булсагыз, карталар безнең иске панельләрне, скважиналарны һәм эскизларны алыштыралар. Бу компонентларга охшаш функция карточкалар өчен модификатор класслары буларак бар.

Мисал

Карточкалар мөмкин кадәр аз билгеләр һәм стильләр белән төзелгән, ләкин барыбер бер тон контроль һәм көйләү белән идарә итә. Флексбокс белән төзелгән, алар җиңел тигезләнүне тәкъдим итәләр һәм бүтән Bootstrap компонентлары белән яхшы кушылалар. Аларның килешүләре юк margin, шуңа күрә кирәк булганда араларны кулланыгыз .

Түбәндә катнаш эчтәлекле һәм киң киңлектәге төп карточка мисал. Карточкаларның башланыр өчен киңлеге юк, шуңа күрә алар төп элементның тулы киңлеген тутырачаклар. Бу безнең төрле зурлык вариантлары белән җиңел көйләнә .

Карта исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Кайдадыр бар

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>

Эчтәлек төрләре

Карточкалар төрле эчтәлекне, шул исәптән рәсемнәр, текст, исемлек төркемнәре, сылтамалар һ.б. Түбәндә күрсәтелгәннәрнең мисаллары китерелгән.

Тән

Карточка блокы .card-body. Карточка эчендә ябыштырылган бүлек кирәк булганда кулланыгыз.

Бу карточка эчендәге кайбер текст.

html

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

Титуллар, текст һәм сылтамалар

Карт исемнәре тэг .card-titleөстәп кулланыла. Шул ук рәвешчә, сылтамалар өстәлә һәм теге өстәп бер <h*>-берсенең янына урнаштырыла ..card-link<a>

Субтитрлар тегка өстәп кулланыла .card-subtitle. <h*>Әгәр дә .card-titleәйберләр .card-subtitleпредметка урнаштырылса .card-body, карточка исеме һәм субтитры яхшы итеп тигезләнгән.

Карта исеме

Карта субтитры

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Карта сылтамасы Башка сылтама

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>

Рәсемнәр

.card-img-topкартаны өскә урнаштыра. Карточкага .card-textтекст өстәргә мөмкин. Эчтәге текст .card-textшулай ук стандарт HTML тэглары белән ясалырга мөмкин.

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

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>

Төркемнәрне күрсәтегез

Карточкада эчтәлек исемлекләрен төзегез.

Бер әйбер
Икенче пункт
Өченче пункт

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>

Күрсәтелгән

Бер әйбер
Икенче пункт
Өченче пункт

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>

Бер әйбер
Икенче пункт
Өченче пункт

Карточка

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>

Кухня линкасы

Сезгә кирәк булган картаны ясау өчен, яки бар нәрсәне шунда ташлау өчен, берничә эчтәлек төрен кушыгыз һәм туры китерегез. Түбәндә күрсәтелгән рәсем стиле, блоклар, текст стиле, һәм исемлек төркеме - барысы да киңлек картасына төрелгән.

Карта исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Бер әйбер
Икенче пункт
Өченче пункт

Карта сылтамасы Башка сылтама

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>

Башлам һәм аста

Карточка өстәмә баш һәм / яки аста өстәгез.

Күрсәтелгән

Махсус исемне дәвалау

Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.

Кайдадыр бар

html

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Элементларга өстәп .card-header, карточка башлары ясалырга мөмкин .<h*>

Күрсәтелгән

Махсус исемне дәвалау

Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.

Кайдадыр бар

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>

Oteитата

Блоккот элементында булган билгеле цитата.

Чыганак исемендә танылган кеше

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>

Күрсәтелгән

Махсус исемне дәвалау

Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.

Кайдадыр бар

2 көн элек

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>

Зурлык

Карточкалар widthбашлау өчен махсус түгел, шуңа күрә алар 100% киң булачак. Сез моны кирәк булганда CSS, челтәр класслары, челтәр Sass миксиннары яки коммуналь хезмәтләр ярдәмендә үзгәртә аласыз.

Челтәр билгесен куллану

Челтәрне кулланып, кирәк булганда карточкаларны баганаларга һәм рәтләргә төрегез.

Махсус исемне дәвалау

Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.

Кайдадыр бар

Махсус исемне дәвалау

Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.

Кайдадыр бар

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>

Коммуналь хезмәтләр куллану

Картаның киңлеген тиз урнаштыру өчен, безнең кулда булган зур күләмле ярдәмне кулланыгыз .

Карта исеме

Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.

Кнопка

Карта исеме

Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.

Кнопка

html

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Гадәттәге CSS куллану

Сезнең стиль таблицаларыгызда яки киңлекне урнаштыру өчен стиль CSS кулланыгыз.

Махсус исемне дәвалау

Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.

Кайдадыр бар

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>

Текстны тигезләү

Сез теләсә нинди картаның текст тигезләнешен тиз яки тулы өлешендә - безнең текст тигезләү класслары белән тиз үзгәртә аласыз .

Махсус исемне дәвалау

Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.

Кайдадыр бар

Махсус исемне дәвалау

Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.

Кайдадыр бар

Махсус исемне дәвалау

Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.

Кайдадыр бар

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>

Bootstrap диңгез компонентлары белән карточка башына (яки блокка) навигация өстәгез .

Махсус исемне дәвалау

Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.

Кайдадыр бар

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>

Махсус исемне дәвалау

Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.

Кайдадыр бар

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>

Рәсемнәр

Карточкаларда рәсемнәр белән эшләү өчен берничә вариант бар. Картаның ике ягына да "рәсем капкаларын" өстәүдән, карточкаларның эчтәлеге белән рәсемнәрне каплаудан яки картаны рәсемгә урнаштырудан сайлагыз.

Рәсем капкалары

Башлам һәм аскы өлешләргә охшаган карточкалар өске һәм аскы “рәсем капкаларын” кертә ала - картаның өске яисә аскы өлешләре.

Карта исеме

Бу өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә киңрәк карточка. Бу эчтәлек бераз озынрак.

Соңгы яңартылган 3 минут элек

Карта исеме

Соңгы яңартылган 3 минут элек

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>

Рәсем каплаулары

Рәсемне карточка фонына әйләндерегез һәм картаның текстын каплагыз. Рәсемгә карап, сезгә өстәмә стильләр яки коммуналь хезмәтләр кирәк булырга мөмкин.

Карта исеме

Соңгы яңартылган 3 минут элек

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>

Игътибар итегез, эчтәлек рәсем биеклегеннән зуррак булырга тиеш түгел. Эчтәлек рәсемнән зуррак булса, эчтәлек рәсемнән читтә күрсәтеләчәк.

Горизонталь

Челтәр һәм коммуналь класслар комбинациясен кулланып, карточкаларны мобиль дустанә һәм җаваплы итеп ясарга мөмкин. Түбәндәге мисалда, без челтәр челтәрләрен бетерәбез һәм картаны өзеклектә горизонталь итәр өчен класслар .g-0кулланабыз . Сезнең карта эчтәлегенә карап өстәмә төзәтмәләр кирәк булырга мөмкин..col-md-*md

Карта исеме

Соңгы яңартылган 3 минут элек

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>

Карта стиле

Карточкаларда аларның фонын, чикләрен, төсләрен көйләү өчен төрле вариантлар бар.

Фон һәм төс

V5.2.0 өстәлде

Безнең ярдәмчеләр белән background-colorкапма-каршы алгы планны куегыз . Элегерәк сез үзегез сайлаганны һәм стиллау өчен коммуналь хезмәтләрне кул белән парлаштыру таләп ителә иде , сез теләсәгез куллана аласыз.color.text-bg-{color}.text-{color}.bg-{color}

Башлам

Беренчел карточка исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Икенче карточка исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Уңыш картасы исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Куркынычсызлык картасы исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Кисәтү картасы исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Мәгълүмат картасы исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Lightиңел карточка исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Кара карточка исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

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>

Ярдәмче технологияләргә мәгънә җиткерү

Мәгънә өстәү өчен төс куллану визуаль күрсәткеч кенә бирә, ул ярдәмче технологияләр кулланучыларга җиткерелмәячәк - экран укучылары кебек. Төс белән күрсәтелгән мәгълүматның эчтәлектән ачык булуын (мәсәлән, күренгән текст), яки .visually-hiddenкласс белән яшерелгән өстәмә текст кебек альтернатив чаралар аша кертелүен тәэмин итегез.

Чик

Картаны үзгәртү өчен чик коммуналь хезмәтләрен кулланыгыз . border-colorИгътибар итегез, сез .text-{color}ата-аналарга дәресләр .cardяисә картаның эчтәлеген түбәндә күрсәтә аласыз.

Башлам

Беренчел карточка исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Икенче карточка исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Уңыш картасы исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Куркынычсызлык картасы исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Кисәтү картасы исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Мәгълүмат картасы исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Lightиңел карточка исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Башлам

Кара карточка исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

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>

Миксин коммуналь хезмәтләре

Сез шулай ук карточка башындагы һәм аскы өлештәге чикләрне үзгәртә аласыз, хәтта аларны алып ташлый background-colorаласыз .bg-transparent.

Башлам

Уңыш картасы исеме

Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.

Аяк асты

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>

Карта макеты

Эчтәлекне карточкалардан тыш, Bootstrap карталар сериясен урнаштыру өчен берничә вариантны үз эченә ала. Хәзерге вакытта бу макет вариантлары әле җаваплы түгел .

Карта төркемнәре

Карточкаларны тигез киңлек һәм биеклек баганалары белән бәйләнгән элемент итеп күрсәтү өчен карточкалар төркемнәрен кулланыгыз. Карточкалар тупланганнан башлана һәм тәнәфес ноктасыннан display: flex;башлап бердәм үлчәмнәр белән бәйләнешкә керәләр .sm

Карта исеме

Соңгы яңартылган 3 минут элек

Карта исеме

Бу картаның өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге тексты бар.

Соңгы яңартылган 3 минут элек

Карта исеме

Бу өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә киңрәк карточка. Бу картаның тигез биеклек хәрәкәтен күрсәткән беренчесенә караганда озынрак эчтәлеге бар.

Соңгы яңартылган 3 минут элек

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>

Карточкалар астындагы карточкаларны кулланганда, аларның эчтәлеге автоматик рәвештә тезеләчәк.

Карта исеме

Соңгы яңартылган 3 минут элек

Карта исеме

Бу картаның өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге тексты бар.

Соңгы яңартылган 3 минут элек

Карта исеме

Соңгы яңартылган 3 минут элек

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>

Челтәр карталары

Bootstrap челтәр системасын һәм аның .row-colsклассларын кулланыгыз, сез рәткә ничә челтәр баганасын күрсәтәсез (карточкаларыгыз белән уралган). Мисал өчен, монда .row-cols-1карточкаларны бер баганага урнаштыру, һәм .row-cols-md-2дүрт картаны берничә рәткә тигез киңлеккә бүлү, урта ноктадан алып.

Карта исеме

Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка. Бу эчтәлек бераз озынрак.

Карта исеме

Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка.

Карта исеме

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>

Аны үзгәртегез .row-cols-3һәм сез дүртенче карточканы күрерсез.

Карта исеме

Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка.

Карта исеме

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>

Сезгә тигез биеклек кирәк булганда .h-100, карточкаларга өстәгез. Килешү буенча тигез биеклекләр теләсәгез $card-height: 100%, Сасска урнаштыра аласыз.

Карта исеме

Бу кыска карточка.

Карта исеме

Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка.

Карта исеме

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>

Карточкалардагы кебек, карточкалар автоматик рәвештә тезелеп торачак.

Карта исеме

Соңгы яңартылган 3 минут элек

Карта исеме

Бу картаның өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге тексты бар.

Соңгы яңартылган 3 минут элек

Карта исеме

Соңгы яңартылган 3 минут элек

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>

Масон

Без масонгаv4 охшаган баганаларның тәртибен охшату өчен CSS-техникасын гына кулландык , ләкин бу техника бик күңелсез ягы белән килде . Әгәр дә сез бу төр макетны урнаштырырга телисез икән , сез масон плагинын куллана аласыз. Масония Bootstrap эченә кертелмәгән , ләкин без башларга ярдәм итәр өчен демо мисал ясадык.v5

CSS

Variзгәрешләр

V5.2.0 өстәлде

Bootstrap үсешенең CSS үзгәрүчәнлеге алымы кысаларында, карточкалар хәзерге вакытта .cardкөчәйтелгән реальләштерү өчен җирле CSS үзгәрүләрен кулланалар. CSS үзгәрүчәннәре өчен кыйммәтләр Sass аша куела, шуңа күрә Sass көйләү дә ярдәм итә.

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

Сасс үзгәрүләр

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

Карточкалар

Турында

Мисал

Карта исеме

Эчтәлек төрләре

Тән

Титуллар, текст һәм сылтамалар

Карта исеме

Карта субтитры

Рәсемнәр

Төркемнәрне күрсәтегез

Кухня линкасы

Карта исеме

Башлам һәм аста

Махсус исемне дәвалау

Күрсәтелгән

Махсус исемне дәвалау

Махсус исемне дәвалау

Зурлык

Челтәр билгесен куллану

Махсус исемне дәвалау

Махсус исемне дәвалау

Коммуналь хезмәтләр куллану

Карта исеме

Карта исеме

Гадәттәге CSS куллану

Махсус исемне дәвалау

Текстны тигезләү

Махсус исемне дәвалау

Махсус исемне дәвалау

Махсус исемне дәвалау

Навигация

Махсус исемне дәвалау

Махсус исемне дәвалау

Рәсемнәр

Рәсем капкалары

Карта исеме

Карта исеме

Рәсем каплаулары

Карта исеме

Горизонталь

Карта исеме

Карта стиле

Фон һәм төс

Беренчел карточка исеме

Икенче карточка исеме

Уңыш картасы исеме

Куркынычсызлык картасы исеме

Кисәтү картасы исеме

Мәгълүмат картасы исеме

Lightиңел карточка исеме

Кара карточка исеме

Ярдәмче технологияләргә мәгънә җиткерү

Чик

Беренчел карточка исеме

Икенче карточка исеме

Уңыш картасы исеме

Куркынычсызлык картасы исеме

Кисәтү картасы исеме

Мәгълүмат картасы исеме

Lightиңел карточка исеме

Кара карточка исеме

Миксин коммуналь хезмәтләре

Уңыш картасы исеме

Карта макеты

Карта төркемнәре

Карта исеме

Карта исеме

Карта исеме

Карта исеме

Карта исеме

Карта исеме

Челтәр карталары

Карта исеме

Карта исеме

Карта исеме

Карта исеме

Карта исеме

Карта исеме

Карта исеме