Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Jade
Webdesign

जेड के साथ बेकिंग बूटस्ट्रैप स्निपेट्स

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

Final product image
What You'll Be Creating

बेशक, ट्विटर के कभी लोकप्रिय Bootstrap फ्रेममेक की सबसे बड़ी ताकत यह है कि यह आपको बॉक्स के बाहर पूरी तरह से कार्यात्मक CSS और JavaScript का एक पूरा सेट देता है।

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

चूंकि आप बूटस्ट्रैप साइट के लिए CSS और javaScript लिखने में थोड़े वक्त बिताएंगे, इसलिए HTML के निर्माण के बारे में विकास पूरी तरह से हो जाता है। जैसे, अगर आप अपने HTML उत्पादन को यथासंभव तेज और चिकनी बनाने के तरीके पा सकते हैं, तो आपका संपूर्ण बूटस्ट्रैप वर्कफ़्लो अविश्वसनीय रूप से कुशल हो सकता है।

HTML को और भी शक्तिशाली बनाना

आप अपने HTML उत्पादन को शक्ति देने के लिए इस्तेमाल कर सकते हैं सबसे प्रभावी उपकरण में से एक Jade, एक open source टेम्पलेटिंग भाषा है जो उपयोग करने के लिए पूरी तरह से स्वतंत्र है।

Jade "templating language" के बैनर के नीचे जा सकते हैं लेकिन ऐसा करने से आपको लगता है कि आपको इसके लाभों में टैप करने के लिए "templates" के साथ काम करने की आवश्यकता नहीं है। यह दो अतिरिक्त तरीकों से भी काम करता है जो सभी प्रकार के HTML उत्पादन के लिए बेहद उपयोगी हो सकते हैं:

  • एक HTML शॉर्टहैंड टूल के रूप में जो आपको लिखने के लिए आवश्यक कोड की मात्रा को नाटकीय रूप से कम करने की अनुमति देगा।
  • HTML के लिए एक "preprocessor" के रूप में जो CSS प्रीप्रोसेसरों की तरह बहुत काम करता है, तर्क को प्रयोग करने और "mixins" बनाने की क्षमता को जोड़ता है: आपके वर्कफ़्लो DRY को बनाए रखने वाले कोड के पुनः उपयोग योग्य ब्लॉकों चाहिए होंगे।

यदि आप HTML को बिल्कुल भी उपयोग करते हैं, और खासकर यदि आप बूटस्ट्रैप का उपयोग करते समय HTML पर भारी ध्यान केंद्रित करते हैं, तो आप शायद यह पाते हैं कि एक बार जब आप जेड की कोशिश करते हैं तो आप इसे बिना किसी अन्य प्रोजेक्ट का निर्माण करेंगे।

Jade Bootstrap Snippets को पावर देता है

इस ट्यूटोरियल में हम जेड को बूटस्ट्रैप ढांचे के कुछ प्रमुख कॉम्पोनेन्ट बनाने के लिए उपयोग करने जा रहे हैं।

Jade को रॉ HTML

प्रत्येक कॉम्पोनेन्ट के लिए हम पहले आवश्यक रॉ HTML को देखेंगे और फिर इसे जेड कोड में उबालेंगे। आप सीधे दो की तुलना कर लेंगे, आवश्यक कोड की मात्रा में कमी, और जेड की नई कॉम्पैक्ट और क्लीन फॉर्मेटिंग स्टाइल देखें।

कृपया ध्यान दें कि हम जेड स्निपेट्स पर अपना ध्यान केंद्रित करेंगे, जेड खुद कैसे काम करता है, इस पर ध्यान देने की बजाय। उसने कहा, कोड के उदाहरणों में से पता होना मुख्य बात यह है कि जेड में टैब इंडेंटेशन के प्रत्येक स्तर के परिणामस्वरूप HTML में तत्वों की घोंसले का निर्माण होता है।

उदाहरण के लिए जेड में निम्नलिखित इंडेंटेशन:

HTML में निम्नलिखित नेस्टिंग के शिकार को देने का संकलन करेगा:

