Bulma - त्वरित गाइड

बुल्मा क्या है?

Bulma एक खुला स्रोत, सरल और आधुनिक CSS फ्रेमवर्क है, जो Flexbox मॉड्यूल पर निर्भर करता है (इसका उपयोग उत्तरदायी लेआउट संरचना को विकसित करने के लिए किया जाता है)।

इतिहास

बुलमा को वर्ष 2016 में प्रकाशित किया गया था और एमआईटी लाइसेंस के तहत वितरित किया गया था। Bulma का वर्तमान संस्करण 0.7.1 है, 18 अप्रैल, 2018 को जारी किया गया था।

Bulma का उपयोग क्यों करें?

Bulma सीखना और सेटअप करना बहुत आसान है। इसे SASS के साथ बनाया गया है और इसे 39 .assass फाइलों से विभाजित किया गया है । कोड को आसानी से अलग-अलग फ़ाइलों में विभाजित करके अनुकूलित किया जा सकता है और यह अपेक्षित परिणाम प्राप्त करने के लिए आवेदन के हिस्से को अनुकूलित करने की अनुमति देता है।

विशेषताएं

• यह एक हल्का, आधुनिक सीएसएस फ्रेमवर्क है, जो फ्लेक्सबॉक्स का उपयोग करता है।

• इसमें अलग-अलग फ़ाइलों के बजाय एकल फ़ाइल में मोबाइल प्रथम शैलियाँ हैं।

• यह अनुकूलन योग्य और मॉड्यूलर है।

लाभ

• यह डेस्कटॉप, टैबलेट और मोबाइल के लिए उत्तरदायी डिजाइन प्रदान करता है।

• यह शुद्ध CSS फ्रेमवर्क है, जिससे आप किसी भी JavaScript फ्रेमवर्क जैसे AngularJS, ReactJS आदि के साथ संयोजन कर सकते हैं।

• यह न्यूनतम HTML कोड का उपयोग करता है, जिससे कोड को पढ़ना और लिखना आसान हो जाता है।

नुकसान

• यह एक नया ढांचा है, जो एक समुदाय के रूप में बड़ा नहीं है।

• इसमें कम प्रलेखन है और कुछ मामूली सुधार की आवश्यकता है।

• यह ढांचा अभी भी विकास के चरण में है।

विवरण

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

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

निम्न तालिका उन विभिन्न प्रकार की उपयोगिताओं को सूचीबद्ध करती है जिनका उपयोग आप Bulma CSS का उपयोग करने के लिए कर सकते हैं -

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

विवरण

Bulma में संशोधक में कक्षाओं के उपयोग से तत्वों के लिए वैकल्पिक शैलियाँ, शैलियों को बदलने के लिए उत्तरदायी कक्षाएं, तत्वों के बदलते रंग के लिए रंग सहायक, पाठ के आकार और रंग बदलने के लिए टाइपोग्राफी सहायक शामिल हैं।

निम्न तालिका विभिन्न प्रकार के संशोधक को सूचीबद्ध करती है जिनका उपयोग आप Bulma CSS का उपयोग करने के लिए कर सकते हैं -

क्र.सं.	संशोधक और विवरण
1	संशोधक वाक्यविन्यास और उत्तरदायी सहायक आप संशोधक कक्षाओं का उपयोग करके तत्वों के लिए वैकल्पिक शैली बना सकते हैं।
2	रंग और टाइपोग्राफी सहायक आप पाठ या पृष्ठभूमि के रंग बदलने के लिए रंग सहायकों का उपयोग कर सकते हैं।

विवरण

Bulma उत्तरदायी ग्रिड सिस्टम (पंक्तियों और स्तंभों की एक श्रृंखला के माध्यम से पृष्ठ लेआउट बनाना) प्रदान करता है, जो एक कंटेनर के भीतर 12 कॉलम तक होता है। उपकरण या व्यूपोर्ट आकार बढ़ने पर कॉलम पुन: व्यवस्थित होंगे।

निम्न तालिका उन स्तंभों की विविधताओं को सूचीबद्ध करती है जिनका उपयोग आप Bulma CSS का उपयोग करने के लिए कर सकते हैं -

क्र.सं.	कॉलम प्रकार और विवरण
1	कॉलम लेआउट और आकार बुलमा कंटेनर में कॉलम क्लास जोड़कर बहुत आसानी से कॉलम लेआउट बनाने की अनुमति देता है ।
2	कॉलम रिस्पॉन्सिबिलिटी और नेस्टिंग Bulma विभिन्न प्रकार की स्क्रीन जैसे मोबाइल डिवाइस, टैबलेट और डेस्कटॉप में उत्तरदायी कॉलम प्रदान करता है।
3	कॉलम गैप और विकल्प स्तंभ स्तंभ सामग्री के बीच समान अंतर बनाते हैं।

विवरण

Bulma लेआउट वेबपेज की संरचना का वर्णन करता है, जिसे इसकी CSS कक्षाओं का उपयोग करके बनाया गया है।

निम्न तालिका लेआउट के विविधताओं को सूचीबद्ध करती है जिसका उपयोग आप Bulma CSS का उपयोग करने के लिए कर सकते हैं -

