बूटस्ट्रैप धोखा शीट

बूटस्ट्रैप धोखा शीट


यदि आप कुछ कोडिंग कौशल लेने की योजना बनाते हैं, तो बूटस्ट्रैप 4 एक ठोस विकल्प है!

क्यों?

क्योंकि यह फ्रंट-एंड डेवलपमेंट का स्वर्ण मानक है:

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

यदि आप रोल करने के लिए तैयार हैं, तो पीडीएफ में हमारी मुफ्त बूटस्ट्रैप धोखा शीट डाउनलोड करें.

Contents

बूटस्ट्रैप धोखा शीट का पीडीएफ संस्करण

�� बूटस्ट्रैप धोखा शीट (पीडीएफ डाउनलोड करें)

बूटस्ट्रैप चीट शीट (पीएनजी) का भौगोलिक संस्करण

�� बूटस्ट्रैप चीट शीट (पीएनजी डाउनलोड करें)

बूटस्ट्रैप धोखा शीट

बूटस्ट्रैप धोखा शीट

बूटस्ट्रैप क्या है?

बूटस्ट्रैप 4 फ्रंट-एंड वेबसाइट विकास के लिए एक लोकप्रिय ढांचा है.

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

आप पूर्ण प्रलेखन को देख सकते हैं बूटस्ट्रैप की आधिकारिक वेबसाइट.

प्रमुख बूटस्ट्रैप घटक

Bootstrap.css

यह मूल बूटस्ट्रैप पैकेज है जिसकी आपको आवश्यकता होगी डाउनलोड. CSS स्थैतिक जानकारी के लिए एक स्टाइल शीट भाषा है.

Bootstrap.js

एक जावास्क्रिप्ट / jQuery पुस्तकालय वही है जो बूटस्ट्रैप के कुछ घटकों जैसे कि एनीमेशन, स्क्रॉलिंग और अन्तरक्रियाशीलता को शक्ति प्रदान करता है.

  

Glyphicons

ग्लिफ़ टाइपोग्राफी के साथ मौलिक प्रतीक हैं, जैसे कि अंग्रेजी पाउंड प्रतीक (£)। बूटस्ट्रैप में एम्बेडेड ग्लिफ़ आइकन की एक विशाल सूची है जो मुफ्त में उपलब्ध हैं.

बूटस्ट्रैप स्रोत कोड तत्व

बूटस्ट्रैप स्रोत कोड डाउनलोड में स्रोत कम, जावास्क्रिप्ट, और प्रलेखन के साथ-साथ सीएसएस, जावास्क्रिप्ट और फ़ॉन्ट संपत्ति शामिल हैं.

  • कम से/ – सीएसएस के लिए एक प्रीप्रोसेसर स्टाइल शीट जो दोहराए जाने वाले कोडिंग कार्यों को समाप्त करती है
  • सास / – प्रीप्रोसेसर का एक नया संस्करण जो अधिक लोकप्रिय है
  • जे एस / – बस स्रोत कोड जावास्क्रिप्ट को संदर्भित करता है, जो बूटस्ट्रैप घटकों को काम करने की अनुमति देता है
  • फोंट्स/ – ये आइकन फोंट हैं जो डाउनलोड के साथ आते हैं
  • जिले / – एक फ़ोल्डर जिसमें वेबसाइट के विकास में ड्रॉप-इन उपयोग के लिए पूर्वनिर्धारित फाइलें होती हैं

ध्यान दें: बूटस्ट्रैप को बूटस्ट्रैप के जावास्क्रिप्ट प्लगइन्स के लिए jQuery इंस्टॉलेशन की भी आवश्यकता है। jQuery जावास्क्रिप्ट लाइब्रेरी का एक सुविधा संपन्न घटक है, और यह बहुत सारे जावास्क्रिप्ट कोड को सीटी बजाता है और उन्हें उन क्रियाओं में लपेटता है जिन्हें आप एक ही लाइन के साथ पूरा कर सकते हैं।.

प्लग-इन स्थापित करने के लिए:

बूटस्ट्रैप स्क्रीन आकार

तत्त्व.

कुछ उदाहरण निम्नलिखित हैं:

मुख्य
माध्यमिक
सफलता
खतरा
चेतावनी

.ब्रेडक्रम्ब्स

ब्रेडक्रंब नेविगेशनल घटक हैं जो उपयोगकर्ताओं को बिना खोए पेज से पेज पर जाने में मदद करेंगे और उन्हें पिछले पृष्ठ पर वापस पेडल करने का तरीका देंगे.




.बटन

जैसा कि नाम से संकेत मिलता है, .बटन कमांड आपको एक बटन बनाने और स्टाइल करने की सुविधा देता है.

.बटन-प्राथमिक + .बटन माध्यमिक

एक प्राथमिक बटन आमतौर पर एक उपयोगकर्ता कार्रवाई के लिए उपयोग किया जाता है; द्वितीयक बटन का उपयोग तब बंद करने के लिए किया जा सकता है.


.btn प्रकाश, .btn अंधेरे, .btn-प्राथमिक, .btn माध्यमिक, .btn पारदर्शी, .btn सफेद, .btn-चेतावनी, .btn-सफलता, .btn-जानकारी, .btn-खतरा