जेड के साथ मेरे हाल के पाठ्यक्रम Top-Speed HTML Development With Jade के free introductory lessons की जांच कैसे करें जेड के बारे में अधिक जानने के लिए।

जेड मिक्सिंस

Jade mixins कोड के पुनः उपयोग योग्य ब्लॉक्स हैं। यदि आपके पास कुछ कोड है जिसे आपको बार-बार जगह की आवश्यकता होगी तो आप उसे mixin के तहत परिभाषित कर सकते हैं। फिर हर बार जब आप उस मिश्रण का उपयोग करते हैं, तो यह आपके लिए स्वचालित रूप से कोड का उत्पादन करेगा।

उदाहरण के लिए, निम्नलिखित आलेख "article" नामित है:

इस तरह एक दस्तावेज़ को बार-बार इस्तेमाल किया जा सकता है:

और इस HTML में संकलित होगा:

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

इसके अतिरिक्त, जब भी हम मिक्सिक्स का उपयोग करते हैं, तब भी हम प्रश्न में कॉम्पोनेन्ट के लिए सीधे जेड कोड के उदाहरणों में शामिल होंगे। इस प्रकार आप देखेंगे कि HTML से जेड तक एक मिक्सिन के लिए जाने की प्रक्रिया कैसे सामने आती है।

जेड का इस्तेमाल करने के लिए सेटअप करना

पहली चीज जो आपको करने की ज़रूरत है वह अपने आप को जेड के साथ काम करने के लिए तैयार होने की है। आप HTML में अपने जेड कोड के स्वचालित संकलन में काम करने के लिए एक कोडिंग वातावरण चाहते हैं।

"शीर्ष गति HTML विकास के साथ जेड" कोर्स पर जाएं और पाठ्यक्रम, त्वरित और आसान सेटअप में दूसरा लेसन देखें। यह मुफ़्त है, और आपको जेड को सेटअप करने के लिए तैयार होने के बारे में जानने के लिए आवश्यक सभी चीज़ों के माध्यम से ले जाएगा।

इस ट्यूटोरियल के लिए, मैं सफ़ल Sublime Text 3 और Prepros का उपयोग कर कवर करने वाले वीडियो में विधि को चुनने की सलाह देता हूं।

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

बेसिक डॉक्यूमेंट निर्माण

इस बिंदु पर आपको "index.jade" नामक एक फाइल के साथ काम करने के लिए तैयार होना चाहिए। अगर इस समय फ़ाइल में कोई कोड है, तो कृपया इसे हटा दें, यह पूरी तरह खाली है।

हम आपके बूटस्ट्रैप प्रोजेक्ट के मुख्य HTML डॉक्यूमेंट की बुनियादी बातें बनाकर शुरू करना चाहते हैं, आवश्यक टैग जोड़कर और आवश्यक बूटस्ट्रैप CSS और JavaScript फाइल प्लस jQuery में लोड कर रहे हैं।

हम बूटस्ट्रैप CDN और Google APIs का लाभ उठाएंगे, ताकि इन सभी आवश्यक फाइलों में आपको उन्हें डाउनलोड करने से बचाया जा सके:

जैसा कि ऊपर उल्लेख किया गया है, हमारे द्वारा बनाए गए प्रत्येक तत्व के लिए HTML दिखाया जाएगा, लेकिन यह केवल प्रदर्शन के प्रयोजनों के लिए है, इसलिए आप इसकी तुलना जेड समकक्ष से कर सकते हैं।

आपको किसी भी तरह से दिखाई देने वाले किसी भी रॉ HTML कोड का उपयोग करने की आवश्यकता नहीं है। इसके बजाए, आप जेड अनुभागों पर ध्यान केंद्रित कर सकते हैं जिसे Convert to Jade और Add_____ Mixins

रॉ HTML

