کارتونه
د بوټسټریپ کارتونه د ډیری ډولونو او اختیارونو سره د انعطاف وړ او توزیع وړ مینځپانګې کانټینر چمتو کوي.
کارت د انعطاف وړ او د توزیع وړ مینځپانګې کانټینر دی. پدې کې د سرلیکونو او فوټرونو اختیارونه شامل دي، د منځپانګې پراخه ډولونه، د شرایطو شالید رنګونه، او د ځواکمن نندارې اختیارونه. که تاسو د Bootstrap 3 سره آشنا یاست، کارتونه زموږ زاړه تختې، څاګانې، او تمبیلونه بدلوي. دې برخو ته ورته فعالیت د کارتونو لپاره د ترمیم کونکي ټولګیو په توګه شتون لري.
کارتونه د امکان تر حده د لږ مارک اپ او سټایلونو سره جوړ شوي ، مګر بیا هم د یو ټن کنټرول او تنظیم کولو اداره کوي. د فلیکس بکس سره جوړ شوی، دوی د اسانه سمون وړاندیز کوي او د نورو بوټسټریپ اجزاو سره ښه مخلوط کوي. دوی margin
د ډیفالټ له مخې هیڅ نلري، نو د اړتیا په صورت کې د فاصلې اسانتیاوې وکاروئ .
لاندې د مخلوط منځپانګې او یو ثابت پلنوالي سره د لومړني کارت یوه بیلګه ده. کارتونه د پیل کولو لپاره ټاکلی پلنوالی نلري، نو دوی به په طبیعي توګه د خپل اصلي عنصر بشپړ عرض ډک کړي. دا زموږ د مختلف اندازې کولو اختیارونو سره په اسانۍ سره تنظیم شوی .
د کارت سرلیک
د کارت په سرلیک کې د جوړولو لپاره ځینې ګړندي مثال متن او د کارت مینځپانګې لویه برخه جوړوي.
چیرته لاړ شه<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 ټګونو سره سټایل کیدی شي.
د کارت په سرلیک کې د جوړولو لپاره ځینې ګړندي مثال متن او د کارت مینځپانګې لویه برخه جوړوي.
<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>
د ډیری مینځپانګو ډولونه مخلوط او میچ کړئ ترڅو هغه کارت رامینځته کړئ چې تاسو ورته اړتیا لرئ ، یا هرڅه هلته وغورځوئ. لاندې ښودل شوي د عکس سټایلونه ، بلاکونه ، د متن سټایلونه ، او د لیست ګروپ — ټول په یو ثابت پلن کارت کې پوښل شوي.
د کارت سرلیک
د کارت په سرلیک کې د جوړولو لپاره ځینې ګړندي مثال متن او د کارت مینځپانګې لویه برخه جوړوي.
- 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>
کارتونو کې د عکسونو سره کار کولو لپاره یو څو اختیارونه شامل دي. د کارت په پای کې د "عکس کیپ" ضمیمه کولو څخه غوره کړئ ، د کارت مینځپانګې سره عکسونه پوښئ ، یا په ساده ډول په کارت کې عکس ځای په ځای کړئ.
د سرلیکونو او فوټرونو په څیر، کارتونه کیدای شي د پورتنۍ او ښکته "عکس کیپ" شامل وي — د کارت په پورتنۍ یا ښکته کې انځورونه.
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
وروستی تازه 3 دقیقې دمخه
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
وروستی تازه 3 دقیقې دمخه
<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>
یو عکس د کارت شالید ته واړوئ او د خپل کارت متن پوښ کړئ. په عکس پورې اړه لري، تاسو ممکن اضافي سټایلونو یا اسانتیاو ته اړتیا ولرئ یا نه.
<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;
دوی یونیفورم اندازه کولو لپاره کاروي.
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
وروستی تازه 3 دقیقې دمخه
د کارت سرلیک
دا کارت د اضافي مینځپانګې لپاره د طبیعي لیډ ان په توګه لاندې ملاتړي متن لري.
وروستی تازه 3 دقیقې دمخه
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا کارت د لومړي په پرتله حتی اوږد مینځپانګه لري ترڅو د مساوي لوړوالي عمل وښیې.
وروستی تازه 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>
کله چې د فوټرونو سره د کارت ګروپونه وکاروئ ، د دوی مینځپانګه به په اوتومات ډول لیکه شي.
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
د کارت سرلیک
دا کارت د اضافي مینځپانګې لپاره د طبیعي لیډ ان په توګه لاندې ملاتړي متن لري.
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا کارت د لومړي په پرتله حتی اوږد مینځپانګه لري ترڅو د مساوي لوړوالي عمل وښیې.
<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>
د مساوي عرض او لوړوالي کارتونو سیټ ته اړتیا لرئ چې یو بل سره وصل نه وي؟ د کارت ډیکونه وکاروئ.
د کارت سرلیک
دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
وروستی تازه 3 دقیقې دمخه
د کارت سرلیک
دا کارت د اضافي مینځپانګې لپاره د طبیعي لیډ ان په توګه لاندې ملاتړي متن لري.
وروستی تازه 3 دقیقې دمخه
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا کارت د لومړي په پرتله حتی اوږد مینځپانګه لري ترڅو د مساوي لوړوالي عمل وښیې.
وروستی تازه 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>
لکه د کارت ګروپونو په څیر، په ډیکونو کې د کارت فوټرونه به په اوتومات ډول قطار شي.
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
د کارت سرلیک
دا کارت د اضافي مینځپانګې لپاره د طبیعي لیډ ان په توګه لاندې ملاتړي متن لري.
د کارت سرلیک
دا یو پراخه کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا کارت د لومړي په پرتله حتی اوږد مینځپانګه لري ترڅو د مساوي لوړوالي عمل وښیې.
<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
اوسه د بلټ پروف حل نه دی.
د کارت سرلیک چې یوې نوې کرښې ته وتړل شي
دا یو اوږد کارت دی چې د ملاتړ متن سره لاندې اضافي مینځپانګې ته د طبیعي لیډ ان په توګه. دا مواد لږ څه اوږد دي.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
د کارت سرلیک
دا کارت د اضافي مینځپانګې لپاره د طبیعي لیډ ان په توګه لاندې ملاتړي متن لري.
وروستی تازه 3 دقیقې دمخه
Lorem ipsum dolor sit amet, consectetur adipiscing elit. د انټیجر posuere erat.
د کارت سرلیک
دا کارت د اضافي مینځپانګې لپاره د طبیعي لیډ ان په توګه لاندې ملاتړي متن لري.
وروستی تازه 3 دقیقې دمخه
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 کالمونه — د کالمونو شمیر بدلولو لپاره د ځواب ویونکي ټایرونو سیټ رامینځته کولو لپاره.