मानक पूर्वनिर्धारित स्टाइलिंग विकल्पों का उपयोग करके अपने बटन डिज़ाइन करें:








.btn-रूपरेखा

इन स्निपेट नमूनों के बाद एक बटन रूपरेखा चुनें:

.btn-एलजी + .btn-एस.एम.

अपने बटनों का आकार बदलें.


.btn-ब्लॉक

एक ब्लॉक में अपने बटन समूह। सभी समूहीकृत बटन एक माता-पिता की पूरी चौड़ाई को फैलाएंगे.

.सक्रिय

डिफ़ॉल्ट रूप से, सभी बटन दबाए जाने पर प्रदर्शित होंगे - एक अंधेरे सीमा, गहरे रंग की पृष्ठभूमि और इनसेट छाया के साथ - जब सक्रिय हो.

ध्यान दें: आपको इसमें कोई वर्ग जोड़ने की आवश्यकता नहीं है

बटन समूह

प्रत्येक अलग-अलग कोडिंग के बिना समान आकार के बटन का एक समूह बनाने के लिए इस तत्व का उपयोग करें.

.btn-समूह

.btn-समूह खड़ी

बटन के एक ऊर्ध्वाधर समूह को स्टाइल करें:

.btn-समूह (नेस्ट)

आप ड्रॉप-डाउन मेनू के साथ नेस्टेड बटन भी बना सकते हैं.

.btn-उपकरण पट्टी

अधिक जटिल घटक बनाने के लिए बटन समूहों को टूलबार में व्यवस्थित करें। आप अतिरिक्त स्टाइल के लिए अलग-अलग उपयोगिता कक्षाएं लगा सकते हैं.

.btn-समूह-टॉगल

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

पत्ते

कार्ड हेडर / फूटर्स, रंगों और प्रदर्शन विकल्पों के विकल्प के साथ लचीले कंटेनर हैं, और बहुत कुछ। उन्होंने बूटस्ट्रैप 3 से कई पुराने घटकों (पैनल, कुओं और थंबनेल) को बदल दिया.

.कार्ड शरीर

कार्ड का मुख्य तत्व। अपने कार्ड के भीतर एक गद्देदार अनुभाग जोड़ने के लिए इसका उपयोग करें.

आपका भयानक पाठ

.कार्ड शीर्षक

अपने कार्ड के लिए एक शीर्षक कोड। इस में जोड़ें टैग.

बड़ी उपाधि

.कार्ड उपशीर्षक

आप कुछ अतिरिक्त काल्पनिकता के लिए हर कार्ड में उपशीर्षक भी जोड़ सकते हैं.

फैंसी कार्ड उपशीर्षक

.कार्ड-लिंक

अपने कार्ड के अंदर एक लिंक एम्बेड करें। इस वर्ग को ए में जोड़ें टैग.

कुछ मजेदार करने के लिए लिंक

.कार्ड-पाठ

अपने कार्ड में कुछ शब्द जोड़ें। जितने चाहो उतने या कम.

गुलाब लाल होते हैं, बनफ़शा नीले होते हैं, मैं बूटस्ट्रैप सीख रहा हूं, आप क्या?

.कार्ड img टॉप

आप अपने कार्ड पर एक छवि संलग्न कर सकते हैं। यह स्निपेट इसके ऊपर एक जोड़ देगा.

.कार्ड img-नीचे

या आपके पास कार्ड के नीचे के रूप में प्रदर्शित छवि हो सकती है। तुम्हारा कॉल.

.कार्ड img-ओवरले

पृष्ठभूमि के रूप में एक छवि का उपयोग करें और सभी ग्रंथों को ओवरले करें.

.कार्ड हेडर

अपने कार्ड के शीर्ष पर एक कस्टम हेडर रखें। यह सभी शीर्षकों और उपशीर्षक के ऊपर प्रदर्शित किया जाएगा.

.कार्ड-पाद लेख

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

.कार्ड-समूह

कार्ड लेआउट के साथ चारों ओर खेलें और कार्ड का एक समूह बनाएं। एक समूह एकल, संलग्न तत्व के रूप में कार्य करेगा, जिसमें प्रत्येक कार्ड की चौड़ाई और ऊँचाई समान होगी। आप भी आवेदन कर सकते हैं प्रदर्शन: फ्लेक्स; आकार में सुधार करने के लिए.

ध्यान दें: समूह कार्ड लेआउट उत्तरदायी नहीं हैं!

.कार्ड कॉलम

आप अपने कार्ड को मेसनरी जैसे कॉलम में व्यवस्थित कर सकते हैं। यह आपको केवल CSS का उपयोग करके कुछ रचनात्मक पैटर्न बनाने की अनुमति देता है.

ध्यान दें: यदि आपके कार्ड स्तंभों में टूट रहे हैं, तो उन्हें सेट करें प्रदर्शन: इनलाइन-ब्लॉक.

.ताश की गड्डी

समान ऊंचाई और चौड़ाई के साथ गैर-संलग्न कार्ड का एक सेट इकट्ठा करें.

हिंडोला

