Back to Question Center
0

Bulma के साथ 6 मिनट में एक सीएसएस फ्रेमवर्क जानें            Bulma के साथ 6 मिनट में सीएसएस फ्रेमवर्क जानें विषयबद्ध विषय: बूटस्ट्रैप HTML ऑडियो और & वीडियोफ्रेमवर्क सीएसएस मिमल

1 answers:
Bulma के साथ 6 मिनट में एक सीएसएस फ्रेमवर्क जानें

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

हम एक कोडिंग उद्धरण पृष्ठ का निर्माण करेंगे, एक हीरो बैनर, कॉलम, कार्ड, बटन और अधिक सहित Bulma के UI घटकों का उपयोग करेंगे।
Bulma के साथ 6 मिनट में एक सीएसएस फ्रेमवर्क जानेंBulma के साथ 6 मिनट में सीएसएस फ्रेमवर्क जानें विषयबद्ध विषय:
बूटस्ट्रैप HTML ऑडियो और वीडियोफ़्रेमकाम सीएसएस मिमल

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

              

अगला, हम एक अनुभाग तत्व और बुलमा क्लास नायक और नायक-बॉडी के वर्ग के साथ एक डिवीजन के साथ हीरो बैनर बनाएंगे।

      <अनुभाग वर्ग = "नायक">  

इसके बाद हम कुछ संशोधक वर्गों को अपने डिजाइन के प्राथमिक रंग प्राथमिक-प्राथमिक के साथ देने के लिए जोड़ देंगे, और हम इसके आकार को मध्यम-माध्यम के साथ समायोजित करेंगे। Bulma के वर्ग के नाम और संशोधक पठनीय हैं और काफी शाब्दिक हैं।

      <अनुभाग वर्ग = "हीरो प्राथमिक-माध्यम है">  

हमारे नायक-बॉडी डिव में, हम एच 1 और एच 2 के लिए एक कंटेनर डिवेल को जोड़ देंगे, क्रमशः एक शीर्षक और उपशीर्षक के रूप में शैली। शीर्षक को देने के लिए एक है-1 संशोधक इसे बड़े कर देगा।

      

कोडिंग उद्धरण

अपने पसंदीदा की तरह

Bulma के साथ 6 मिनट में एक सीएसएस फ्रेमवर्क जानेंBulma के साथ 6 मिनट में सीएसएस फ्रेमवर्क जानें विषयबद्ध विषय:
बूटस्ट्रैप HTML ऑडियो और वीडियोफ़्रेमकाम सीएसएस मिमल

यह हमारी साइट के शीर्ष पर है, अब हम कुछ कॉलम बनाते हैं। सबसे पहले, हम सेक्शन उन्हें बंद करेंगे, फिर हम उनके लिए एक कंटेनर बनायेंगे।

      <अनुभाग वर्ग = "अनुभाग">  

हमारे कंटेनर के अंदर, हम अपने कॉलम पैरेंट डिव डाल देंगे।

      <अनुभाग वर्ग = "अनुभाग">  

तो हम तीन कॉलम डिविज़ को बच्चों के रूप में रखेंगे I वे स्वचालित रूप से अपने व्यूपोर्ट के तिहाई हिस्से में विभाजित करेंगे, चाहे वह क्षैतिज या लंबवत (मोबाइल पर) देखे। Bulma स्वाभाविक रूप से पूरी तरह उत्तरदायी है

      <अनुभाग वर्ग = "अनुभाग">  
1
2
3

"उद्धरण"

प्रोग्रामर

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

      

"उद्धरण"

प्रोग्रामर

<पाद लेख वर्ग = "कार्ड-फ़ूटर"> है है

Bulma के साथ 6 मिनट में एक सीएसएस फ्रेमवर्क जानेंBulma के साथ 6 मिनट में सीएसएस फ्रेमवर्क जानें विषयबद्ध विषय:
बूटस्ट्रैप HTML ऑडियो और वीडियोफ़्रेमकाम सीएसएस मिमल

अब हम सफलतापूर्वक एक स्तंभ तैयार कर चुके हैं, हम अपने तीन कॉलम बनाने के लिए उस कॉलम कोड को कॉपी और पेस्ट कर सकते हैं, और हमारी साइट तैयार है. पीएनजी "alt ="Bulma के साथ 6 मिनट में एक सीएसएस फ्रेमवर्क जानेंBulma के साथ 6 मिनट में सीएसएस फ्रेमवर्क जानें विषयबद्ध विषय: बूटस्ट्रैप HTML ऑडियो और वीडियोफ़्रेमकाम सीएसएस मिमल "/>

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

. - собачки лизуны
March 1, 2018