कार्ड्स्
Bootstrap इत्यस्य कार्ड्स् बहुभिः रूपैः विकल्पैः च सह लचीलं विस्तारणीयं च सामग्रीपात्रं प्रदास्यन्ति ।
विषये
कार्डं लचीलं विस्तारणीयं च सामग्रीपात्रम् अस्ति । अस्मिन् शीर्षकाणां पादलेखानां च विकल्पाः, विविधाः सामग्रीः, सन्दर्भपृष्ठभूमिवर्णाः, शक्तिशालिनः प्रदर्शनविकल्पाः च सन्ति । यदि भवान् Bootstrap 3 इत्यनेन परिचितः अस्ति तर्हि अस्माकं पुरातनपटलस्य, कूपस्य, लघुचित्रस्य च स्थाने कार्ड्स् भवन्ति । तेषां घटकानां सदृशं कार्यक्षमता कार्ड्स् कृते परिवर्तकवर्गरूपेण उपलभ्यते ।
उदाहरण
कार्ड्स् यथासम्भवं अल्पेन मार्कअपेन शैल्याः च सह निर्मिताः भवन्ति, परन्तु तदपि नियन्त्रणस्य अनुकूलनस्य च एकं टनं वितरितुं प्रबन्धयन्ति। flexbox इत्यनेन निर्मिताः, ते सुलभं संरेखणं प्रदास्यन्ति तथा च अन्यैः Bootstrap घटकैः सह सम्यक् मिश्रणं कुर्वन्ति । तेषां 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
भवति । तथैव लिङ्कानि योजयित्वा an मध्ये <h*>
योजयित्वा परस्परं पार्श्वे स्थापितानि भवन्ति.card-link
<a>
टैग्
उपशीर्षकाणां उपयोगः टैग् .card-subtitle
मध्ये a योजयित्वा भवति । <h*>
यदि the .card-title
and the .card-subtitle
items इत्येतत् कस्मिन् अपि द्रव्ये स्थापितं भवति .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>
एकं सुप्रसिद्धं उद्धरणं, एकस्मिन् blockquote तत्वे निहितम्।
<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, ग्रिड् क्लास्, ग्रिड् Sass mixins, अथवा utilities इत्यनेन परिवर्तयितुं शक्नोति ।
ग्रिड मार्कअप का प्रयोग करते हुए
जालस्य उपयोगेन आवश्यकतानुसारं स्तम्भेषु पङ्क्तिषु च कार्ड्स् वेष्टयन्तु ।
<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 इत्यस्य उपयोगेन
विस्तारं सेट् कर्तुं स्वस्य शैलीपत्रिकासु अथवा अन्तःरेखाशैल्याः रूपेण कस्टम् 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>
पाठ संरेखण
भवान् शीघ्रमेव कस्यचित् कार्डस्य पाठसंरेखणं परिवर्तयितुं शक्नोति—तस्य सम्पूर्णतया अथवा विशिष्टभागेषु—अस्माकं text align classes इत्यनेन सह ।
<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>
नेविगेशनम्
Bootstrap इत्यस्य nav घटकैः सह कार्डस्य हेडर (अथवा ब्लॉक्) मध्ये किञ्चित् नेविगेशनं योजयन्तु ।
<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">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">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>
चित्राणि
कार्ड्स् मध्ये चित्रैः सह कार्यं कर्तुं कतिचन विकल्पाः सन्ति । कार्डस्य उभयथान्ते “image caps” योजयितुं, कार्डसामग्रीभिः सह चित्राणि आच्छादयितुं, अथवा केवलं कार्डे चित्रं एम्बेड् कर्तुं चयनं कुर्वन्तु ।
छवि टोपियाँ
शीर्षकस्य पादलेखस्य च सदृशं पत्तकेषु उपरि अधः च “प्रतिबिम्बटोपी”—पत्तेः उपरि अधः वा चित्राणि समाविष्टानि भवितुम् अर्हन्ति ।
कार्ड शीर्षक
अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।
अन्तिम अद्यतन 3 mins पूर्व
कार्ड शीर्षक
अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।
अन्तिम अद्यतन 3 mins पूर्व
<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>
क्षैतिज
ग्रिड् तथा उपयोगितावर्गयोः संयोजनस्य उपयोगेन कार्ड्स् क्षैतिजरूपेण मोबाईल-अनुकूलतया प्रतिक्रियाशीलतया च कर्तुं शक्यते । अधोलिखिते उदाहरणे वयं grid gutters इत्यनेन सह निष्कास्य classes इत्यस्य .g-0
उपयोगेन कार्ड् इत्येतत् breakpoint .col-md-*
इत्यत्र क्षैतिजं कर्तुं शक्नुमः । md
भवतः कार्डस्य सामग्रीयाः आधारेण अधिकसमायोजनस्य आवश्यकता भवितुम् अर्हति ।
कार्ड शीर्षक
अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।
अन्तिम अद्यतन 3 mins पूर्व
<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>
Mixins उपयोगिताएँ
भवन्तः आवश्यकतानुसारं कार्ड् हेडर् तथा पादलेखे सीमाः अपि परिवर्तयितुं शक्नुवन्ति, अपि च तेषां background-color
with इत्यनेन अपसारयितुं शक्नुवन्ति .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>
कार्ड लेआउट
कार्ड्स् अन्तः सामग्रीं स्टाइल् करणस्य अतिरिक्तं, Bootstrap इत्यत्र कार्ड्स् श्रृङ्खलां विन्यस्तं कर्तुं कतिचन विकल्पाः समाविष्टाः सन्ति । तावत्पर्यन्तं एते विन्यासविकल्पाः अद्यापि प्रतिक्रियाशीलाः न सन्ति .
कार्ड समूहाः
समानविस्तार-उच्चता-स्तम्भैः सह एकस्य, संलग्न-तत्त्वस्य रूपेण कार्ड्-समूहानां उपयोगं कुर्वन्तु । कार्ड समूहाः स्तम्भितरूपेण आरभन्ते तथा च विच्छेदबिन्दुतः display: flex;
आरभ्य एकरूपपरिमाणैः सह संलग्नाः भवितुम् उपयुज्यन्ते।sm
कार्ड शीर्षक
अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।
अन्तिम अद्यतन 3 mins पूर्व
कार्ड शीर्षक
अस्मिन् कार्डे अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठः अस्ति ।
अन्तिम अद्यतन 3 mins पूर्व
कार्ड शीर्षक
अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठेन सह एतत् विस्तृततरं कार्डम् अस्ति । अस्मिन् कार्डे प्रथमापेक्षया अपि दीर्घा सामग्री अस्ति यत् तत् समानोन्नतिक्रिया दर्शयति।
अन्तिम अद्यतन 3 mins पूर्व
<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>
ग्रिड कार्ड
प्रतिपङ्क्तौ भवन्तः कियन्तः ग्रिड् स्तम्भाः (भवतः कार्ड्स् परितः वेष्टिताः) दर्शयन्ति इति नियन्त्रयितुं Bootstrap जालप्रणाल्याः तस्य .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%
Sass इत्यत्र सेट् कर्तुं शक्नोति ।
कार्ड शीर्षक
अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठयुक्तं दीर्घतरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।
कार्ड शीर्षक
एतत् लघुपत्तेः अस्ति।
कार्ड शीर्षक
अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठयुक्तं दीर्घतरं कार्डम् अस्ति ।
कार्ड शीर्षक
अतिरिक्तसामग्रीणां स्वाभाविकलीड-इनरूपेण अधः समर्थनपाठयुक्तं दीर्घतरं कार्डम् अस्ति । इयं सामग्री किञ्चित् दीर्घतरम् अस्ति।
<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>
चिनाई
In वयं Masonryv4
-सदृशस्तम्भानां व्यवहारस्य अनुकरणार्थं केवलं CSS-प्रविधिनाम् उपयोगं कृतवन्तः , परन्तु एषा तकनीकः बहुभिः अप्रियदुष्प्रभावैः सह आगता . यदि भवान् इच्छति यत् एतादृशं विन्यासं , तर्हि भवान् केवलं Masonry plugin इत्यस्य उपयोगं कर्तुं शक्नोति । Bootstrap इत्यस्मिन् Masonry न समाविष्टम् , परन्तु वयं भवन्तं आरम्भं कर्तुं साहाय्यं कर्तुं एकं डेमो उदाहरणं कृतवन्तः।v5
सस्स
चर
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-color: rgba($black, .125);
$card-border-radius: $border-radius;
$card-box-shadow: null;
$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;