स्लाइड, टेक्स्ट या चित्रों की एक श्रृंखला के माध्यम से साइकिल चलाने के लिए एक स्लाइड शो सेट करें। सीएसएस 3 डी और कुछ जेएस के साथ बनाया गया। आप चित्र, पाठ या कस्टम मार्कअप जोड़ सकते हैं, साथ ही पिछले / अगले नियंत्रणों को जोड़ या हटा सकते हैं.

हिंडोला स्लाइड - एकल स्लाइड बनाना

.हिंडोला-फीका

अगले एक से पहले एक स्लाइड के लिए इस शांत फीका-आउट प्रभाव जोड़ें.

.हिंडोला-संकेतक

अगले / पिछले के लिए नियंत्रण और समर्थन जोड़ें और स्लाइड नंबर जैसे संकेतक.

.हिंडोला-कैप्शन

प्रत्येक या कई स्लाइड्स में एक कायरता कैप्शन जोड़ें.

संक्षिप्त और प्रत्यायन

पतन एक जावास्क्रिप्ट प्लगइन है जिसका उपयोग आप "पतन" मेनू के तहत सामग्री को छिपाने के लिए कर सकते हैं। ध्वस्त तत्व ट्रिगर होने और इसके विपरीत होने पर इसकी ऊंचाई शून्य से इसकी सामान्य मान को चेतन करेगा.

.ढहने

अपनी सामग्री छिपाएँ.

.ढहना दिखा

ध्वस्त सामग्री प्रदर्शित करें.

.collapse.options

एक बंधनेवाला तत्व के रूप में सामग्री को सक्रिय करें; वैकल्पिक वस्तुओं को स्वीकार करता है.

$ ( '# MyCollapsible')। पतन ({
टॉगल: झूठ
})

.अकॉर्डियन

कार्ड के लिए बंधनेवाला व्यवहार का एक विस्तार। आप इस सुविधा का उपयोग एक समझौते बनाने के लिए कर सकते हैं.

ध्यान दें: आपको एक रैपर के रूप में .acordion का उपयोग करना चाहिए

2 ग्रुप आइटम के साथ अकॉर्डियन स्निपेट उदाहरण

गिर गया

उपयोगकर्ता लिंक की सूची प्रदर्शित करने के लिए प्रासंगिक ओवरले बनाने के लिए इस प्लगइन का उपयोग करें। मेनू बनाने के लिए यह एक आसान विकल्प है। ड्रॉपडाउन के माध्यम से बनाया जाता है Popper.js, एक तृतीय-पक्ष पुस्तकालय का हिस्सा। इस प्रकार, सुनिश्चित करें कि आप शामिल हैं popper.min.js बूटस्ट्रैप के अपने जावास्क्रिप्ट से पहले। या आप सिर्फ उपयोग कर सकते हैं bootstrap.bundle.min.js/ bootstrap.bundle.js. दोनों होते हैं Popper.js.

त्वरित स्टाइल टिप: बूटस्ट्रैप में सभी ड्रॉपडाउन को क्लिक करके टॉगल किया जाता है, न कि हॉवरिंग पर.

.ड्रॉप डाउन

बटन के साथ एक सरल ड्रॉपडाउन मेनू जोड़ें.

.लटकती-टॉगल विभाजित

ड्रॉपडाउन कैरेट के चारों ओर उचित रिक्ति के साथ विभाजित बटन ड्रॉपडाउन बनाएं.

.छोड़ दो

क्या आप जानते हैं कि आप नीचे के बजाय आने वाले मेनू को स्टाइल कर सकते हैं? अब आप करो!

.dropright

बटन के दाईं ओर मेनू प्रदान करें.

.dropleft

... और आप बाईं ओर मेनू भी प्रदर्शित कर सकते हैं.

.लटकती-मद-पाठ

अपने मेनू में गैर-इंटरैक्टिव ड्रॉपडाउन आइटम जोड़ें.

.ड्रॉपडाउन-आइटम अक्षम किया गया

आप किसी भी मेनू आइटम को अक्षम करने का विकल्प चुन सकते हैं.

.लटकती-विभक्त

अतिरिक्त ध्यान आकर्षित करने के लिए मेनू तत्वों के बीच एक सरल विभक्त जोड़ें.

.लटकती-मेनू-सही

संपूर्ण मेनू को दाईं ओर संरेखित करें.

फार्म

आप आसानी से आकर्षक रूपों और कोड कस्टम शैलियों, लेआउट और अतिरिक्त तत्वों का निर्माण कर सकते हैं। बूटस्ट्रैप 4 में, कुछ नए इनपुट नियंत्रण भी प्राप्त हुए जैसे कि संख्या चुनाव, ईमेल सत्यापन, और अन्य, नए कार्यशाला वर्गों का एक समूह.

इसका उदाहरण .फार्म समूह

.प्रपत्र नियंत्रण

इस वर्ग का उपयोग सभी टेक्स्ट फ़ॉर्म नियंत्रण जैसे कि उपयोगकर्ता इनपुट, शीर्षक, आदि को स्टाइल करने के लिए करें.

.प्रपत्र नियंत्रण फ़ाइल

