Get started with Bulma

Sep 16, 2025
कैसे करना है
Bulma
(छवि क्रेडिट: बुलमा) [1 9]

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

इस ट्यूटोरियल में, हम यह दिखाएंगे कि बुलमा को कैसे स्थापित किया जाए, और अपने विभिन्न वर्गों के साथ एक वेबसाइट बनाएं। यह साबित करने के लिए कि कक्षाएं बुलमा में कितनी बहुमूल्य हैं, पूरे ट्यूटोरियल पृष्ठ को सीएसएस की एक पंक्ति लिखने के बिना बनाया गया है। अन्य विकल्प चाहते हैं? एक उत्कृष्ट प्रयास करें वेबसाइट निर्माता । और यह सुनिश्चित करने के लिए कि आपकी साइट अपने सर्वश्रेष्ठ पर चलती है, सही चुनें वेब होस्टिंग सर्विस।

[7 9]

(छवि क्रेडिट: बुलमा) [1 9]

एक नई निर्देशिका बनाएं, और इसके भीतर, एक बनाएँ index.html फ़ाइल। एक कोड संपादक में इस फ़ाइल को खोलें और एक डॉक्टरेट एचटीएमएल और एक उत्तरदायी व्यूपोर्ट टैग के साथ एक साधारण स्टार्टर HTML दस्तावेज़ बनाएं।

[9 4] & lt;! डॉक्टाइप एचटीएमएल और जीटी; & lt; html & gt; & lt; हेड और जीटी; & lt; मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक पैमाने = 1" & gt; & lt; शीर्षक & gt; पृष्ठ शीर्षक & lt; / शीर्षक & gt; & lt; / सिर & gt; & lt; शरीर & gt; & lt; / शरीर & gt; & lt; / html & gt; [6 9] 02. BULLA स्थापित करें

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

[9 4] & lt; लिंक rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" & gt; & lt; स्क्रिप्ट src = "https://use.fontawesome.com/reless/v5.3.1/js/all.js" & gt; & gt; / स्क्रिप्ट & gt; [6 9] 03. एक पृष्ठ बनाएं

Bulma: hello world

(छवि क्रेडिट: बुलमा) [1 9]

शरीर के टैग के अंदर, कक्षा के साथ एक अनुभाग तत्व और एक div बनाएँ पात्र । कंटेनर के भीतर, कक्षा के साथ एक एच 1 बनाएँ शीर्षक फिर कक्षा के साथ एक पैराग्राफ उपशीर्षक । अभी के लिए, शीर्षक में 'हैलो वर्ल्ड' इनपुट और पैराग्राफ में कुछ पाठ। अब हमारे पास Bulma के लिए बुनियादी स्टार्टर टेम्पलेट है।

[9 4] & lt; अनुभाग वर्ग = "खंड" & gt; & lt; div class = "कंटेनर" & gt; & lt; h1 वर्ग = "शीर्षक" & gt; नमस्ते दुनिया & lt; / h1 & gt; & lt; p class = "उपशीर्षक" & gt; यह मूल स्टार्टर है Bulma के लिए टेम्पलेट & lt; / p & gt; & lt; / div & gt; & lt; / खंड & gt; [6 9] 04. एक शीर्ष नायक बार बनाएँ

पिछले एक के ऊपर एक नया खंड बनाएं, और कक्षा के बजाय अनुभाग , इसे कक्षा दें नायक । हीरो क्लास एक पूर्ण चौड़ाई बैनर के निर्माण की अनुमति देता है, जिसमें इसकी ऊंचाई को नियंत्रित करने वाले विभिन्न विकल्पों के साथ। इस नए खंड के भीतर कक्षा के साथ एक div बनाते हैं हीरो-बॉडी और फिर ए पात्र यह सामग्री रखेगा।

[9 4] & lt; अनुभाग वर्ग = "हीरो" & gt; & lt; div class = "हीरो-बॉडी" & gt; & lt; div class = "कंटेनर" & gt; ... & lt; / div & gt; & lt; / div & gt; & lt; / div & gt; [6 9] 05. शीर्षक और उपशीर्षक जोड़ें

कंटेनर div के अंदर, कक्षाओं के साथ एक H1 और H2 टैग जोड़ें शीर्षक तथा उपशीर्षक । ये टाइपोग्राफी कक्षाएं हैं जो उनकी सामग्री के आकार को बढ़ाएंगी। बुलमा जानना स्मार्ट है जब एक शीर्षक और उपशीर्षक संयुक्त होता है, और उन्हें एक साथ करीब लाएगा।

[6 9] 06. रंग का एक स्पलैश जोड़ें

Bulma: colour

(छवि क्रेडिट: बुलमा) [1 9]

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

[9 4] & lt; अनुभाग वर्ग = "हीरो है-प्राथमिक" & gt; [6 9] 07. सामग्री को कॉलम में विभाजित करें

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

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

