बूटस्ट्रैप कार्ड कंपोनेंट

बूटस्ट्रैप कार्ड्स

बूटस्ट्रैप कार्ड इसके सबसे लोकप्रिय कंपोनेंट्स में से एक है, और अच्छे कारण से। वे एक बहुत ही फ्लेक्सिबल मीडिया कंटेनर के रूप में काम करते हैं, और इनमें कुछ अच्छे प्रीसेट स्टाइलिंग और फॉर्मेटिंग होते हैं।

कार्ड कंटेंट टेक्स्ट, इमेजेज, लिंक्स, बटन्स, लिस्ट्स कुछ भी हो सकता है, और इसमें हेडर और फूटर भी हो सकते हैं।

बूटस्ट्रैप कार्ड बेसिक्स

बूटस्ट्रैप कार्ड्स फ्लेक्सबॉक्स के साथ बने होते हैं, और डिफ़ॉल्ट रूप से अपने कंटेनिंग एलिमेंट की चौड़ाई तक फैलते हैं। यदि हम एक अलग चौड़ाई निर्दिष्ट करना चाहते हैं, तो हम या तो कार्ड एलिमेंट पर बूटस्ट्रैप की विड्थ यूटिलिटी क्लास का उपयोग कर सकते हैं, या कार्ड को एक कंटेनिंग एलिमेंट में रैप कर सकते हैं, और इसे बूटस्ट्रैप की कॉलम क्लासेज के साथ आकार दे सकते हैं।

आइए कुछ उदाहरण देखते हैं:

<div class="container-fluid bg-light"> <div class="card p-4 m-4">card 1</div> <div class="card p-4 m-4">card 2</div> <div class="card p-4 m-4">card 3</div> <div class="card-group m-4"> <div class="card p-4">card 4</div> <div class="card p-4">card 5</div> <div class="card p-4">card 6</div> </div> <div class="card-deck m-4"> <div class="card p-4 m-4">card 7</div> <div class="card p-4 m-4">card 8</div> <div class="card p-4 m-4">card 9</div> </div> </div>

बूटस्ट्रैप का नियम है कि <body> के अंदर की हर चीज़ को एक CONTAINER एलिमेंट में रैप करें, जो इसके अंदर की हर चीज़ को रिस्पॉन्सिव बनाता है।

इसका मतलब है कि यह वर्तमान स्क्रीन साइज के अनुसार आकार और लेआउट को शिफ्ट करेगा।

हमारे उदाहरण में, हमने CONTAINER-FLUID का उपयोग किया, जो एलिमेंट को फुल-विड्थ बनाता है, जबकि केवल CONTAINER, हॉरिजॉन्टल मार्जिन जोड़ता है और इसे पेज पर सेंटर करता है।

इसके बाद, हमारे पास कार्ड्स का पहला सेट है। इनका कंटेनर के अलावा कोई पैरेंट एलिमेंट नहीं है इसलिए इनका डिफ़ॉल्ट कार्ड व्यवहार है और ये टॉप से बॉटम की ओर व्यवस्थित हैं जैसा कि स्क्रीनशॉट में दिखाया गया है:

कोड स्निपेट में दिख रहे p-4 और m-4 क्रमशः सभी तरफ 1.5 rem का पैडिंग और सभी तरफ 1.5 rem का मार्जिन दर्शाते हैं।

बूटस्ट्रैप साइजिंग यूटिलिटी मान:

0 = 0 rem;
1 = 0.25 rem;
2 = 0.5 rem;
3 = 1 rem;
4 = 1.5 rem;
5 = 3 rem;

फिर हमारे पास कार्ड्स 4, 5, और 6 हैं, जो CARD-GROUP क्लास वाले <div> में रैप्ड हैं। वे बिल्कुल BTN-GROUP क्लास की तरह व्यवहार करते हैं। वे एक हॉरिजॉन्टल फ्लेक्सबॉक्स लेआउट में एक साथ जुड़े होते हैं, और पूरे ग्रुप पर एक राउंडेड बॉर्डर जोड़ा जाता है।

अंत में, कार्ड्स 7, 8, और 9 CARD-DECK क्लास वाले <div> में रैप्ड हैं, जो उन्हें एक हॉरिजॉन्टल फ्लेक्सबॉक्स में जोड़ता है, लेकिन उन्हें विजुअली अलग एलिमेंट्स के रूप में छोड़ देता है।

मैन्युअली कार्ड्स का आकार बदलना

