کارتەکان

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

لەم پەیجەدا

دەربارەی

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

نموونە

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

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

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

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

بڕۆ شوێنێک

html

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

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

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

جەستە

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

ئەمە هەندێک دەقە لەناو جەستەی کارتێکدا.

html

<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

ناونیشان و دەق و بەستەرەکان

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

ژێرنووس بە زیادکردنی a .card-subtitleبۆ <h*>تاگێک بەکاردەهێنرێت. ئەگەر .card-titleو .card-subtitleشتەکان لە شتێکدا دابنرێن .card-body، ناونیشانی کارتەکە و ژێرنووسەکە بە جوانی ڕێکدەخرێن.

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

ژێرنووسی کارت

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

لینکی کارت لینکی تر

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

وێنەکان

.card-img-topوێنەیەک لە سەرەوەی کارتەکە دادەنێت. بە .card-text, دەتوانرێت دەق زیاد بکرێت بۆ کارتەکە. .card-textهەروەها دەتوانرێت دەقی ناوەوە بە تاگەکانی HTML ستاندارد ستایل بکرێت.

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

html

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

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

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

شتێک
بڕگەی دووەم
بڕگەی سێیەم

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

تایبەتمەند

شتێک
بڕگەی دووەم
بڕگەی سێیەم

html

<div class="card" style="width: 18rem;">
  <div class="card-header">
    Featured
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
</div>

شتێک
بڕگەی دووەم
بڕگەی سێیەم

ژێرنووسی کارت

html

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-footer">
    Card footer
  </div>
</div>

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

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

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

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

شتێک
بڕگەی دووەم
بڕگەی سێیەم

لینکی کارت لینکی تر

html

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

شەریتی سەرەوە یان خوارەوە

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

تایبەتمەند

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

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

بڕۆ شوێنێک

html

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

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

تایبەتمەند

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

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

بڕۆ شوێنێک

html

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

وەرگرتە

وەرگێڕانێکی ناسراو، کە لە توخمێکی بلۆککۆتدا هەیە.

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

html

<div class="card">
  <div class="card-header">
    Quote
  </div>
  <div class="card-body">
    <blockquote class="blockquote mb-0">
      <p>A well-known quote, contained in a blockquote element.</p>
      <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

تایبەتمەند

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

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

بڕۆ شوێنێک

٢ رۆژ لەمەو پێش

html

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

قەبارەدانان

کارتەکان گریمانە ناکەن کە هیچ تایبەتمەندێک widthبۆ دەستپێکردن نییە، بۆیە 100% فراوان دەبن مەگەر بە پێچەوانەوە نەنووسرێت. دەتوانیت ئەمە بەپێی پێویست بگۆڕیت بە CSSی تایبەت، پۆلەکانی تۆڕ، میکسینەکانی تۆڕی Sass، یان سوودمەندیەکان.

بەکارهێنانی تۆڕی نیشانە

بە بەکارهێنانی تۆڕەکە، کارتەکان بە ستوون و ڕیز بەپێی پێویست بپێچە.

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

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

بڕۆ شوێنێک

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

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

بڕۆ شوێنێک

html

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

بەکارهێنانی خزمەتگوزارییەکان

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

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

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

دوگمه‌

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

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

دوگمه‌

html

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card w-50">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

بەکارهێنانی CSSی تایبەت

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

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

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

بڕۆ شوێنێک

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ڕێکخستنی دەق

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

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

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

بڕۆ شوێنێک

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

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

بڕۆ شوێنێک

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

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

بڕۆ شوێنێک

html

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-center" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<div class="card text-end" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

هەندێک گەشتکردن زیاد بکە بۆ سەردێڕی کارتێک (یان بلۆک) بە پێکهاتەکانی nav ی Bootstrap .

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

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

بڕۆ شوێنێک

html

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" aria-current="true" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

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

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

بڕۆ شوێنێک

html

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

وێنەکان

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

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

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

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

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

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

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

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

html

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

سەرپۆشی وێنە

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

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

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

html

<div class="card text-bg-dark">
  <img src="..." class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

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

ئاسۆیی

