Үндсэн агуулга руу шилжих Docs навигаци руу алгасах
in English

Картууд

Bootstrap-ийн картууд нь уян хатан, өргөтгөх боломжтой агуулгын савыг олон хувилбар, сонголтоор хангадаг.

Энэ хуудсан дээр

тухай

Карт нь уян хатан, өргөтгөх боломжтой агуулгын сав юм. Энэ нь толгой ба хөлийн сонголтууд, олон төрлийн агуулга, контекст арын өнгө, хүчирхэг дэлгэцийн сонголтуудыг агуулдаг. Хэрэв та Bootstrap 3-ыг мэддэг бол картууд нь бидний хуучин самбар, худаг, өнгөц зургийг солих болно. Эдгээр бүрэлдэхүүн хэсгүүдтэй ижил төстэй функцууд нь картыг өөрчлөх анги хэлбэрээр байдаг.

Жишээ

Картууд нь аль болох бага тэмдэглэгээ, хэв маягаар бүтээгдсэн боловч маш олон хяналт, тохируулгатай хэвээр байна. Флексбоксоор бүтээгдсэн тэдгээр нь хялбар тохируулгатай бөгөөд бусад Bootstrap бүрэлдэхүүн хэсгүүдтэй сайн холилддог. Тэдгээр нь marginанхдагч байдлаар байхгүй тул шаардлагатай бол зайны хэрэгслийг ашиглана уу .

Холимог агуулгатай, тогтмол өргөнтэй үндсэн картын жишээг доор харуулав. Картууд эхлэхэд тогтмол өргөн байхгүй тул эх элементийнхээ өргөнийг бүрэн дүүргэх болно. Үүнийг манай янз бүрийн хэмжээсийн сонголтоор хялбархан тохируулж болно .

Placeholder Image cap
Картын гарчиг

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

Хаа нэг тийшээ яв 
<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-subtitlea нэмэх замаар ашигладаг . <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 хаягуудаар загварчлах боломжтой.

Placeholder Image cap

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

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

Гал тогооны угаалтуур

Өөрт хэрэгтэй картыг үүсгэхийн тулд олон төрлийн агуулгын төрлийг хольж, тааруулж эсвэл бүх зүйлийг тэнд хая. Зургийн загвар, блок, текстийн хэв маяг, жагсаалтын бүлгийг доор харуулав - бүгд тогтмол өргөнтэй картанд ороосон.

Placeholder Image cap
Картын гарчиг

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

  • Зүйл
  • Хоёрдахь зүйл
  • Гурав дахь зүйл
Картын холбоос Өөр холбоос 
<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>

Зураг

Картууд нь зурагтай ажиллах хэд хэдэн сонголтыг агуулдаг. Картын аль нэг төгсгөлд "зургийн таг" хавсаргах, картын агуулгатай зургийг давхарлах, эсвэл зүгээр л картанд дүрс оруулах зэргийг сонго.

Зургийн таг

Гарчиг ба доод хэсэгтэй адил картууд нь дээд ба доод талын "зургийн таг" буюу картын дээд эсвэл доод хэсэгт байгаа зургуудыг агуулж болно.

Placeholder Image cap
Картын гарчиг

Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ агуулга нь арай урт байна.

Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн

Картын гарчиг

Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ агуулга нь арай урт байна.

Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн

Placeholder Image cap 
<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 минутын өмнө шинэчлэгдсэн

<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

Placeholder Image
Картын гарчиг

Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ агуулга нь арай урт байна.

Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Картын хэв маяг

Картууд нь арын дэвсгэр, хүрээ, өнгийг өөрчлөх янз бүрийн сонголтуудыг агуулдаг.

Арын дэвсгэр ба өнгө

Текстийн өнгө , дэвсгэр хэрэгслүүдийг ашиглан картын харагдах байдлыг өөрчил.

Толгой хэсэг
Үндсэн картын гарчиг

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

Толгой хэсэг
Хоёрдогч картын гарчиг

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

Толгой хэсэг
Амжилтын картын гарчиг

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

Толгой хэсэг
Аюултай картын гарчиг

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

Толгой хэсэг
Анхааруулах картын гарчиг

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

Толгой хэсэг
Мэдээллийн картын гарчиг

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

Толгой хэсэг
Хөнгөн картын гарчиг

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

Толгой хэсэг
Харанхуй картын гарчиг

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

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
Туслах технологид утгыг дамжуулах

