Карталар
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-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">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>
Горизонталдуу
Тор жана пайдалуу класстардын айкалышын колдонуу менен карталарды мобилдик колдонууга ыңгайлуу жана жооп берүүчү жол менен горизонталдуу кылса болот. Төмөндөгү мисалда биз торчолорду алып салабыз жана картаны үзгүлтүккө учуратуу чекитинде горизонталдуу кылуу үчүн класстарды .no-gutters
колдонобуз . Картаңыздын мазмунуна жараша кошумча оңдоолор талап кылынышы мүмкүн..col-md-*
md
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар кененирээк карта. Бул мазмун бир аз узунураак.
Акыркы жолу 3 мүнөт мурун жаңыртылган
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." 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-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
же картанын мазмунунун бир бөлүгүн кое аласыз.
Негизги картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Экинчи картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Ийгилик картасынын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Коркунучтуу картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Эскертүү картасынын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Маалымат картасынын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Жарык картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
Караңгы картанын аталышы
Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.
<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>
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>
Карта палубалары
Бири-бирине тиркелбеген туурасы жана бийиктиги бирдей карталардын топтому керекпи? Карта палубаларын колдонуңуз.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта. Бул мазмун бир аз узунураак.
Акыркы жолу 3 мүнөт мурун жаңыртылган
Карта аталышы
Бул картада кошумча мазмунга табигый жол катары төмөндө колдоочу текст бар.
Акыркы жолу 3 мүнөт мурун жаңыртылган
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар кененирээк карта. Бул карта бирдей бийиктикти көрсөтүүчү биринчиден да узун мазмунга ээ.
Акыркы жолу 3 мүнөт мурун жаңыртылган
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Карта топторундагыдай эле, палубалардагы карта колонтитулдары автоматтык түрдө тизилет.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар кененирээк карта. Бул мазмун бир аз узунураак.
Карта аталышы
Бул картада кошумча мазмунга табигый жол катары төмөндө колдоочу текст бар.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар кененирээк карта. Бул карта бирдей бийиктикти көрсөтүүчү биринчиден да узун мазмунга ээ.
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Тор карталары
Bootstrap тор тутумун жана анын .row-cols
класстарын колдонуп, бир сапта канча тор мамычасын (карталарыңызга оролгон) көрсөтөсүз. Мисалы, бул жерде .row-cols-1
карталарды бир тилкеге жайгаштыруу жана .row-cols-md-2
төрт картаны орто үзүлүү чекитинен баштап бир нече саптар боюнча бирдей тууралыкка бөлүү.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта. Бул мазмун бир аз узунураак.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта. Бул мазмун бир аз узунураак.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта. Бул мазмун бир аз узунураак.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Аны өзгөртсөңүз .row-cols-3
, төртүнчү картаны көрөсүз.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта. Бул мазмун бир аз узунураак.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта. Бул мазмун бир аз узунураак.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта. Бул мазмун бир аз узунураак.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Сизге бирдей бийиктик керек болгондо .h-100
, карталарга кошуңуз. Эгер сиз демейки боюнча бирдей бийиктикти кааласаңыз $card-height: 100%
, Sassда орното аласыз.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта. Бул мазмун бир аз узунураак.
Карта аталышы
Бул кыска карта.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта.
Карта аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта. Бул мазмун бир аз узунураак.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Карта мамычалары
Карталарды жөн гана CSS менен масондук сыяктуу мамычаларга ороп, аларды .card-columns
. column
Карталар оңой тегиздөө үчүн flexboxтун ордуна CSS касиеттери менен курулган . Карталар жогорудан ылдыйга жана солдон оңго карай иреттелген.
Көңүл бургула! Карта мамычалары менен пробегиңиз ар кандай болушу мүмкүн. Карточкалардын мамычалар аркылуу өтүп кетишине жол бербөө үчүн, аларды азырынча ок өтпөс чечим эмес display: inline-block
деп коюшубуз керек.column-break-inside: avoid
Жаңы сапка өтүүчү картанын аталышы
Бул кошумча мазмунга табигый жол катары төмөндө колдоочу тексти бар узунураак карта. Бул мазмун бир аз узунураак.
Блок цитата элементинде камтылган белгилүү цитата.
Карта аталышы
Бул картада кошумча мазмунга табигый жол катары төмөндө колдоочу текст бар.
Акыркы жолу 3 мүнөт мурун жаңыртылган
Блок цитата элементинде камтылган белгилүү цитата.
Карта аталышы
Бул картанын кадимки аталышы жана астында тексттин кыска абзацы бар.
Акыркы жолу 3 мүнөт мурун жаңыртылган
Блок цитата элементинде камтылган белгилүү цитата.
Карта аталышы
Бул төмөнкү аталышы жана колдоочу тексти бар дагы бир карта. Бул картада аны жалпысынан бир аз бийик кылуу үчүн кошумча мазмун бар.
Акыркы жолу 3 мүнөт мурун жаңыртылган
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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;
}
}