बूटस्ट्रैप लेआउट रुझान, उपकरण और चौखटे को अनुकूलित करना
बूटस्ट्रैप वर्तमान में है नंबर एक फ्रंट-एंड फ्रेमवर्क और आसानी से लेआउट बनाने का सबसे तेज़ तरीका. यह वर्षों से है और तीसरे पक्ष के डेवलपर्स ने अपने संसाधनों को ऑनलाइन प्रकाशित किया है। इन संसाधनों से लेकर मुफ्त थीम सेवा मेरे विस्तृत प्लगइन्स और रूपरेखा.
इस लेख में, मैं इनमें से एक मुट्ठी साझा करना चाहूंगा संसाधनों और सर्वोत्तम प्रथाओं जो डेवलपर्स बूटस्ट्रैप के साथ आगे जाना चाहते हैं.
आल थे इस पोस्ट में संसाधन निःशुल्क हैं, तो आप उन्हें उपयोग कर सकते हैं हालांकि आप फिट दिखते हैं। यहां तक कि अगर आपने कभी बूटस्ट्रैप का उपयोग नहीं किया है, तो आप यहां कुछ ऐसा ढूंढना सुनिश्चित करेंगे जो आपको आरंभ करने में मदद करेगा.
बूटस्ट्रैप के साथ restyling
डिफ़ॉल्ट बूटस्ट्रैप लाइब्रेरी इसके साथ आती है खुद का अनूठा डिजाइन यह शानदार लग रहा है। यह व्यापक रूप से वेब पर जाना जाता है और आप आसानी से बता सकते हैं कि वेबसाइट कब है पारंपरिक बूटस्ट्रैप तत्वों का उपयोग करना.
लेकिन, आप भी कर सकते हैं अपने आप को इन तत्वों को पुनर्स्थापित करें अपने लेआउट के लिए नींव के रूप में बूटस्ट्रैप के कोड का उपयोग करें.
वहां कुछ अलग तरीके तुम यह केर सकते हो:
- डिफ़ॉल्ट को अधिलेखित करने के लिए अपनी खुद की स्टाइलशीट जोड़ें.
- बूटस्ट्रैप के आउटपुट को कस्टमाइज़ करें, ताकि आप केवल उन तत्वों को प्राप्त कर सकें जो आप चाहते हैं.
- ऐड-ऑन और प्लगइन्स / थीम के साथ संयोजन करें.
अंतिम विकल्प सबसे आम है और यह एक कारण है कि बूटस्ट्रैप इतनी तेजी से बढ़ा है.
दी मैं भी उनका बहुत बड़ा प्रशंसक हूं अनुकूलित उपकरण क्योंकि यह पूरी तरह से स्वतंत्र है और आपको इतना नियंत्रण देता है आप किन सुविधाओं का उपयोग करना चाहते हैं.
तृतीय-पक्ष डेवलपर्स द्वारा बनाए गए बूटस्ट्रैप 3/4 के लिए बहुत सारे संसाधन हैं, इसलिए यह पहले से कहीं ज्यादा आसान है अपने खुद के अनूठे बूटस्ट्रैप लेआउट बनाएँ ज्यादा कोड लिखे बिना.
प्लगइन्स और ऐड-ऑन
चूंकि बूटस्ट्रैप एक विशाल जावास्क्रिप्ट पुस्तकालय के साथ आता है, इसलिए यह काफी आसान है जावास्क्रिप्ट सुविधाओं का विस्तार करें. और डेवलपर्स ने निश्चित रूप से अपने स्वयं के प्लगइन्स के साथ ऐसा किया है, कई मुफ्त ऑनलाइन जारी किए गए हैं.
ये मेरे पसंदीदा हैं मूल रूप से बूटस्ट्रैप का समर्थन करें. उनमें से कईं jQuery पर चलाएँ, इसलिए वे अनुकूलित करने में भी आसान हैं यदि आप jQuery लाइब्रेरी के आसपास अपना रास्ता जानते हैं.
प्रपत्र सत्यापनकर्ता
पहले मेरा पसंदीदा है फॉर्म वेलिडेशन प्लगइन, फॉर्म वैलिडेटर. यह jQuery पर चलता है और यह फ्रंटएंड फ्रेमवर्क के पूरे ढेर का समर्थन करता है: बूटस्ट्रैप, फाउंडेशन, प्योर, यूकीट और अन्य.
आप ऐसा कर सकते हैं मैन्युअल रूप से 51 सत्यापनकर्ताओं की किसी भी संख्या को जोड़ दें आपकी साइट पर किसी भी रूप में। इसका मतलब है कि आगंतुकों को सामग्री जमा करने से पहले उन सत्यापन आवश्यकताओं को पूरा करना होगा.
कई संपर्क फ़ॉर्म इन सत्यापनकर्ताओं का उपयोग करते हैं ईमेल पते की आवश्यकता है. लेकिन, आप उन्हें छवि अपलोड या पासवर्ड के लिए भी उपयोग कर सकते हैं, बहुत कुछ आपके बूटस्ट्रैप-दिल की इच्छाओं के लिए.
डिटाइम पिकर
तारीख लेने वाले खुद को कोड करने के लिए एक बहुत बड़ा दर्द भी है। कई रूप सिर्फ दिन / महीने / वर्ष की सेटिंग के लिए ड्रॉपडाउन मेनू का उपयोग करते हैं लेकिन आप इसका उपयोग भी कर सकते हैं बूटस्ट्रैप तिथि पिकर प्लगइन अपने आप को परेशानी से बचाने के लिए.
यह पूरी तरह से ओपन-सोर्स है और बूटस्ट्रैप 3.x लाइब्रेरी पर चलता है. आप इसे नोटिस भी करेंगे दोनों तारीख का समर्थन करता है और समय एक और jQuery प्लगइन का उपयोग करके, Moment.js.
कुल मिलाकर, यह लाइब्रेरी काम करने की तारीख लेने वाले को सक्रिय करने के लिए शानदार है। यह करता है बहुत सारी निर्भरताएँ लेकिन, शुक्र है, इसे काम करने के लिए आपको बहुत कोड लिखने की आवश्यकता नहीं होगी.
स्टार रेटिंग
यहाँ एक और अच्छी सुविधा है स्टार रेटिंग वेब पर। आप ऐसा कर सकते हैं एक-से-पांच स्टार रेटिंग को जोड़ दें जावास्क्रिप्ट व्यवहार के लिए बूटस्ट्रैप लाइब्रेरी का उपयोग करके आपकी साइट पर कहीं भी.
जब उपयोगकर्ता इन तारों पर मंडराता है, तो प्रदर्शन अपने कर्सर स्थिति के आधार पर रेटिंग में परिवर्तन करता है। फिर, एक क्लिक के साथ, उपयोगकर्ता अपना वोट डालते हैं और एक स्टार रेटिंग सेट करते हैं, हाफ स्टार रेटिंग सहित.
यह प्लगइन निश्चित रूप से है स्थापित करने के लिए जटिल है क्योंकि, तुम कर सकते हो बहुत सारी डिफ़ॉल्ट सेटिंग्स बदलें अधिक उन्नत तकनीकों के लिए। लेकिन, आप एक साधारण लाइव डेमो देख सकते हैं यदि यह स्टार रेटिंग प्लगइन आपकी साइट के साथ फिट बैठता है.
WATable
बूटस्ट्रैप इसके साथ आता है खुद की टेबल लेआउट शैली दृश्यपटल पर सारणीबद्ध डेटा प्रदर्शित करने के लिए। लेकिन, के साथ वॉटेबल प्लगइन, आप अपने बूटस्ट्रैप तालिकाओं में अतिरिक्त सुविधाओं का एक पूरा गुच्छा जोड़ सकते हैं.
यह वहाँ से बाहर सबसे विस्तृत jQuery प्लगइन्स में से एक है और ये सिर्फ कुछ विशेषताएं हैं जिन्हें आप जोड़ सकते हैं:
- कस्टम पृष्ठ पर अंक लगाना.
- स्तंभ की छँटाई.
- डेटा फ़िल्टरिंग.
- तालिका एनीमेशन प्रभाव.
- संपूर्ण पंक्तियों का चयन करें.
वातबल के रूप में वर्णित है टेबल प्लग के स्विस आर्मी चाकू और मुझे इस विवरण से सहमत होना होगा। यह तथ्य कि यह बूटस्ट्रैप का समर्थन करता है, केक पर सिर्फ आइसिंग है.
ये मेरे कुछ पसंदीदा प्लगइन्स थे, लेकिन वहाँ बहुत सारे लोग हैं। यदि आप उत्सुक हैं तो आप इस पृष्ठ पर और भी अधिक ब्राउज़ कर सकते हैं.
बूटस्ट्रैप रूपरेखा
बूटस्ट्रैप वास्तव में एक बड़ी रूपरेखा है क्योंकि यह उपयोगकर्ताओं को देता है डिफ़ॉल्ट HTML और सीएसएस शैलियों को अनुकूलित करें कुछ वर्गों के साथ.
लेकिन, डिवेलपर्स ने डिफॉल्ट बूटस्ट्रैप लाइब्रेरी को अपना लिया है और इससे भी बड़े फ्रेमवर्क बनाने के लिए अपने स्टाइल को जोड़ा है विषयों की तरह काम करते हैं, इसलिए आपको खरोंच से बूटस्ट्रैप को पुनर्स्थापित करने की आवश्यकता नहीं है.
शुक्र है, वे सभी स्वतंत्र हैं और वे सभी डिफ़ॉल्ट बूटस्ट्रैप कक्षाओं में चलते हैं.
Bootflat
शायद सबसे प्रसिद्ध बूटस्ट्रैप फ्रेमवर्क है बूटफ्लट यूआई उस फ्लैट डिजाइन की प्रवृत्ति का अनुसरण करता है.
इसके साथ काम करता है सभी डिफ़ॉल्ट बूटस्ट्रैप सुविधाएँ, सभी जावास्क्रिप्ट घटकों सहित। प्रमुख अंतर अधिक हैं डिजाइन और संरचना जहां पेज तत्व बूटस्ट्रैप की ढाल शैलियों से दूर जाने के लिए फ्लैट रंग योजनाओं का उपयोग करते हैं.
Bootflat अति प्रयोग नहीं किया गया है बहुत अधिक है, इसलिए आप अपनी साइट के लिए एक विशिष्ट स्वरूप बनाने के लिए किसी भी लैंडिंग पृष्ठ या मुखपृष्ठ पर इस ढांचे को जोड़ सकते हैं.
यह 100% मुफ़्त है और यहां तक कि एक के साथ भी आता है रंग चयनकर्ता, तो आप अपने लेआउट से मेल खाने के लिए फ्लैट रंग योजनाएं पा सकते हैं.
शिट डन हो जाओ
इस आश्चर्यजनक रूप से UI किट कुंद बूटस्ट्रैप 3 लाइब्रेरी के ऊपर भी बनाता है और इसे GitHub पर मुफ्त में जारी किया गया है.
Get Shit Done क्रिएटिव टिम में टीम से आते हैं जहां वे कुछ प्रीमियम संसाधन बेचते हैं। इस विशिष्ट UI किट में एक प्रो संस्करण है लेकिन यह बिल्कुल भी आवश्यक नहीं है.
ओपन-सोर्स संस्करण में सभी के लिए पर्याप्त से अधिक है और आप इसे देख सकते हैं लाइव डेमो यह देखने के लिए कि यह ब्राउज़र में कैसा दिखता है.
बूटस्ट्रैप सामग्री डिजाइन
एक और लोकप्रिय डिजाइन प्रवृत्ति है Google की सामग्री का डिज़ाइन. यह एक डिज़ाइन भाषा है जो मूल रूप से एंड्रॉइड ऐप डिजाइनरों के लिए बनाई गई है लेकिन तब से है वेब पर फैल गया और UI / UX डिजाइनरों से बहुत समर्थन प्राप्त किया.
यह अविश्वसनीय बूटस्ट्रैप सामग्री ढांचा सामग्री डिजाइन सुविधाओं का उपयोग करता है एक कस्टम डिजाइन शैली बनाएँ बूटस्ट्रैप की लाइब्रेरी से बाहर.
डिफ़ॉल्ट रूप से, यह बूटस्ट्रैप 3 में सब कुछ का समर्थन करता है और वर्तमान में बूटस्ट्रैप 4 का समर्थन करने के लिए फिर से काम किया जा रहा है। आप आधिकारिक मुखपृष्ठ पर अधिक जान सकते हैं जिसमें दस्तावेज और डेमो हैं.
इसी तरह की एक लाइब्रेरी जो आप आजमा सकते हैं MDBootstrap, हालाँकि मुझे यह काम करना थोड़ा अधिक कठिन लगता है.
Bootplus
Google ने सामग्री डिज़ाइन भाषा बनाई थी, लेकिन उनके कई टूल और वेब ऐप के लिए उनकी अपनी शैली भी है.
बूटप्लस Google+ इंटरफ़ेस शैली की नकल करता है, Google के कई डॉक्स, Google ड्राइव और इसी तरह के वेब ऐप के साथ। इसमें बूटस्ट्रैप के समान सभी सुविधाएँ हैं, जिनमें ग्रिड, लेआउट स्टाइल, तत्व शैलियाँ और जावास्क्रिप्ट घटक शामिल हैं.
आप यहां तक कि साइट को देखने के लिए डेमो के माध्यम से ब्राउज़ कर सकते हैं बूटप्लस और मूल बूटस्ट्रैप UI के बीच अंतर. एक निशुल्क संसाधन के लिए, बूटप्लस व्यापक है और यह उन लोगों के लिए एकदम सही है जो Google की डिज़ाइन तकनीकों को पसंद करते हैं.
उपकरण और संसाधन
अंत में, मैं कई मुफ्त टूल में गोता लगाना चाहता हूं अनुरूपण और बूटस्ट्रैप लेआउट का निर्माण.
ये उपकरण सभी वेब ऐप हैं और इनमें से कई GitHub पर खुले हैं। वे आपको समय बचाने के लिए और बहुत कोड के बिना अविश्वसनीय बूटस्ट्रैप लेआउट डिजाइन करने में मदद करने के लिए बने हैं.
लाइव संपादक
स्वतंत्र बूटस्ट्रैप लाइव एडिटर सबसे अच्छे साधनों में से एक है गैर-तकनीकी डिजाइनरों के लिए. यदि आपको पता नहीं है कि कोड कैसे बनाया जाता है, तो आप अभी भी इस बूटस्ट्रैप बिल्डर पर निर्भर रह सकते हैं ताकि स्क्रैच से पूरा लेआउट बनाया जा सके.
यह आपके ब्राउज़र में सही चलता है और आप आरंभ करने के लिए पूर्व-निर्मित टेम्प्लेट से भी चुन सकते हैं.
साइडबार में विकल्प आपको बताते हैं कुछ सीएसएस मान जोड़ें अगर आपको कुछ फ्रंटएंड कोडिंग पता है। लेकिन, आप GUI का उपयोग रंग, फोंट, आकार और बहुत कुछ और जो आप पसंद करते हैं, को बदलने के लिए भी कर सकते हैं.
एक बार जब आप कर रहे हैं, क्लिक “थीम पाएं” और आप अद्यतन सीएसएस शैलियों को अपने प्रोजेक्ट में कॉपी / पेस्ट कर सकते हैं। स्क्रैच से सब कुछ फिर से भरने की आवश्यकता के बिना बूटस्ट्रैप को बहाल करने का सुपर आसान तरीका.
फॉर्म बिल्डर
यह मुफ्त बूटस्ट्रैप फॉर्म बिल्डर एक है ड्रैग-एंड-ड्रॉप ब्राउज़र टूल जो आपको स्क्रैच से बूटस्ट्रैप फॉर्म बनाने की अनुमति देता है.
फिर से, यह शून्य कोडिंग ज्ञान की आवश्यकता है और आपके पास सभी बूटस्ट्रैप 3 तत्वों की पूरी पहुंच है। बस उस तत्व का चयन करें जिसे आप चाहते हैं और इसे दाएं बाएं-बाएं बॉक्स में खींचें। यहां से, आप प्लेसहोल्डर टेक्स्ट से CSS क्लास में सब कुछ बदल सकते हैं.
अब तक के सबसे अच्छे फार्म बिल्डर को मैंने कभी देखा है और यह 100% मुफ्त है!
BootSwatchr
एक और मुफ्त टूल जो मुझे वास्तव में पसंद है BootSwatchr. यह बूटस्ट्रैप ढांचे पर निर्भर करता है और यह आपको देता है अद्यतन रंग, विषय शैलियों, और यह समग्र लेआउट पृष्ठ का.
मुझे इस ऐप के बारे में क्या पसंद है यह कैसे आता है पूर्व-तैयार शैलियों की मुफ्त गैलरी.
तो, आप एक डिज़ाइन डाउनलोड कर सकते हैं पहले से ही कोई और बना या आप अपने खुद के विषय को अनुकूलित करने के लिए एक शुरुआती बिंदु के रूप में उपयोग कर सकते हैं.
आगे बढ़ते हुए
बूटस्ट्रैप केवल लोकप्रियता में बढ़ रहा है, इसलिए अब सबसे अच्छा समय है इस ढांचे में गोता लगाएँ. शुक्र है, दर्जनों प्रोसेसर्स, फ्रेमवर्क और फ्री टूल्स हैं जिनका उपयोग आप देव प्रक्रिया को तेज करने के लिए कर सकते हैं.
इस लेख में, मैंने अभी-अभी हिमखंड की नोक दिखाई है, इसलिए यदि आपको यहां कुछ भी दिखाई नहीं देता है तो यह उपयोगी है कि Google से बाहर निकलें और देखें कि आपको और क्या मिल सकता है.
