टैब एक यूजर इंटरफेस (UI) तत्व है जो हमें अतिरिक्त स्थान का उपयोग किए बिना सूचना के विभिन्न फलकों को देखने की अनुमति देता है। बिल्कुल बाइंडर या किताब में टैब की तरह, वे पृष्ठ पर अधिक जानकारी के लिए एक स्थान चिह्नित करते हैं और उस फलक में मौजूद सामग्री द्वारा पहचाने जाते हैं। जब आप किसी टैब पर क्लिक करते हैं, तो आपको उस टैब से जुड़ी जानकारी प्रस्तुत की जाती है।
बूटस्ट्रैप एक ऐसा फ्रेमवर्क है जो हमें तेजी से टैब बनाने में मदद करता है। इस लेख में, हम समीक्षा करेंगे कि बूटस्ट्रैप को कैसे सेट किया जाए, हमें टैब की आवश्यकता क्यों हो सकती है, और बूटस्ट्रैप टैब के कुछ उदाहरणों को देखेंगे।
शुरुआत करना
यह सुनिश्चित करने के लिए कि हम अपने वेब पेज पर टैब देख सकें, पहली चीज जो हमें करने की आवश्यकता है वह है उचित निर्भरताएँ सुनिश्चित करना। इस परियोजना के लिए, हमें बूटस्ट्रैप, Popper.JS और jQuery की आवश्यकता है। सभी निर्भरताएँ प्राप्त करने में सहायता के लिए बूटस्ट्रैप के क्विक स्टार्ट पेज पर जाएँ।
यह आप पर निर्भर करता है कि आप आवश्यक पैकेज को कैसे लिंक करते हैं, लेकिन सबसे आसान, सबसे शुरुआती-अनुकूल तरीका है jQuery, Popper.js, और बूटस्ट्रैप के लिए कंटेंट डिलीवरी नेटवर्क - CDN - का उपयोग करना। अपने <script> टैग के क्रम से सावधान रहें - यहाँ क्रम मायने रखता है।
आप शुरू करने के लिए तैयार हैं!
टैब बनाने के लिए बूटस्ट्रैप दस्तावेज़ीकरण का उपयोग करना
"परिचय/शुरुआत करना" पृष्ठ के बाईं ओर, आपको एक साइडबार दिखाई देगा जो विभिन्न चीजों से लिंक करता है। "घटक" लिंक देखें और उस पर क्लिक करें। यह आपको बूटस्ट्रैप के कई उपलब्ध घटकों में से पहले पर ले जाएगा: "अलर्ट"। यदि हम फिर से साइडबार को देखें, तो यह अपडेट हो गया है ताकि हमारे पास उपलब्ध सभी विभिन्न घटकों के विभिन्न लिंक दिखाए जा सकें।
"नैव" घटकों पर क्लिक करें। इसमें वह टैब जानकारी होगी जिसे हमें शुरू करने के लिए आवश्यक है।
बेस नैव से शुरू करें
पृष्ठ के शीर्ष पर बेस नैव के साथ बूटस्ट्रैप के दिए गए कोड का उपयोग शुरू करने के लिए। यह दर्शाता है कि नैव क्लास विशेष रूप से किसी विशेष स्टाइल को नहीं संभालता है।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही बूटकैंप से मिलान करें।
औसत बूटकैंप स्नातक ने बूटकैंप शुरू करने से लेकर पहली नौकरी खोजने तक कैरियर परिवर्तन में छह महीने से कम समय बिताया।
<ul class="nav"> <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" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
टैब बनाने के लिए, क्लास विशेषता में कोड की पहली पंक्ति में nav-tabs क्लास जोड़ें।
<ul class="nav nav-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" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <div> ***** टैब सामग्री यहाँ <div> के रूप में जाएगी ***** </div>
UI के दृष्टिकोण से, अब हमारे पास टैब हैं। लेकिन हमारे पास अभी तक कार्यक्षमता नहीं है। आइए देखें कि इसे आगे कैसे करना है।
मार्कडाउन में भूमिकाएँ जोड़ें
ARIA मानक (एक्सेसिबिलिटी नियमों) को बनाए रखने के लिए, निम्नलिखित टैग में एक भूमिका विशेषता जोड़ें:
- <ul> के लिए, role="tablist" जोड़ें
- <a> के लिए, role="tab" जोड़ें
- प्रत्येक टैब की सामग्री को लपेटने वाले <div> के लिए, role="tabpanel" जोड़ें
टैब-सामग्री को इंगित करने के लिए विशेषताएँ जोड़ें
इस बिंदु पर, हम एक उच्च स्तर पर जानते हैं, हमारे पास लिंक को समर्पित कोड का एक ब्लॉक है, और हमारे पास सामग्री को समर्पित कोड का एक और ब्लॉक है। हमें टैब को उसकी सामग्री से जोड़ने के लिए कुछ चीजें करने की आवश्यकता है। आइए <ul> कोड ब्लॉक से शुरू करें।
- सबसे पहले, अपने सभी <a> तत्वों में आईडी जोड़ें। "टैब-नाम + -टैब" का उपयोग करें (उदाहरण के लिए, एक टैब जिसका नाम होम है - उनकी आईडी "होम-टैब" होगी)।
- <div> कोड ब्लॉक के लिए जो टैब-सामग्री को रखता है (जिन्हें टैबपैनल के रूप में उपयोग किया जाता है), उस टैब के नाम का उपयोग आईडी के रूप में करें जिससे वे जुड़े हुए हैं (यानी होम टैब से जुड़ी सामग्री की आईडी "होम" होनी चाहिए)।
- अगला, टैब में एक href जोड़ें जो उससे जुड़ी टैब-सामग्री की आईडी से लिंक करता है। हमारे "होम" टैब सादृश्य को जारी रखते हुए, <a> टैग में "होम" का href होना चाहिए।
- एक data-toggle विशेषता जोड़ें जो इंगित करती है कि क्या टॉगल किया जाना है। इस उदाहरण में यह "टैब" है।
- अंत में, कोई भी aria विशेषताएँ जोड़ें जो सहायक तकनीकों वाले लोगों की मदद करेंगी।
हमारा लिंक वाला <ul> तत्व अब तक इस तरह दिखना चाहिए:
<ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a id="a-tab" class="nav-link active" role="tab" data-toggle="tab" href="#a">A</a> </li> <li class="nav-item"> <a id="b-tab" class="nav-link" role="tab" data-toggle="tab" href="#b">B</a> </li> <li class="nav-item"> <a id="c-tab" class="nav-link" role="tab" data-toggle="tab" href="#c">C</a> </li> <li class="nav-item"> <a id="d-tab" class="nav-link" role="tab" data-toggle="tab" href="#d">D</a> </li> </ul>
टैब-सामग्री तत्व आगे है। यह <ul> ब्लॉक से कोड का एक अलग ब्लॉक है जिसमें हमारे सभी लिंक हैं।
- सुनिश्चित करें कि आपके टैब सामग्री डिव एक बाहरी डिव में संलग्न हैं जो प्रत्येक छोटे डिव के लिए एक कंटेनर के रूप में कार्य करता है। साथ ही, सुनिश्चित करें कि प्रत्येक छोटा डिव पिछले ब्लॉक से उपयुक्त टैब शीर्षक के लिए नामित है।
- सुनिश्चित करें कि उचित ARIA विशेषताएँ जोड़ी गई हैं। यहाँ, हम aria-selected और aria-labelledby का उपयोग करते हैं। Aria-labelledby मिलान टैब शीर्षक की आईडी से मेल खाता है। Aria-controls उस विशेष डिव तत्व की आईडी से मेल खाता है।
- अंत में, एक क्लास विशेषता जोड़ें जिसमें कम से कम "show" क्लास नाम हो। यह एक बूटस्ट्रैप क्लास है जो किसी विशेष टैब पर क्लिक करने पर उचित फलक दिखाने में सहायता करती है। क्लास नाम का "active" भाग इंगित करता है कि कौन सा फलक दिख रहा है। "Fade" इंगित करता है कि जब किसी टैब पर क्लिक किया गया है तो फलक को फीड इन और आउट करने के लिए एनिमेशन का उपयोग किया जा रहा है।
टैब-सामग्री डिव में से एक के लिए कोड इस प्रकार है:
<div class="tab-content" style="padding: 20px;"> <div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A</div> </div>
बाकी टैब-सामग्री डिव बनाने के लिए इसे गाइड के रूप में उपयोग करें। यदि आप अटक जाते हैं तो नीचे दिए गए कोड को संदर्भित करें।
यहाँ संपूर्ण कोडबेस पूर्ण रूप से है:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <!-- बूटस्ट्रैप स्टाइलशीट --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> </head> <body> <!-- टैब शीर्षक --> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a id="a-tab" class="nav-link active" data-toggle="tab" role="tab" href="#a">A</a> </li> <li class="nav-item"> <a id="b-tab" class="nav-link" data-toggle="tab" role="tab" href="#b">B</a> </li> <li class="nav-item"> <a id="c-tab" class="nav-link" data-toggle="tab" role="tab" href="#c">C</a> </li> <li class="nav-item"> <a id="d-tab" class="nav-link" data-toggle="tab" role="tab" href="#d">D</a> </li> </ul> <!-- टैब सामग्री --> <div class="tab-content" style="padding: 20px;"> <div id="a" aria-labelledby="a-tab" class="tab-pane fade show active" role="tabpanel" aria-controls="a" aria-selected="true">A</div> <div id="b" aria-labelledby="b-tab" class="tab-pane fade" role="tabpanel" aria-controls="b" aria-selected="false">B</div> <div id="c" aria-labelledby="c-tab" class="tab-pane fade" role="tabpanel" aria-controls="c" aria-selected="false">C</div> <div id="d" aria-labelledby="d-tab" class="tab-pane fade" role="tabpanel" aria-controls="d" aria-selected="false">D</div> </div> <!-- jQuery CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Popper.js CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script> <!-- बूटस्ट्रैप CDN --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script> </body> </html>
निष्कर्ष
आपने अभी बूटस्ट्रैप का उपयोग करके एक टैब नेविगेशनल घटक बनाया है! अगली बार पिल नेविगेशनल कंटेनर बनाने का प्रयास करें। हैप्पी कोडिंग!