मैन्युअली आकार के कार्ड्स करने से पहले, आइए बूटस्ट्रैप के लेआउट और ब्रेकपॉइंट सिस्टम के बारे में थोड़ा जानें।

बूटस्ट्रैप कॉलम्स

बूटस्ट्रैप आसान लेआउट डेवलपमेंट के लिए पेज को 12 कॉलम्स में विभाजित करता है।

यहां इसे विजुअलाइज़ करने के लिए एक त्वरित डेमो है:

<div class="row"> <div class="col border p-5">column 1</div> <div class="col border p-5">column 2</div> <div class="col border p-5">column 3</div> <div class="col border p-5">column 4</div> <div class="col border p-5">column 5</div> <div class="col border p-5">column 6</div> <div class="col border p-5">column 7</div> <div class="col border p-5">column 8</div> <div class="col border p-5">column 9</div> <div class="col border p-5">column 10</div> <div class="col border p-5">column 11</div> <div class="col border p-5">column 12</div> </div>

सबसे पहले हमारे पास कॉलम्स के लिए एक रैपर है जिसे ROW कहा जाता है, जो उनके लिए सिर्फ एक फ्लेक्सबॉक्स कंटेनर है। हम किसी एलिमेंट के आकार की घोषणा COL-SCREEN SIZE BREAKPOINT-NUMBER OF COLUMNS TO OCCUPY लिखकर करते हैं।

ऊपर के उदाहरण में, हमने ब्रेकपॉइंट प्रदान नहीं किया क्योंकि हम चाहते हैं कि यह आकार स्क्रीन के आकार से कोई फर्क नहीं पड़ता, और कॉलम्स की संख्या नहीं क्योंकि इसे छोड़ने पर यह डिफ़ॉल्ट रूप से COL-1 हो जाता है जिससे हमें अपने नेचुरल 12 कॉलम्स मिलते हैं। यह ऐसा दिखता है:

बूटस्ट्रैप ब्रेकपॉइंट्स:

बूटस्ट्रैप एक मोबाइल-फर्स्ट फ्रेमवर्क है, जिसका अर्थ है कि बूटस्ट्रैप के साथ डेवलप करते समय आप मोबाइल लेआउट को प्राथमिकता देते हैं और ऊपर की ओर काम करते हैं। इसकी सभी क्लासेज प्रदान किए गए ब्रेकपॉइंट से और ऊपर की ओर एलिमेंट को प्रभावित करती हैं।

एक्स्ट्रा स्मॉल डिफ़ॉल्ट है इसलिए ब्रेकपॉइंट को पूरी तरह से छोड़ना, जैसे P-4 के लिए उदाहरण, P-XS-4 लिखने के समान है जो इसे XS स्क्रीन साइज और सभी बड़े साइज पर लागू करेगा।

दूसरे शब्दों में, यदि आप एक ऐसा नियम चाहते हैं जो सभी स्क्रीन पर प्रभावी हो तो बस ब्रेकपॉइंट को छोड़ दें।

यदि हम उदाहरण से पैडिंग को मीडियम स्क्रीन साइज और उससे ऊपर से 0.5 rem तक कम करना चाहते हैं, तो हम उसी एलिमेंट पर P-MD-2 क्लास जोड़ेंगे।

ब्रेकपॉइंट पिक्सेल मान:

xs – 576 पिक्सेल से नीचे स्क्रीन साइज। यह डिफ़ॉल्ट है।
sm – 576 पिक्सेल और उससे ऊपर स्क्रीन साइज।
md – 768 पिक्सेल और उससे ऊपर स्क्रीन साइज।
lg – 992 पिक्सेल और उससे ऊपर स्क्रीन साइज।
xl – 1200 पिक्सेल और उससे ऊपर स्क्रीन साइज।

अब आइए इसका उपयोग करके अपने लेआउट को स्क्रीन साइज के आधार पर बदलते हैं:

<div class="row"> <div class="col-5 col-md-7"> <div class="card p-4">left column card</div> <div class="card p-4">left column card</div> <div class="card p-4">left column card</div> <div class="card p-4">left column card</div> </div> <div class="col-7 col-md-5"> <div class="card p-4">right column card</div> <div class="card p-4">right column card</div> <div class="card p-4">right column card</div> <div class="card p-4">right column card</div> </div> </div>

