बूटस्ट्रैप कें कार्ड अनेक वेरिएंट आ विकल्पक कें साथ एकटा लचीला आ विस्तार योग्य सामग्री कंटेनर प्रदान करयत छै.
विषय में
कार्ड एकटा लचीला आ विस्तार योग्य सामग्री कंटेनर छै. एकरा म॑ हेडर आरू पाद लेख के विकल्प, सामग्री के विस्तृत विविधता, संदर्भ पृष्ठभूमि रंग, आरू शक्तिशाली प्रदर्शन विकल्प शामिल छै. यदि अहां बूटस्ट्रैप 3 सं परिचित छी, त कार्ड हमर पुरान पैनल, कुआं, आ थंबनेल कें जगह लैत छै. कार्डक कें लेल संशोधक वर्गक कें रूप मे ओय घटकक कें समान कार्यक्षमता उपलब्ध छै.
उदाहरण
कार्डक कें निर्माण यथासंभव कम मार्कअप आ शैलीक कें साथ कैल जायत छै, मुदा तइयो नियंत्रण आ अनुकूलन कें एक टन पहुंचाबय मे सफल होयत छै. फ्लेक्सबॉक्स के साथ बनलऽ ई आसान संरेखण प्रदान करै छै आरू अन्य बूटस्ट्रैप घटकऽ के साथ अच्छा तरह स॑ मिलै छै । हुनका सभ लग marginडिफ़ॉल्ट रूप सँ कोनो नहि अछि, तेँ आवश्यकतानुसार स्पेसिंग उपयोगिताक उपयोग करू.
नीचाँ एकटा बेसिक कार्ड कें उदाहरण देल गेल छै जइ मे मिश्रित सामग्री आ एकटा निश्चित चौड़ाई छै. कार्ड कें शुरू करय कें लेल कोनों निश्चित चौड़ाई नहि होयत छै, अइ कें लेल ओ स्वाभाविक रूप सं ओकर मूल तत्व कें पूरा चौड़ाई भरतय. एकरा हमर विभिन्न साइजिंग विकल्प के साथ आसानी स अनुकूलित कैल जा सकैत अछि .
कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
कार्ड विस्तृत विविधता कें सामग्री कें समर्थन करएयत छै, जइ मे छवि, पाठ, सूची समूह, लिंक आ बेसि शामिल छै. नीचाँ उदाहरण देल गेल अछि जे की समर्थित अछि।
देह
कार्ड के बिल्डिंग ब्लॉक के .card-body. जखन कखनो कार्ड कें भीतर गद्देदार खंड कें जरूरत होयत छै तखन एकर उपयोग करूं.
ई एकटा कार्ड बॉडी के भीतर किछु पाठ अछि.
शीर्षक, पाठ, आ लिंक
कार्ड टाइटल कें उपयोग .card-titleकोनों <h*>टैग मे जोड़ क कैल जायत छै. .card-linkतहिना कोनो <a>टैग मे जोड़ि क' लिंक जोड़ल जाइत अछि आ एक दोसराक बगल मे राखल जाइत अछि ।
.card-subtitleउपशीर्षक के प्रयोग कोनो <h*>टैग में a जोड़ि क' कएल जाइत अछि . यदि .card-titleआ .card-subtitleवस्तु कोनों वस्तु मे राखल गेल छै .card-body, त कार्ड कें शीर्षक आ उपशीर्षक नीक सं संरेखित भ जायत छै.
कार्ड शीर्षक
कार्ड उपशीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
.card-img-topकार्ड कें ऊपर एकटा छवि राखय छै. के साथ .card-text, कार्ड मे पाठ जोड़ल जा सकैत अछि। भीतर के पाठ .card-textक॑ मानक एचटीएमएल टैग स॑ भी स्टाइल करलऽ जाब॑ सकै छै ।
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
समूहक सूची बनाउ
फ्लश सूची समूह कें साथ कार्ड मे सामग्री कें सूची बनावा.
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
इरोस पर वेस्टिबुलम
फीचर्ड
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
इरोस पर वेस्टिबुलम
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
इरोस पर वेस्टिबुलम
किचन सिंक
अहां कें जरूरत कें कार्ड बनावा कें लेल अनेक सामग्री प्रकार कें मिश्रण आ मिलान करूं, या सब किछु ओतय फेंकूं. नीचाँ देखाओल गेल अछि छवि शैली, ब्लॉक, पाठ शैली, आओर एकटा सूची समूह-सब एकटा निश्चित-चौड़ाई कार्ड मे लपेटल गेल अछि.
कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
कार्ड मे छवि कें साथ काज करय कें लेल किच्छू विकल्प शामिल छै. कार्ड कें कोनों छोर पर “इमेज कैप्स” संलग्न करनाय, कार्ड सामग्री कें साथ छवियक कें ओवरले करनाय, या बस कार्ड मे छवि कें एम्बेड करनाय सं चुनू.
छवि टोपी
हेडर आ पाद लेख कें समान, कार्ड मे ऊपर आ निचला “इमेज कैप” शामिल भ सकय छै-कार्ड कें ऊपर या निचला भाग मे छवि.
कार्ड शीर्षक
ई एकटा व्यापक कार्ड छै जेकरऽ समर्थन पाठ नीचें अतिरिक्त सामग्री केरऽ स्वाभाविक लीड-इन के रूप म॑ छै । ई सामग्री कनि बेसी नमहर अछि।
अंतिम अद्यतन 3 mins पूर्व
कार्ड शीर्षक
ई एकटा व्यापक कार्ड छै जेकरऽ समर्थन पाठ नीचें अतिरिक्त सामग्री केरऽ स्वाभाविक लीड-इन के रूप म॑ छै । ई सामग्री कनि बेसी नमहर अछि।
अंतिम अद्यतन 3 mins पूर्व
छवि ओवरले
कोनों छवि कें कार्ड बैकग्राउंड मे बदलूं आ अपन कार्ड कें पाठ कें ओवरले करूं. छवि के आधार पर, अहां के अतिरिक्त शैली या उपयोगिता के जरूरत भ सकैत अछि या नहि भ सकैत अछि.
कार्ड शीर्षक
ई एकटा व्यापक कार्ड छै जेकरऽ समर्थन पाठ नीचें अतिरिक्त सामग्री केरऽ स्वाभाविक लीड-इन के रूप म॑ छै । ई सामग्री कनि बेसी नमहर अछि।
अंतिम अद्यतन 3 mins पूर्व
ध्यान राखू जे सामग्री छविक ऊँचाईसँ पैघ नहि हेबाक चाही। यदि सामग्री छवि सं पैघ छै त सामग्री छवि कें बाहर प्रदर्शित कैल जेतय.
क्षैतिज
ग्रिड आ उपयोगिता वर्गक कें संयोजन कें उपयोग करयत कार्डक कें मोबाइल-अनुकूल आ प्रतिक्रियाशील तरीका सं क्षैतिज बनायल जा सकय छै. नीचा देल गेल उदाहरण मे, हम ग्रिड गटर कें साथ निकालय छै आ ब्रेकपॉइंट पर कार्ड कें क्षैतिज बनावा कें लेल क्लास कें .no-guttersउपयोग करय छै. अहां कें कार्ड कें सामग्री कें आधार पर आ बेसि समायोजन कें आवश्यकता भ सकय छै..col-md-*md
कार्ड शीर्षक
ई एकटा व्यापक कार्ड छै जेकरऽ समर्थन पाठ नीचें अतिरिक्त सामग्री केरऽ स्वाभाविक लीड-इन के रूप म॑ छै । ई सामग्री कनि बेसी नमहर अछि।
अंतिम अद्यतन 3 mins पूर्व
कार्ड शैलियाँ
कार्ड मे ओकर पृष्ठभूमि, सीमा, आ रंग कें अनुकूलित करय कें लेल विभिन्न विकल्प शामिल छै.
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
माध्यमिक कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
सफलता कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
खतरा कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
चेतावनी कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
इन्फो कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
लाइट कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
डार्क कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
सहायक प्रौद्योगिकी के अर्थ संप्रेषित करब
अर्थ जोड़य कें लेल रंग कें उपयोग करनाय केवल एकटा दृश्य संकेत प्रदान करय छै, जे सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें – जेना स्क्रीन रीडर – कें संप्रेषित नहि कैल जेतय. सुनिश्चित करूं कि रंग सं संकेत कैल गेल जानकारी या त सामग्री सं ही स्पष्ट छै (जैना दृश्यमान पाठ), या वैकल्पिक साधन कें माध्यम सं शामिल कैल गेल छै, जेना कि .sr-onlyवर्ग कें साथ छिपल अतिरिक्त पाठ.
बॉर्डर
एकटा कार्ड कें बस बदलय कें लेल सीमा उपयोगिताक कें उपयोग करूं . border-colorध्यान रहे कि अहां पैरेंट या कार्ड कें सामग्री कें एकटा उपसमूह .text-{color}पर क्लास लगा सकय छी जेना कि नीचा देखायल गेल छै..card
हेडर
प्राथमिक कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
माध्यमिक कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
सफलता कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
खतरा कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
चेतावनी कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
इन्फो कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
लाइट कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
हेडर
डार्क कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
मिक्सिन उपयोगिताएँ
अहां जरूरत के हिसाब सं कार्ड हेडर आओर पाद लेख पर सीमा सेहो बदलि सकय छी, आओर एतय तक कि ओकर background-colorसंग हटा सकय छी .bg-transparent.
हेडर
सफलता कार्ड शीर्षक
कार्ड कें शीर्षक पर निर्माण करय कें लेल आ कार्ड कें सामग्री कें थोक कें निर्माण करय कें लेल किच्छू त्वरित उदाहरण पाठ.
कार्ड समूहक कें उपयोग कार्डक कें एकल, संलग्न तत्व कें रूप मे समान चौड़ाई आ ऊंचाई स्तंभक कें साथ रेंडर करय कें लेल करूं. कार्ड समूह ढेर सं शुरू भ जायत छै आ ब्रेकपॉइंट display: flex;सं शुरू भ क एक समान आयाम कें साथ संलग्न बनय कें लेल उपयोग करयत छै.sm
कार्ड शीर्षक
ई एकटा व्यापक कार्ड छै जेकरऽ समर्थन पाठ नीचें अतिरिक्त सामग्री केरऽ स्वाभाविक लीड-इन के रूप म॑ छै । ई सामग्री कनि बेसी नमहर अछि।
अंतिम अद्यतन 3 mins पूर्व
कार्ड शीर्षक
अइ कार्ड मे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे नीचा समर्थन पाठ छै.
अंतिम अद्यतन 3 mins पूर्व
कार्ड शीर्षक
ई एकटा व्यापक कार्ड छै जेकरऽ समर्थन पाठ नीचें अतिरिक्त सामग्री केरऽ स्वाभाविक लीड-इन के रूप म॑ छै । एहि कार्ड मे पहिल कार्ड सं आओर बेसी लंबा सामग्री अछि जे ओहि बराबर ऊँचाई वाला क्रिया के देखाबैत अछि.
अंतिम अद्यतन 3 mins पूर्व
पाद लेख वाला कार्ड समूहक कें उपयोग करय कें समय ओकर सामग्री स्वचालित रूप सं लाइन मे आबि जायत.
कार्ड शीर्षक
ई एकटा व्यापक कार्ड छै जेकरऽ समर्थन पाठ नीचें अतिरिक्त सामग्री केरऽ स्वाभाविक लीड-इन के रूप म॑ छै । ई सामग्री कनि बेसी नमहर अछि।
कार्ड शीर्षक
अइ कार्ड मे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे नीचा समर्थन पाठ छै.
कार्ड शीर्षक
ई एकटा व्यापक कार्ड छै जेकरऽ समर्थन पाठ नीचें अतिरिक्त सामग्री केरऽ स्वाभाविक लीड-इन के रूप म॑ छै । एहि कार्ड मे पहिल कार्ड सं आओर बेसी लंबा सामग्री अछि जे ओहि बराबर ऊँचाई वाला क्रिया के देखाबैत अछि.
कार्ड डेक
समान चौड़ाई आ ऊंचाई कें कार्ड कें सेट कें जरूरत छै जे एक दोसर सं नहि जुड़ल होय? कार्ड डेक के प्रयोग करू।
कार्ड शीर्षक
इ एकटा लंबा कार्ड छै जइ मे निम्नलिखित सहायक पाठ छै जे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे छै. ई सामग्री कनि बेसी नमहर अछि।
अंतिम अद्यतन 3 mins पूर्व
कार्ड शीर्षक
अइ कार्ड मे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे नीचा समर्थन पाठ छै.
अंतिम अद्यतन 3 mins पूर्व
कार्ड शीर्षक
ई एकटा व्यापक कार्ड छै जेकरऽ समर्थन पाठ नीचें अतिरिक्त सामग्री केरऽ स्वाभाविक लीड-इन के रूप म॑ छै । एहि कार्ड मे पहिल कार्ड सं आओर बेसी लंबा सामग्री अछि जे ओहि बराबर ऊँचाई वाला क्रिया के देखाबैत अछि.
अंतिम अद्यतन 3 mins पूर्व
ठीक ओहिना जेना कार्ड ग्रुप के संग, डेक मे कार्ड फुटर स्वतः लाइन मे आबि जायत.
कार्ड शीर्षक
ई एकटा व्यापक कार्ड छै जेकरऽ समर्थन पाठ नीचें अतिरिक्त सामग्री केरऽ स्वाभाविक लीड-इन के रूप म॑ छै । ई सामग्री कनि बेसी नमहर अछि।
कार्ड शीर्षक
अइ कार्ड मे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे नीचा समर्थन पाठ छै.
कार्ड शीर्षक
ई एकटा व्यापक कार्ड छै जेकरऽ समर्थन पाठ नीचें अतिरिक्त सामग्री केरऽ स्वाभाविक लीड-इन के रूप म॑ छै । एहि कार्ड मे पहिल कार्ड सं आओर बेसी लंबा सामग्री अछि जे ओहि बराबर ऊँचाई वाला क्रिया के देखाबैत अछि.
ग्रिड कार्ड
बूटस्ट्रैप ग्रिड सिस्टम आ ओकर .row-colsक्लास कें उपयोग करूं इ नियंत्रित करय कें लेल की अहां प्रति पंक्ति कतेक ग्रिड कॉलम (अपन कार्डक कें चारू कात लपेटल) देखायत छी. उदाहरण कें लेल, एतय .row-cols-1एकटा कॉलम पर कार्डक .row-cols-md-2कें बिछानाय छै, आ चारि कार्डक कें एक सं बेसि पंक्तियक मे बराबर चौड़ाई कें लेल विभाजित करनाय, मध्यम ब्रेकपॉइंट सं ऊपर.
कार्ड शीर्षक
इ एकटा लंबा कार्ड छै जइ मे निम्नलिखित सहायक पाठ छै जे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे छै. ई सामग्री कनि बेसी नमहर अछि।
कार्ड शीर्षक
इ एकटा लंबा कार्ड छै जइ मे निम्नलिखित सहायक पाठ छै जे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे छै. ई सामग्री कनि बेसी नमहर अछि।
कार्ड शीर्षक
इ एकटा लंबा कार्ड छै जइ मे निम्नलिखित सहायक पाठ छै जे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे छै.
कार्ड शीर्षक
इ एकटा लंबा कार्ड छै जइ मे निम्नलिखित सहायक पाठ छै जे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे छै. ई सामग्री कनि बेसी नमहर अछि।
इ एकटा लंबा कार्ड छै जइ मे निम्नलिखित सहायक पाठ छै जे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे छै. ई सामग्री कनि बेसी नमहर अछि।
कार्ड शीर्षक
ई एकटा छोट कार्ड अछि।
कार्ड शीर्षक
इ एकटा लंबा कार्ड छै जइ मे निम्नलिखित सहायक पाठ छै जे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे छै.
कार्ड शीर्षक
इ एकटा लंबा कार्ड छै जइ मे निम्नलिखित सहायक पाठ छै जे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे छै. ई सामग्री कनि बेसी नमहर अछि।
कार्ड कॉलम
कार्ड कें केवल सीएसएस कें साथ मेसनरी.card-columns जैना कॉलम मे व्यवस्थित कैल जा सकय छै ओकरा मे लपेट क . कार्ड कें निर्माण columnफ्लेक्सबॉक्स कें बजाय सीएसएस गुणक सं कैल जायत छै, जे आसान संरेखण कें लेल होयत छै. कार्ड ऊपर सं नीचा आ बामा सं दाहिना मंगाओल जाइत अछि.
हेड अप! कार्ड कॉलम कें साथ अहां कें माइलेज अलग-अलग भ सकय छै. कॉलम के पार कार्ड के टूटय सं रोकय लेल हमरा सभ के ओकरा display: inline-blockओहिना सेट करय पड़त column-break-inside: avoidजे एखन धरि बुलेटप्रूफ समाधान नहिं अछि.
कार्ड टाइटल जे एकटा नव लाइन पर लपेटैत अछि
इ एकटा लंबा कार्ड छै जइ मे निम्नलिखित सहायक पाठ छै जे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे छै. ई सामग्री कनि बेसी नमहर अछि।
लोरेम इप्सम डोलोर बैठे अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक posuere erat एक ante।
कार्ड शीर्षक
अइ कार्ड मे अतिरिक्त सामग्री कें लेल प्राकृतिक लीड-इन कें रूप मे नीचा समर्थन पाठ छै.
अंतिम अद्यतन 3 mins पूर्व
लोरेम इप्सम डोलोर बैठे अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक posuere एराट।
कार्ड शीर्षक
अइ कार्ड कें नियमित शीर्षक आ ओकर नीचा पाठ कें छोट पैराग्राफ छै.
अंतिम अद्यतन 3 mins पूर्व
लोरेम इप्सम डोलोर बैठे अमेत, consectetur adipiscing अभिजात वर्ग | पूर्णांक posuere erat एक ante।
कार्ड शीर्षक
ई एकटा आओर कार्ड अछि जकर शीर्षक आ समर्थन पाठ नीचाँ अछि । एहि कार्ड मे किछु अतिरिक्त सामग्री अछि जाहि सं ई कुल मिला कए कनि लंबा भ जाएत.
अंतिम अद्यतन 3 mins पूर्व
कार्ड कॉलम कें किच्छू अतिरिक्त कोड कें साथ विस्तारित आ अनुकूलित सेहो कैल जा सकय छै. .card-columnsनीचे ददखाया गया है वही CSS कक उपयोग करकय वही CSS कक उपयोग करकय कक्षा कक एक विस्तार ददखाया गया है—CSS कॉलम— कॉलम कक संख्या बदलने के सलए उत्तरदायी टीयर कक एक सेट उत्पन्न करनके के सलए |