Утга нэмэхийн тулд өнгийг ашиглах нь зөвхөн харааны заалтыг өгдөг бөгөөд энэ нь дэлгэц уншигч гэх мэт туслах технологийн хэрэглэгчдэд хүргэхгүй. Өнгөөөр тэмдэглэсэн мэдээлэл нь агуулгаасаа тодорхой (жишээ нь харагдах текст) эсвэл .visually-hiddenангид нуугдсан нэмэлт текст гэх мэт өөр хэрэгслээр орсон эсэхийг шалгаарай.

Хил

Зөвхөн картыг өөрчлөхийн тулд хилийн хэрэгслийг ашиглана уу. Та доор үзүүлсэн шиг картын агуулгыг эцэг эх эсвэл дэд бүлэгт ангилж border-colorболно гэдгийг анхаарна уу..text-{color}.card

Толгой хэсэг
Үндсэн картын гарчиг

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

Толгой хэсэг
Хоёрдогч картын гарчиг

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

Толгой хэсэг
Амжилтын картын гарчиг

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

Толгой хэсэг
Аюултай картын гарчиг

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

Толгой хэсэг
Анхааруулах картын гарчиг

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

Толгой хэсэг
Мэдээллийн картын гарчиг

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

Толгой хэсэг
Хөнгөн картын гарчиг

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

Толгой хэсэг
Харанхуй картын гарчиг

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

<div class="card border-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-secondary">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-danger">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-dark">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Mixins хэрэгслүүд

Мөн та шаардлагатай бол картын толгой болон хөлийн хүрээг өөрчлөх, background-colorбүр .bg-transparent.

Толгой хэсэг
Амжилтын картын гарчиг

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

Хөл хэсэг 
<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

Картын зохион байгуулалт

Bootstrap нь картуудын агуулгыг загварчлахаас гадна цуврал картуудыг байрлуулах хэд хэдэн сонголтыг агуулдаг. Одоогоор эдгээр байршлын сонголтууд хариу өгөхгүй байна .

Картын бүлгүүд

Картуудыг өргөн, өндөртэй тэнцүү багана бүхий дан, хавсаргасан элемент болгон харуулахын тулд картын бүлгүүдийг ашиглана уу. Картын бүлгүүд давхарлаж эхэлж, таслах display: flex;цэгээс эхлэн жигд хэмжээсээр бэхлэгддэг sm.

Placeholder Image cap
Картын гарчиг

Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ агуулга нь арай урт байна.

Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн

Placeholder Image cap
Картын гарчиг

Энэ карт нь нэмэлт контент руу орохын тулд доорх текстийг агуулсан байна.

Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн

Placeholder Image cap
Картын гарчиг

Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ карт нь ижил өндөртэй үйлдлийг харуулах эхнийхээс ч урт агуулгатай.

Хамгийн сүүлд 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>

Хөлийн хэсэгтэй картын бүлгүүдийг ашиглах үед тэдгээрийн агуулга автоматаар дараалагдах болно.

Placeholder Image cap
Картын гарчиг

Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ агуулга нь арай урт байна.

Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
Placeholder Image cap
Картын гарчиг

Энэ карт нь нэмэлт контент руу орохын тулд доорх текстийг агуулсан байна.

Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
Placeholder Image cap
Картын гарчиг

Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ карт нь ижил өндөртэй үйлдлийг харуулах эхнийхээс ч урт агуулгатай.

Хамгийн сүүлд 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дөрвөн картыг дунд зэргийн завсарлагааны цэгээс дээш олон эгнээнд тэнцүү өргөн болгон хуваах болно.

Placeholder Image cap
Картын гарчиг

Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.

Placeholder Image cap
Картын гарчиг

Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.

Placeholder Image cap
Картын гарчиг

Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм.

Placeholder Image cap
Картын гарчиг

Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.

<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
Картын гарчиг

Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.

<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
Картын гарчиг

Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.

<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 минутын өмнө шинэчлэгдсэн 
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      </div>
      <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
      </div>
    </div>
  </div>
</div>

Өрлөг

Бид өрлөг шиг баганын v4зан төлөвийг дуурайхын тулд зөвхөн CSS техникийг ашигласан боловч энэ техник нь маш олон таагүй үр дагавартай байсан. Хэрэв та ийм төрлийн зохион байгуулалттай байхыг хүсвэл Masonry залгаасыг ашиглаж болно. Өрлөг нь Bootstrap-д ороогүй боловч бид танд эхлүүлэхэд туслах демо жишээг хийсэн.v5

Сасс

Хувьсагч

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;