Карталар

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>

Өзгөчөлөнгөн

Атайын дарылоо

Кошумча мазмунга табигый жол катары төмөнкү колдоочу текст менен.

Бир жакка кет

2 күн мурун

<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>

Сүрөттүн катмарлары

Сүрөттү картанын фонуна айлантып, картаңыздын текстин каптаңыз. Сүрөткө жараша, сизге кошумча стилдер же утилиталар керек болушу мүмкүн же кереги жок.

Карта аталышы

Акыркы жолу 3 мүнөт мурун жаңыртылган

<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>

Карта стилдери

Карталар фондорун, чектерин жана түсүн өзгөчөлөштүрүү үчүн ар кандай варианттарды камтыйт.

Фон жана түс

Картанын сырткы көрүнүшүн өзгөртүү үчүн тексттин түсүн жана фон утилиталарын колдонуңуз .

Header

Негизги картанын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Экинчи картанын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Ийгилик картасынын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Коркунучтуу картанын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Эскертүү картасынын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Маалымат картасынын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Жарык картанын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Караңгы картанын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

<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же картанын мазмунунун бир бөлүгүн кое аласыз.

Header

Негизги картанын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Экинчи картанын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Ийгилик картасынын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Коркунучтуу картанын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Эскертүү картасынын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Маалымат картасынын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Жарык картанын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Header

Караңгы картанын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

<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.

Header

Ийгилик картасынын аталышы

Картанын аталышына негизделип, картанын мазмунунун негизги бөлүгүн түзө турган кээ бир тез мисал тексти.

Колонтитул

<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>

Колонтитулдар менен карта топторун колдонгондо, алардын мазмуну автоматтык түрдө тизилет.

Карта аталышы

Акыркы жолу 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>
    </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>

Карта топторундагыдай эле, картанын колонтитулдары автоматтык түрдө тизилет.

Карта аталышы

Акыркы жолу 3 мүнөт мурун жаңыртылган

Карта аталышы

Бул картада кошумча мазмунга табигый жол катары төмөндө колдоочу текст бар.

Акыркы жолу 3 мүнөт мурун жаңыртылган

Карта аталышы

Акыркы жолу 3 мүнөт мурун жаңыртылган

<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-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;

Карталар

Жөнүндө

Мисал

Карта аталышы

Мазмун түрлөрү

Дене

Аталышы, текст жана шилтемелер

Карта аталышы

Карта субтитр

Сүрөттөр

Тизме топтору

Ашкана раковинасы

Карта аталышы

Жогорку жана төмөнкү колонтитул

Атайын дарылоо

Өзгөчөлөнгөн

Атайын дарылоо

Атайын дарылоо

Өлчөмү

Тор белгилөө колдонуу

Атайын дарылоо

Атайын дарылоо

Утилиталарды колдонуу

Карта аталышы

Карта аталышы

Ыңгайлаштырылган CSS колдонуу

Атайын дарылоо

Текстти тегиздөө

Атайын дарылоо

Атайын дарылоо

Атайын дарылоо

Навигация

Атайын дарылоо

Атайын дарылоо

Сүрөттөр

Сүрөт капкактары

Карта аталышы

Карта аталышы

Сүрөттүн катмарлары

Карта аталышы

Горизонталдуу

Карта аталышы

Карта стилдери

Фон жана түс

Негизги картанын аталышы

Экинчи картанын аталышы

Ийгилик картасынын аталышы

Коркунучтуу картанын аталышы

Эскертүү картасынын аталышы

Маалымат картасынын аталышы

Жарык картанын аталышы

Караңгы картанын аталышы

Көмөкчү технологияларга маани берүү

Чек ара

Негизги картанын аталышы

Экинчи картанын аталышы

Ийгилик картасынын аталышы

Коркунучтуу картанын аталышы

Эскертүү картасынын аталышы

Маалымат картасынын аталышы

Жарык картанын аталышы

Караңгы картанын аталышы

Mixins утилиталары

Ийгилик картасынын аталышы

Картанын жайгашуусу

Карта топтору

Карта аталышы

Карта аталышы

Карта аталышы

Карта аталышы

Карта аталышы

Карта аталышы

Тор карталары

Карта аталышы

Карта аталышы

Карта аталышы

Карта аталышы

Карта аталышы

Карта аталышы

Карта аталышы