کارتەکان
کارتەکانی بووتستراپ کۆنتێنەرێکی ناوەڕۆکی نەرم و فراوانکراو بە چەندین جۆر و بژاردە دابین دەکەن.
دەربارەی
کارت بریتییە لە دەفرێکی ناوەڕۆکی نەرم و درێژکراوە. هەڵبژاردەکانی سەردێڕ و ژێرەوە، ناوەڕۆکی جۆراوجۆر، ڕەنگی پاشبنەمای کۆنتێکست و بژاردەی بەهێزی پیشاندانی لەخۆدەگرێت. ئەگەر ئاشنای بووتستراپ ٣ بیت، کارتەکان جێگەی پانێڵ و بیر و وێنە بچوو��ەکانمان دەگرنەوە. کارایی هاوشێوەی ئەو پێکهاتانە وەک پۆلی دەستکاریکەر بۆ کارتەکان بەردەستە.
نموونە
کارتەکان بە کەمترین مارکاپ و ستایل دروست دەکرێن، بەڵام هێشتا توانیویانە تۆنێک کۆنتڕۆڵ و خۆکارکردن پێشکەش بکەن. بە فلیکس بۆکس دروستکراون، ڕێکخستنی ئاسان پێشکەش دەکەن و بە باشی تێکەڵ بە پێکهاتەکانی تری بووتستراپ دەکەن. 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>
تاگێک.
ژێرنووس بە زیادکردنی a .card-subtitle
بۆ <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-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>
گەشتکردن
هەندێک گەشتکردن زیاد بکە بۆ سەردێڕ (یان بلۆک)ی کارتێک بە پێکهاتەکانی nav ی Bootstrap .
مامەڵەی تایبەت بە ناونیشان
لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە.
بڕۆ شوێنێک<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">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>
ئاسۆیی
بە بەکارهێنانی تێکەڵەیەک لە پۆلەکانی تۆڕ و سوودمەندی، دەتوانرێت کارتەکان بە شێوەیەکی ئاسۆیی دروست بکرێت بە شێوەیەکی دۆستانەی مۆبایل و وەڵامدەرەوە. لە نموونەی خوارەوەدا، ئێمە کانیەکانی تۆڕ بە .g-0
و .col-md-*
پۆلەکان بەکاردەهێنین بۆ ئەوەی کارتەکە لە md
خاڵی شکاندنەکەدا ئاسۆیی بکەین. ڕەنگە پێویست بە ڕێکخستنی زیاتر بکات بەپێی ناوەڕۆکی کارتەکەت.
ناونیشانی کارت
ئەمە کارتێکی فراوانترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.
دوایین نوێکردنەوە 3 خولەک پێش ئێستا
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
شێوازی کارتەکان
کارتەکان بژاردەی جۆراوجۆر لەخۆدەگرن بۆ خۆکارکردنی پاشبنەما و سنوور و ڕەنگەکانیان.
باکگراوند و ڕەنگ
بەکارهێنانی ڕەنگی دەق و سوودمەندییەکانی پاشبنەما بۆ گۆڕینی دەرکەوتنی کارتێک.
ناونیشانی کارتی سەرەتایی
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی لاوەکی
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی سەرکەوتن
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی مەترسی
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی ئاگادارکردنەوە
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی زانیاری
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی ڕووناکی
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی تاریک
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
گەیاندنی مانا بۆ تەکنەلۆژیا یارمەتیدەرەکان
بەکارهێنانی ڕەنگ بۆ زیادکردنی مانا تەنیا ئاماژەیەکی بینراو دەدات، کە ناگەیەنرێتە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان – وەک خوێنەری شاشە. دڵنیابە لەوەی کە ئەو زانیاریانەی کە بە ڕەنگەکە دیاری دەکرێن یان لە خودی ناوەڕۆکەکەوە دیارن (بۆ نموونە دەقی بینراو)، یان لە ڕێگەی ئامرازی بەدیلەوە جێگیر دەکرێن، وەک دەقی زیادە کە لەگەڵ .visually-hidden
پۆلەکەدا شاراوەتەوە.
سنوور
سوودمەندییەکانی سنوور بەکاربهێنە بۆ گۆڕینی تەنها border-color
لە کارتێک. تێبینی بکە کە دەتوانیت .text-{color}
پۆلەکان لەسەر دایک .card
یان ژێرکۆمەڵێک لە ناوەڕۆکی کارتەکە دابنێیت وەک لە خوارەوە نیشان دراوە.
ناونیشانی کارتی سەرەتایی
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی لاوەکی
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی سەرکەوتن
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی مەترسی
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی ئاگادارکردنەوە
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی زانیاری
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی ڕووناکی
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
ناونیشانی کارتی تاریک
هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
خزمەتگوزارییەکانی میکسین
هەروەها دەتوانیت بەپێی پێویست سنوورەکانی سەر و ژێرەوەی کارتەکە بگۆڕیت، تەنانەت 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>
کارتی تۆڕ
سیستەمی تۆڕی Bootstrap و .row-cols
پۆلەکانی بەکاربهێنە بۆ کۆنترۆڵکردنی چەند ستوونی تۆڕ (بە دەوری کارتەکانتدا پێچراو) لە هەر ڕیزێکدا نیشان دەدەیت. بۆ نموونە، لێرەدا .row-cols-1
کارتەکان لەسەر یەک ستوون دادەنێین، و .row-cols-md-2
چوار کارت دابەش دەکەین بۆ پانایی یەکسان لە سەرانسەری چەندین ڕیزدا، لە خاڵی شکاندنی مامناوەندەوە بۆ سەرەوە.
ناونیشانی کارت
ئەمە کارتێکی درێژترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.
ناونیشانی کارت
ئەمە کارتێکی درێژترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.
ناونیشانی کارت
ئەمە کارتێکی درێژترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە.
ناونیشانی کارت
ئەمە کارتێکی درێژترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.
<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
و پێچاوی کارتی چوارەم دەبینیت.
ناونیشانی کارت
ئەمە کارتێکی درێژترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.
ناونیشانی کارت
ئەمە کارتێکی درێژترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.
ناونیشانی کارت
ئەمە کارتێکی درێژترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە.
ناونیشانی کارت
ئەمە کارتێکی درێژترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.
<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 دا دابنێیت.
ناونیشانی کارت
ئەمە کارتێکی درێژترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.
ناونیشانی کارت
ئەمە کارتێکی کورتە.
ناونیشانی کارت
ئەمە کارتێکی درێژترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە.
ناونیشانی کارت
ئەمە کارتێکی درێژترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.
<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>
هەروەک چۆن لەگەڵ گروپەکانی کارتەکاندا، ژێرەوەی کارتەکان بە شێوەیەکی ئۆتۆماتیکی ڕیز دەبن.
ناونیشانی کارت
ئەمە کارتێکی فراوانترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.
ناونیشانی کارت
ئەم کارتە دەقی پشتگیری لە خوارەوە هەیە وەک پێشەکییەکی سروشتی بۆ ناوەڕۆکی زیادە.
ناونیشانی کارت
ئەمە کارتێکی فراوانترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم کارتە تەنانەت ناوەڕۆکی درێژتری هەیە لە یەکەمیان بۆ ئەوەی ئەو کردارە بەرزییە یەکسانە پیشان بدات.
<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مان بەکارهێنا بۆ تقلیدکردنی هەڵسوکەوتی ستوونەکانی هاوشێوەی ماسۆنری ، بەڵام ئەم تەکنیکە لەگەڵ کاریگەری لاوەکی زۆر ناخۆشدا هات . ئەگەر دەتەوێت ئەم جۆرە نەخشە لە v5
, دەتوانیت تەنها سوود لە پێوەکراوەکەی Masonry وەربگریت. کاری بیناسازی لە Bootstrap دا نییە ، بەڵام ئێمە نموونەیەکی دیمۆمان دروست کردووە بۆ ئەوەی یارمەتیت بدەین لە دەستپێکردن.
ساس
گۆڕاوەکان
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$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;