निम्न कोड पृष्ठ के मूल doctype, html, head, title, meta और body तत्वों को सेट करता है। इसके अतिरिक्त, यह बूटस्ट्रैप के CSS और javaScript फाइल प्लस jQuery में लोड करता है, और class के साथ एक div तत्व बनाता है। .container ने इसके लिए आवेदन किया है कि हम जो भी कॉम्पोनेन्ट बनाते हैं वे अंदर रखे जाएंगे।

जेड को परिवर्तित करें

नीचे, हमारे पास जेड समतुल्य है जो आपने ऊपर दिए गए अनुभाग में देखा था। इस कोड को कॉपी और पेस्ट करें अपनी "index.jade" फ़ाइल में और इसे सेव करे।

संकलन पूरा होने के बाद (स्वचालित रूप से प्रीप्रो के माध्यम से), "index.html" फ़ाइल को खोलें जो उत्पन्न हो गई है। अंदर, आप ऊपर रॉ HTML के लिए एक सटीक मिलान देखना चाहिए।

यद्यपि हम इस चरण के भाग के रूप में कोई मिक्सिन नहीं बना रहे हैं, हम क्या करेंगे जो मिक्सिन के लिए कुछ आधारभूत बनायेंगे जो बाद में बनाए जाएंगे।

मिक्सिन जोड़ने के लिए तैयार

उसी फ़ाइल में "mixins.jade" नामक एक फ़ाइल बनाएं, जिसमें आपकी मौजूदा जेड फाइलें हैं। हम जो बनाये गये सभी मिश्रणों को बाद में इस फ़ाइल में लिखा जाएगा।

अपनी "index.jade" फ़ाइल के शीर्ष पर इस रेखा को जोड़ें:

यह लाइन आपके मिक्सिक्स फ़ाइल को आयात करेगी, जो मिक्सिक्स को अपने "index.jade" फ़ाइल में उपलब्ध कराई जाएगी, जो इसके भीतर लिखी जाएगी।

अब हम बूटस्ट्रैप कंपोनेंट्स में जोड़ने के लिए तैयार हैं।

नोट: बाद के बूटस्ट्रैप कंपोनेंट्स के लिए सभी कोड .container class div के अंदर जोड़ा जाना चाहिए।

नेवबार कॉम्पोनेन्ट

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

रॉ HTML

आपके द्वारा सामान्यतः ऊपर दिए गए नेवबार कॉम्पोनेन्ट को उपयोग करने के लिए रॉ HTML का उपयोग करना होगा:

जेड को परिवर्तित करें

जेड प्रारूप में क्रूच किया गया है, हमारे नेवबार कॉम्पोनेन्ट इस तरह दिखते है:

नेवबार मिक्सिंस जोड़ें

हालांकि, नेवबार कॉम्पोनेन्ट का जेड संस्करण रॉ HTML की तुलना में अधिक संक्षिप्त और आसान है, हालांकि हम अब भी अधिकांश कोड को मिक्सिंंस में बाहरीकरण करके भी एक बड़ा सुधार कर सकते हैं।

अपने "mixins.jade" फ़ाइल में निम्न कोड जोड़ें:

उपरोक्त जेड कोड में हमने पांच भिन्न मिक्सिन बनाए हैं:

  1. nav - इस मिक्सिन का इस्तेमाल नेवबार कॉम्पोनेन्ट और इसके मूल तत्वों को आरम्भ करने के लिए करें, अपनी दृश्य स्टाइल को "default" या "inverse" में सेट करें, और उस टेक्स्ट को सेट करें जो ब्रांडिंग अनुभाग में दिखाई देगा।
  2. nav_item - nav mixin के तहत नेस्टेड व्यक्तिगत मेनू आइटम जोड़ने के लिए इसका उपयोग करें
  3. nav_item_dropdown - एक ड्रॉपडाउन मेनू के अंदर नेस्टेड के साथ एक nav आइटम को स्थापित करने के लिए उपयोग करें
  4. nav_divider - एक nav_item_dropdown मेनू मैक्सिन के तहत नेस्टेड एक विभक्त रखने के लिए उपयोग करें
  5. nav_header - nav_divider मैक्सिन के बाद, एक ड्रॉपडाउन मेनू के अंदर एक हैडर रखने के लिए उपयोग करें