फिर से, हमारे पास ROW रैपर है, और फिर एक <div> जिसे COL-5 COL-MD-7 पर सेट किया गया है, जिसका अर्थ है कि यह सबसे छोटे स्क्रीन साइज से ऊपर की ओर 5 कॉलम घेरेगा, लेकिन जैसे ही यह मीडियम स्क्रीन साइज तक पहुंचता है, यह 7 कॉलम में बदल जाएगा। इसके बाद हमारे पास रिवर्स वाला एक <div> है, COL-7 COL-MD-5, दोनों कुछ कार्ड्स से भरे हुए हैं। मैंने स्क्रीनशॉट में स्क्रीन साइज ली ताकि आप देख सकें कि यह कैसे बदलता है:

767 पिक्सेल चौड़ाई पर, हमारा बायां <div> 5 कॉलम चौड़ा है और दायां 7।

हम 1 पिक्सेल ऊपर 768 जाते हैं और वे विपरीत में बदल जाते हैं:

कार्ड सबकंपोनेंट्स

आइए अब कार्ड्स की पूरी शक्ति का उपयोग करके उनके सभी सबकंपोनेंट्स को आज़माते हैं।

हेडर और फूटर के साथ कार्ड

<div class="card"> <div class="card-header text-center p-4">I'm a header</div> <div class="card-body"> <p class="card-text"> first paragraph </p> <p class="card-text"> second paragraph </p> <a href="#" class="card-link">Link 1</a> <a href="#" class="card-link">Link 2</a> <a href="#" class="card-link">Link 3</a> </div> <div class="card-footer"> Footer of a Bootstrap card </div> </div>

हमने एक सेंटर किए गए कार्ड हेडर के साथ एक कार्ड बनाया, जिसमें एक बॉर्डर और लाइट ग्रे बैकग्राउंड है, और इसके नीचे एक कार्ड बॉडी है, जो इसे कुछ पैडिंग देती है।

बॉडी में, हमारे पास CARD-TEXT के साथ कुछ पैराग्राफ हैं कुछ एलाइनमेंट के लिए, और CARD-LINK के साथ कुछ लिंक्स हैं, इसलिए वे ब्लू कलर के हैं और एक दूसरे के बगल में रखे गए हैं।

अंत में, हमने एक कार्ड फूटर बनाया जिसमें हेडर के समान स्टाइलिंग है, लेकिन हमने इस बार टेक्स्ट को सेंटर नहीं किया।

इमेज कैप के साथ कार्ड

इस बार, हम कार्ड में एक इमेज कैप, कार्ड की बॉडी में टाइटल और सबटाइटल, और लिंक्स के साथ एक लिस्ट ग्रुप जोड़ेंगे:

<div class="card"> <img src="https://via.placeholder.com/100" alt="" class="card-img-top" /> <div class="card-body"> <h3 class="card-title">card title in the card's body</h3> <h4 class="card-subtitle mb-4">card subtitle</h4> <p>list group with links inside:</p> <ul class="list-group"> <li class="list-group-item"> <a href="#" class="card-link">List link 1</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 2</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 3</a> </li> </ul> </div> </div>

मैं इमेजेज के लिए एक बहुत ही उपयोगी टूल का उपयोग कर रहा हूं जिसे प्लेसहोल्डर कहा जाता है। अंत में नंबर इमेज का पिक्सेल विड्थ x हाइट है, लेकिन यहां इसे नजरअंदाज कर दिया जाता है क्योंकि CARD-IMG-TOP इमेज को कार्ड की पूरी चौड़ाई में स्ट्रेच (या श्रिंक) करता है। टाइटल और सबटाइटल को कुछ अच्छा फॉर्मेटिंग मिलता है, और हमने पैडिंग और मार्जिन के लिए बूटस्ट्रैप के ओरिएंटेशन यूटिलिटीज में से एक का उपयोग किया है। सबटाइटल पर दिख रहा MB-4 मार्जिन बॉटम के लिए है।

बूटस्ट्रैप पैडिंग और मार्जिन ओरिएंटेशन:

pt/mt – पैडिंग/मार्जिन टॉप
pb/mb – पैडिंग/मार्जिन बॉटम
pl/ml – पैडिंग/मार्जिन लेफ्ट
pr/mr – पैडिंग/मार्जिन राइट
py/my – पैडिंग/मार्जिन Y एक्सिस (टॉप और बॉटम)
px/mx – पैडिंग/मार्जिन X एक्सिस (लेफ्ट और राइट)

