Картууд
Bootstrap-ийн картууд нь уян хатан, өргөтгөх боломжтой агуулгын савыг олон хувилбар, сонголтоор хангадаг.
тухай
Карт нь уян хатан, өргөтгөх боломжтой агуулгын сав юм. Энэ нь толгой ба хөлийн сонголтууд, олон төрлийн агуулга, контекст арын өнгө, хүчирхэг дэлгэцийн сонголтуудыг агуулдаг. Хэрэв та Bootstrap 3-ыг мэддэг бол картууд нь бидний хуучин самбар, худаг, өнгөц зургийг солих болно. Эдгээр бүрэлдэхүүн хэсгүүдтэй ижил төстэй функцууд нь картыг өөрчлөх анги хэлбэрээр байдаг.
Жишээ
Картууд нь аль болох бага тэмдэглэгээ, хэв маягаар бүтээгдсэн боловч маш олон хяналт, тохируулгатай хэвээр байна. Флексбоксоор бүтээгдсэн тэдгээр нь хялбар тохируулгатай бөгөөд бусад Bootstrap бүрэлдэхүүн хэсгүүдтэй сайн холилддог. Тэдгээр нь margin
анхдагч байдлаар байхгүй тул шаардлагатай бол зайны хэрэгслийг ашиглана уу .
Холимог агуулгатай, тогтмол өргөнтэй үндсэн картын жишээг доор харуулав. Картууд эхлэхэд тогтмол өргөн байхгүй тул эх элементийнхээ өргөнийг бүрэн дүүргэх болно. Үүнийг манай янз бүрийн хэмжээсийн сонголтоор хялбархан тохируулж болно .
Картын гарчиг
Картын гарчиг дээр бүтээж, картын агуулгын дийлэнх хэсгийг бүрдүүлэх зарим хурдан жишээ текст.
Хаа нэг тийшээ яв<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Агуулгын төрлүүд
Картууд нь зураг, текст, жагсаалтын бүлгүүд, холбоосууд гэх мэт олон төрлийн агуулгыг дэмждэг. Дэмжигдсэн зүйлсийн жишээг доор харуулав.
Бие
Картын барилгын материал нь .card-body
. Карт дотор жийргэвчтэй хэсэг хэрэгтэй үед үүнийг ашиглаарай.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Гарчиг, текст, холбоосууд
Картын гарчиг нь шошгон дээр нэмэх замаар .card-title
ашиглагддаг <h*>
. Үүнтэй адилаар холбоосууд нэмж, шошгон дээр нэмэх .card-link
замаар бие биенийхээ хажууд байрладаг.<a>
Хадмал орчуулгыг шошгонд .card-subtitle
a нэмэх замаар ашигладаг . <h*>
Хэрэв тухайн зүйлд .card-title
болон .card-subtitle
зүйлсийг байрлуулсан .card-body
бол картын гарчиг болон хадмал орчуулгыг сайн зэрэгцүүлнэ.
Картын гарчиг
Картын хадмал гарчиг
Картын гарчиг дээр бүтээж, картын агуулгын дийлэнх хэсгийг бүрдүүлэх зарим хурдан жишээ текст.
Картын холбоос Өөр холбоос<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Зураг
.card-img-top
картын дээд талд зургийг байрлуулна. .card-text
-ээр текстийг картанд нэмж болно . Доторх текстийг .card-text
стандарт HTML хаягуудаар загварчлах боломжтой.
Картын гарчиг дээр бүтээж, картын агуулгын дийлэнх хэсгийг бүрдүүлэх зарим хурдан жишээ текст.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Бүлгүүдийг жагсаах
Угаах жагсаалтын бүлэгтэй картанд агуулгын жагсаалтыг үүсгэ.
- Зүйл
- Хоёрдахь зүйл
- Гурав дахь зүйл
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Зүйл
- Хоёрдахь зүйл
- Гурав дахь зүйл
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Зүйл
- Хоёрдахь зүйл
- Гурав дахь зүйл
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
Гал тогооны угаалтуур
Өөрт хэрэгтэй картыг үүсгэхийн тулд олон төрлийн агуулгын төрлийг хольж, тааруулж эсвэл бүх зүйлийг тэнд хая. Зургийн загвар, блок, текстийн хэв маяг, жагсаалтын бүлгийг доор харуулав - бүгд тогтмол өргөнтэй картанд ороосон.
Картын гарчиг
Картын гарчиг дээр бүтээж, картын агуулгын дийлэнх хэсгийг бүрдүүлэх зарим хурдан жишээ текст.
- Зүйл
- Хоёрдахь зүйл
- Гурав дахь зүйл
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Толгой ба доод хэсэг
Карт дотор нэмэлт толгой ба/эсвэл доод хэсэг нэмнэ үү.
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
.card-header
Картын толгой хэсгийг <h*>
элементүүдэд нэмэх замаар загварчилж болно .
Онцолсон
<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Блок ишлэлд агуулагдсан алдартай ишлэл.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
<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">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">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Зураг
Картууд нь зурагтай ажиллах хэд хэдэн сонголтыг агуулдаг. Картын аль нэг төгсгөлд "зургийн таг" хавсаргах, картын агуулгатай зургийг давхарлах, эсвэл зүгээр л картанд дүрс оруулах зэргийг сонго.
Зургийн таг
Гарчиг ба доод хэсэгтэй адил картууд нь дээд ба доод талын "зургийн таг" буюу картын дээд эсвэл доод хэсэгт байгаа зургуудыг агуулж болно.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ агуулга нь арай урт байна.
Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ агуулга нь арай урт байна.
Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>
Зургийн давхаргууд
Зургийг картын дэвсгэр болгож, картынхаа текстийг давхарлана. Зургаас хамааран танд нэмэлт загвар, хэрэгсэл хэрэггүй байж болно.
<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>
Хэвтээ
Сүлжээ болон хэрэглээний ангиудыг хослуулан ашиглан картуудыг хөдөлгөөнт төхөөрөмжид ээлтэй, мэдрэмжтэй байдлаар хэвтээ болгож болно. Доорх жишээнд бид сүлжээний сувгийг арилгаж, таслах цэг дээр картыг хэвтээ болгохын тулд ангиудыг .no-gutters
ашигладаг . Таны картын агуулгаас хамааран нэмэлт тохируулга хийх шаардлагатай байж магадгүй..col-md-*
md
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ агуулга нь арай урт байна.
Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="..." 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-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;
цэгээс эхлэн жигд хэмжээсээр бэхлэгддэг sm
.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ агуулга нь арай урт байна.
Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
Картын гарчиг
Энэ карт нь нэмэлт контент руу орохын тулд доорх текстийг агуулсан байна.
Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ карт нь ижил өндөртэй үйлдлийг харуулах эхнийхээс ч урт агуулгатай.
Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Хөлийн хэсэгтэй картын бүлгүүдийг ашиглах үед тэдгээрийн агуулга автоматаар дараалагдах болно.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ агуулга нь арай урт байна.
Картын гарчиг
Энэ карт нь нэмэлт контент руу орохын тулд доорх текстийг агуулсан байна.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ карт нь ижил өндөртэй үйлдлийг харуулах эхнийхээс ч урт агуулгатай.
<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>
Картын тавцан
Бие биедээ залгаагүй өргөн, өндөртэй тэнцүү карт хэрэгтэй юу? Картын тавцан ашиглах.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.
Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
Картын гарчиг
Энэ карт нь нэмэлт контент руу орохын тулд доорх текстийг агуулсан байна.
Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ карт нь ижил өндөртэй үйлдлийг харуулах эхнийхээс ч урт агуулгатай.
Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
<div class="card-deck">
<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>
<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>
Картын бүлгүүдийн нэгэн адил тавцан дахь картын хөл нь автоматаар дараалалд орно.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ агуулга нь арай урт байна.
Картын гарчиг
Энэ карт нь нэмэлт контент руу орохын тулд доорх текстийг агуулсан байна.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий илүү өргөн карт юм. Энэ карт нь ижил өндөртэй үйлдлийг харуулах эхнийхээс ч урт агуулгатай.
<div class="card-deck">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Торон картууд
Bootstrap сүлжээ систем болон түүний .row-cols
ангиудыг ашиглан нэг мөрөнд хэдэн сүлжээ багана (картнуудаа ороосон) харуулахыг хянах. Жишээлбэл, .row-cols-1
картуудыг нэг баганад байрлуулж, .row-cols-md-2
дөрвөн картыг дунд зэргийн завсарлагааны цэгээс дээш олон эгнээнд тэнцүү өргөн болгон хуваах болно.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.
<div class="row row-cols-1 row-cols-md-2">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Үүнийг өөрчилснөөр .row-cols-3
та дөрөв дэх картын боодлыг харах болно.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Танд ижил өндөр шаардлагатай .h-100
үед картууд дээр нэмнэ үү. Хэрэв та өгөгдмөлөөр ижил өндөртэй байхыг хүсвэл $card-height: 100%
Sass-д тохируулж болно.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.
Картын гарчиг
Энэ бол богино карт юм.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм.
Картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.
<div class="row row-cols-1 row-cols-md-3">
<div class="col mb-4">
<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 mb-4">
<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 mb-4">
<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 mb-4">
<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>
Картын баганууд
Картуудыг зүгээр л CSS ашиглан өрлөг маягийн баганууд болгон зохион байгуулж болно .card-columns
. column
Картуудыг илүү хялбар болгох үүднээс flexbox-ын оронд CSS шинж чанаруудаар бүтээдэг. Картуудыг дээрээс доош, зүүнээс баруун тийш эрэмбэлдэг.
Анхаараарай! Таны картын баганатай миль өөр өөр байж болно. Картуудыг баганаар таслахаас сэргийлэхийн тулд бид тэдгээрийг сум нэвтэрдэггүй шийдэл биш display: inline-block
гэж тохируулах ёстой.column-break-inside: avoid
Шинэ мөрөнд ороосон картын гарчиг
Энэ бол нэмэлт контент руу ороход туслах доорх текст бүхий урт карт юм. Энэ агуулга нь арай урт байна.
Блок ишлэлд агуулагдсан алдартай ишлэл.
Картын гарчиг
Энэ карт нь нэмэлт контент руу орохын тулд доорх текстийг агуулсан байна.
Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
Блок ишлэлд агуулагдсан алдартай ишлэл.
Картын гарчиг
Энэ карт нь ердийн гарчигтай, доор нь текстийн богино догол мөртэй.
Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
Блок ишлэлд агуулагдсан алдартай ишлэл.
Картын гарчиг
Энэ бол гарчиг болон доорх текст бүхий өөр карт юм. Энэ картыг ерөнхийдөө арай өндөр болгох нэмэлт агуулгатай.
Хамгийн сүүлд 3 минутын өмнө шинэчлэгдсэн
<div class="card-columns">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<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>A well-known quote, contained in a blockquote element.</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 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 bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer text-white">
<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 src="..." class="card-img" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</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;
}
}