اصلي منځپانګې ته لاړ شئ د اسنادو نیویګیشن ته لاړشئ
in English

کارتونه

د بوټسټریپ کارتونه د ډیری ډولونو او اختیارونو سره د انعطاف وړ او توزیع وړ مینځپانګې کانټینر چمتو کوي.

په اړه

کارت د انعطاف وړ او د توزیع وړ مینځپانګې کانټینر دی. پدې کې د سرلیکونو او فوټرونو اختیارونه شامل دي، د منځپانګې پراخه ډولونه، د شرایطو شالید رنګونه، او د ځواکمن نندارې اختیارونه. که تاسو د Bootstrap 3 سره آشنا یاست، کارتونه زموږ زاړه تختې، څاګانې، او تمبیلونه بدلوي. دې برخو ته ورته فعالیت د کارتونو لپاره د ترمیم کونکي ټولګیو په توګه شتون لري.

بېلګه

کارتونه د امکان تر حده د لږ مارک اپ او سټایلونو سره جوړ شوي ، مګر بیا هم د یو ټن کنټرول او تنظیم کولو اداره کوي. د فلیکس بکس سره جوړ شوی، دوی د اسانه سمون وړاندیز کوي او د نورو بوټسټریپ اجزاو سره ښه مخلوط کوي. دوی marginد ډیفالټ له مخې هیڅ نلري، نو د اړتیا په صورت کې د فاصلې اسانتیاوې وکاروئ .

لاندې د مخلوط منځپانګې او یو ثابت پلنوالي سره د لومړني کارت یوه بیلګه ده. کارتونه د پیل کولو لپاره ټاکلی پلنوالی نلري، نو دوی به په طبیعي توګه د خپل اصلي عنصر بشپړ عرض ډک کړي. دا زموږ د مختلف اندازې کولو اختیارونو سره په اسانۍ سره تنظیم شوی .

Placeholder Image cap
د کارت سرلیک

د کارت په سرلیک کې د جوړولو لپاره ځینې ګړندي مثال متن او د کارت مینځپانګې لویه برخه جوړوي.

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

د منځپانګې ډولونه

کارتونه د مختلفو محتوياتو ملاتړ کوي، پشمول انځورونه، متن، د لیست ګروپونه، لینکونه، او نور. لاندې د هغه څه مثالونه دي چې ملاتړ کیږي.

بدن

د کارت جوړونې بلاک دی .card-body. دا وکاروئ کله چې تاسو په کارت کې پیډ شوي برخې ته اړتیا لرئ.

دا د کارت په بدن کې یو څه متن دی.
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

د کارت سرلیکونه په ټاګ کې اضافه .card-titleکولو سره کارول کیږي. په ورته ډول، لینکونه اضافه شوي او د ټاګ په <h*>اضافه کولو سره یو بل ته نږدې کیښودل کیږي ..card-link<a>

فرعي سرلیکونه په ټاګ کې د اضافه کولو سره کارول .card-subtitleکیږي <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 ټګونو سره سټایل کیدی شي.

Placeholder Image cap

د کارت په سرلیک کې د جوړولو لپاره ځینې ګړندي مثال متن او د کارت مینځپانګې لویه برخه جوړوي.

<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>

د پخلنځي ډنډ

د ډیری مینځپانګو ډولونه مخلوط او میچ کړئ ترڅو هغه کارت رامینځته کړئ چې تاسو ورته اړتیا لرئ ، یا هرڅه هلته وغورځوئ. لاندې ښودل شوي د عکس سټایلونه ، بلاکونه ، د متن سټایلونه ، او د لیست ګروپ — ټول په یو ثابت پلن کارت کې پوښل شوي.

Placeholder Image cap
د کارت سرلیک

د کارت په سرلیک کې د جوړولو لپاره ځینې ګړندي مثال متن او د کارت مینځپانګې لویه برخه جوړوي.

  • یو شی
  • دوهم توکي
  • دریم توکي
<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، گرډ ټولګیو، گرډ ساس مکسین، یا اسانتیاو سره بدل کړئ.

د گرډ مارک اپ کارول

د ګریډ په کارولو سره، کارتونه په کالمونو او قطارونو کې د اړتیا سره سم وتړئ.

د ځانګړي سرلیک درملنه

اضافي مینځپانګې ته د طبیعي لیډ په توګه لاندې د ملاتړ متن سره.

چیرته لاړ شه
د ځانګړي سرلیک درملنه

اضافي مینځپانګې ته د طبیعي لیډ په توګه لاندې د ملاتړ متن سره.

چیرته لاړ شه
<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 وکاروئ یا د انلاین سټایلونو په توګه د عرض ټاکلو لپاره.

د ځانګړي سرلیک درملنه

اضافي مینځپانګې ته د طبیعي لیډ په توګه لاندې د ملاتړ متن سره.

چیرته لاړ شه
<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>

د کارت سرلیک (یا بلاک) ته د بوټسټریپ نیوی اجزاو سره یو څه نیویګیشن اضافه کړئ .

د ځانګړي سرلیک درملنه

اضافي مینځپانګې ته د طبیعي لیډ په توګه لاندې د ملاتړ متن سره.

چیرته لاړ شه
<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" href="#" tabindex="-1" aria-disabled="true">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="#" tabindex="-1" aria-disabled="true">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>

انځورونه

کارتونو کې د عکسونو سره کار کولو لپاره یو څو اختیارونه شامل دي. د کارت په پای کې د "عکس کیپ" ضمیمه کولو څخه غوره کړئ ، د کارت مینځپانګې سره عکسونه پوښئ ، یا په ساده ډول په کارت کې عکس ځای په ځای کړئ.

