Карталар
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
колдонулат <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">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">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>
Масондук
Биз Masonry сыяктуу мамычалардын v4
жүрүм-турумун тууроо үчүн бир гана CSS ыкмасын колдондук , бирок бул ыкма көптөгөн жагымсыз терс таасирлер менен коштолду . Эгер сизде ушундай макеттин болушун кааласаңыз , анда сиз жөн гана Masonry плагинин колдонсоңуз болот. Масондук Bootstrap камтылган эмес , бирок биз сизге баштоого жардам берүү үчүн демо мисал жасадык .v5
Sass
Өзгөрмөлөр
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$card-border-radius: $border-radius;
$card-box-shadow: null;
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;