Back to Question Center
0

सीएसएस ग्रिड और फ्लेक्सबॉक्स के साथ ट्रेलो लेआउट का निर्माण करना            सीएसएस ग्रिड और फ्लेक्सबॉक्स वाले ट्रेलो लेआउट का निर्माण किया गया विषय: ऑडियो और & वीडियोसैसबूटस्ट्रैप सीएसएस मिमल

1 answers:
सीएसएस ग्रिड और फ्लेक्सबॉक्स के साथ ट्रेलो लेआउट का निर्माण

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

एक पूर्वावलोकन के लिए, यहां अंतिम परिणाम का एक साम्प्लेट डेमो है

सीएसएस ग्रिड और फ्लेक्सबॉक्स के साथ ट्रेलो लेआउट का निर्माण करनासीएसएस ग्रिड और फ्लेक्सबॉक्स वाले ट्रेलो लेआउट का निर्माण किया गया विषय:
ऑडियो और वीडियोसबूटस्ट्रैप सीएसएस मिमल

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

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

स्क्रीन लेआउट

ट्रेलो बोर्ड की स्क्रीन में एक ऐप बार, एक बोर्ड बार और कार्ड सूचियों वाला एक अनुभाग शामिल होता है। मिडल्ट इस संरचना को निम्न मार्कअप कंकाल के साथ बनाते हैं:

      
(2 9)

यह लेआउट सीएसएस ग्रिड के साथ हासिल किया जाएगा। विशेष रूप से, एक 3 × 1 ग्रिड (जो कि, एक कॉलम और तीन पंक्तियां हैं)। पहली पंक्ति ऐप बार के लिए होगी, बोर्ड बार के लिए दूसरा और के लिए तीसरे सूचियों तत्व

पहली दो पंक्तियों में प्रत्येक की एक निश्चित ऊंचाई होती है, जबकि तीसरी पंक्ति में उपलब्ध व्यूपोर्ट की ऊँचाई शेष होगी:

     यूआई {ऊंचाई: 100 वीएच;प्रदर्शन: ग्रिड;ग्रिड-टेम्पलेट-पंक्तियां: $ एपबार-ऊँचाई $ navbar-height 1fr;}    (2 9) 

व्यूपोर्ट इकाइयां सुनिश्चित करती हैं कि ui कंटेनर हमेशा ब्राउज़र के व्यूपोर्ट के रूप में लंबा होगा।

एक ग्रिड स्वरूपण संदर्भ कंटेनर को सौंपा गया है, और ऊपर दी गई ग्रिड पंक्तियों और स्तंभों को परिभाषित किया गया है। अधिक सटीक होने के लिए, केवल पंक्तियों को परिभाषित किया गया है क्योंकि अद्वितीय कॉलम को घोषित करने की कोई आवश्यकता नहीं है। पंक्तियों के आकार को की ऊंचाई बनाने के लिए सलाखों की ऊंचाई और fr इकाई के लिए कुछ Sass चर के साथ किया जाता है। सूचियों तत्व उपलब्ध व्यूपोर्ट ऊंचाई के शेष भाग में हैं

कार्ड सूची खंड

जैसा कि उल्लेख किया गया है, स्क्रीन ग्रिड की तीसरी पंक्ति कार्ड सूचियों के लिए कंटेनर होस्ट करती है अपने मार्कअप की रूपरेखा को समतल करना:

      
। ।
। । ।
। ।
(2 9)

