SourceКарточкалар
Bootstrap карталары сыгылучан һәм киңәйтелгән эчтәлек контейнерын тәкъдим итә.
Карт - сыгылучан һәм киңәйтелгән эчтәлек контейнеры. Анда башлам һәм аскы өлешләр, төрле эчтәлек, контекст фон төсләре, көчле күрсәтү вариантлары бар. Әгәр сез Bootstrap 3 белән таныш булсагыз, карталар безнең иске панельләрне, скважиналарны һәм эскизларны алыштыралар. Бу компонентларга охшаш функция карточкалар өчен модификатор класслары буларак бар.
Карточкалар мөмкин кадәр аз билгеләр һәм стильләр белән төзелгән, ләкин барыбер бер тон контроль һәм көйләү белән идарә итә. Флексбокс белән төзелгән, алар җиңел тигезләнүне тәкъдим итәләр һәм бүтән Bootstrap компонентлары белән яхшы кушылалар. Аларның килешүләре юк margin
, шуңа күрә кирәк булганда араларны кулланыгыз .
Түбәндә катнаш эчтәлекле һәм киң киңлектәге төп карточка мисал. Карточкаларның башланыр өчен киңлеге юк, шуңа күрә алар төп элементның тулы киңлеген тутырачаклар. Бу безнең төрле зурлык вариантлары белән җиңел көйләнә .
Карта исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
Кайдадыр бар
Күчермә
<div class= "card" style= "width: 18rem;" >
<img class= "card-img-top" src= ".../100px180/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href= "#" class= "btn btn-primary" > Go somewhere</a>
</div>
</div>
Карточкалар төрле эчтәлекне, шул исәптән рәсемнәр, текст, исемлек төркемнәре, сылтамалар һ.б. Түбәндә күрсәтелгәннәрнең мисаллары китерелгән.
Карточка блокы .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 class= "card-img-top" src= ".../100px180/?text=Image cap" alt= "Card image cap" >
<div class= "card-body" >
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Карточкада эчтәлек исемлекләрен төзегез.
Крас Джасто Одио
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 class= "card-img-top" src= ".../100px180/?text=Image cap" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class= "list-group list-group-flush" >
<li class= "list-group-item" > Cras justo odio</li>
<li class= "list-group-item" > Dapibus ac facilisis in</li>
<li class= "list-group-item" > Vestibulum at eros</li>
</ul>
<div class= "card-body" >
<a href= "#" class= "card-link" > Card link</a>
<a href= "#" class= "card-link" > Another link</a>
</div>
</div>
Карточка өстәмә баш һәм / яки аста өстәгез.
Махсус исемне дәвалау
Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.
Кайдадыр бар
Күчермә
<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>
Лорем ипсум долор амет утыра, консексетур элип. 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>
Махсус исемне дәвалау
Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.
Кайдадыр бар
Күчермә
<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 кулланыгыз.
Махсус исемне дәвалау
Өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә.
Кайдадыр бар
Күчермә
<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= "#" > 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= "#" > 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 class= "card-img-top" src= ".../100px180/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
<img class= "card-img-bottom" src= ".../100px180/" alt= "Card image cap" >
</div>
Рәсемне карточка фонына әйләндерегез һәм картаның текстын каплагыз. Рәсемгә карап, сезгә өстәмә стильләр яки коммуналь хезмәтләр кирәк булырга мөмкин.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә киңрәк карточка. Бу эчтәлек бераз озынрак.
Соңгы яңартылган 3 минут элек
Күчермә
<div class= "card bg-dark text-white" >
<img class= "card-img" src= ".../100px270/#55595c:#373a3c/text:Card image" alt= "Card image" >
<div class= "card-img-overlay" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class= "card-text" > Last updated 3 mins ago</p>
</div>
</div>
Карточкаларда аларның фонын, чикләрен, төсләрен көйләү өчен төрле вариантлар бар.
Картаның тышкы кыяфәтен үзгәртү өчен текст һәм фон ярдәмендә кулланыгыз .
Беренчел карточка исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
Икенче карточка исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
Уңыш картасы исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
Куркынычсызлык картасы исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
Кисәтү картасы исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
Мәгълүмат картасы исеме
Карт исеменә нигезләнеп, картаның эчтәлегенең төп өлешен төзү өчен кайбер тиз үрнәк текст.
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 class= "card-img-top" src= ".../100px180/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img class= "card-img-top" src= ".../100px180/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img class= "card-img-top" src= ".../100px180/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Карточкалар астындагы карточкаларны кулланганда, аларның эчтәлеге автоматик рәвештә тезеләчәк.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә киңрәк карточка. Бу эчтәлек бераз озынрак.
Карта исеме
Бу картаның өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге тексты бар.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә киңрәк карточка. Бу картаның тигез биеклек хәрәкәтен күрсәткән беренчесенә караганда озынрак эчтәлеге бар.
Күчермә
<div class= "card-group" >
<div class= "card" >
<img class= "card-img-top" src= ".../100px180/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
<div class= "card" >
<img class= "card-img-top" src= ".../100px180/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
<div class= "card" >
<img class= "card-img-top" src= ".../100px180/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
</div>
Бер-берсенә бәйләнмәгән тигез киңлек һәм биеклек карталары җыелмасы кирәкме? Карточкаларны кулланыгыз.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә астагы текст ярдәмендә озынрак карточка. Бу эчтәлек бераз озынрак.
Соңгы яңартылган 3 минут элек
Карта исеме
Бу картаның өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге тексты бар.
Соңгы яңартылган 3 минут элек
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә киңрәк карточка. Бу картаның тигез биеклек хәрәкәтен күрсәткән беренчесенә караганда озынрак эчтәлеге бар.
Соңгы яңартылган 3 минут элек
Күчермә
<div class= "card-deck" >
<div class= "card" >
<img class= "card-img-top" src= ".../100px200/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img class= "card-img-top" src= ".../100px200/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img class= "card-img-top" src= ".../100px200/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Карточкалардагы кебек, палубалардагы карточкалар автоматик рәвештә тезелеп торачак.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә киңрәк карточка. Бу эчтәлек бераз озынрак.
Карта исеме
Бу картаның өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге тексты бар.
Карта исеме
Бу өстәмә эчтәлеккә табигый кертү рәвешендә түбәндәге текст ярдәмендә киңрәк карточка. Бу картаның тигез биеклек хәрәкәтен күрсәткән беренчесенә караганда озынрак эчтәлеге бар.
Күчермә
<div class= "card-deck" >
<div class= "card" >
<img class= "card-img-top" src= ".../100px180/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
<div class= "card" >
<img class= "card-img-top" src= ".../100px180/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
<div class= "card" >
<img class= "card-img-top" src= ".../100px180/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class= "card-footer" >
<small class= "text-muted" > Last updated 3 mins ago</small>
</div>
</div>
</div>
Карточкаларны масонга охшаган баганаларга 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 class= "card-img-top" src= ".../100px160/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title that wraps to a new line</h5>
<p class= "card-text" > This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class= "card p-3" >
<blockquote class= "blockquote mb-0 card-body" >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class= "blockquote-footer" >
<small class= "text-muted" >
Someone famous in <cite title= "Source Title" > Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class= "card" >
<img class= "card-img-top" src= ".../100px160/" alt= "Card image cap" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has supporting text below as a natural lead-in to additional content.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card bg-primary text-white text-center p-3" >
<blockquote class= "blockquote mb-0" >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class= "blockquote-footer" >
<small>
Someone famous in <cite title= "Source Title" > Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class= "card text-center" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This card has a regular title and short paragraphy of text below it.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
<div class= "card" >
<img class= "card-img" src= ".../100px260/" alt= "Card image" >
</div>
<div class= "card p-3 text-right" >
<blockquote class= "blockquote mb-0" >
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class= "blockquote-footer" >
<small class= "text-muted" >
Someone famous in <cite title= "Source Title" > Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class= "card" >
<div class= "card-body" >
<h5 class= "card-title" > Card title</h5>
<p class= "card-text" > This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class= "card-text" ><small class= "text-muted" > Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Карт баганалары шулай ук өстәмә код белән киңәйтелергә һәм көйләнергә мөмкин. Түбәндә күрсәтелгән, .card-columns
без кулланган шул ук CSS - CSS баганалары ярдәмендә классның киңәйтелүе - баганалар санын үзгәртү өчен җаваплы дәрәҗәләр җыелмасы.
Күчермә
.card-columns {
@include media-breakpoint-only ( lg ) {
column-count : 4 ;
}
@include media-breakpoint-only ( xl ) {
column-count : 5 ;
}
}