بە بەکارهێنانی تێکەڵەیەک لە پۆلەکانی تۆڕ و سوودمەندی، دەتوانرێت کارتەکان بە شێوەیەکی ئاسۆیی دروست بکرێت بە شێوەیەکی دۆستانەی مۆبایل و وەڵامدەرەوە. لە نموونەی خوارەوەدا، ئێمە کانیەکانی تۆڕ بە .g-0و .col-md-*پۆلەکان بەکاردەهێنین بۆ ئەوەی کارتەکە لە mdخاڵی شکاندنەکەدا ئاسۆیی بکەین. ڕەنگە پێویست بە ڕێکخستنی زیاتر بکات بەپێی ناوەڕۆکی کارتەکەت.

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

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

html

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="..." class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

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

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

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

لە v5.2.0 زیاد کراوە

background-colorپێشەوەی کۆنتراست colorلەگەڵ یارمەتیدەرەکانمان.text-bg-{color} دابنێ . پێشتر پێویست بوو بە دەستی هەڵبژاردەکەت .text-{color}و .bg-{color}سوودمەندیەکان بۆ ستایلکردن جووت بکەیت، کە هێشتا ڕەنگە بەکاری بهێنیت ئەگەر پێت باشە.

سەردێڕ

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

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

سەردێڕ

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

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

سەردێڕ

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

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

سەردێڕ

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

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

سەردێڕ

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

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

سەردێڕ

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

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

سەردێڕ

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

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

سەردێڕ

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

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

html

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

گەیاندنی مانا بۆ تەکنەلۆژیا یارمەتیدەرەکان

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

سنوور

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

سەردێڕ

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

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

سەردێڕ

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

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

سەردێڕ

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

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

سەردێڕ

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

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

سەردێڕ

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

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

سەردێڕ

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

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

سەردێڕ

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

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

سەردێڕ

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

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

html

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

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

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

سەردێڕ

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

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

ژێرەوە

html

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

شێوازی کارت

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

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

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

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

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

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

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

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

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

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

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

html

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

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

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

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

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

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

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

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

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

html

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

کارتی تۆڕ

سیستەمی تۆڕی Bootstrap و .row-colsپۆلەکانی بەکاربهێنە بۆ کۆنترۆڵکردنی چەند ستوونی تۆڕ (بە دەوری کارتەکانتدا پێچراو) لە هەر ڕیزێکدا نیشان دەدەیت. بۆ نموونە، لێرەدا .row-cols-1کارتەکان لەسەر یەک ستوون دادەنێین، و .row-cols-md-2چوار کارت دابەش دەکەین بۆ پانایی یەکسان لە سەرانسەری چەندین ڕیزدا، لە خاڵی شکاندنی مامناوەندەوە بۆ سەرەوە.

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

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

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

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

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

html

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

بیگۆڕە بۆ .row-cols-3و پێچاوی کارتی چوارەم دەبینیت.

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

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

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

کاتێک پێویستت بە بەرزی یەکسانە، زیاد بکە .h-100بۆ کارتەکان. ئەگەر بە شێوازی پێشوەختە بەرزی یەکسانت دەوێت، دەتوانیت $card-height: 100%لە Sass دا دابنێیت.

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

ئەمە کارتێکی کورتە.

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

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

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

html

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

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

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

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

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

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

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

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

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

html

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

بیناسازی

لە v4ئێمە تەکنیکێکی تەنها CSSمان بەکارهێنا بۆ تقلیدکردنی هەڵسوکەوتی ستوونەکانی هاوشێوەی ماسۆنری ، بەڵام ئەم تەکنیکە لەگەڵ کاریگەری لاوەکی زۆر ناخۆشدا هات . ئەگەر بتەوێت ئەم جۆرە نەخشە لە v5, دەتوانیت تەنها سوود لە پێوەکراوەکەی Masonry وەربگریت. کاری بیناسازی لە Bootstrap دا نییە ، بەڵام ئێمە نموونەیەکی دیمۆمان دروست کردووە بۆ ئەوەی یارمەتیت بدەین لە دەستپێکردن.

CSS

گۆڕاوەکان

لە v5.2.0 زیاد کراوە

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

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

گۆڕاوەکانی ساس

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$card-inner-border-radius:          subtract($card-border-radius, $card-border-width);
$card-cap-padding-y:                $card-spacer-y * .5;
$card-cap-padding-x:                $card-spacer-x;
$card-cap-bg:                       rgba($black, .03);
$card-cap-color:                    null;
$card-height:                       null;
$card-color:                        null;
$card-bg:                           $white;
$card-img-overlay-padding:          $spacer;
$card-group-margin:                 $grid-gutter-width * .5;