यह सही नहीं समझ सकता है, लेकिन यह देखने के लिए पढ़ें कि इन मिक्सिक्स का इस्तेमाल कैसे किया जाता है और सभी को स्पष्ट होना चाहिए।

नेवबार मिक्सिंस का उपयोग करें

हमारे नेवबार के मिश्रण के साथ तैयार होने के कारण, नेवबार के कॉम्पोनेन्ट अब बहुत आसान हो जाते हैं।

"nav" मिक्सिन रखें

इस तरह से समग्र मेनू को इनिशियलाइज़ करने के लिए nav मिक्सिन डालकर प्रारंभ करें:

nav मिक्सिन से जुड़े ब्रैकेट के बीच आप दो टुकड़ों की जानकारी, arguments कहलाते हैं, प्रत्येक उद्धरण चिह्नों में लपेटते हैं। पहला टेक्स्ट सेट करता है जो नेव कॉम्पोनेन्ट पर ब्रांडिंग अनुभाग में दिखाई देगा। दूसरा नेव कॉम्पोनेन्ट के लिए एक अद्वितीय ID सेट करता है।

एक बार संकलित होने पर, आपको ब्राउज़र में अपनी HTML फ़ाइल देखने पर यह देखना चाहिए:

उलटा नेवबार रंग

डिफ़ॉल्ट से नेवबार कॉम्पोनेन्ट का रंग बदलने के लिए, इसके विपरीत तीसरे तर्क जोड़ें:

यह इस तरह दिखने के लिए आपके नेवबार रंगों को बदल देगा:

प्लेस नेव आइटम

आगे, हम अपने तीन शीर्ष स्तर मेनू लिंक जोड़ने के लिए अपने nav_item मैक्सिन का उपयोग करेंगे:

ध्यान दें कि nav_item मैक्सिन के प्रत्येक उदाहरण टैब nav मिक्सिन की तुलना में एक और स्तर से इंकेंट है। यह nav मैक्सिन का चाइल्ड होने के लिए प्रत्येक nav_item सेट करता है।

इस मामले में पहला तर्क पारित किया गया है, उदा. "Index.html", उस लिंक को सेट करता है जिसे मेनू आइटम पर लागू किया जाएगा। दूसरा (और वैकल्पिक) तर्क एक active class जोड़ता है जो मेनू आइटम को हाइलाइट करता है।

संकलन के बाद अपने नवबार कॉम्पोनेन्ट को अब इस तरह दिखना चाहिए:

ड्रॉपडाउन मेनू के साथ प्ले आइटम प्लेस करें

अब हम आगे बढ़ सकते हैं और nav_item_dropdown मैक्सिन का उपयोग करते हुए अंदर एक ड्रॉपडाउन मेनू के साथ एक और मेनू आइटम जोड़ सकते हैं:

यह बाल मेनू के एक तीर के साथ एक नया आइटम जोड़ता है, और बाल मेनू के लिए आवरण भी है:

ड्रॉपडाउन नव आइटम रखें

हमारे नए लटकती मेनू में अभी तक इसके अंदर कोई भी आइटम नहीं है, इसलिए यहां हम अपने nav_item मैक्सिन का उपयोग कुछ में जोड़ने के लिए कर सकते हैं।

जब हम उस पर होते हैं, हम ड्रॉपडाउन के अंदर एक विभाजन रेखा जोड़ने के लिए, और हमारे nav_header को नीचे कुछ शीर्ष लेख टेक्स्ट जोड़ने के लिए हमारे nav_divider मैक्सिन का उपयोग करेंगे।

ये अतिरिक्त हमारे नेवबार कॉम्पोनेन्ट कोड को पूरा करेंगे:

यह कोड HTML में पूरी तरह कार्यात्मक नेवबार कॉम्पोनेन्ट में संकलित करता है, और इस तरह दिखता है:

