Негизги мазмунга өтүү Документтердин навигациясына өтүү
Check
in English

Карталар

Bootstrap карталары бир нече варианттары жана параметрлери бар ийкемдүү жана кеңейтилүүчү мазмун контейнерин камсыз кылат.

Бул бетте

Жөнүндө

Карта ийкемдүү жана кеңейтилүүчү мазмун контейнери болуп саналат . Ал жогорку жана төмөнкү колонтитулдар үчүн опцияларды, мазмундун көп түрдүүлүгүн, контексттик фон түстөрүн жана күчтүү дисплей параметрлерин камтыйт. Эгер сиз Bootstrap 3 менен тааныш болсоңуз, карталар биздин эски панелдерди, кудуктарды жана эскиздерибизди алмаштырат. Бул компоненттерге окшош функциялар карталар үчүн модификациялык класстар катары жеткиликтүү.

Мисал

Карталар мүмкүн болушунча аз белгилөө жана стилдер менен курулган, бирок дагы эле бир нече тонна башкарууну жана ыңгайлаштырууларды жеткире алышат. Flexbox менен курулган, алар оңой тегиздетүүнү сунуштайт жана башка Bootstrap компоненттери менен жакшы аралашат. Алар marginдемейки боюнча жок, ошондуктан керек болсо, аралыкты колдонуу утилиталарын колдонуңуз .

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

Placeholder Image cap
Карта аталышы

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

Бир жакка кет
html 
<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. Аны картанын ичинде толтурулган бөлүм керек болгондо колдонуңуз.

Бул картанын ичиндеги кээ бир текст.
html 
<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нерсеге жайгаштырылса, картанын аталышы жана субтитр жакшы тегизделген.

Карта аталышы
Карта субтитр

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

Карта шилтемеси Башка шилтеме
html 
<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 теги менен да стилдештирилиши мүмкүн.

Placeholder Image cap

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

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>

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

Тизме тобу менен картадагы мазмундун тизмесин түзүңүз.

  • Буюм
  • Экинчи нерсе
  • Үчүнчү нерсе
html 
<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>
Өзгөчөлөнгөн
  • Буюм
  • Экинчи нерсе
  • Үчүнчү нерсе
html 
<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>
  • Буюм
  • Экинчи нерсе
  • Үчүнчү нерсе
Карта колонтитул
html 
<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>

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

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

Placeholder Image cap
Карта аталышы

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

  • Буюм
  • Экинчи нерсе
  • Үчүнчү нерсе
Карта шилтемеси Башка шилтеме
html 
<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>

Картага кошумча баш жана/же төмөнкү колонтитул кошуңуз.

Өзгөчөлөнгөн
Атайын дарылоо

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

Бир жакка кет
html 
<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*>

Өзгөчөлөнгөн
Атайын дарылоо

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

Бир жакка кет
html 
<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>
Цитата

Блок цитата элементинде камтылган белгилүү цитата.

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

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

Торду колдонуп, карталарды зарылчылыкка жараша мамычаларга жана саптарга ороңуз.

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

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

Бир жакка кет
Атайын дарылоо

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

Бир жакка кет
html 
<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>

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

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

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

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

баскыч
Карта аталышы

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

баскыч
html 
<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-ти колдонуңуз.

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

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

Бир жакка кет
html 
<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>

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

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

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

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

Бир жакка кет
Атайын дарылоо

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

Бир жакка кет
Атайын дарылоо

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

Бир жакка кет
html 
<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'тин навигация компоненттери менен картанын башына (же блокко) бир аз навигация кошуңуз .

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

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

Бир жакка кет
html 
<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>
Атайын дарылоо

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

Бир жакка кет
html 
<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>

Сүрөттөр

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

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

Жогорку жана төмөнкү колонтитулдарга окшоп, карталар үстүңкү жана астыңкы "сүрөттүн капкактарын" камтышы мүмкүн — картанын үстүнкү же астындагы сүрөттөр.