जब भी आपको फ़ॉर्म को फ़ाइल अपलोड करने के विकल्प के साथ उपयोगकर्ता को प्रदान करने की आवश्यकता हो, तो इस वर्ग को जोड़ें.

.प्रपत्र नियंत्रण-एलजी तथा .प्रपत्र नियंत्रण-एस.एम.

जोड़कर अपने प्रपत्र के भीतर एक दृश्य पदानुक्रम बनाएँ .प्रपत्र नियंत्रण-एलजी बड़ा इनपुट क्षेत्र बनाने के लिए और .प्रपत्र नियंत्रण-एस.एम. छोटे बनाने के लिए.


.प्रपत्र नियंत्रण प्लेन टेक्स्ट

सही ढंग से प्रदर्शित करने के लिए इस वर्ग का उपयोग करें आपके रूप में तत्व। यह सही मार्जिन और पैडिंग रखते हुए सादे पाठ के साथ डिफ़ॉल्ट फॉर्म फ़ील्ड स्टाइल को बदल देगा.

.प्रपत्र नियंत्रण दूरी

अपने फॉर्म के लिए क्षैतिज रूप से स्क्रॉल करने योग्य रेंज इनपुट सेट करें.

.प्रपत्र की जांच

अपने फॉर्म में चेकबॉक्स जोड़ें.

ध्यान दें: आप चेकबॉक्स का उपयोग करने के बजाय रेडियो बटन भी जोड़ सकते हैं फार्म चेक-इनपुट type = "रेडियो".

.फार्म चेक-इनलाइन

चेकबॉक्स की एक क्षैतिज सूची बनाएं.

.सिफ़ पढ़िये बूलियन विशेषता

निर्दिष्ट करें कि इनपुट का एक निश्चित रूप केवल-पढ़ने के लिए है। यह इनपुट के मूल्य को संशोधित करने से रोकेगा.

कस्टम प्रपत्र

बूटस्ट्रैप 4 में कई अनुकूलित रूप तत्व हैं जो ब्राउज़र डिफॉल्ट को प्रतिस्थापित करते हैं.

.कस्टम चेकबॉक्स

जैसा कि नाम से ही स्पष्ट है, आप अपने फॉर्म के लिए एक कस्टम चेकबॉक्स बना सकते हैं.

.कस्टम रेडियो

... और आप एक कस्टम रेडियो भी शैली कर सकते हैं!

.कस्टम स्विच

अंत में, आप एक स्टाइलिश कस्टम स्विच भी बना सकते हैं.

.कस्टम का चयन करें

एक कस्टम चयन मेनू जोड़ने के लिए इस कमांड का उपयोग करें.

.आयात कर की फ़ाइल

उपयोगकर्ता फ़ाइल अपलोड को अनुकूलित करें। ऐसा करने के लिए, जोड़ें .आयात कर की फ़ाइल चारों ओर कक्षा इनपुट साथ में type = "फाइल". फिर जोड़ें .कस्टम फ़ाइल-इनपुट यह करने के लिए.

.कस्टम रेंज

एक कस्टम रेंज मेनू डिज़ाइन करें.




इनपुट ग्रुप

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

.input.group - मूल उदाहरण

पहला और आखरी नाम

.इनपुट-समूह-आगे जोड़ते

इनपुट के सामने अतिरिक्त पाठ प्रदान करें.

@

.इनपुट-समूह-संलग्न

... या इनपुट के पीछे उन्हें सूचीबद्ध करें.

@ example.com

.इनपुट-समूह-पाठ

निर्दिष्ट ग्रंथों की शैली के लिए इस वर्ग का उपयोग करें.

.00

jumbotron

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

आप किसी भी HTML और अन्य बूटस्ट्रैप कक्षाओं को एक जुमब्रोट्रॉन के अंदर जोड़ सकते हैं.

.jumbotron

अरे, कमाल कर दिया आपने!

यह एक साधारण हीरो यूनिट है, जिसमें दिखाया गया है कि कोई भी वास्तविक हीरो हो सकता है!.


टाइपोग्राफी और के लिए उपयोगिता वर्गों का उपयोग करें अंतर

कार्रवाई के लिए तैयार

.jumbotron-द्रव

थोड़ा-थोड़ा जंबोट्रॉन के रूप को बदलता है और गोल कोनों के बिना इसे पूर्ण पृष्ठ चौड़ा बनाता है.

द्रव जंबोट्रॉन

मैं पृष्ठ पर संपूर्ण क्षैतिज स्थान ले रहा हूं.

सूची समूह

स्टाइल और लेआउट के बहुत सारे विकल्पों के साथ, सामग्री की एक श्रृंखला प्रदर्शित करने के लिए सूची समूहों का उपयोग करें.

.सूची-समूह - उदाहरण

कई मदों के साथ एक मूल सूची समूह बनाएं.

  • दूध
  • चाय
  • टॉफी

.सूची-समूह-आइटम सक्रिय

सूची में वर्तमान सक्रिय चयन को उजागर करने के लिए .active वर्ग जोड़ें.

  • मैं यह चाहता हूँ
  • यह नहीं
  • या यह

.सूची-समूह-आइटम अक्षम किया गया

