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

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

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

कार्ड सामग्री टेक्स्ट, छवियों, लिंक, बटन, सूचियों से कुछ भी हो सकती है, और इसमें शीर्षलेख और पाद लेख भी हो सकते हैं।

बूटस्ट्रैप कार्ड की मूल बातें

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

आइए कुछ उदाहरणों पर एक नज़र डालें:

<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>

बूटस्ट्रैप के अंगूठे का नियम के अंदर की हर चीज को CONTAINER तत्व में लपेटना है, जो इसके अंदर की हर चीज को उत्तरदायी बनाता है।

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

हमारे उदाहरण में, हमने CONTAINER-FLUID का उपयोग किया, जो केवल CONTAINER के विपरीत, तत्व को पूर्ण-चौड़ाई बनाता है, जो क्षैतिज मार्जिन जोड़ता है और इसे पृष्ठ पर केंद्रित करता है।

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

कोड स्निपेट में आपको जो p-4 और m-4 दिखाई दे रहे हैं, वे 1.5 रेम के सभी पक्षों पर एक पैडिंग और 1.5 रेम के सभी पक्षों पर एक मार्जिन का प्रतिनिधित्व करते हैं।

बूटस्ट्रैप साइज़िंग उपयोगिता मान:

0 =0 रेम;

1 =0.25 रेम;

2 =0.5 रेम;

3 =1 रेम;

4 =1.5 रेम;

5 =3 रेम;

फिर हमारे पास कार्ड 4, 5 और 6 हैं, जो कार्ड-ग्रुप क्लास के साथ

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

अंत में, कार्ड 7, 8 और 9 को कार्ड-डेक वर्ग के साथ

में लपेटा जाता है, जो उन्हें एक क्षैतिज फ्लेक्सबॉक्स में जोड़ता है, लेकिन उन्हें अलग-अलग तत्वों के रूप में दृष्टिगत रूप से छोड़ देता है।

कार्ड को मैन्युअल रूप से आकार देना

इससे पहले कि हम कुछ मैन्युअल आकार के कार्ड करें, आइए बूटस्ट्रैप के लेआउट और ब्रेकप्वाइंट सिस्टम के बारे में कुछ सीखें।

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

आसान लेआउट विकास के लिए बूटस्ट्रैप पृष्ठ को 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 COLMS to OOCUPY लिखकर तत्व के आकार की घोषणा करते हैं।

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

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

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

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

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

यदि हम मध्यम स्क्रीन आकार और उससे ऊपर के उदाहरण से पैडिंग को 0.5 रेम तक कम करना चाहते हैं, तो हम उसी तत्व पर 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 रैपर है, और फिर एक

COL-5 COL-MD-7 पर सेट है, जिसका अर्थ है कि यह सबसे छोटे स्क्रीन आकार और ऊपर से 5 कॉलम पर कब्जा कर लेगा, लेकिन जैसे ही यह मध्यम स्क्रीन आकार तक पहुंचता है , यह 7 कॉलम में बदल जाएगा। इसके बाद हमारे पास एक

रिवर्स के साथ, COL-7 COL-MD-5 है, वे दोनों कुछ कार्डों से भरे हुए हैं। मैंने स्क्रीनशॉट में स्क्रीन का आकार पकड़ा ताकि आप देख सकें कि यह कैसे बदलता है:

767 पिक्सेल चौड़ाई, हमारा बायाँ

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>

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

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

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

इमेज कैप वाला कार्ड

इस बार, हम कार्ड में एक इमेज कैप, कार्ड के मुख्य भाग में एक शीर्षक और उपशीर्षक और सूची आइटम के रूप में लिंक के साथ एक सूची समूह जोड़ेंगे:

<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 ऊंचाई है, लेकिन इसे यहां अनदेखा कर दिया जाता है क्योंकि कार्ड-आईएमजी-टॉप छवि को कार्ड की पूरी चौड़ाई में फैलाता है (या छोटा करता है)। शीर्षक और उपशीर्षक को कुछ अच्छा स्वरूपण मिलता है, और हमने पैडिंग और मार्जिन के लिए बूटस्ट्रैप की ओरिएंटेशन उपयोगिताओं में से एक का उपयोग किया है। उपशीर्षक पर आप जो MB-4 देखते हैं, उसका अर्थ है मार्जिन बॉटम।

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

pt/mt - पैडिंग/मार्जिन टॉप
pb/mb - पैडिंग/मार्जिन बॉटम
pl/ml - पैडिंग/मार्जिन बाएँ
pr/mr - पैडिंग/मार्जिन राइट
py/my - पैडिंग/मार्जिन y अक्ष (ऊपर और नीचे)
px/mx - पैडिंग/मार्जिन x अक्ष (बाएं और दाएं)

फिर हमारे पास एक सूची समूह है जो फिर से सूची और उसके अलग-अलग तत्वों को एक हल्के, गोल सीमा के साथ समाहित करता है। ये रहा हमारा परिणाम:

निचला चित्र कैप

बूटस्ट्रैप में कोई कार्ड-आईएमजी-बॉटम नहीं है, लेकिन हम कार्ड के निचले भाग में एक डिव बनाकर और उसके अंदर एक बूटस्ट्रैप कार्ड घटक

<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>

हमने अभी कार्ड की सभी सामग्री को

. में लपेटा है

और कार्ड को 50-50 बनाने के लिए छवि और कार्ड बॉडी दोनों में COL-6 जोड़ा।

पृष्ठभूमि के रूप में कार्ड छवि

हम पूरे कार्ड पर एक छवि भी फैला सकते हैं और उस पर टेक्स्ट, सूचियां, लिंक इत्यादि बिछा सकते हैं। हम इसे केवल को CARD-IMG का एक वर्ग देकर और फिर बाकी सभी को

में CARD-IMG-OVERLAY वर्ग के साथ रखकर करते हैं। इसके अंदर, हम उन तत्वों को कॉन्फ़िगर करते हैं जो हम चाहते हैं।

<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>

यहां हमने पहली बार चौड़ाई उपयोगिता का उपयोग किया है। बीटीएन-ग्रुप पर डब्ल्यू-100।

बूटस्ट्रैप की चौड़ाई और ऊंचाई की उपयोगिताएं:

डब्ल्यू/एच-25/50/75/100 - चौड़ाई/ऊंचाई 25%/50%/75%/100%

हमारे मामले में यह कार्ड-बॉडी द्वारा लागू समान पैडिंग से 100% घटा है, जिसे कार्ड-आईएमजी-ओवरले द्वारा यहां लागू किया गया है।

कार्ड कॉलम

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

<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 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-INFO), काला टेक्स्ट (टेक्स्ट-डार्क) और एक लाल बॉर्डर (BORDER-DANGER) है।

अंत में, चौथे कार्ड में एक नीली बॉर्डर (बॉर्डर-प्राथमिक), एक काली पृष्ठभूमि (बीजी-डार्क), और पूरे कार्ड पर सफेद टेक्स्ट (टेक्स्ट-व्हाइट) है।

शीर्षलेख पर एक हरे रंग का बॉर्डर (बॉर्डर-सफलता), शरीर में लाल टेक्स्ट (टेक्स्ट-डेंजर), और पाद लेख में एक पीले रंग की पृष्ठभूमि (बीजी-चेतावनी) और गहरा नीला टेक्स्ट (टेक्स्ट-जानकारी)।

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

रिकैप करने के लिए

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

वे विभिन्न लेआउट में छवियों, सूचियों और लिंक को होस्ट कर सकते हैं।

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

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