नेवबार कॉम्पोनेन्ट के लिए मूल HTML की मूल 30 पंक्तियों पर एक त्वरित नज़र डालें और विचार करें कि जेड की 12 छोटी लाइनों के नीचे क्रैंच किए जाने पर, कितनी तेजी से मेनू निर्माण हो सकता है (असीम पुन: प्रयोज्य मिक्सिंस के बाद) बनाया जा सकता है।

ग्रिड: तीन कॉलम उदाहरण

बूटस्ट्रैप एक बारह कॉलम ग्रिड प्रणाली के साथ आता है और संबंधित classes का एक समूह है जो आपको यह निर्धारित करने की अनुमति देता है कि एक तत्व विभिन्न स्क्रीन आकारों जैसे मध्यम (md), छोटे (sm), और एक्स्ट्रा छोटे (xs)।

आप पूरी तरह से पढ़ सकते हैं कि यह ग्रिड सिस्टम http://getbootstrap.com/css/#grid पर कैसे काम करता है।

नीचे दिए गए इमेज में तीन पैनल divs होते हैं, जो "medium" आकार या बड़ा पर 4 कॉलम चौड़ा करते हैं, "small" साइज पर प्रत्येक छह स्तंभों तक ढंके होते हैं, और "extra small" साइज में प्रत्येक 12 स्तंभ होते हैं।

रॉ HTML

इन तीन कॉलमों के लिए आवश्यक रॉ HTML निम्नानुसार है:

हम class की row के साथ एक div बनाकर शुरू करते हैं, फिर इसके अंदर नेस्टेड तीन लेआउट डिविज़ हैं जो कि ऊपर दिए गए पैनलों को बनाए रखेंगे।

प्रत्येक div में col-md-4 को इसे मध्यम आकार या उससे अधिक पर चार स्तंभ चौड़ा होना चाहिए। इसके बाद, col-sm-6 की स्थापना छोटे आकार में छह कॉलम चौड़ी होने के साथ-साथ क्लास col-xs-12 इसे अतिरिक्त छोटे आकार में बारह कॉलम की चौड़ाई में सेट करना है।

जेड को परिवर्तित करें

जेड कोड में हम सभी उद्घाटन और समापन divs को छोड़ सकते हैं और सीधे ही आवश्यक क्लास को टाइप कर सकते हैं:

पैनल कॉम्पोनेन्ट

अब चलो पैनल कंपोनेंट्स को बनाते हैं जो आपने पिछले अनुभाग में चित्रित किया था:

रॉ HTML

पैनल कॉम्पोनेन्ट के लिए रॉ HTML वास्तव में नौबार कॉम्पोनेन्ट की तुलना में काफी हल्का है। हमारे पास सिर्फ तीन स्टाइल्स हैं, जिनकी सही स्टाइल को जोड़ने के लिए आवश्यक चार क्लासेज हैं:

जेड को परिवर्तित करें

इसे जेड में बदलने से इसे थोड़ा हल्का बना देता है:

पैनल मिक्सिन जोड़ें

इसका कारण यह है कि हम इस कॉम्पोनेन्ट के लिए एक मिक्सिन बना रहे हैं, आपको बचाने के लिए सभी चार क्लास के नामों को याद रखना होगा या प्रत्येक आवश्यक divs को एक दूसरे को लपेटने के लिए कैसे करना चाहिए

अपने "mixins.jade" फ़ाइल में निम्न कोड जोड़ें:

पैनल मिक्सिन का उपयोग करें

पैनल के कॉम्पोनेन्ट को स्थान देने के लिए अब सिर्फ panel मिक्सिन का उपयोग करें, जो टेक्स्ट को तर्क के रूप में उपयोग करना चाहते हैं। उसके बाद, मिक्सिन के बाद अपने पैनल की सामग्री टाइप करें, एक स्थान के बाद:

बूटस्ट्रैप पैनल की कई भिन्न स्टाइल प्रदान करता हैI किसी भी अन्य को पैनल स्टाइल बदलने के लिए, स्टाइल के नाम को दूसरी तर्क के रूप में समझाएं:

