Source

کارتەکان

کارتەکانی بووتستراپ کۆنتێنەرێکی ناوەڕۆکی نەرم و فراوانکراو بە چەندین جۆر و بژاردە دابین دەکەن.

دەربارەی

کارت بریتییە لە دەفرێکی ناوەڕۆکی نەرم و درێژکراوە. هەڵبژاردەکانی سەردێڕ و ژێرەوە، ناوەڕۆکی جۆراوجۆر، ڕەنگی پاشبنەمای کۆنتێکست و بژاردەی بەهێزی پیشاندانی لەخۆدەگرێت. ئەگەر ئاشنای بووتستراپ ٣ بیت، کارتەکان جێگەی پانێڵ و بیر و وێنە بچووکەکانمان دەگرنەوە. کارایی هاوشێوەی ئەو پێکهاتانە وەک پۆلی دەستکاریکەر بۆ کارتەکان بەردەستە.

نموونە

کارتەکان بە کەمترین مارکاپ و ستایل دروست دەکرێن، بەڵام هێشتا توانیویانە تۆنێک کۆنتڕۆڵ و خۆکارکردن پێشکەش بکەن. بە فلیکس بۆکس دروستکراون، ڕێکخستنی ئاسان پێشکەش دەکەن و بە باشی تێکەڵ بە پێکهاتەکانی تری بووتستراپ دەکەن. marginبە شێوازی پێشوەختە هیچیان نییە ، بۆیە بەپێی پێویست سوودمەندییەکانی دووری بەکاربهێنە.

لە خوارەوە نموونەی کارتێکی بنەڕەتی دەخەینەڕوو کە ناوەڕۆکێکی تێکەڵە و پانایییەکی جێگیرە. کارتەکان هیچ پانایییەکی جێگیریان نییە بۆ دەستپێکردن، بۆیە بە شێوەیەکی سروشتی پانایی تەواوی توخمە باوکەکەی پڕ دەکەنەوە. ئەمە بە ئاسانی بە بژاردە جیاوازەکانی قەبارەدانانمان تایبەتمەند دەکرێت .

100%x180
ناونیشانی کارت

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

بڕۆ شوێنێک
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

جۆرەکانی ناوەڕۆک

کارتەکان پشتگیری لە ناوەڕۆکی جۆراوجۆر دەکەن، لەوانە وێنە، دەق، گروپی لیست، بەستەر و زۆر شتی تر. لە خوارەوە نموونەی ئەو شتانە دەخەینەڕوو کە پشتگیری دەکرێن.

جەستە

بلۆکی بیناسازی کارتێک بریتییە لە .card-body. هەرکاتێک پێویستت بە بەشێکی پادکراو بوو لەناو کارتێکدا بەکاری بهێنە.

ئەمە هەندێک دەقە لەناو جەستەی کارتێکدا.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

ناونیشانی کارتەکان بە زیادکردن .card-titleبۆ <h*>تاگێک بەکاردەهێنرێت. بە هەمان شێوە بەستەرەکان زیاد دەکرێن و لە تەنیشت یەکەوە دادەنرێت بە زیادکردن .card-linkبۆ <a>تاگێک.

ژێرنووس بە زیادکردنی 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 ستاندارد ستایل بکرێت.

سەری وێنە [100%x180]

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

گروپەکان بنووسە

دروستکردنی لیستی ناوەڕۆک لە کارتێکدا بە گروپی لیستی فڵش.

  • کراس جوستۆ ئۆدیۆ
  • داپیبوس ac facilisis لە
  • ڤێستیبولوم لە ئیرۆس
<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>
تایبەتمەند
  • کراس جوستۆ ئۆدیۆ
  • داپیبوس ac facilisis لە
  • ڤێستیبولوم لە ئیرۆس
<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

سینکی چێشتخانە

چەندین جۆری ناوەڕۆک تێکەڵ بکە و هاوتا بکە بۆ دروستکردنی ئەو کارتە کە پێویستتە، یان هەموو شتێک لەوێ فڕێ بدە. لە خوارەوە شێوازی وێنە، بلۆک، شێوازی دەق و گروپێکی لیست نیشان دراوە- هەموویان لە کارتێکی پانایی جێگیردا پێچراون.

سەری وێنە [100%x180]
ناونیشانی کارت

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

  • کراس جوستۆ ئۆدیۆ
  • داپیبوس ac facilisis لە
  • ڤێستیبولوم لە ئیرۆس
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