फिर हमारे पास एक लिस्ट ग्रुप है जो फिर से लिस्ट और इसके इंडिविजुअल एलिमेंट्स को लाइट, राउंडेड बॉर्डर के साथ एनकैप्सुलेट करता है। यहां हमारा परिणाम है:

बॉटम इमेज कैप

बूटस्ट्रैप में CARD-IMG-BOTTOM नहीं है, लेकिन हम कार्ड के बॉटम में एक div बनाकर और उसके अंदर <img class="card-img-top"> रखकर इसे आसानी से "नकली" बना सकते हैं।

<div class="card"> <div class="card-body"> <p class="card-text"> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quas unde corporis sed nam ad eius, pariatur, consectetur modi asperiores dolorem id quaerat eos quod nesciunt repudiandae aut temporibus rerum possimus. </p> </div> <img src="https://via.placeholder.com/100" alt="" class="card-img-top" /> </div>

मैंने अच्छे माप के लिए लोरम इप्सम भी जोड़ा।

साइड इमेज कैप

हम अपने कार्ड के अंदर एक ROW रैपर जोड़कर इसे हॉरिजॉन्टल भी बना सकते हैं ताकि इसे हॉरिजॉन्टली लेआउट किया जा सके, और फिर इमेज और कार्ड के बाकी हिस्से का आकार परिभाषित करने के लिए COL का उपयोग कर सकते हैं:

<div class="card"> <div class="row"> <img src="https://via.placeholder.com/100" alt="" class="card-img-top col-6" /> <div class="card-body col-6"> <h3 class="card-title">card title in the card's body</h3> <h4 class="card-subtitle mb-4">card subtitle</h4> <p>list group with links inside:</p> <ul class="list-group"> <li class="list-group-item"> <a href="#" class="card-link">List link 1</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 2</a> </li> <li class="list-group-item"> <a href="#" class="card-link">List link 3</a> </li> </ul> </div> </div> </div>

हमने कार्ड के सभी कंटेंट को बस <div class="row"> में रैप किया

और इमेज और कार्ड बॉडी दोनों में COL-6 जोड़कर कार्ड को 50-50 बना दिया।

बैकग्राउंड के रूप में कार्ड इमेज

हम पूरे कार्ड पर एक इमेज को स्ट्रेच भी कर सकते हैं और टेक्स्ट, लिस्ट्स, लिंक्स आदि को इसके ऊपर लेयर कर सकते हैं। हम इसे केवल <img> को CARD-IMG क्लास देकर और फिर बाकी सब कुछ CARD-IMG-OVERLAY क्लास वाले <div> में रखकर करते हैं। इसके अंदर, हम एलिमेंट्स को जैसे चाहें कॉन्फिगर करते हैं।

<div class="card"> <img src="https://via.placeholder.com/100" alt="" class="card-img" /> <div class="card-img-overlay"> <h4 class="card-title">Overlay Title</h4> <p class="card-text"> Image text overlay </p> <p>second paragraph</p> <p>third paragraph</p> <p>fourth paragraph</p> <div class="btn-group w-100"> <button class="btn btn-primary">blue</button> <button class="btn btn-info">teal</button> <button class="btn btn-danger">red</button> <button class="btn btn-dark">black</button> <button class="btn btn-success">green</button> </div> </div> </div>

यहां हमने पहली बार विड्थ यूटिलिटी का उपयोग किया। BTN-GROUP पर W-100।

बूटस्ट्रैप विड्थ और हाइट यूटिलिटीज:

w/h-25/50/75/100 – विड्थ/हाइट 25%/50%/75%/100%

हमारे मामले में यह 100% है माइनस वही पैडिंग जो CARD-BODY लागू करता है, जो यहां CARD-IMG-OVERLAY द्वारा लागू किया जाता है।

कार्ड कॉलम्स

कार्ड्स को कॉलम्स में लेआउट करने का यह विकल्प भी है ताकि वे पहले टॉप से बॉटम जाएं, और केवल जब कॉलम भर जाए तो वे नए पर शुरू हों।

<div class="card-columns"> <div class="card"> <h3 class="card-title text-center p-2">Title of card 1</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, rerum excepturi voluptate... </p> </div> </div> <div class="card"> <h3 class="card-title text-center p-2">Title of card 2</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, rerum excepturi voluptate... </p> </div> </div> <div class="card"> <h3 class="card-title text-center p-2">Title of card 3</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, rerum excepturi voluptate... </p> </div> </div> <div class="card"> <h3 class="card-title text-center p-2">Title of card 4</h3> <div class="card-body"> <p class="card-text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, rerum excepturi voluptate... </p> </div> </div> </div>

