Карталар
Bootstrap карталары бірнеше нұсқалары мен опциялары бар икемді және кеңейтілетін мазмұн контейнерін қамтамасыз етеді.
туралы
Карта - икемді және кеңейтілетін мазмұн контейнері. Ол үстіңгі және төменгі колонтитулдарға арналған опцияларды, мазмұнның кең ауқымын, контекстік фондық түстерді және қуатты дисплей опцияларын қамтиды. Егер сіз Bootstrap 3-пен таныс болсаңыз, карталар ескі панельдерді, ұңғымаларды және нобайларды ауыстырады. Осы құрамдастарға ұқсас функциялар карталарға арналған модификатор кластары ретінде қол жетімді.
Мысал
Карталар мүмкіндігінше аз белгілеулер мен стильдермен жасалған, бірақ әлі де көптеген бақылау мен теңшеуді қамтамасыз ете алады. Flexbox көмегімен жасалған олар оңай туралауды ұсынады және басқа 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
a қосу арқылы пайдаланылады . <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>
Карта стильдері
Карточкалар өңін, жиектерін және түсін реттеуге арналған әртүрлі опцияларды қамтиды.
Фон және түс
Картаның көрінісін өзгерту үшін мәтін түсі мен фондық утилиталарды пайдаланыңыз.
Негізгі карта атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Қосымша карта атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Сәттілік картасының атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Қауіпті карта атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Ескерту картасының тақырыбы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Ақпараттық карта атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Жарық карта атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Қараңғы карта атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
<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
Негізгі карта атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Қосымша карта атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Сәттілік картасының атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Қауіпті карта атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Ескерту картасының тақырыбы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Ақпараттық карта атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Жарық карта атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
Қараңғы карта атауы
Карта тақырыбына құрастырылатын және карта мазмұнының негізгі бөлігін құрайтын кейбір жылдам мысал мәтіні.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Mixins утилиталары
Сондай-ақ, картаның үстіңгі және астыңғы деректемелеріндегі жиектерді қажетінше өзгертуге, тіпті олардың 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%
, Sass қолданбасында орнатуға болады.
Карта атауы
Бұл қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтіні бар ұзағырақ карта. Бұл мазмұн сәл ұзағырақ.
Карта атауы
Бұл қысқа карта.
Карта атауы
Бұл қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтіні бар ұзағырақ карта.
Карта атауы
Бұл қосымша мазмұнға табиғи кіріс ретінде төмендегі қолдаушы мәтіні бар ұзағырақ карта. Бұл мазмұн сәл ұзағырақ.
<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 әдісін қолдандық , бірақ бұл әдіс көптеген жағымсыз жанама әсерлермен бірге келді . Егер сізде орналасудың осы түрін алғыңыз келсе , сіз жай ғана Masonry плагинін пайдалана аласыз. Masonry Bootstrap ішіне кірмейді , бірақ біз сізге бастауға көмектесу үшін демонстрациялық мысал жасадық.v5
Сасс
Айнымалылар
$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;