کارتونه
د بوټسټریپ کارتونه د ډیری ډولونو او اختیارونو سره د انعطاف وړ او توزیع وړ مینځپانګې کانټینر چمتو کوي.
په اړه
کارت د انعطاف وړ او د توزیع وړ مینځپانګې کانټینر دی. پدې کې د سرلیکونو او فوټرونو اختیارونه شامل دي، د منځپانګې پراخه ډولونه، د شرایطو شالید رنګونه، او د ځواکمن نندارې اختیارونه. که تاسو د Bootstrap 3 سره آشنا یاست، کارتونه زموږ زاړه تختې، څاګانې، او تمبیلونه بدلوي. دې برخو ته ورته فعالیت د کارتونو لپاره د ترمیم کونکي ټولګیو په توګه شتون لري.
بېلګه
کارتونه د امکان تر حده د لږ مارک اپ او سټایلونو سره جوړ شوي ، مګر بیا هم د یو ټن کنټرول او تنظیم کولو اداره کوي. د فلیکس بکس سره جوړ شوی، دوی د اسانه سمون وړاندیز کوي او د نورو بوټسټریپ اجزاو سره ښه مخلوط کوي. دوی margin
د ډیفالټ له مخې هیڅ نلري، نو د اړتیا په صورت کې د فاصلې اسانتیاوې وکاروئ .
لاندې د مخلوط منځپانګې او یو ثابت پلنوالي سره د لومړني کارت یوه بیلګه ده. کارتونه د پیل کولو لپاره ټاکلی پلنوالی نلري، نو دوی به په طبیعي توګه د خپل اصلي عنصر بشپړ عرض ډک کړي. دا زموږ د مختلف اندازې کولو اختیارونو سره په اسانۍ سره تنظیم شوی .
د کارت سرلیک
د کارت په سرلیک کې د جوړولو لپاره ځینې ګړندي مثال متن او د کارت مینځپانګې لویه برخه جوړوي.
چیرته لاړ شه<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 ټګونو سره سټایل کیدی شي.
د کارت په سرلیک کې د جوړولو لپاره ځینې ګړندي مثال متن او د کارت مینځپانګې لویه برخه جوړوي.
<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>
د پخلنځي ډنډ
د ډیری مینځپانګو ډولونه مخلوط او میچ کړئ ترڅو هغه کارت رامینځته کړئ چې تاسو ورته اړتیا لرئ ، یا هرڅه هلته وغورځوئ. لاندې ښودل شوي د عکس سټایلونه ، بلاکونه ، د متن سټایلونه ، او د لیست ګروپ — ټول په یو ثابت پلن کارت کې پوښل شوي.
د کارت سرلیک
د کارت په سرلیک کې د جوړولو لپاره ځینې ګړندي مثال متن او د کارت مینځپانګې لویه برخه جوړوي.
- یو شی
- دوهم توکي
- دریم توکي
<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>
انځورونه
کارتونو کې د عکسونو سره کار کولو لپاره یو څو اختیارونه شامل دي. د کارت په پای کې د "عکس کیپ" ضمیمه کولو څخه غوره کړئ ، د کارت مینځپانګې سره عکسونه پوښئ ، یا په ساده ډول په کارت کې عکس ځای په ځای کړئ.
د انځور کیپ
د سرلیکونو او فوټرونو په څیر، کارتونه کیدای شي د پورتنۍ او ښکته "عکس کیپ" شامل وي — د کارت په پورتنۍ یا ښکته کې انځورونه.
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
وروستی تازه 3 دقیقې دمخه
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
وروستی تازه 3 دقیقې دمخه
<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>
د انځور پوښښ
یو عکس د کارت شالید ته واړوئ او د خپل کارت متن پوښ کړئ. په عکس پورې اړه لري، تاسو ممکن اضافي سټایلونو یا اسانتیاو ته اړتیا ولرئ یا نه.
<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
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
وروستی تازه 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
.
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
وروستی تازه 3 دقیقې دمخه
د کارت سرلیک
دا کارت د اضافي مینځپانګې لپاره د طبیعي لیډ ان په توګه لاندې متن ملاتړ کوي.
وروستی تازه 3 دقیقې دمخه
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا کارت د لومړي په پرتله حتی اوږد مینځپانګه لري ترڅو د مساوي لوړوالي عمل وښیې.
وروستی تازه 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>
کله چې د فوټرونو سره د کارت ګروپونه وکاروئ ، د دوی مینځپانګه به په اوتومات ډول لیکه شي.
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
د کارت سرلیک
دا کارت د اضافي مینځپانګې لپاره د طبیعي لیډ ان په توګه لاندې متن ملاتړ کوي.
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا کارت د لومړي په پرتله حتی اوږد مینځپانګه لري ترڅو د مساوي لوړوالي عمل وښیې.
<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
د منځني وقفې نقطې څخه، په څو قطارونو کې د مساوي چوکۍ لپاره څلور کارتونه ویشل دي.
د کارت سرلیک
دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
د کارت سرلیک
دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
د کارت سرلیک
دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه.
د کارت سرلیک
دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
<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
او تاسو به د څلورم کارت لپاس وګورئ.
د کارت سرلیک
دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
د کارت سرلیک
دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
د کارت سرلیک
دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه.
د کارت سرلیک
دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
<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%
په ساس کې تنظیم کړئ.
د کارت سرلیک
دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
د کارت سرلیک
دا یو لنډ کارت دی.
د کارت سرلیک
دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه.
د کارت سرلیک
دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
<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>
لکه د کارت ګروپونو په څیر، د کارت فوټرونه به په اوتومات ډول قطار شي.
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
د کارت سرلیک
دا کارت د اضافي مینځپانګې لپاره د طبیعي لیډ ان په توګه لاندې متن ملاتړ کوي.
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا کارت د لومړي په پرتله حتی اوږد مینځپانګه لري ترڅو د مساوي لوړوالي عمل وښیې.
<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;