Placeholder Image cap
Карта аталышы

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

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

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

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

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

Placeholder Image cap
html 
<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>

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

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

Placeholder Card image
Карта аталышы

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

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

html 
<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></p>
  </div>
</div>
Мазмунду сүрөттүн бийиктигинен чоңураак болбошу керектигин эске алыңыз. Эгер мазмун сүрөттөн чоңураак болсо, мазмун сүрөттөн тышкары көрсөтүлөт.

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

Тор жана пайдалуу класстардын айкалышын колдонуу менен карталарды мобилдик колдонууга ыңгайлуу жана жооп берүүчү жол менен горизонталдуу кылса болот. Төмөндөгү мисалда биз торчолорду алып салабыз жана картаны үзгүлтүккө учуратуу чекитинде горизонталдуу кылуу үчүн класстарды .g-0колдонобуз . Картаңыздын мазмунуна жараша кошумча оңдоолор талап кылынышы мүмкүн..col-md-*md

Placeholder Image
Карта аталышы

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

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

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

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

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

Фон жана түс

v5.2.0 кошулган

Жардамчыларыбыз менен background-colorконтрасттуу алдыңкы планды орнотуңуз . Мурда стилдөө үчүн өзүңүздүн тандооңузду жана утилиталарды кол менен жупташтыруу талап кылынчу, эгер кааласаңыз дагы колдоно аласыз.color.text-bg-{color}.text-{color}.bg-{color}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html 
<div class="card text-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-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-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-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-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-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-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-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
Караңгы картанын аталышы

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

html 
<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
Ийгилик картасынын аталышы

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

Колонтитул
html 
<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.

Placeholder Image cap
Карта аталышы

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

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

Placeholder Image cap
Карта аталышы

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

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

Placeholder Image cap
Карта аталышы

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

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

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

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

Placeholder Image cap
Карта аталышы

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

Акыркы жолу 3 мүнөт мурун жаңыртылган
Placeholder Image cap
Карта аталышы

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

Акыркы жолу 3 мүнөт мурун жаңыртылган
Placeholder Image cap
Карта аталышы

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

Акыркы жолу 3 мүнөт мурун жаңыртылган
html 
<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төрт картаны орто үзүлүү чекитинен баштап бир нече саптар боюнча бирдей тууралыкка бөлүү.

Placeholder Image cap
Карта аталышы

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

Placeholder Image cap
Карта аталышы

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

Placeholder Image cap
Карта аталышы

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

Placeholder Image cap
Карта аталышы

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

html 
<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, төртүнчү картаны көрөсүз.

Placeholder Image cap
Карта аталышы

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

Placeholder Image cap
Карта аталышы

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

Placeholder Image cap
Карта аталышы

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

Placeholder Image cap
Карта аталышы

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

html 
<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да орното аласыз.

Placeholder Image cap
Карта аталышы

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

Placeholder Image cap
Карта аталышы

Бул кыска карта.

Placeholder Image cap
Карта аталышы

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

Placeholder Image cap
Карта аталышы

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

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

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

Placeholder Image cap
Карта аталышы

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

Акыркы жолу 3 мүнөт мурун жаңыртылган
Placeholder Image cap
Карта аталышы

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

Акыркы жолу 3 мүнөт мурун жаңыртылган
Placeholder Image cap
Карта аталышы

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

Акыркы жолу 3 мүнөт мурун жаңыртылган
html 
<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

CSS

Өзгөрмөлөр

v5.2.0 кошулган

Bootstrap'тин өнүгүп жаткан CSS өзгөрмөлөрүнүн бир бөлүгү катары, карталар эми .cardреалдуу убакытта жакшыртылган ыңгайлаштыруу үчүн жергиликтүү CSS өзгөрмөлөрүн колдонушат. CSS өзгөрмөлөрүнүн маанилери Sass аркылуу коюлат, ошондуктан Sass ыңгайлаштыруу дагы деле колдоого алынат.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Sass өзгөрмөлөрү

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$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;