د انځور کیپ

د سرلیکونو او فوټرونو په څیر، کارتونه کیدای شي د پورتنۍ او ښکته "عکس کیپ" شامل وي — د کارت په پورتنۍ یا ښکته کې انځورونه.

Placeholder Image cap
د کارت سرلیک

دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

وروستی تازه 3 دقیقې دمخه

د کارت سرلیک

دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

وروستی تازه 3 دقیقې دمخه

Placeholder Image cap
<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>

د انځور پوښښ

یو عکس د کارت شالید ته واړوئ او د خپل کارت متن پوښ ​​کړئ. په عکس پورې اړه لري، تاسو ممکن اضافي سټایلونو یا اسانتیاو ته اړتیا ولرئ یا نه.

Placeholder Card image
د کارت سرلیک

دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

وروستی تازه 3 دقیقې دمخه

<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

Placeholder Image
د کارت سرلیک

دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

وروستی تازه 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>

د کارت ترتیب

په کارتونو کې د مینځپانګې سټایل کولو سربیره ، بوټسټریپ کې د کارتونو لړۍ ایښودلو لپاره یو څو اختیارونه شامل دي. د اوس وخت لپاره، دا ترتیب اختیارونه لاهم ځواب ورکوونکي ندي .

د کارت ګروپونه

د کارت ګروپونو څخه کار واخلئ ترڅو کارتونه د واحد، ضمیمه عنصر په توګه د مساوي عرض او لوړوالي کالمونو سره وړاندې کړئ. د کارت ګروپونه له سټک څخه پیل کیږي او د بریک پوائنټ څخه display: flex;پیل کیږي د یونیفورم ابعادو سره ضمیمه کیدو لپاره کاروي sm.

Placeholder Image cap
د کارت سرلیک

دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

وروستی تازه 3 دقیقې دمخه

Placeholder Image cap
د کارت سرلیک

دا کارت د اضافي مینځپانګې لپاره د طبیعي لیډ ان په توګه لاندې متن ملاتړ کوي.

وروستی تازه 3 دقیقې دمخه

Placeholder Image cap
د کارت سرلیک

دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا کارت د لومړي په پرتله حتی اوږد مینځپانګه لري ترڅو د مساوي لوړوالي عمل وښیې.

وروستی تازه 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>

کله چې د فوټرونو سره د کارت ګروپونه وکاروئ ، د دوی مینځپانګه به په اوتومات ډول لیکه شي.

Placeholder Image cap
د کارت سرلیک

دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

Placeholder Image cap
د کارت سرلیک

دا کارت د اضافي مینځپانګې لپاره د طبیعي لیډ ان په توګه لاندې متن ملاتړ کوي.

Placeholder Image cap
د کارت سرلیک

دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا کارت د لومړي په پرتله حتی اوږد مینځپانګه لري ترڅو د مساوي لوړوالي عمل وښیې.

<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>

گرډ کارتونه

د بوټسټریپ گرډ سیسټم او د هغې .row-colsټولګي وکاروئ ترڅو کنټرول کړئ چې څومره گرډ کالمونه (ستاسو د کارتونو شاوخوا پوښل شوي) تاسو په هر قطار کې ښودل کوئ. د مثال په توګه، دلته .row-cols-1په یوه کالم کې کارتونه ایښودل دي، او .row-cols-md-2د منځني وقفې نقطې څخه، په څو قطارونو کې د مساوي چوکۍ لپاره څلور کارتونه ویشل دي.

Placeholder Image cap
د کارت سرلیک

دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

Placeholder Image cap
د کارت سرلیک

دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

Placeholder Image cap
د کارت سرلیک

دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه.

Placeholder Image cap
د کارت سرلیک

دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

<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او تاسو به د څلورم کارت لپاس وګورئ.

Placeholder Image cap
د کارت سرلیک

دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

Placeholder Image cap
د کارت سرلیک

دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

Placeholder Image cap
د کارت سرلیک

دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه.

Placeholder Image cap
د کارت سرلیک

دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

<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%په ساس کې تنظیم کړئ.

Placeholder Image cap
د کارت سرلیک

دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

Placeholder Image cap
د کارت سرلیک

دا یو لنډ کارت دی.

Placeholder Image cap
د کارت سرلیک

دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه.

Placeholder Image cap
د کارت سرلیک

دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

<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>

لکه د کارت ګروپونو په څیر، د کارت فوټرونه به په اوتومات ډول قطار شي.

Placeholder Image cap
د کارت سرلیک

دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.

Placeholder Image cap
د کارت سرلیک

دا کارت د اضافي مینځپانګې لپاره د طبیعي لیډ ان په توګه لاندې متن ملاتړ کوي.

Placeholder Image cap
د کارت سرلیک

دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا کارت د لومړي په پرتله حتی اوږد مینځپانګه لري ترڅو د مساوي لوړوالي عمل وښیې.

<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 تخنیک کارولی ، مګر دا تخنیک د ډیری ناخوښه اړخیزو اغیزو سره راغلی . که تاسو غواړئ دا ډول ترتیب په کې ولرئ، تاسو کولی شئ یوازې د معماري پلگ ان څخه کار واخلئ. معماري په Bootstrap کې نه ده شامله شوې ، مګر موږ تاسو سره د پیل کولو کې د مرستې لپاره د ډیمو مثال جوړ کړی دی.v5

ساس

متغیرات

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-radius:                $border-radius;
$card-border-color:                 rgba($black, .125);
$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;