Source

کارتونه

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

په اړه

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

بېلګه

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

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

100%x180
د کارت سرلیک

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

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

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

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

بدن

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

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

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

فرعي سرلیکونه په ټاګ کې د اضافه کولو سره کارول .card-subtitleکیږي <h*>. که چیرې توکي .card-titleاو .card-subtitleتوکي په یوه .card-bodyتوکي کې ځای په ځای شي، د کارت سرلیک او فرعي سرلیک په ښه توګه سره سمون لري.

د کارت سرلیک
د کارت فرعي سرلیک

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

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

انځورونه

.card-img-topیو انځور د کارت په سر کې ځای په ځای کوي. سره .card-text، متن په کارت کې اضافه کیدی شي. دننه متن .card-textهم د معیاري HTML ټګونو سره سټایل کیدی شي.

د انځور کیپ [100%x180]

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

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

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

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

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

د پخلنځي ډنډ

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

د انځور کیپ [100%x180]
د کارت سرلیک

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum په eros
<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

په کارت کې اختیاري سرلیک او/یا فوټر اضافه کړئ.

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

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

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

د کارت سرلیکونه د عناصرو په اضافه .card-headerکولو سره سټایل کیدی شي .<h*>

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

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

چیرته لاړ شه
<div class="card">
  <h5 class="card-header">Featured</h5>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
اقتباس

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="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
د ځانګړي سرلیک درملنه

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

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

انځورونه

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

د انځور کیپ

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

100%x180
د کارت سرلیک

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

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

د کارت سرلیک

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

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

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

د انځور پوښښ

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

100%x270
د کارت سرلیک

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

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

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

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

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

پس منظر او رنګ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

د معنی اضافه کولو لپاره د رنګ کارول یوازې یو بصری نښې وړاندې کوي، کوم چې به د مرستندویه ټیکنالوژیو کاروونکو ته نه لیږل کیږي - لکه د سکرین لوستونکي. ډاډ ترلاسه کړئ چې د رنګ لخوا څرګند شوي معلومات یا پخپله د مینځپانګې څخه څرګند دي (د بیلګې په توګه څرګند متن) ، یا د بدیل وسیلو له لارې شامل شوي ، لکه د .sr-onlyټولګي سره پټ اضافي متن.

سرحد

یوازې د کارت بدلولو لپاره د پولې اسانتیاوې وکاروئ . border-colorپه یاد ولرئ چې تاسو کولی شئ .text-{color}ټولګي په والدین .cardیا د کارت د مینځپانګو فرعي سیټ کې واچوئ لکه څنګه چې لاندې ښودل شوي.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

د مکسین اسانتیاوې

تاسو کولی شئ د اړتیا سره سم د کارت سرلیک او فوټر کې سرحدونه هم بدل کړئ ، او حتی د دوی background-colorسره لرې کړئ .bg-transparent.

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

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

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

د کارت ترتیب

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

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

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

100%x180
د کارت سرلیک

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

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

100%x180
د کارت سرلیک

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

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

100%x180
د کارت سرلیک

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

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

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

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

100%x180
د کارت سرلیک

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

100%x180
د کارت سرلیک

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

100%x180
د کارت سرلیک

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

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

د کارت ډیک

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

100%x200
د کارت سرلیک

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

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

100%x200
د کارت سرلیک

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

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

100%x200
د کارت سرلیک

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

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

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

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

100%x180
د کارت سرلیک

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

100%x180
د کارت سرلیک

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

100%x180
د کارت سرلیک

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

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

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

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

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

100%x160
د کارت سرلیک چې یوې نوې کرښې ته وتړل شي

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

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

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

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

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

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

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

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

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

100%x260

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

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

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

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

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

د کارت کالمونه هم د ځینې اضافي کوډ سره پراخ او دودیز کیدی شي. لاندې ښودل شوی د ټولګي غزول د .card-columnsورته CSS په کارولو سره چې موږ یې کاروو — CSS کالمونه — د کالمونو شمیر بدلولو لپاره د ځواب ویونکي ټایرونو سیټ رامینځته کولو لپاره.

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