दिखाएँ कि सूची में से एक आइटम उपलब्ध / अक्षम नहीं है। कुछ सक्रिय तत्वों (जैसे लिंक) को पूरी तरह से निष्क्रिय होने के लिए .disable के ऊपर कस्टम जावास्क्रिप्ट की आवश्यकता होगी.

  • यह उत्पाद भण्डार में नहीं है
  • लेकिन हमारे पास यह है!
  • और यह मस्त चीज़ भी

.सूची-समूह-आइटम कार्रवाई

अलग-अलग वस्तुओं में स्टाइलिंग प्रभाव (अक्षम, होवर, सक्रिय, आदि) जोड़कर अपनी सूची में अधिक अन्तरक्रियाशीलता जोड़ें.

आपके लिए हमारी प्रमुख पसंद! कुछ अच्छे प्रस्ताव एक विकल्प भी सूची में कुछ और और यह उपलब्ध नहीं है

.सूची-समूह फ्लश

सीमाओं और गोल कोनों को हटाकर हमारी सूची का रूप बदलें। सभी वस्तुओं को किनारे-किनारे रखा जाएगा.

  • चाय लेट्टे कॉफ़ी
  • मटका लेट
  • अर्ल ग्रे चाय
  • वेनिला रूइबोस
  • दोस्त

.सूची-समूह-क्षैतिज

आप अपनी सूची को लंबवत के बजाय क्षैतिज रूप से भी सेट कर सकते हैं। आप अतिरिक्त समूह को एक निश्चित ब्रेकपॉइंट की न्यूनतम चौड़ाई का उपयोग करके क्षैतिज बनने के लिए कोड कर सकते हैं .सूची-समूह-horizontal- {एसएम | md | एलजी | xl}.

ध्यान दें: आप एक ही समय में फ्लश सूची समूहों के साथ क्षैतिज सूची समूहों का उपयोग नहीं कर सकते.

  • ट्रेनें
  • विमान
  • रॉकेट्स

.सूची-समूह-आइटम (रोशनी, गहरा प्राथमिक, माध्यमिक, पारदर्शक, सफेद, चेतावनी, सफलता, जानकारी, खतरा)

व्यक्तिगत सूची आइटम पर मानक शैलियों को लागू करें.

  • मेरे पास जितने भी रंग हैं
  • हल्का नीला
  • हल्का भूरा
  • हरा
  • लाल
  • पीला
  • टील
  • सफेद
  • धूसर

मीडिया वस्तु

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

.मीडिया

उपयोग .मीडिया लपेटकर और .मीडिया शरीर एक एकल मीडिया ऑब्जेक्ट बनाने के लिए सामग्री के आसपास। यहाँ एक शीर्षक के लिए एक नमूना है.

कुछ अच्छी प्लेसहोल्डर छवि
आपका शीर्षासन
एक महत्वपूर्ण संदेश जिसे आप दुनिया के साथ साझा करना चाहते हैं!

.मीडिया शरीर

एक वर्ग निर्दिष्ट करता है कि आपकी वस्तु के अंदर क्या होगा। आप अपनी सामग्री के लिए विभिन्न संरेखण कोड कर सकते हैं। डिफ़ॉल्ट शीर्ष है, लेकिन आप मध्य या अंत में संरेखित कर सकते हैं.

...
शीर्ष-संरेखित मीडिया

ऊपर चित्र का वर्णन करने वाले ग्रंथों को पढ़ें

नेस्टेड मीडिया

आपके पास एक से अधिक मीडिया ऑब्जेक्ट को शामिल करने का विकल्प भी है। ऑब्जेक्ट्स को बाएं मार्जिन पर शुरू किया गया है और प्रत्येक नई ऑब्जेक्ट को टैब किया गया है.

यहाँ घोंसले के शिकार के लिए एक स्निपेट है.

सामान्य प्लेसहोल्डर छवि
मीडिया हेडिंग
यहाँ कुछ पाठ है.
सामान्य प्लेसहोल्डर छवि
एक और मीडिया हेडिंग
कुछ और ग्रंथ बता रहे हैं कि यहाँ क्या हो रहा है.

नव

.एनएवी एक बेस क्लास है जो स्टाइल ओवरराइड के साथ आपको सभी प्रकार के नेविगेशन घटकों को बनाने में मदद करता है। आपके पास अनुकूलन के लिए बहुत सारे विकल्प हैं.

.एनएवी उदाहरण

.नव-आइटम

नेविगेशन मेनू में एक नया आइटम निर्दिष्ट करने के लिए एक वर्ग.

.नौसेना औचित्य-सामग्री-केंद्र

अपने नौसेना को केंद्र में क्षैतिज रूप से संरेखित करें.

.नौसेना औचित्य-सामग्री-अंत

या अपनी सामग्री को सही बताएं.

.नव-टैब

अपने नेविगेशन मेनू में कुछ शांत टैब जोड़ें.

ध्यान दें: आपको ज़रूरत होगी टैब जावास्क्रिप्ट प्लगइन स्थापित.

.नव-गोलियाँ

वैकल्पिक रूप से, आप मेनू घटकों को गोलियों के रूप में स्टाइल कर सकते हैं.

.नव-न्यायोचित

