Source

کارتونه

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

په اړه

کارت د انعطاف وړ او د توزیع وړ مینځپانګې کانټینر دی. پدې کې د سرلیکونو او فوټرونو اختیارونه شامل دي، د منځپانګې پراخه ډولونه، د شرایطو شالید رنګونه، او د ځواکمن نندارې اختیارونه. که تاسو د 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>

ګروپونه لیست کړئ

د فلش لیست ګروپ سره په کارت کې د مینځپانګو لیستونه جوړ کړئ.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum په eros
<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>
انځور شوی
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum په eros
<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>

د پخلنځي ډنډ

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

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

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum په eros
<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">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>
اقتباس

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer 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، گرډ ټولګیو، گرډ ساس مکسین، یا اسانتیاو سره بدل کړئ.

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

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

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

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

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

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

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

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

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

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

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

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

د کارت سټایلونه

کارتونه د دوی د شالیدونو ، سرحدونو او رنګ دودولو لپاره مختلف اختیارونه لري.

پس منظر او رنګ

د کارت بڼه بدلولو لپاره د متن او شالید اسانتیاوې وکاروئ .

سرلیک
د لومړني کارت سرلیک

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

سرلیک
د ثانوي کارت سرلیک

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

سرلیک
د بریالیتوب کارت سرلیک

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

سرلیک
د خطر کارت سرلیک

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

سرلیک
د خبرتیا کارت سرلیک

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

سرلیک
د معلوماتو کارت سرلیک

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

سرلیک
د رڼا کارت سرلیک

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

سرلیک
د تور کارت سرلیک

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

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

د کارت ترتیب

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

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

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

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>

د کارت ډیک

د مساوي عرض او لوړوالي کارتونو سیټ ته اړتیا لرئ چې یو بل سره وصل نه وي؟ د کارت ډیکونه وکاروئ.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

د کارت کالمونه

کارتونه یوازې د CSS سره د معمارۍ په څیر کالمونو کې تنظیم کیدی شي د دوی په پوښلو سره .card-columns. کارتونه columnد اسانه سمون لپاره د فلیکس باکس پرځای د CSS ملکیتونو سره جوړ شوي. کارتونه له پورته څخه ښکته او کیڼ څخه ښیې ته امر شوي.

پورته شه! ستاسو مایلیج د کارت کالمونو سره ممکن توپیر ولري. د دې لپاره چې د کالمونو په اوږدو کې د کارتونو ماتیدو مخه ونیول شي، موږ باید دوی داسې تنظیم کړو چې display: inline-blockتر column-break-inside: avoidاوسه د بلټ پروف حل نه دی.

Placeholder Image cap
د کارت سرلیک چې یوې نوې کرښې ته وتړل شي

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

یو څوک چې د سرچینې په سرلیک کې مشهور دی
Placeholder Image cap
د کارت سرلیک

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

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. د انټیجر posuere erat.

یو څوک چې د سرچینې په سرلیک کې مشهور دی
د کارت سرلیک

دا کارت یو منظم سرلیک او لاندې متن لنډ پاراګراف لري.

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

Placeholder Card image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

یو څوک چې د سرچینې په سرلیک کې مشهور دی
د کارت سرلیک

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

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

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