سەردێڕ و/یان ژێرەوەی هەڵبژاردە لەناو کارتێکدا زیاد بکە.

تایبەتمەند
مامەڵەی تایبەت بە ناونیشان

لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە.

بڕۆ شوێنێک
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

دەتوانرێت سەردێڕی کارتەکان بە زیادکردنی .card-headerبۆ <h*>توخمەکان ستایل بکرێت.

تایبەتمەند
مامەڵەی تایبەت بە ناونیشان

لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە.

بڕۆ شوێنێک
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
وەرگرتە

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە. ژمارەیەکی تەواو posuere erat a ante.

کەسێکی بەناوبانگ لە ناونیشانی سەرچاوە
<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
تایبەتمەند
مامەڵەی تایبەت بە ناونیشان

لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە.

بڕۆ شوێنێک
<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>

هەندێک گەشتکردن زیاد بکە بۆ سەردێڕی کارتێک (یان بلۆک) بە پێکهاتەکانی 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" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
مامەڵەی تایبەت بە ناونیشان

لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە.

بڕۆ شوێنێک
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

وێنەکان

کارتەکان چەند بژاردەیەک لەخۆدەگرن بۆ کارکردن لەگەڵ وێنەکان. لە نێوان زیادکردنی "کاپەکانی وێنە" لە هەر کۆتایی کارتێکدا، سەرپۆشکردنی وێنەکان بە ناوەڕۆکی کارتێک، یان تەنها جێگیرکردنی وێنەکە لە کارتێکدا هەڵبژێرە.

کاپەکانی وێنە

هاوشێوەی سەر و ژێرەوە، کارتەکان دەتوانن "کاپەکانی وێنە"ی سەرەوە و خوارەوە لەخۆ بگرن- وێنەکانی سەرەوە یان خوارەوەی کارتێک.

100%x180
ناونیشانی کارت

ئەمە کارتێکی فراوانترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.

دوایین نوێکردنەوە 3 خولەک پێش ئێستا

ناونیشانی کارت

ئەمە کارتێکی فراوانترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.

دوایین نوێکردنەوە 3 خولەک پێش ئێستا

100%x180
<div class="card mb-3">
  <img class="card-img-top" src=".../100px180/" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="card-img-bottom" src=".../100px180/" alt="Card image cap">
</div>

سەرپۆشی وێنە

وێنەیەک بکە بە پاشبنەمای کارت و دەقی کارتەکەت دابنێ. بەپێی وێنەکە، لەوانەیە پێویستت بە ستایل یان سوودمەندی زیادە بێت یان نا.

100%x270
ناونیشانی کارت

ئەمە کارتێکی فراوانترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.

دوایین نوێکردنەوە 3 خولەک پێش ئێستا

<div class="card bg-dark text-white">
  <img class="card-img" src=".../100px270/#55595c:#373a3c/text:Card image" alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

شێوازی کارتەکان

کارتەکان بژاردەی جۆراوجۆر لەخۆدەگرن بۆ خۆکارکردنی پاشبنەما و سنوور و ڕەنگەکانیان.

باکگراوند و ڕەنگ

سوودمەندییەکانی دەق و پاشبنەما بەکاربهێنە بۆ گۆڕینی دەرکەوتنی کارتێک.

سەردێڕ
ناونیشانی کارتی سەرەتایی

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی لاوەکی

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی سەرکەوتن

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی مەترسی

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی ئاگادارکردنەوە

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی زانیاری

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی ڕووناکی

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی تاریک

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Danger card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-warning mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Warning card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Info card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card bg-light mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Light card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Dark card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>
گەیاندنی مانا بۆ تەکنەلۆژیا یارمەتیدەرەکان

بەکارهێنانی ڕەنگ بۆ زیادکردنی مانا تەنیا ئاماژەیەکی بینراو دەدات، کە ناگەیەنرێتە بەکارهێنەرانی تەکنەلۆژیا یارمەتیدەرەکان – وەک خوێنەری شاشە. دڵنیابە لەوەی کە ئەو زانیاریانەی کە بە ڕەنگەکە دیاری دەکرێن یان لە خودی ناوەڕۆکەکەوە دیارن (بۆ نموونە دەقی بینراو)، یان لە ڕێگەی ئامرازی بەدیلەوە جێگیر دەکرێن، وەک دەقی زیادە کە لەگەڵ .sr-onlyپۆلەکەدا شاراوەتەوە.