बटन

आगे हम बूटस्ट्रैप के बटनों के उदाहरण बनाने पर एक नज़र रखेंगे I

पिछले खंड के पैनल कॉम्पोनेन्ट के साथ, रॉ HTML पहले से ही बटन के लिए काफी प्रकाश है, फिर भी मिक्सिक्स बनाकर हम उन्हें इस्तेमाल करने के लिए आवश्यक वाक्यविन्यास याद करने की आवश्यकता को हटा देते हैं।

रॉ HTML

जेड को परिवर्तित करें

बटन मिश्रण जोड़ें

साथ ही साथ बटन को निर्धारित करने के लिए, यह मिक्सिन एक लिंक भी लागू करता है और बटन के आकार को परिवर्तित करने की अनुमति देता है।

बटन मिक्सिन का उपयोग करें

अपने सरलतम रूप में, इस button मिक्सिन को ऐसा इस्तेमाल किया जा सकता है, मिक्सिन के बाद रखे गए बटन पर टेक्स्ट को दिखाने के लिए, एक स्थान के बाद:

इससे डिफ़ॉल्ट आकार पर एक बटन बनाया जाएगा, डिफ़ॉल्ट रंग के साथ, और # set के साथ इसके लिंक गंतव्य के रूप में।

बटन की स्टाइल को पहली तर्क के रूप में एक नई स्टाइल के नाम से गुजरने के लिए सेट किया जा सकता है, और लिंक गंतव्य को दूसरी तर्क के रूप में पारित किया जा सकता है:

बटन के आकार को "large", "small", या "mini" को तीसरा तर्क के रूप में गुजरने से भी बदला जा सकता है:

Alert कॉम्पोनेन्ट

Alert components बूटस्ट्रैप के बटन के समान हैं, लेकिन सरल है क्योंकि उन्हें लिंक गंतव्यों को लागू करने की आवश्यकता नहीं है और वे विभिन्न आकारों में नहीं आते हैं।

रॉ HTML में अलर्ट्स लिखना थोड़ा मुश्किल हो सकता है क्योंकि आपको सभी जुड़े क्लासेज को "x" के साथ बटन में कैसे जोड़ना है, इसके साथ याद रखना होगा, जिसमें चेतावनी को बंद किया जा सकता है।

हम एक मिश्रण को एक साथ रखेंगे ताकि आपको उन चीजों को याद न पड़े। बदले में चेतावनियां आसान हो जाती हैं।

रॉ HTML

जेड को परिवर्तित करें

अलर्ट मिक्सिन जोड़ें

अपने "mixins.jade" फ़ाइल में निम्न कोड जोड़ें:

अलर्ट मिक्सिन का उपयोग करें

एक चेतावनी रखने के लिए अब आप alert मिक्सिन का इस्तेमाल कर सकते हैं, चेतावनी स्टाइल को एक तर्क के रूप में दे सकते हैं, फिर एक स्थान के तुरंत बाद चेतावनी की टेक्स्ट सामग्री टाइप कर सकते हैं:

जुम्बोट्रोन कॉम्पोनेन्ट

Jumbotron बूटस्ट्रैप के सबसे पहचानने वाले कंपोनेंट्स में से एक है।

इस मामले में हम इसके लिए मिक्सिन नहीं बनाएंगे, क्योंकि एक जंबोट्रान कॉम्पोनेन्ट को सीधे जेड कोड का उपयोग करते हुए तेज़ है। यह दिखाने के लिए एक अच्छा उदाहरण है कि मिक्सिंस शानदार होने के बावजूद आपको उन्हें हमेशा ज़रूरत नहीं है यदि वे आपको महत्वपूर्ण समय बचाने नहीं जा रहे हैं।

रॉ HTML

जेड में परिवर्तित, एक बटन मिक्सिन शामिल करना

जेड में एक जंबोट्रोन को लगाया जा रहा है वास्तव में टाइपिंग का एक मामला है .jumbotron एक पंक्ति पर बाद में आपकी सामग्री के अंदर आने वाली पंक्तियों के अंदर मुस्कुराते हुए।