हम बस अपने सभी कार्ड्स को <div class="card-columns"> में रैप करते हैं और हमें निम्नलिखित मिलता है:

बूटस्ट्रैप कार्ड्स को स्टाइल करना

जब बूटस्ट्रैप कार्ड्स को स्टाइल करने की बात आती है, तो हम उनके बैकग्राउंड और टेक्स्ट कलर को बदल सकते हैं, साथ ही उनके बॉर्डर्स के कलर और लुक को भी।

स्टाइल्स को पूरे कार्ड पर, इसके अलग-अलग सबकंपोनेंट्स पर, या दोनों पर लागू किया जा सकता है। यहां कुछ स्टाइल्ड कार्ड्स हैं:

<div class="card bg-primary"> <div class="card-header"><h3>Header 1</h3></div> <div class="card-body"> <p>Body 1</p> </div> <div class="card-footer"><p>Footer 1</p></div> </div> <div class="card bg-success text-white"> <div class="card-header"><h3>Header 2</h3></div> <div class="card-body"> <p>Body 2</p> </div> <div class="card-footer text-danger"><p>Footer 2</p></div> </div> <div class="card bg-info text-dark border-danger"> <div class="card-header"><h3>Header 3</h3></div> <div class="card-body"> <p>Body 3</p> </div> <div class="card-footer"><p>Footer 3</p></div> </div> <div class="card border-primary bg-dark text-white"> <div class="card-header border-success"><h3>Header 4</h3></div> <div class="card-body text-danger"> <p>Body 4</p> </div> <div class="card-footer bg-warning text-info"><p>Footer 4</p></div> </div>

पहले कार्ड में कार्ड पर ही ब्लू बैकग्राउंड (BG-PRIMARY) है, जो पूरे कार्ड को स्टाइल करता है।

दूसरे कार्ड में पूरे कार्ड पर ग्रीन बैकग्राउंड (BG-SUCCESS) और व्हाइट टेक्स्ट (TEXT-WHITE) है, लेकिन फूटर में रेड टेक्स्ट (TEXT-DANGER) है, जो पैरेंट एलिमेंट के TEXT-WHITE को ओवरराइड करता है।

तीसरे कार्ड में डार्क ब्लू बैकग्राउंड (BG-INFO), ब्लैक टेक्स्ट (TEXT-DARK) और रेड बॉर्डर (BORDER-DANGER) है।

अंत में, चौथे कार्ड में ब्लू बॉर्डर (BORDER-PRIMARY), ब्लैक बैकग्राउंड (BG-DARK), और पूरे कार्ड पर व्हाइट टेक्स्ट (TEXT-WHITE) है।

हेडर पर ग्रीन बॉर्डर (BORDER-SUCCESS), बॉडी में रेड टेक्स्ट (TEXT-DANGER), और फूटर में येलो बैकग्राउंड (BG-WARNING) और डार्क ब्लू टेक्स्ट (TEXT-INFO)।

यहां हमारे रेनबो कार्ड्स दिखते हैं:

संक्षेप में

बूटस्ट्रैप कार्ड बहुत सारे विकल्पों के साथ काफी शक्तिशाली कंपोनेंट है। इन्हें कार्ड-डेक में ग्रुप किया जा सकता है एक अलग, सामंजस्यपूर्ण पूरे के लिए, या कार्ड-ग्रुप में उन्हें एक सिंगल एंटिटी में फ्यूज करने के लिए। इन्हें एक पंक्ति में फैलाया जा सकता है, या अलग लुक के लिए कार्ड-कॉलम्स में।

ये इमेजेज, लिस्ट्स और लिंक्स को होस्ट कर सकते हैं, सभी विभिन्न लेआउट्स में।

इनका अपना हेडर और फूटर भी हो सकता है, सभी प्रीसेट स्टाइल्स और फॉर्मेटिंग के साथ, लेकिन हमारे कस्टमाइज़ करने के लिए खुले।

ये अविश्वसनीय रूप से फ्लेक्सिबल हैं, और शायद इस बात के सर्वोत्तम उदाहरणों में से एक हैं कि बूटस्ट्रैप के साथ आप कितना कुछ हासिल कर सकते हैं, इतने कम पिछले सेटअप के साथ, इतने कम समय में।