سنوور

سوودمەندییەکانی سنوور بەکاربهێنە بۆ گۆڕینی تەنها border-colorلە کارتێک. تێبینی بکە کە دەتوانیت .text-{color}پۆلەکان لەسەر دایک .cardیان ژێرکۆمەڵێک لە ناوەڕۆکی کارتەکە دابنێیت وەک لە خوارەوە نیشان دراوە.

سەردێڕ
ناونیشانی کارتی سەرەتایی

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی لاوەکی

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی سەرکەوتن

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی مەترسی

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی ئاگادارکردنەوە

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی زانیاری

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی ڕووناکی

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

سەردێڕ
ناونیشانی کارتی تاریک

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

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

خزمەتگوزارییەکانی میکسین

هەروەها دەتوانیت بەپێی پێویست سنوورەکانی سەر و ژێرەوەی کارتەکە بگۆڕیت، تەنانەت background-colorبە .bg-transparent.

سەردێڕ
ناونیشانی کارتی سەرکەوتن

هەندێک دەقی نموونەی خێرا بۆ بنیاتنانی لەسەر ناونیشانی کارتەکە و پێکهێنانی بەشێکی زۆری ناوەڕۆکی کارتەکە.

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

شێوازی کارت

جگە لە ستایلکردنی ناوەڕۆک لەناو کارتەکاندا، Bootstrap چەند بژاردەیەکی لەخۆگرتووە بۆ داڕشتنی زنجیرە کارتەکان. بۆ ئێستا، ئەم بژاردانەی نەخشە هێشتا وەڵامدەرەوە نین .

گروپی کارتەکان

گروپەکانی کارت بەکاربهێنە بۆ ڕەندەری کارتەکان وەک یەک توخم و هاوپێچکراو بە ستوونی پانایی و بەرزی یەکسان. گروپەکانی کارت بەکاریدەهێنن display: flex;بۆ بەدەستهێنانی قەبارەی یەکسانیان.

100%x180
ناونیشانی کارت

ئەمە کارتێکی فراوانترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.

دوایین نوێکردنەوە 3 خولەک پێش ئێستا

100%x180
ناونیشانی کارت

ئەم کارتە دەقی پشتگیری لە خوارەوە هەیە وەک پێشەکییەکی سروشتی بۆ ناوەڕۆکی زیادە.

دوایین نوێکردنەوە 3 خولەک پێش ئێستا

100%x180
ناونیشانی کارت

ئەمە کارتێکی فراوانترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم کارتە تەنانەت ناوەڕۆکی درێژتری هەیە لە یەکەمیان بۆ ئەوەی ئەو کردارە بەرزییە یەکسانە پیشان بدات.

دوایین نوێکردنەوە 3 خولەک پێش ئێستا

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

لە کاتی بەکارهێنانی گروپەکانی کارت بە ژێرەوە، ناوەڕۆکەکەیان بە شێوەیەکی ئۆتۆماتیکی ڕیز دەبێت.

100%x180
ناونیشانی کارت

ئەمە کارتێکی فراوانترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.

100%x180
ناونیشانی کارت

ئەم کارتە دەقی پشتگیری لە خوارەوە هەیە وەک پێشەکییەکی سروشتی بۆ ناوەڕۆکی زیادە.

100%x180
ناونیشانی کارت

ئەمە کارتێکی فراوانترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم کارتە تەنانەت ناوەڕۆکی درێژتری هەیە لە یەکەمیان بۆ ئەوەی ئەو کردارە بەرزییە یەکسانە پیشان بدات.

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

دەکەکانی کارت

پێویستت بە کۆمەڵێک کارتی یەکسانە لە پانایی و بەرزی کە بە یەکەوە نەبەسترێتەوە؟ بەکارهێنانی دەکی کارت.

100%x200
ناونیشانی کارت

ئەمە کارتێکی درێژترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.

دوایین نوێکردنەوە 3 خولەک پێش ئێستا

100%x200
ناونیشانی کارت

ئەم کارتە دەقی پشتگیری لە خوارەوە هەیە وەک پێشەکییەکی سروشتی بۆ ناوەڕۆکی زیادە.

دوایین نوێکردنەوە 3 خولەک پێش ئێستا

100%x200
ناونیشانی کارت