क्र.सं.	लेआउट प्रकार और विवरण
1	कंटेनर और स्तर Bulma बुनियादी लेआउट का प्रतिनिधित्व करने और साइट की सामग्री को लपेटने के लिए कंटेनरों का उपयोग करता है।
2	मीडिया वस्तु मीडिया ऑब्जेक्ट का उपयोग विभिन्न प्रकार के घटकों के निर्माण के लिए अमूर्त वस्तु शैलियों को निर्दिष्ट करने के लिए किया जाता है।
3	हीरो का बैनर Bulma वेबपेज के लिए पूरी चौड़ाई बैनर निर्दिष्ट करने के लिए नायक बैनर प्रदान करता है।
4	टाइल्स Bulma एकल तत्व वर्ग का उपयोग करके 2-आयामी लेआउट बनाता है।

विवरण

Bulma form element इनपुट तत्वों (जैसे टेक्स्ट फ़ील्ड, चेकबॉक्स, रेडियो बटन, और अधिक) का उपयोग करके उपयोगकर्ता इनपुट डेटा को निर्दिष्ट करता है और डेटा को संसाधित करने के लिए एक सर्वर पर भेजता है।

निम्न तालिका उन रूपों की विविधताओं को सूचीबद्ध करती है जिनका उपयोग आप Bulma CSS का उपयोग करने के लिए कर सकते हैं -

क्र.सं.	फार्म के प्रकार और विवरण
1	प्रपत्र नियंत्रण बुलमा में विभिन्न प्रकार के प्रपत्रों को बनाने के लिए विभिन्न प्रकार के प्रपत्र नियंत्रण वर्ग होते हैं।
2	इनपुट Bulma विभिन्न प्रकार की विविधताओं के साथ उपयोगकर्ता डेटा दर्ज करने के लिए इनपुट क्षेत्र प्रदान करता है।
3	पाठ क्षेत्र Bulma textarea का उपयोग तब किया जाता है जब आपको इनपुट की कई लाइनों की आवश्यकता होती है।
4	चुनते हैं Bulma select का उपयोग तब किया जाता है जब आप उपयोगकर्ता को कई विकल्पों से चुनने की अनुमति देना चाहते हैं।
5	चेकबॉक्स और रेडियो चेकबॉक्स और रेडियो बटन का उपयोग तब किया जा सकता है जब आप उपयोगकर्ताओं को पूर्व निर्धारित विकल्पों की सूची में से चुनना चाहते हैं।
6	फ़ाइल इसका उपयोग उपयोगकर्ता डेटा से फ़ाइलों को अपलोड करने के लिए किया जाता है।

विवरण

Bulma विभिन्न प्रकार के तत्व प्रदान करता है जैसे कि बॉक्स तत्व जो कि इमेज, टेबल एलिमेंट को निर्दिष्ट करने के लिए कंटेनर, बटन एलिमेंट, इमेज कंटेनर के रूप में उपयोग किया जा सकता है।

निम्न तालिका उन तत्वों की विविधताओं को सूचीबद्ध करती है जिनका उपयोग आप Bulma CSS का उपयोग करने के लिए कर सकते हैं -

क्र.सं.	फार्म के प्रकार और विवरण
1	बटन एक बटन तत्व कस्टम बटन शैलियों के साथ उपयोगकर्ता बातचीत प्रदान करता है।
2	सामग्री Bulma HTML टैग्स को सीधे उपयोग करने के लिए सामग्री वर्ग प्रदान करता है ।
3	बॉक्स और आइकन .Box वर्ग एक सीमा, त्रिज्या और गद्दी सहित एक कंटेनर को परिभाषित करता है।
4	छवि बुल्मा पृष्ठ में छवियों को प्रदर्शित करने के लिए .image वर्ग का उपयोग करता है ।
5	अधिसूचना और प्रगति बार Bulma अधिसूचना प्रदर्शित करने के लिए पूर्वनिर्धारित चेतावनी संदेश निर्दिष्ट करता है।
6	तालिका Bulma सारणीबद्ध प्रारूप में डेटा प्रदर्शित करने के लिए तत्वों को लपेटता है।
7	टैग और शीर्षक Bulma अतिरिक्त जानकारी प्रदर्शित करने के लिए टैग्स नामक छोटे लेबल प्रदान करता है।

विवरण

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

निम्न तालिका उन घटकों की विविधताओं को सूचीबद्ध करती है जिनका उपयोग आप Bulma CSS का उपयोग करने के लिए कर सकते हैं -

क्र.सं.	घटक विवरण
1	ब्रेडक्रम्ब Bulma आवेदन में उपयोगकर्ता के लिए वर्तमान पृष्ठ के स्थान को इंगित करने के लिए नेविगेशन विधि के रूप में ब्रेडक्रंब घटक का उपयोग करता है।
2	कार्ड कार्ड घटक बेहतर उपस्थिति के लिए एक बॉक्स में सामग्री को प्रदर्शित करता है।
3	ड्रॉप डाउन बुलमा सूची प्रारूप में संबंधित लिंक प्रदर्शित करने के लिए टॉगल करने योग्य ड्रॉपडाउन मेनू प्रदान करता है।
4	संदेश Bulma आपके पृष्ठ की नज़र बढ़ाने के लिए संदेश ब्लॉक प्रदान करता है।
5	मॉडल मोडल एक चाइल्ड विंडो है जो अपने पैरेंट विंडो पर लेयर की जाती है।
6	नेवबार Navbars आपकी साइट के लिए नेविगेशन हेडर के रूप में काम करता है।
7	पृष्ठ पर अंक लगाना पृष्ठांकन घटक कई पृष्ठों पर संबंधित लिंक की श्रृंखला प्रदान करता है।
8	टैब्स Bulma कंटेंट प्रदर्शित करने के लिए विभिन्न स्टाइल के साथ tabbed नेविगेशन मेनू प्रदान करता है।