जोड़कर सभी टैब / गोलियों की चौड़ाई बराबर करें .नव-न्यायोचित सेवा .एनएवी, .नव-टैब, या .नव-गोलियाँ.

न्यायोचित नव तत्व उदाहरण

.नव-भरण

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

नेवबार

नवबार ब्रांडिंग, फ़ॉर्म, लिंक और बहुत कुछ के लिए बहुत सारे लचीलेपन और समर्थन के साथ एक उत्तरदायी नेविगेशन हेडर है.

NavBar - पृष्ठ के शीर्ष पर बेसिक नेविगेशन हेडर

मेरा पहला नवाब


.नेवबार-ब्रांड

नवबर कुछ उप-घटकों के समर्थन से पहले से सुसज्जित हैं। यह तत्व आपके पाठ को अधिक बाहर खड़ा कर देगा। यह एक उत्पाद या कंपनी के नाम को समायोजित करने के लिए पूर्व-डिज़ाइन किया गया था.

आपके संगठन का नाम

.नेवबार-पाठ

लंबवत और क्षैतिज रिक्ति को केंद्रित पाठ स्ट्रिंग जोड़ने के लिए इस वर्ग का उपयोग करें.


मैं एक इनलाइन तत्व के साथ एक नवबार पाठ हूं

.नेवबार-विस्तार -sml -mdl -lgl -xl)

उत्तरदायी ढहने को सक्षम करें.


नेवबार

.नेवबार-Toggler

प्रोग्राम अलग नेविगेशन टॉगलिंग व्यवहार (उदाहरण के लिए आइटम को सक्रिय रखें या उन्हें संक्षिप्त करें).


नेवबार


.फार्म इनलाइन

नेवी हेडिंग में एक फॉर्म (उदाहरण खोज पट्टी) रखें.

.collapse.navbar पतन

पैरेंट ब्रेकपॉइंट द्वारा नावबार सामग्री को समूह और पतन.

नेवबार



.नौबत तय-टॉप

एक निश्चित नावबार को प्राथमिक और गहरे रंग में सेट करें.

निश्चित शीर्ष

बूटस्ट्रैप मोडल (प्लगइन)

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

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

मोडल उदाहरण

.मॉडल-संवाद केंद्रित

आप सभी सामग्री को लंबवत रूप से केन्द्रित करना चुन सकते हैं.

.मॉडल-संवाद-स्क्रॉल

जब आपको अधिक सामग्री को मोडल (उदा। लंबी गोपनीयता नीति) में पैक करने की आवश्यकता होती है, तो आप इसे इस पृष्ठ में स्वतंत्र रूप से स्क्रॉल करने के लिए इस वर्ग को जोड़ सकते हैं.

.मोडल फीका

सामग्री के लिए सक्षम लुप्त होती.

.मॉडल-एलजी, .मॉडल-एस.एम., .मॉडल-XL

आप अपने मॉडल्स के आकार को भी समायोजित कर सकते हैं.






ध्यान दें: बूटस्ट्रैप इस घटक के सभी घटकों का डेमो प्रस्तुत करता है मोडल पेज. वे देखने लायक हैं.

Paginators

अगर आपको पता है कि HTML, पेजिनेटर आपके लिए कोई नई बात नहीं है। बूटस्ट्रैप के साथ आपके पास उन्हें स्टाइल करने के लिए कई विकल्प हैं.

.पृष्ठ पर अंक लगाना - मूल अंकन उदाहरण

  • पिछला
  • 1
  • 2
  • 3
  • आगे

.पृष्ठ-आइटम अक्षम किया गया

आप पृष्ठांकन तत्वों में से एक या कई को अक्षम करना चुन सकते हैं.

  • पिछला
  • 1
  • 2 (वर्तमान)
  • 3
  • आगे

.पेज-आइटम सक्रिय

सक्रिय वर्तमान चरण को नीले रंग के साथ हाइलाइट करके इंगित करता है.

  • पिछला
  • 1
  • 2 (वर्तमान)
  • 3
  • आगे

.पृष्ठांकन-एलजी

अपने पेजिनेशन को बड़ा और bolder बनाएं.

  • पिछला
  • 1
  • 2
  • 3
  • आगे

.पृष्ठांकन-एस.एम.

या इसे छोटा और आकार में कम दिखाई देता है.

  • पिछला
  • 1
  • 2
  • 3
  • आगे

पोपोवेर्स

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

आपके शुरू होने से पहले जानने योग्य बातें

  • आपको विशेषता को जोड़ना होगा, डेटा-टॉगल = "पॉपओवर" एक तत्व के लिए एक पॉपओवर बनाने के लिए.
  • शीर्ष लेख को निर्दिष्ट करने के लिए आपको शीर्षक विशेषता का उपयोग करना चाहिए.
  • उपयोग डेटा-सामग्री पॉपओवर के शरीर में किस सामग्री को प्रदर्शित किया जाना है, यह निर्दिष्ट करने की विशेषता.
    टॉगल पॉपओवर
  • पॉपुलेटर्स को इनिशियलाइज़ करने के लिए आपको jQuery का उपयोग करना होगा - पॉप खत्म().

पॉप खत्म

यहां वह कोड है जो आपके पृष्ठ पर पॉपओवर को सक्षम करेगा:

