Картууд

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

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

тухай

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

Жишээ

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

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

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

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

Хаа нэг тийшээ яв

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

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

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>

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

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

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

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

Зүйл
Хоёрдахь зүйл
Гурав дахь зүйл

Картын холбоос Өөр холбоос

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>

Зураг

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

Зургийн таг

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

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

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

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

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

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

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

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>

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

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

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

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

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

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

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

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

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

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

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

5.2.0 хувилбар дээр нэмсэн

Манай туслахуудаарbackground-color ялгаатай урд талын colorзураг тавь . Өмнө нь загварчлахдаа өөрийн сонголт болон хэрэгслүүдийг гараар хослуулах шаардлагатай байсан бөгөөд хэрэв та хүсвэл үүнийг ашиглаж болно..text-bg-{color}.text-{color}.bg-{color}

Толгой хэсэг

Үндсэн картын гарчиг

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

Толгой хэсэг

Хоёрдогч картын гарчиг

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

Толгой хэсэг

Амжилтын картын гарчиг

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

Толгой хэсэг

Аюултай картын гарчиг

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

Толгой хэсэг

Анхааруулах картын гарчиг

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

Толгой хэсэг

Мэдээллийн картын гарчиг

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

Толгой хэсэг

Хөнгөн картын гарчиг

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

Толгой хэсэг

Харанхуй картын гарчиг

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

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

Толгой хэсэг

Үндсэн картын гарчиг

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

Толгой хэсэг

Хоёрдогч картын гарчиг

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

Толгой хэсэг

Амжилтын картын гарчиг

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

Толгой хэсэг

Аюултай картын гарчиг

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

Толгой хэсэг

Анхааруулах картын гарчиг

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

Толгой хэсэг

Мэдээллийн картын гарчиг

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

Толгой хэсэг

Хөнгөн картын гарчиг

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

Толгой хэсэг

Харанхуй картын гарчиг

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

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.

Толгой хэсэг

Амжилтын картын гарчиг

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

Хөл хэсэг

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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та дөрөв дэх картын боодлыг харах болно.

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

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

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

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

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

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

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

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

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-д тохируулж болно.

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

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

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

Энэ бол богино карт юм.

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

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

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

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

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>

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

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

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

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

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

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

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

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

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

Өрлөг

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

CSS

Хувьсагч

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

Картууд

тухай

Жишээ

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

Агуулгын төрлүүд

Бие

Гарчиг, текст, холбоосууд

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

Картын хадмал гарчиг

Зураг

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

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

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

Толгой ба доод хэсэг

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

Онцолсон

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

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

Хэмжээ тогтоох

Сүлжээний тэмдэглэгээг ашиглаж байна

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

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

Хэрэгслийг ашиглах

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

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

Захиалгат CSS ашиглах

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

Текстийн зэрэгцүүлэх

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

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

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

Навигац

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

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

Зураг

Зургийн таг

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

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

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

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

Хэвтээ

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

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

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

Үндсэн картын гарчиг

Хоёрдогч картын гарчиг

Амжилтын картын гарчиг

Аюултай картын гарчиг

Анхааруулах картын гарчиг

Мэдээллийн картын гарчиг

Хөнгөн картын гарчиг

Харанхуй картын гарчиг

Туслах технологид утгыг дамжуулах

Хил

Үндсэн картын гарчиг

Хоёрдогч картын гарчиг

Амжилтын картын гарчиг

Аюултай картын гарчиг

Анхааруулах картын гарчиг

Мэдээллийн картын гарчиг

Хөнгөн картын гарчиг

Харанхуй картын гарчиг

Mixins хэрэгслүүд

Амжилтын картын гарчиг

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

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

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

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

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

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

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

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

Торон картууд

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

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

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

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

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

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

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