[9 4] & lt; अनुभाग वर्ग = "खंड" & gt; & lt; div class = "कंटेनर" & gt; & lt; div class = "कॉलम is-vcentered" & gt; & lt; div class = "कॉलम" & gt; ... & lt; / div & gt; & lt; div class = "कॉलम" & gt; ... & lt; / div & gt; & lt; / div & gt; & lt; / div & gt; & lt; / खंड & gt; [6 9] 08. उत्तरदायी छवियां बनाएं

Bulma: responsive images

(छवि क्रेडिट: बुलमा) [1 9]

दूसरे कॉलम में एक छवि होगी। छवि को एक आकृति तत्व में लपेटें, और यदि संभव हो, तो छवि के पहलू अनुपात का एक वर्ग दें। उदाहरण में, 16by9 का उपयोग किया गया है (देखें उपलब्ध अनुपात की पूरी सूची )।

[9 4] & lt; div class = "कॉलम" & gt; & lt; चित्रा वर्ग = "छवि is-16by9" & gt; & lt; img src = "img / dog.jpg" & gt; & lt; / चित्रा & gt; & lt; / div & gt; [6 9] 09. बटन के साथ कार्रवाई का सुझाव दें

बटन क्लास रंगीन बटन बनाता है और इसे लागू किया जा सकता है & lt; a & gt; तत्व या & lt; बटन & gt; फॉर्म में तत्व। पहले कॉलम में दो बटन जोड़ें और उन्हें रंग संशोधक लागू करें। यदि एक से अधिक बटन का उपयोग करके, उन्हें कक्षा के साथ एक div में लपेटें बटन , जो अंतर को सुधारता है और कक्षाओं के आवेदन को समूह के रूप में अनुमति देता है।

[9 4] & lt; div class = "बटन" & gt; & lt; एक वर्ग = "बटन है-जानकारी" & gt; अधिक जानें & lt; / a & gt; & lt; a class = "बटन है- खतरा है - उल्लिखित है" & gt; अब खरीदें & lt; / a & gt; & lt; / div & gt; [6 9] 10. बॉक्स की गई सामग्री बनाएं

Bulma: boxed content

(छवि क्रेडिट: बुलमा) [1 9]

पृष्ठ के निचले भाग में तीन कॉलम के साथ एक नया अनुभाग जोड़ें। कॉलम के भीतर, एक बॉक्स तत्व जोड़ा जाता है। बॉक्स तत्व सरल कंटेनर हैं जो उनके चारों ओर एक सीमा के साथ हैं जो उन्हें पृष्ठ की पृष्ठभूमि से अलग करते हैं।

[9 4] & lt; div class = "कॉलम" & gt; & lt; div class = "बॉक्स" & gt; परीक्षा & lt; / div & gt; & lt; / div & gt; [6 9] 11. प्रतिष्ठित बक्से का उपयोग करें

बुलमा फ़ॉन्ट विस्मयकारी 5 के साथ एकीकृत करता है, लेकिन सभी फ़ॉन्ट लाइब्रेरीज़ के साथ संगत है, और इसमें सबसे अधिक उपलब्ध आइकन को कॉल करने के लिए कक्षाएं हैं। प्रत्येक बॉक्स के अंदर, कक्षा के साथ एक अवधि तत्व के बाद एक सामग्री कंटेनर जोड़ें आइकन । अवधि के अंदर, एक का उपयोग करें & lt; i & gt; वांछित आइकन के लिए आवश्यक कक्षाओं को कॉल करने के लिए तत्व। प्रतीक पाठ के समान रंगीन होते हैं।

[9 4] & lt; div class = "सामग्री" & gt; & lt; अवधि वर्ग = "आइकन" & gt; & lt; i class = "fas fa-lg fa-home है-टेक्स्ट-सफलता "& gt; & lt; / i & gt; & lt; / अवधि & gt; & lt; div class = "शीर्षक है-आकार -6" & gt; ... & lt; / div & gt; & lt; div class = "उपशीर्षक है आकार -6" & gt; ... & lt; / div & gt; & lt; / div & gt; [6 9] 12. बोल्ड हो

[2 9 8] [2 9 9] Bulma: Be bold

(छवि क्रेडिट: बुलमा) [1 9]

पृष्ठ के निचले भाग में एक नया दो-स्तंभ नायक अनुभाग बनाएं, एक दे आईएस-जानकारी कक्षा में कक्षा। एक दिलचस्प प्रभाव के लिए, भी लागू करें बोल्ड एक सूक्ष्म ढाल के लिए इस खंड के लिए कक्षा। यह संशोधक मुख्य रंगों के सभी सातों के साथ काम करता है।

[6 9] 13. स्तरों को बदलें

स्तर एक पंक्ति में लंबवत केंद्रित तत्व सुनिश्चित करने के लिए एक शानदार तरीका है। पृष्ठ के निचले हिस्से में एक नए खंड के भीतर, चार स्तरीय वस्तुओं के अंदर स्तर वर्ग और घोंसले के साथ एक div जोड़ें। एक स्तर वस्तु के भीतर जोड़ा गया कोई भी सामग्री लंबवत गठबंधन होगी। 

