Карточкалар

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

Турында

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

Мисал

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

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

Карта исеме

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

Кайдадыр бар

<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. Карточка эчендә ябыштырылган бүлек кирәк булганда кулланыгыз.

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

<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, карточка исеме һәм субтитры яхшы итеп тигезләнгән.

Карта исеме

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

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

Карта сылтамасы Тагын бер сылтама

<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 тэглары белән ясалырга мөмкин.

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

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

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

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

Крас Джасто Одио
Dapibus ac facilisis
Вестибулум

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

Күрсәтелгән

Крас Джасто Одио
Dapibus ac facilisis
Вестибулум

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

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

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

Карта исеме

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

Крас Джасто Одио
Dapibus ac facilisis
Вестибулум

Карта сылтамасы Тагын бер сылтама

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

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

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

Күрсәтелгән

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

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

Кайдадыр бар

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

Күрсәтелгән

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

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

Кайдадыр бар

<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итата

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.

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

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

Күрсәтелгән

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

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

Кайдадыр бар

2 көн элек

<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 миксиннары яки коммуналь хезмәтләр ярдәмендә үзгәртә аласыз.

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

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

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

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

Кайдадыр бар

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

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

Кайдадыр бар

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

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

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

Карта исеме

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

Кнопка

Карта исеме

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

Кнопка

<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 кулланыгыз.

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

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

Кайдадыр бар

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

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

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

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

Кайдадыр бар

<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

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

Кайдадыр бар

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">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 минут элек

<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-top" alt="...">
</div>

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

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

Карта исеме

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

<div class="card bg-dark text-white">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

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

Горизонталь

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

Карта исеме

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

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" 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>

Карта стиле

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

Фон һәм төс

Картаның тышкы кыяфәтен үзгәртү өчен текст һәм фон ярдәмендә кулланыгыз .

Башлам

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

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

Башлам

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

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

Башлам

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

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

Башлам

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

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

Башлам

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

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

Башлам

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

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

Башлам

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

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

Башлам

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

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

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

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

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

Чик

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

Башлам

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

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

Башлам

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

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

Башлам

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

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

Башлам

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

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

Башлам

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

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

Башлам

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

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

Башлам

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

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

Башлам

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

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

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

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

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

Башлам

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

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

Аяк асты

<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;бердәм зурлыкка ирешү өчен кулланалар.

Карта исеме

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

Карта исеме

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

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

Карта исеме

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

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

<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 минут элек

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

Карточка

Бер-берсенә бәйләнмәгән тигез киңлек һәм биеклек карталары җыелмасы кирәкме? Карточкаларны кулланыгыз.

Карта исеме

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

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

Карта исеме

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

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

Карта исеме

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

<div class="card-deck">
  <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>
      <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 минут элек

<div class="card-deck">
  <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дүрт картаны берничә рәткә тигез киңлеккә бүлү, урта ноктадан алып.

Карта исеме

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

Карта исеме

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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һәм сез дүртенче карточканы күрерсез.

Карта исеме

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

Карта исеме

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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%, Сасска урнаштыра аласыз.

Карта исеме

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

Карта исеме

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

Карта исеме

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Карта баганалары

Карточкаларны масонга охшаган баганаларга CSS белән генә урнаштырып була .card-columns. columnКарточкалар җиңелрәк тигезләнү өчен флексбок урынына CSS үзлекләре белән төзелгән . Карточкалар өстән аска, сулдан уңга заказ бирелә.

Идарә итә! Карта баганалары белән сезнең арагыз төрле булырга мөмкин. Карточкаларның баганалар аша өзелүен булдырмас өчен, без аларны пуля үткәрми торган чишелеш display: inline-blockитеп куярга тиеш.column-break-inside: avoid

Яңа сызыкка төрелгән карточка исеме

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.

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

Карта исеме

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

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

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere erat.

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

Карта исеме

Бу картаның даими исеме һәм текстның кыска параграфиясе бар.

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

Лорем ипсум долор амет утыра, консексетур элип. Integer posuere ante erat.

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

Карта исеме

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

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

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <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 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 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 text-white">
        <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 src="..." class="card-img-top" alt="...">
  </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>

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

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

Карточкалар

Турында

Мисал

Карта исеме

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

Тән

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

Карта исеме

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

Рәсемнәр

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

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

Карта исеме

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

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

Күрсәтелгән

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

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

Зурлык

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

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

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

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

Карта исеме

Карта исеме

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

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

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

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

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

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

Навигация

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

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

Рәсемнәр

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

Карта исеме

Карта исеме

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

Карта исеме

Горизонталь

Карта исеме

Карта стиле

Фон һәм төс

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

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

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

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

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

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

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

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

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

Чик

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

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

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

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

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

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

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

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

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

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

Карта макеты

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

Карта исеме

Карта исеме

Карта исеме

Карта исеме

Карта исеме

Карта исеме

Карточка

Карта исеме

Карта исеме

Карта исеме

Карта исеме

Карта исеме

Карта исеме

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