नीचे दिए गए कोड में, देखें कि हम पहले हमने जो बटन मिक्सिन का उपयोग किया है, हमने यह भी दिखाया है कि आप इन तत्वों को एक साथ मिलाकर कैसे मेल कर सकते हैं:

सूची समूह कॉम्पोनेन्ट

बूटस्ट्रैप कई अलग-अलग प्रकार की list group components प्रदान करता है। हम उन तीन समूह प्रकारों को जनरेट करेंगे, जैसे निम्नानुसार।

1. "List" प्रकार, चाइल्ड li एलिमेंट्स के साथ एक ul एलिमेंट्स पैदा करना

2. "Links" प्रकार, लिंक किए गए मदों की श्रृंखला तैयार करना

3. "Default" प्रकार, अनलिंक किए गए टेक्स्ट आइटम का उत्पादन

रॉ HTML

जैसा कि हम ऊपर ढाले कुछ कंपोनेंट्स के साथ, सूची समूहों के लिए HTML भारी जटिल नहीं है। हालांकि, हम अभी भी मिक्सर की एक श्रृंखला बनाकर अपने उत्पादन को और अधिक कुशल बना सकते हैं जो आपको लिखने की आवश्यकता होती है।

प्रत्येक सूची समूह प्रकार के लिए रॉ HTML निम्नानुसार है:

Type: List

Type: Links

Type: Default

जेड को परिवर्तित करें

सीधे जेड में परिवर्तित, प्रत्येक समूह प्रकार निम्नानुसार हैं:

Type: List

Type: Links

Type: Default

सूची ग्रुप मिक्सिंस जोड़ें

जैसा कि हमने नेव कॉम्पोनेन्ट मिक्सिक्स के साथ किया था, हम कई सूची समूह मिक्सिन बनाने जा रहे हैं, जो कि हमारे विभिन्न सूची समूह प्रकारों को बनाने के लिए नेस्टेड किया जा सकता है।

अपने "mixins.jade" फ़ाइल में निम्न जोड़ें:

पहली मिक्सिन, listGroup, हमारे तीन समूह प्रकारों को किसी भी प्रकार से जोड़ता है और एक समूह को तैयार करने के लिए सूची समूह के प्रकार का निर्धारण कर सकता है। यह केवल एक ul तत्व का उत्पादन करेगा यदि सूची प्रकार निर्दिष्ट किया जाता है जब इसे कहा जाता है।

दूसरा मिश्रण, listItem, व्यक्तिगत सूची आइटमों को आउटपुट करता है। यदि प्रकार सूची निर्दिष्ट होती है तो वह प्रत्येक आइटम को li टैग में आउटपुट करेगा, और यदि प्रकार लिंक निर्दिष्ट किया गया है, तो प्रत्येक आइटम को लिंक के रूप में आउटपुट किया जाएगा।

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

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

सूची समूह मिक्सिंस का उपयोग करें

Type: List

एक सूची प्रकार listGroup बनाने के लिए एक समूह के रूप में दी गई list के साथ सूची ग्रुप मिक्सिन का उपयोग करें, और listItem मिक्सिक्स जैसा कि निम्न कोड में देखा गया है:

ऊपर दिए गए कोड उदाहरण की दूसरी पंक्ति के अनुसार, एक सक्रिय स्टाइल रखने के लिए सूची आइटम को सेट करने के लिए तर्क के रूप में सक्रिय शब्द गुजारें।

Type: Links

लिंक प्रकार सूची समूह बनाने के लिए फिर से listGroup का उपयोग मिश्रण समूह, लेकिन इस बार शब्द links एक तर्क के रूप में पास करें।

आप अभी भी listItem मिक्सिन का उपयोग करेंगे, हालांकि यह अब लिंकों को आउटपुट कर देगा ताकि आपको प्रत्येक बार एक तर्क शामिल कर दिया जाए जो उस लिंक के लिए एक गंतव्य सेट करता है। यदि आप active स्टाइल के लिए एक लिंक्ड सूची आइटम सेट कर रहे हैं, तो इस बार शब्द "active" को अपना दूसरा तर्क के रूप में पास करें।