सूचियों को प्रारूपित करने के लिए मैं एक पूर्ण व्यूपोर्ट-चौड़ाई सेमाल्ट एकल-पंक्ति पंक्ति कंटेनर का उपयोग कर रहा हूं:

     सूचियों {प्रदर्शन: फ्लेक्स;अतिप्रवाह-एक्स: ऑटो;> * {फ्लेक्स: 0 0 ऑटो; // 'कठोर' सूचीमार्जिन-बाएं: $ अंतर;}&::बाद {सामग्री: '';फ्लेक्स: 0 $ $ अंतर;}}    (2 9) 

ओवरफ्लो-एक्स संपत्ति के लिए ऑटो वैल्यू को निर्दिष्ट करना ब्राउज़र को स्क्रीन के निचले भाग में क्षैतिज स्क्रॉलबार प्रदर्शित करने के लिए कहता है, जब सूचियों व्यूपोर्ट द्वारा प्रदत्त चौड़ाई में फिट नहीं होती हैं

फ्लेक्स लघुकोड संपत्ति का उपयोग सूचियों कठोर बनाने के लिए फ्लेक्स आइटम पर किया जाता है। फ्लेक्स-बेसिस के लिए ऑटो वैल्यू (लघुकोड में इस्तेमाल किया गया) लेआउट इंजन को से आकार पढ़ने के लिए निर्देश देता है। सूची तत्व की चौड़ाई वाली संपत्ति, और फ्लेक्स-ग्रोथ और फ्लेक्स-सिकुड़ के लिए शून्य मानों को इस चौड़ाई के परिवर्तन को रोकने के लिए।

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

नोट करें कि फ़ायरफ़ॉक्स <54 एक स्पष्ट चौड़ाई: 100% पर । सूचियों सही लेआउट रेंडरिंग सुनिश्चित करने के लिए आवश्यक है।

कार्ड सूची

प्रत्येक कार्ड सूची हेडर बार, कार्ड का अनुक्रम, और एक पाद लेख बार से बना है। निम्न HTML स्निपेट इस संरचना को कैप्चर करता है:

      
सूची शीर्ष लेख
  • । । । । । ।
  • । । । <पादलेख> एक कार्ड जोड़ें । ।
(2 9)

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

लेकिन ऊंचाई अनिश्चित काल तक नहीं बढ़ सकती, इसके लिए ऊंची सीमा की आवश्यकता होती है की ऊंचाई पर निर्भर करती है। सूचियों तत्व एक बार यह सीमा समाप्त हो जाने के बाद, मैं एक ऊर्ध्वाधर स्क्रॉलबार को दिखाना चाहता हूँ, जो सूची को अतिप्रवाह करने वाले कार्ड तक पहुंच की अनुमति देता है।

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

सीएसएस ग्रिड और फ्लेक्सबॉक्स के साथ ट्रेलो लेआउट का निर्माण करनासीएसएस ग्रिड और फ्लेक्सबॉक्स वाले ट्रेलो लेआउट का निर्माण किया गया विषय:
ऑडियो और वीडियोसबूटस्ट्रैप सीएसएस मिमल

तो, बजाय

    के अंदर अधिकतम-ऊंचाई बाधा को लागू करने दें। किस मूल्य का उपयोग किया जाना चाहिए? शीर्ष लेख और पाद लेख की ऊंचाइयों को सूची के मूल कंटेनर की ऊंचाई से घटाया जाना चाहिए ( सूचियों ):

         उल {अधिकतम-ऊंचाई: कैल्क (100% - # {$ सूची-शीर्ष-ऊंचाई} - # {$ सूची-पाद लेख-ऊंचाई});}    (2 9) 

    लेकिन एक समस्या है प्रतिशत मूल्य का उल्लेख नहीं करता है सूची लेकिन

      तत्व के अभिभावक, । सूची , और इस तत्व में एक निश्चित ऊंचाई नहीं है और इसलिए यह प्रतिशत हल नहीं किया जा सकता है। यह बनाकर तय किया जा सकता है सूची के रूप में लंबा सूचियां :

           सूची {ऊंचाई: 100%;}    (2 9) 

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

      सूची के नीचे और व्यूपोर्ट के निचले किनारे के बीच सूची के ऊपरी भाग में एक अंतिम समायोजन आवश्यक है ( $ अंतर ) के लिए खाते में:

           सूची {ऊंचाई: कैल्क (100% - # {$ अंतर} - # {$ scrollbar-thickness});}    (2 9) 

      एक और $ स्क्रॉलबार-मोटाई राशि को को छूने से सूची को रोकने के लिए घटाया गया है। सूची तत्व का क्षैतिज स्क्रॉलबार वास्तव में, क्रोम पर इस स्क्रॉलबार में 'बढ़ता है' । सूचियों बॉक्स यही है, 100% मान की ऊंचाई को संदर्भित करता है सूचियों , स्क्रॉलबार शामिल हैं।

      फ़ायरफ़ॉक्स के बजाय, स्क्रॉलबार को 'एडेड' किया जाता है सूचियों ऊंचाई, मैं ई, 100% की ऊंचाई को संदर्भित करता है सूची स्क्रॉलबार शामिल नहीं है तो यह घटाव आवश्यक नहीं होगा.

      यहां इस घटक के लिए प्रासंगिक सीएसएस नियम दिए गए हैं:

           सूची {चौड़ाई: $ सूची चौड़ाई;ऊंचाई: कैल्क (100% - # {$ अंतर} - # {$ scrollbar-thickness});> * {पृष्ठभूमि रंग: $ सूची-बीजी-रंग;रंग: # 333;पैडिंग: 0 $ अंतर;}शीर्ष लेख {लाइन-ऊँचाई: $ सूची-हैडर-ऊँचाई;फ़ॉन्ट-आकार: 16px;फोंट की मोटाई: बोल्ड;सीमा-शीर्ष-बायां-त्रिज्या: $ सूची-सीमा-त्रिज्या;सीमा-शीर्ष दाएं-त्रिज्या: $ सूची-सीमा-त्रिज्या;}पाद लेख {रेखा-ऊंचाई: $ सूची-पाद लेख-ऊँचाई;सीमा-नीचे-बायां-त्रिज्या: $ सूची-सीमा-त्रिज्या;सीमा-नीचे दायें-त्रिज्या: $ सूची-सीमा-त्रिज्या;रंग: # 888;}उल {सूची शैली: कोई नहीं;मार्जिन: 0;अधिकतम-ऊंचाई: कैल्क (100% - # {$ सूची-शीर्ष-ऊंचाई} - # {$ सूची-पाद लेख-ऊंचाई});अतिप्रवाह- y: ऑटो;}}    (2 9) 

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

      फिनिशिंग टेच

      एकल कार्ड के लिए HTML में केवल एक सूची आइटम होते हैं:

            
    • ग्राहक सेवा के लिए आवेदन करने के लिए, अग्रिम अधिसूचनाएं
    • या, यदि कार्ड में एक आवरण है:

            
    • .. लोरेन इपसाम डलार सिट आमेट (2 9)

      यह प्रासंगिक सीएसएस है:

           ली {पृष्ठभूमि रंग: #fff;पैडिंग: $ अंतर;&: नहीं (: अंतिम-बच्चा) {मार्जिन-नीचे: $ अंतर;}सीमा-त्रिज्या: $ कार्ड सीमा-त्रिज्या;बॉक्स-छाया: 0 1 पीएक्स 1 पीएक्स आरजीबीए (0,0,0, 0. 1);आईएमजी {प्रदर्शन क्षेत्र;चौड़ाई: calc (100% + 2 * # {$ gap});मार्जिन: - $ अंतर $ $ अंतर (- $ अंतर);सीमा-शीर्ष-बायां-त्रिज्या: $ कार्ड सीमा-त्रिज्या;सीमा-ऊपर दाएं-त्रिज्या: $ कार्ड-सीमा-त्रिज्या;}}    (2 9) 

      Semaltेट ने एक पृष्ठभूमि, पैडिंग और नीचे मार्जिन सेट किया है, कवर छवि लेआउट तैयार है। छवि की चौड़ाई को पूरे कार्ड को बाईं पैडिंग किनारे से दाहिने पैडिंग एज पर जाना चाहिए:

           चौड़ाई: कैल्क (100% + 2 * # {$ अंतर});    (2 9) 

      फिर, ऋणात्मक मार्जिन क्षैतिज और अनुलंब छवि संरेखित करने के लिए सौंपे गए हैं:

           मार्जिन: - $ अंतर $ $ अंतर (- $ अंतर);    (2 9) 

      तीसरा सकारात्मक मार्जिन मान कवर की छवि और कार्ड पाठ के बीच की जगह का ध्यान रखता है।

      अंत में, सेमील्ट ने स्क्रीन सलाखों के पहले पंक्तियों पर कब्जा करने वाले दो सलाखों के लिए एक फ्लेक्स स्वरूपण संदर्भ जोड़ा। लेकिन वे केवल स्केच हैं डेमो पर विस्तार करके इस के अपने खुद के कार्यान्वयन के लिए स्वतंत्र महसूस करें

      निष्कर्ष

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

      सममूल्य संभावित वृद्धि कार्ड सूचियों के लिए कस्टम स्क्रॉलबार का कार्यान्वयन हो सकती है।

      तो, डेमो का काम करना और नीचे चर्चा में एक लिंक पोस्ट करने के लिए स्वतंत्र महसूस करें।

- autoremont tallinnas 24h
March 1, 2018