Source

Картууд

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

тухай

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

Жишээ

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

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

100% x 180
Картын гарчиг

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

Хаа нэг тийшээ яв 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 хаягуудаар загварчлах боломжтой.

Зургийн таг [100%x180]

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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>

Бүлгүүдийг жагсаах

Угаах жагсаалтын бүлэг бүхий картанд агуулгын жагсаалтыг үүсгэ.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Эрос дахь үүдний хөндий
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
Онцолсон
  • Cras justo odio
  • Dapibus ac facilisis in
  • Эрос дахь үүдний хөндий
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

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

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

Зургийн таг [100%x180]
Картын гарчиг

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Эрос дахь үүдний хөндий
Картын холбоос Өөр холбоос 
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</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>
Иш татах

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.

Эх сурвалжийн гарчигт алдартай нэгэн 
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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-right" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Bootstrap-ийн навигацийн бүрэлдэхүүн хэсгүүдтэй картын толгой хэсэгт (эсвэл блок) навигац нэмнэ үү .

Тусгай цолны эмчилгээ

Доорх текстийг нэмэлт контент руу оруулах байгалийн жамаар.

Хаа нэг тийшээ яв 
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">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="#">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>

Зураг

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

Зургийн таг

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

100% x 180
Картын гарчиг

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

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

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

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

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

100% x 180 
<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <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 class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</div>

Зургийн давхаргууд

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

100% x 270
Картын гарчиг

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

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

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Хил

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mixins хэрэгслүүд

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

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

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

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

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

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

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

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

100% x 180
Картын гарчиг

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

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

100% x 180
Картын гарчиг

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

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

100% x 180
Картын гарчиг

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

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

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

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

100% x 180
Картын гарчиг

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

Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
100% x 180
Картын гарчиг

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

Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
100% x 180
Картын гарчиг

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

Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн 
<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Картын тавцан

Бие биедээ залгаагүй өргөн, өндөртэй тэнцүү карт хэрэгтэй юу? Картын тавцан ашиглах.

100% x 200
Картын гарчиг

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

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

100% x 200
Картын гарчиг

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

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

100% x 200
Картын гарчиг

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

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

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px200/" alt="Card image cap">
    <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>

Картын бүлгүүдийн нэгэн адил тавцан дахь картын хөл нь автоматаар дараалалд орно.

100% x 180
Картын гарчиг

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

Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
100% x 180
Картын гарчиг

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

Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
100% x 180
Картын гарчиг

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

Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн 
<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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 class="card-img-top" src=".../100px180/" alt="Card image cap">
    <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>

Картын баганууд

Картуудыг зүгээр л CSS ашиглан өрлөг маягийн баганууд болгон зохион байгуулж болно .card-columns. columnКартуудыг илүү хялбар болгох үүднээс flexbox-ын оронд CSS шинж чанаруудаар бүтээдэг. Картуудыг дээрээс доош, зүүнээс баруун тийш эрэмбэлдэг.

Анхаар! Таны картын баганатай миль өөр өөр байж болно. Картуудыг баганаар таслахаас сэргийлэхийн тулд бид тэдгээрийг сум нэвтэрдэггүй шийдэл биш display: inline-blockгэж тохируулах ёстой.column-break-inside: avoid

100% x160
Шинэ мөрөнд ороосон картын гарчиг

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.

Эх сурвалжийн гарчигт алдартай нэгэн
100% x160
Картын гарчиг

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо.

Эх сурвалжийн гарчигт алдартай нэгэн
Картын гарчиг

Энэ карт нь ердийн гарчигтай, доор нь текстийн богино догол мөртэй.

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

100% x 260

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Бүхэл тоо нь ante.

Эх сурвалжийн гарчигт алдартай нэгэн
Картын гарчиг

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

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

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px160/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src=".../100px260/" alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Мөн картын багануудыг нэмэлт кодоор өргөтгөж, өөрчлөх боломжтой. .card-columnsБаганын тоог өөрчлөхөд хариу үйлдэл үзүүлэх түвшний багц үүсгэхийн тулд бидний ашигладаг ижил CSS-CSS багана ашиглан ангийн өргөтгөлийг доор үзүүлэв .

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}