प्रत्येक सूची में listItem मिक्सिन आप प्रत्येक आइटम के लिए शीर्षक और नियमित पाठ सेट करने के लिए listHeading और listText मिक्सिक्स का उपयोग कर सकते हैं:

Type: Default

सूची समूह ग्रुप मिक्सिन के माध्यम से आप कोई भी तर्क नहीं देते हैं, तो डिफ़ॉल्ट प्रकार की listGroup आपको मिलता है। यह लिंक प्रकार सूची समूह के रूप में लगभग समान रूप से उपयोग किया जाता है, इस अंतर के साथ कि listItem मिक्सिन का उपयोग करते समय आपको किसी भी लिंक गंतव्यों को पास करने की आवश्यकता नहीं होती है:

बूट्सवाच थीम

सभी उदाहरणों में आपने अभी तक देखा है कि हम Bootswatch से Flatly थीम का उपयोग कर रहे हैं, जो Bootstrap CDN के माध्यम से सिर कोड में इस कोड के साथ लोड होते हैं:

अंतिम मिश्रण में हम अपनी परियोजना में शामिल होने जा रहे हैं "Bootswatch" मिक्सिन।

यह मिक्सिन आपको विषयों को स्विच करना आसान बनाता है, और बाद में आपको अपनी स्टाइलशीट के URL को अपडेट करने की आवश्यकता भी होनी चाहिए। यह विशेष रूप से उपयोगी है यदि आपको एक से अधिक HTML फ़ाइलों को एक बार अपडेट करने की आवश्यकता है।

बूट्सवाच मिक्सिन जोड़ें

अपने "mixins.jade" फ़ाइल में निम्न कोड जोड़ें:

Bootswatch Mixin का उपयोग करें

अपने मुख्य दस्तावेज़ में, लाइन को प्रतिस्थापित करें जो Bootswatch स्टाइलशीट में लिंक करता है:

अब किसी भी अन्य विषय में स्विच करने के लिए बस शब्द flatly को नए विषय के शीर्षक के साथ स्पष्ट रूप से बदलें। उदाहरण के लिए, Superhero थीम उपयोग पर स्विच करने के लिए:

यह आपकी साइट को तत्काल पुन: विषय देगा:

समेट रहा हु

मुझे आशा है कि आप अपने बूटस्ट्रैप प्रोजेक्ट्स में काम करने के लिए इन सभी जेड स्निपेट्स को मज़ेदार करते हैं, और यह प्रक्रिया में आपको बहुत समय बचाता है।

अगर कुछ भी आप अपनी बूटस्ट्रैप परियोजनाओं में अलग तरीके से करना चाहते हैं, तो जेड मिक्सिक्स की सुंदरता है कि आप उन्हें लिख सकते हैं और अपनी पसंद के किसी भी तरीके से उन्हें कस्टमाइज़ कर सकते हैं।

जेड एक अविश्वसनीय रूप से शक्तिशाली भाषा है, फिर भी यह एक सहज ज्ञान युक्त भाषा है जिसे आप उठा सकते हैं और व्यावहारिक प्रभाव के लिए बहुत जल्दी से उपयोग करना शुरू कर सकते हैं

आगे की पढाई

  • मैं आपको आमंत्रित करता हूं कि आप अपना कोर्स  Top Speed HTML Development With Jade देख सकें, जहां पर आपको हर चीज के माध्यम से चलना चाहिए, आपको अपने बेल्ट में मूलभूत तत्वों और जेड के कुछ सबसे उपयोगी तत्वों को सिर्फ दो घंटे में थोड़ी देर में मिलना होगा।
  • जेड में अधिक जानकारी के लिए http://jade-lang.com पर आधिकारिक साइट देखें
  • और अधिक के लिए बूटस्ट्रैप http://getbootstrap.com पर जाएं
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.