आपकी आबादी का स्थान - ऊपर, नीचे, बाएँ या दाएँ

अपनी आबादी के लिए चार पदों में से एक निर्दिष्ट करें.

ऊपर चबूतरे

दाईं ओर आबादी

नीचे चबूतरे

बाईं ओर पॉपओवर

कंटेनर पॉपओवर बनाना

जब भी आपको लगे कि एक कस्टम कन्टेंट है, तो मूल तत्व पर कुछ स्टाइल उसके लुक को गड़बड़ कर सकते हैं। कंटेनर विशेषता जोड़ने से मूल तत्व के भीतर पॉपओवर का HTML "लपेट" जाएगा.

$ (फ़ंक्शन () {
$ ( '। उदाहरण-पॉपओवर')। पॉपओवर ({
कंटेनर: 'शरीर'
})
})

.पॉपओवर-खारिज

जब वे दूसरी बार तत्व पर क्लिक करते हैं तो उपयोगकर्ताओं को एक पॉपओवर बंद करने का विकल्प प्रदान करते हैं। जब उपयोगकर्ता तत्व के बाहर भी क्लिक करता है तो आप पॉपओवर को खारिज करने की व्यवस्था कर सकते हैं: उपयोग करें डेटा-ट्रिगर = "ध्यान" गुण.

डिफ़ॉल्ट रूप से, जब आप तत्व पर फिर से क्लिक करते हैं तो पॉपओवर बंद हो जाता है। हालाँकि, आप उपयोग कर सकते हैं डेटा-ट्रिगर = "ध्यान" गुण जो तत्व के बाहर क्लिक करने पर पॉपओवर को बंद कर देगा:

मुझे क्लिक करें

प्रगति

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

.प्रगति

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

.प्रगति पट्टी

वर्तमान प्रगति को निर्दिष्ट करने के लिए इस कमांड का उपयोग करें.

.प्रगति-बार धारीदार

प्रगति पट्टी अनुभाग में कुछ धारियों को जोड़ें.

.प्रगति बार एनिमेटेड

अब उन पट्टियों को घुमाएँ, नाई की पोल शैली.

एकाधिक प्रगति बार्स जोड़ें

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

Scrollspy

एक आसान प्लगइन आप एक उपयोगकर्ता को यह बताने के लिए सूची समूहों में नौ लिंक या आइटम को हाइलाइट करने के लिए उपयोग कर सकते हैं जहां वे वर्तमान में एक पृष्ठ पर हैं.

बेसिक बूटस्ट्रैप स्क्रॉलपीसी का उदाहरण


आइटम एक आइटम दो हाँ, यह तीन है

आइटम एक

और इसके बारे में कुछ सामग्री..


आइटम दो

और एक और व्याख्या.


हाँ, यह तीन है

किसने अनुमान लगाया होगा? :).

थोड़ा और आगे बढ़ने दें.

डेटा-जासूस = "पुस्तक" + डेटा-लक्ष्य

स्क्रॉलबार को टॉपबार नेविगेशन में सक्षम करने के लिए, जोड़ें डेटा-जासूस = "पुस्तक" आप जिस तत्व पर नजर रखना चाहते हैं, उसकी विशेषता। (ज्यादातर मामलों में, आपका लक्ष्य है ).

असाइन करें डेटा-लक्ष्य में मूल तत्व को विशेषता .एनएवी घटक, ताकि हाइलाइटिंग के लिए नेवी लिंक लक्षित हो.


...

...

डेटा ऑफसेट

यह स्क्रॉल की कुछ स्थिति को निर्दिष्ट करता है और इसे समायोजित किया जा सकता है। डिफ़ॉल्ट 10 पिक्सेल है.

@मोटी

...

@mdo

...

एक

...

दो

...

तीन

...

जावास्क्रिप्ट के माध्यम से स्क्रॉलपी को कॉल करना

आपके पास जावास्क्रिप्ट का उपयोग करके स्क्रॉलपीस को सक्षम करने के लिए कई तरीके भी हैं। ऐसा करने के लिए, अपने सीएसएस में, बाद में निम्न कमांड जोड़ें स्थिति: रिश्तेदार;

$ ('बॉडी')। स्क्रॉलस्पी ({लक्ष्य: '# नवबार-उदाहरण'})

.Scrollspy ( 'ताज़ा')

जब आप DOM से तत्वों को जोड़ रहे हैं या हटा रहे हैं ... और स्क्रॉलपीस का उपयोग करने का प्रयास करते हैं, तो आपको अगली बार का उपयोग करके ताज़ा विधि को कॉल करना होगा:

.Scrollspy ( 'निपटाने')

तत्व की स्क्रैपी हटाने के लिए इस विधि का उपयोग करें.

activate.bs.scrollspy

जब भी स्क्रोलसी किसी नए आइटम को सक्रिय करता है, तो यह घटना स्क्रॉल तत्व पर फायर करती है.

$ ('[डेटा-स्पाई = "स्क्रॉल"]')। ('' active.bs.scrollspy '' फंक्शन ()
// चलो इसे करते हैं…
})

स्पिनर

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

.स्पिनर सीमा

