Карточкалар
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>
Төркемнәрне күрсәтегез
Карточкада эчтәлек исемлекләрен төзегез.
- Бер әйбер
- Икенче пункт
- Өченче пункт
<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>
- Бер әйбер
- Икенче пункт
- Өченче пункт
<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>
- Бер әйбер
- Икенче пункт
- Өченче пункт
<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>
Кухня линкасы
Сезгә кирәк булган картаны ясау өчен, яки бар нәрсәне шунда ташлау өчен, берничә эчтәлек төрен кушыгыз һәм туры китерегез. Түбәндә күрсәтелгән рәсем стиле, блоклар, текст стиле, һәм исемлек төркеме - барысы да киңлек картасына төрелгән.
Карта исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
- Бер әйбер
- Икенче пункт
- Өченче пункт
<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>
Башлам һәм аста
Карточка өстәмә баш һәм / яки аста өстәгез.
Махсус исемне дәвалау
Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.
Кайдадыр бар<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>
Блоккот элементында булган билгеле цитата.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
Махсус исемне дәвалау
Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.
Кайдадыр бар<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
Зурлык
Карточкалар 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-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 диңгез компонентлары белән карточка башына (яки блокка) навигация өстәгез .
Махсус исемне дәвалау
Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.
Кайдадыр бар<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" 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-bottom" alt="...">
</div>
Рәсем каплаулары
Рәсемне карточка фонына әйләндерегез һәм картаның текстын каплагыз. Рәсемгә карап, сезгә өстәмә стильләр яки коммуналь хезмәтләр кирәк булырга мөмкин.
<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>
Горизонталь
Челтәр һәм коммуналь класслар комбинациясен кулланып, карточкаларны мобиль дустанә һәм җаваплы итеп ясарга мөмкин. Түбәндәге мисалда, без челтәр челтәрләрен бетерәбез һәм картаны өзеклектә горизонталь итәр өчен класслар .g-0
кулланабыз . Сезнең карта эчтәлегенә карап өстәмә төзәтмәләр кирәк булырга мөмкин..col-md-*
md
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә киңрәк карточка. Бу эчтәлек бераз озынрак.
Соңгы яңартылган 3 минут элек
<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>
Карта стиле
Карточкаларда аларның фонын, чикләрен, төсләрен көйләү өчен төрле вариантлар бар.
Фон һәм төс
Картаның тышкы кыяфәтен үзгәртү өчен текст төсе һәм фон ярдәмендә кулланыгыз .
Беренчел карточка исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
Икенче карточка исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
Уңыш картасы исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
Куркынычсызлык картасы исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
Кисәтү картасы исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
Мәгълүмат картасы исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
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-dark bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Ярдәмче технологияләргә мәгънә җиткерү
Мәгънә өстәү өчен төс куллану визуаль күрсәткеч кенә бирә, ул ярдәмче технологияләр кулланучыларга җиткерелмәячәк - экран укучылары кебек. Төс белән күрсәтелгән мәгълүматның эчтәлектән ачык булуын (мәсәлән, күренгән текст), яки .visually-hidden
класс белән яшерелгән өстәмә текст кебек альтернатив чаралар аша кертелүен тәэмин итегез.
Чик
Картаны үзгәртү өчен чик коммуналь хезмәтләрен кулланыгыз . 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">
<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
.
Уңыш картасы исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
<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 минут элек
<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>
Карточкалар астындагы карточкаларны кулланганда, аларның эчтәлеге автоматик рәвештә тезеләчәк.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә киңрәк карточка. Бу эчтәлек бераз озынрак.
Карта исеме
Бу картаның өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге тексты бар.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә киңрәк карточка. Бу картаның тигез биеклек хәрәкәтен күрсәткән беренчесенә караганда озынрак эчтәлеге бар.
<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
дүрт картаны берничә рәткә тигез киңлеккә бүлү, урта ноктадан алып.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка. Бу эчтәлек бераз озынрак.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка. Бу эчтәлек бераз озынрак.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка. Бу эчтәлек бераз озынрак.
<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
һәм сез дүртенче карточканы күрерсез.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка. Бу эчтәлек бераз озынрак.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка. Бу эчтәлек бераз озынрак.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка. Бу эчтәлек бераз озынрак.
<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%
, Сасска урнаштыра аласыз.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка. Бу эчтәлек бераз озынрак.
Карта исеме
Бу кыска карточка.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка. Бу эчтәлек бераз озынрак.
<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>
Карточкалардагы кебек, карточкалар автоматик рәвештә тезелеп торачак.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә киңрәк карточка. Бу эчтәлек бераз озынрак.
Карта исеме
Бу картаның өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге тексты бар.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә киңрәк карточка. Бу картаның тигез биеклек хәрәкәтен күрсәткән беренчесенә караганда озынрак эчтәлеге бар.
<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
Сасс
Variзгәрешләр
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$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;