ئەمە کارتێکی فراوانترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم کارتە تەنانەت ناوەڕۆکی درێژتری هەیە لە یەکەمیان بۆ ئەوەی ئەو کردارە بەرزییە یەکسانە پیشان بدات.

دوایین نوێکردنەوە 3 خولەک پێش ئێستا

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px200/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

هەروەک چۆن لەگەڵ گروپەکانی کارتەکاندا، پێیەکانی کارتەکان لە دەکەکاندا بە شێوەیەکی ئۆتۆماتیکی ڕیز دەبن.

100%x180
ناونیشانی کارت

ئەمە کارتێکی فراوانترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.

100%x180
ناونیشانی کارت

ئەم کارتە دەقی پشتگیری لە خوارەوە هەیە وەک پێشەکییەکی سروشتی بۆ ناوەڕۆکی زیادە.

100%x180
ناونیشانی کارت

ئەمە کارتێکی فراوانترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم کارتە تەنانەت ناوەڕۆکی درێژتری هەیە لە یەکەمیان بۆ ئەوەی ئەو کردارە بەرزییە یەکسانە پیشان بدات.

<div class="card-deck">
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src=".../100px180/" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>

ستوونی کارتەکان

دەتوانرێت کارتەکان بە ستوونی هاوشێوەی ماسۆنری ڕێکبخرێت بە تەنها CSS بە پێچانیان لە .card-columns. کارتەکان بە تایبەتمەندی CSS دروست دەکرێن columnلەبری flexbox بۆ ڕێکخستنی ئاسانتر. کارتەکان لە سەرەوە بۆ خوارەوە و چەپ بۆ ڕاست داوا دەکرێن.

سەرەکان بەرز دەکەنەوە! ڕەنگە میلەکانت لەگەڵ ستوونی کارتەکاندا جیاواز بن. بۆ ئەوەی کارتەکان لە سەرانسەری ستوونەکاندا نەشکێن، دەبێت بەو display: inline-blockشێوەیە دابنێین column-break-inside: avoidکە هێشتا چارەسەرێکی دژە فیشەک نییە.

100%x160
ناونیشانی کارت کە بە دێڕێکی نوێ دەپێچرێتەوە

ئەمە کارتێکی درێژترە لەگەڵ دەقی پشتگیری لە خوارەوە وەک پێشەنگییەکی سروشتی بۆ ناوەڕۆکی زیادە. ئەم ناوەڕۆکە کەمێک درێژترە.

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە. ژمارەیەکی تەواو posuere erat a ante.

کەسێکی بەناوبانگ لە ناونیشانی سەرچاوە
100%x160
ناونیشانی کارت

ئەم کارتە دەقی پشتگیری لە خوارەوە هەیە وەک پێشەکییەکی سروشتی بۆ ناوەڕۆکی زیادە.

دوایین نوێکردنەوە 3 خولەک پێش ئێستا

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە. ژمارەیەکی تەواو posuere erat.

کەسێکی بەناوبانگ لە ناونیشانی سەرچاوە
ناونیشانی کارت

ئەم کارتە ناونیشانێکی ئاسایی و بڕگەی کورتی دەقی لە خوارەوەی هەیە.

دوایین نوێکردنەوە 3 خولەک پێش ئێستا

100%x260

لۆرێم ئیپسوم دۆلۆر دانیشتن ئەمێت، کۆنسێکتێتور چەوری نوخبە. ژمارەیەکی تەواو posuere erat a ante.

کەسێکی بەناوبانگ لە ناونیشانی سەرچاوە
ناونیشانی کارت

ئەمە کارتێکی ترە کە ناونیشان و دەقی پشتگیری لە خوارەوەیە. ئەم کارتە هەندێک ناوەڕۆکی زیادەی تێدایە بۆ ئەوەی بە گشتی کەمێک بەرزتر بێت.

دوایین نوێکردنەوە 3 خولەک پێش ئێستا

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

هەروەها دەتوانرێت ستوونی کارتەکان درێژ بکرێتەوە و بە هەندێک کۆدی زیادە بەپێی خواستی خۆت دروست بکرێت. لە خوارەوە درێژکراوەی .card-columnsپۆلەکە نیشان دراوە بە بەکارهێنانی هەمان CSS کە بەکاری دەهێنین- ستوونەکانی CSS- بۆ دروستکردنی کۆمەڵێک قاتە وەڵامدەرەوە بۆ گۆڕینی ژمارەی ستوونەکان.

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