& lt; div class = "स्तर" & gt;
& lt; div class = "स्तर-आइटम है-पाठ केंद्रित" & gt;
...
& lt; / div & gt;
& lt; div class = "स्तर-आइटम है-पाठ केंद्रित" & gt;
...
& lt; / div & gt;
& lt; / div & gt;
[6 9] 14. जोड़ें और नियंत्रण फॉर्म

पृष्ठ के निचले हिस्से में एक फॉर्म जोड़ने के लिए, एक नया दो-कॉलम हीरो सेक्शन बनाएं प्राथमिकता है । इसे दो कॉलम में विभाजित करें, और दाएं कॉलम में, एक बनाएं मैदान कक्षा। फील्ड क्लास का उपयोग कई फॉर्म इनपुट को एक साथ समूहित करने के लिए किया जाता है, यह सुनिश्चित करना कि वे ठीक से दूरी पर हैं। प्रत्येक इनपुट को एक व्यक्ति में भी लपेटा जाना चाहिए ।नियंत्रण कक्षा।

[9 4] & lt; div class = "फ़ील्ड" & gt; & lt; div class = "नियंत्रण है-आइकन-बाएं है-आइकन-राइट "और जीटी; & lt; इनपुट क्लास = "इनपुट" प्रकार = "ईमेल" प्लेसहोल्डर = "आपका ईमेल" & gt; & lt; अवधि वर्ग = "आइकन छोटा है बाएं "& gt; & lt; i class = "fas fa-levelope" & gt; & lt; / i & gt; & lt; / अवधि & gt; & lt; / div & gt; & lt; / div & gt; [6 9] 15. उपयोगकर्ताओं को प्रतिक्रिया दें

Bulma: feedback

(छवि क्रेडिट: बुलमा) [1 9]

एक बार एक फॉर्म सबमिट हो जाने के बाद, इसे उपयोगकर्ताओं को एक संदेश वापस करना चाहिए ताकि वे जान सकें कि आगे क्या होता है। यद्यपि यह संदेश प्रदर्शित होने पर बुलमा को नियंत्रित करने में सक्षम नहीं है, फ्रंट एंड को संदेश वर्ग के साथ बनाया जा सकता है।

[9 4] & lt; अनुच्छेद वर्ग = "संदेश है-जानकारी" & gt; & lt; div class = "संदेश-शीर्षलेख" & gt; & lt; p & gt; धन्यवाद! & lt; / p & gt; & lt; / div & gt; & lt; div class = "संदेश-शरीर" & gt; ... & lt; / div & gt; & lt; / अनुच्छेद & gt; [6 9] 16. एक पाद लेख जोड़ें

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

[9 4] & lt; पाद लेख वर्ग = "पाद लेख" & gt; & lt; div class = "सामग्री है-पाठ केंद्रित" & gt; & lt; p & gt; ... & lt; / p & gt; & lt; / div & gt; & lt; / पाद लेख & gt; [6 9] 17. चर को अनुकूलित करें

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

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

यह लेख मूल रूप से रचनात्मक वेब डिज़ाइन पत्रिका के अंक 28 9 में प्रकाशित किया गया था वेब डिजाइनर । मुद्दा 289 खरीदें या यहां सदस्यता लें ।

अधिक पढ़ें:

  • 5 प्रेरणादायक वेब डिजाइन केस अध्ययन
  • सबसे अच्छा यूआई डिजाइन उपकरण
  • मास्टर minimalist वेबसाइट डिजाइन
    • [3 9]

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to write HTML code faster

कैसे करना है Sep 16, 2025

(छवि क्रेडिट: भविष्य) [1 9] आधुनिक वेबसाइटों के ..

एक भेड़िया कैसे आकर्षित करें

कैसे करना है Sep 16, 2025

यदि आपने महारत हासिल की है [1 1] एक कुत्ता कैसे आकर्षित करें..

Add digital colours to pencil drawings

कैसे करना है Sep 16, 2025

[1 1] इसे पूर्ण आकार देखने के लिए छवि पर क्ल..

Create a glowing neon text effect

कैसे करना है Sep 16, 2025

अक्सर, यह सबसे सरल प्रभाव है जो सबसे हड़ताली दिखत�..

Three steps to a sparkling night sky in watercolour

कैसे करना है Sep 16, 2025

वाटरकलर एक अविश्वसनीय माध्यम है, जो दाईं ओर कल�..

3D text tutorial for graphic designers

कैसे करना है Sep 16, 2025

2 का पृष्ठ 1: सिनेमा 4 डी के साथ शुरू करना ..

Get started in Amazon Lumberyard: setting up

कैसे करना है Sep 16, 2025

अमेज़न का नया गेम इंजन, लकड़ी यार्ड , खेल और स..

Build complex layouts with PostCSS-Flexbox

कैसे करना है Sep 16, 2025

फ्लेक्सबॉक्स सीएसएस ब्लोट को कम करने के लिए एक मह..

श्रेणियाँ