एक काले और सफेद लोडिंग संकेतक का निर्माण करें.

लोड हो रहा है...

.स्पिनर सीमा-प्राथमिक -secondary, -light, -dark, -warning, -success, -info, -danger)

या मानक बूटस्ट्रैप स्टाइलिंग विशेषताओं का उपयोग करके एक रंगीन सीमा जोड़ें.

लोड हो रहा है...
लोड हो रहा है...
लोड हो रहा है...
लोड हो रहा है...
लोड हो रहा है...
लोड हो रहा है...
लोड हो रहा है...
लोड हो रहा है...

बढ़ते हुए स्पिनर

एक स्पंदनशील स्पिनर बनाएं जो आकार में बढ़ता और घटता है। कताई स्पिनर के लिए एक कायरता विकल्प। फिर से, इसे कई रंगों में डिज़ाइन किया जा सकता है.

लोड हो रहा है...

तालिका

बूटस्ट्रैप तालिकाओं को बनाने का एक आसान-आसान तरीका प्रदान करता है। आधार वर्ग जोड़ें .तालिका एक को

और अतिरिक्त कस्टम शैलियों पर जोड़ें.

ध्यान दें: सभी तालिका शैलियों को बूटस्ट्रैप 4 में विरासत में मिला है। प्रत्येक नेस्टेड तालिका को मूल के रूप में स्टाइल किया जाएगा.

.तालिका - उदाहरण

# प्रथम अंतिम हैंडल
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटी
3 लैरी चिड़िया, पक्षी @ट्विटर

.टेबल अंधेरा

एक अंधेरे पृष्ठभूमि और प्रकाश ग्रंथों के साथ एक तालिका बनाएं.

# उपनाम समर्थक हैंडल
1 Minimark 5000 @minik
2 Gigi_B 24K @gig
3 पक्षी 50K @bi) RDI

.thead प्रकाश तथा .धागे की अंधेरा

आप अंधेरे / प्रकाश विशेषता का उपयोग करके तालिका प्रविष्टियों में से केवल एक को हाइलाइट करने के लिए भी चुन सकते हैं.

# प्रकरण नाम रेटिंग
1 # 4 नई आशा 10/10
2 # 6 जेडी की वापसी 9/10
3 # 9 स्काईवॉकर का उदय 6/10
# प्रकरण शीर्षक Raiting
1 निशान ओटो @mdo
2 # 2 सिथ का बदला 7/10
3 # 5 साम्राज्य का जवाबी हमला 10/10

.तालिका धारीदार

इस वर्ग को भीतर जोड़ें

अपनी मेज ज़ेबरा-पट्टी बनाने के लिए.
# पहला नाम उपनाम
1 डार्थ Vader
2 रे बस रे

.टेबल-bordered

सभी सेल और टेबल साइड के लिए स्टाइल बॉर्डर.

# पहला नाम उपनाम
1 लील किम
2 कान्ये पश्चिम

.टेबल सीमारहित

अपनी तालिका को एक न्यूनतर स्वभाव देने के लिए सीमाओं को खोदें.

# पहला नाम उपनाम
1 इंडियाना जोन्स
2 हान एकल

.टेबल मंडराना

तालिका पंक्तियों पर एक हॉवर स्थिति जोड़ें.

# पहला नाम उपनाम
1 निशान जुड़वां
2 हेनरी जेम्स

.टेबल एस.एम.

अपनी मेज को छोटा करें। यह क्लास सेल पैडिंग को आधे में काट देगी.

# पहला नाम उपनाम
1 एमी शराब घर
2 कर्ट कोबेन

.टेबल-सक्रिय -प्रतिमा, -डॉफ़ॉल्ट, -सेकंडरी, -सफल, -डैंगर, -वरिंग, -इनफो, -लाइट, -डार्क)

अलग-अलग रंगों में व्यक्तिगत तालिका पंक्तियों को पेंट करें.

...
...
...
...
...
...
...
...
...

टोस्ट

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

.टोस्ट - उदाहरण

टूलटिप्स

टूलटिप छोटे पाठ पॉप-अप हैं जो उपयोगकर्ताओं को बटन या किसी अन्य वेबसाइट तत्व पर कुछ अतिरिक्त संदर्भ प्रदान करते हैं। बूटस्ट्रैप 4 में, टूलटिप्स पोजिशनिंग के लिए Popper.js लाइब्रेरी का उपयोग करते हैं। यही कारण है कि उनका उपयोग करने के लिए आपको शामिल करना चाहिए popper.min.js इससे पहले bootstrap.js या उपयोग करें bootstrap.bundle.min.js/bootstrap.bundle.js.

टूलटिप्स सक्षम करें

$ (फ़ंक्शन () {$ ('[डेटा-टॉगल = "टूलटिप"]')। टूलटिप ()}

टूलटिप्स संरेखित करें

शीर्ष पर टूलटिप

टूलटिप दाईं ओर

तल पर टूलटिप

बाईं ओर टूलटिप

अधिक उन्नत अनुकूलन और जावास्क्रिप्ट विधियों के लिए, की जाँच करें आधिकारिक टूलटिप प्रलेखन.

बूटस्ट्रैप स्टाइलिंग आवश्यक

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map