दृष्टिकोण

बुटस्ट्र्याप निर्माण र मर्मत गर्न प्रयोग गरिने मार्गनिर्देशन सिद्धान्तहरू, रणनीतिहरू र प्रविधिहरू बारे जान्नुहोस् ताकि तपाईं यसलाई अझ सजिलै अनुकूलन गर्न र विस्तार गर्न सक्नुहुन्छ।

सुरु गर्ने पृष्ठहरूले परियोजनाको परिचयात्मक भ्रमण र यसले के प्रस्ताव गर्दछ, यो कागजातले हामीले बुटस्ट्र्यापमा गर्ने कामहरू किन गर्छौं भन्ने कुरामा केन्द्रित हुन्छ । यसले वेबमा निर्माण गर्ने हाम्रो दर्शनको व्याख्या गर्छ ताकि अरूले हामीबाट सिक्न सकून्, हामीसँग योगदान गर्न सकून् र हामीलाई सुधार गर्न मद्दत गर्न सकून्।

केहि देख्नुहुन्छ जुन सही लाग्दैन, वा सायद अझ राम्रो गर्न सकिन्छ? एउटा मुद्दा खोल्नुहोस् — हामी तपाईंसँग छलफल गर्न चाहन्छौं।

सारांश

हामी यी प्रत्येकमा थप डुब्नेछौं, तर उच्च स्तरमा, हाम्रो दृष्टिकोणलाई मार्गदर्शन गर्ने कुरा यहाँ छ।

• कम्पोनेन्टहरू उत्तरदायी र मोबाइल-पहिले हुनुपर्छ
• कम्पोनेन्टहरू आधार वर्गको साथ बनाइनुपर्छ र परिमार्जक वर्गहरू मार्फत विस्तार गर्नुपर्छ
• घटक राज्यहरूले एक साझा z-सूचकाङ्क मापन पालन गर्नुपर्छ
• सम्भव भएसम्म, JavaScript मा HTML र CSS कार्यान्वयनलाई प्राथमिकता दिनुहोस्
• सम्भव भएसम्म, अनुकूलन शैलीहरूमा उपयोगिताहरू प्रयोग गर्नुहोस्
• सम्भव भएसम्म, कडा HTML आवश्यकताहरू लागू गर्नबाट जोगिनुहोस् (बाल चयनकर्ताहरू)

उत्तरदायी

बुटस्ट्र्यापको उत्तरदायी शैलीहरू उत्तरदायी हुनको लागि बनाइएको छ, एउटा दृष्टिकोण जसलाई प्राय: मोबाइल-फर्स्ट भनिन्छ । हामी हाम्रो कागजातमा यो शब्द प्रयोग गर्छौं र धेरै हदसम्म यसमा सहमत छौं, तर कहिलेकाहीँ यो धेरै फराकिलो हुन सक्छ। बुटस्ट्र्यापमा प्रत्येक कम्पोनेन्ट पूर्ण रूपमा उत्तरदायी हुनुहुँदैन, यो उत्तरदायी दृष्टिकोणले भ्यूपोर्ट ठूलो हुँदै जाँदा शैलीहरू थप्नको लागि तपाईंलाई धक्का दिएर CSS ओभरराइडहरू घटाउने बारे हो।

बुटस्ट्र्यापमा, तपाइँ यसलाई हाम्रो मिडिया प्रश्नहरूमा सबैभन्दा स्पष्ट रूपमा देख्नुहुनेछ। धेरै जसो अवस्थामा, हामी min-widthएक विशेष ब्रेकपोइन्टमा लागू हुन सुरु हुने र उच्च ब्रेकपोइन्टहरू मार्फत जारी गर्ने प्रश्नहरू प्रयोग गर्छौं। उदाहरण को लागी, एक देखि अनन्तता मा .d-noneलागू हुन्छ । min-width: 0अर्कोतर्फ, .d-md-noneमध्यम ब्रेकपोइन्ट र माथिबाट लागू हुन्छ।

कहिलेकाहीँ हामी प्रयोग गर्नेछौं max-widthजब कम्पोनेन्टको अन्तर्निहित जटिलतालाई आवश्यक पर्दछ। कहिलेकाहीँ, यी ओभरराइडहरू हाम्रो कम्पोनेन्टहरूबाट कोर कार्यक्षमता पुन: लेख्नु भन्दा कार्यान्वयन गर्न र समर्थन गर्न कार्यात्मक र मानसिक रूपमा स्पष्ट हुन्छन्। हामी यो दृष्टिकोण सीमित गर्न प्रयास गर्छौं, तर समय समयमा प्रयोग गर्नेछौं।

कक्षाहरू

हाम्रो रिबुट, क्रस-ब्राउजर सामान्यीकरण स्टाइलसिट बाहेक, हाम्रा सबै शैलीहरूले चयनकर्ताहरूको रूपमा कक्षाहरू प्रयोग गर्ने लक्ष्य राख्छन्। यसको मतलब प्रकार चयनकर्ताहरू (जस्तै, input[type="text"]) र बाह्य अभिभावक वर्गहरू (जस्तै, .parent .child) लाई सजिलै ओभरराइड गर्नका लागि शैलीहरू धेरै विशिष्ट बनाउँदछ।

जस्तै, कम्पोनेन्टहरू आधार वर्गको साथ निर्माण गरिनुपर्छ जसमा सामान्य, ओभरराइड नहुने सम्पत्ति-मान जोडीहरू छन्। उदाहरण को लागी, .btnर .btn-primary। हामी .btnसबै सामान्य शैलीहरू जस्तै display, paddingर border-width. .btn-primaryहामी त्यसपछि रङ, पृष्ठभूमि-रङ, किनारा-रङ, आदि थप्न परिमार्जनहरू प्रयोग गर्छौं ।

परिमार्जक वर्गहरू मात्र प्रयोग गरिनु पर्छ जब त्यहाँ धेरै गुणहरू वा मानहरू छन् जुन धेरै भेरियन्टहरूमा परिवर्तन गर्न सकिन्छ। परिमार्जकहरू सधैं आवश्यक हुँदैनन्, त्यसैले निश्चित गर्नुहोस् कि तपाइँ वास्तवमा कोडका रेखाहरू बचत गर्दै हुनुहुन्छ र तिनीहरूलाई सिर्जना गर्दा अनावश्यक ओभरराइडहरू रोक्दै हुनुहुन्छ। परिमार्जकहरूको राम्रो उदाहरणहरू हाम्रा विषयवस्तु रङ वर्गहरू र साइज भेरियन्टहरू हुन्।

z-सूचकांक मापन

बुटस्ट्र्यापमा दुईवटा z-indexस्केलहरू छन्—एउटा कम्पोनेन्ट र ओभरले कम्पोनेन्ट भित्रका तत्वहरू।

घटक तत्वहरू

• borderबुटस्ट्र्यापका केही कम्पोनेन्टहरू सम्पत्ति परिमार्जन नगरी दोहोरो सीमानाहरू रोक्नको लागि ओभरल्यापिङ तत्वहरूसँग बनाइएका छन् । उदाहरण को लागी, बटन समूह, इनपुट समूह, र पृष्ठांकन।
• यी कम्पोनेन्टहरूले थ्रुको मानक z-indexस्केल साझा 0गर्छन् 3।
• 0पूर्वनिर्धारित (प्रारम्भिक), 1is :hover, 2is :active/ .active, र , 3is :focus।
• यो दृष्टिकोणले उच्चतम प्रयोगकर्ता प्राथमिकताको हाम्रो अपेक्षाहरूसँग मेल खान्छ। यदि कुनै तत्व केन्द्रित छ भने, यो दृश्यमा र प्रयोगकर्ताको ध्यानमा छ। सक्रिय तत्वहरू दोस्रो उच्च छन् किनभने तिनीहरूले राज्य संकेत गर्छन्। होभर तेस्रो उच्च हो किनभने यसले प्रयोगकर्ताको अभिप्रायलाई संकेत गर्छ, तर लगभग कुनै पनि कुरा होभर गर्न सकिन्छ।

ओभरले कम्पोनेन्टहरू

बुटस्ट्र्यापले धेरै कम्पोनेन्टहरू समावेश गर्दछ जुन कुनै प्रकारको ओभरलेको रूपमा कार्य गर्दछ। यसमा उच्चतम z-index, ड्रपडाउनहरू, निश्चित र टाँसिने नेभबारहरू, मोडलहरू, टुलटिपहरू, र पोपोभरहरू समावेश छन्। यी कम्पोनेन्टहरूको आफ्नै z-indexस्केल छ जुन मा सुरु हुन्छ 1000। यो सुरुवात नम्बर अनियमित छ र हाम्रो शैलीहरू र तपाईंको परियोजनाको अनुकूलन शैलीहरू बीचको सानो बफरको रूपमा काम गर्दछ।

प्रत्येक ओभरले कम्पोनेन्टले यसको मान अलिकति बढाउँछ z-indexजसरी सामान्य UI सिद्धान्तहरूले प्रयोगकर्तालाई केन्द्रित वा होभर गरिएका तत्वहरूलाई सधैं दृश्यमा रहन अनुमति दिन्छ। उदाहरण को लागी, एक मोडल कागजात अवरुद्ध हो (जस्तै, तपाइँ मोडल को कार्य को लागी कुनै पनि अन्य कार्य गर्न सक्नुहुन्न), त्यसैले हामीले यसलाई हाम्रो नेभबार माथि राख्छौं।

हाम्रो z-indexलेआउट पृष्ठमा यस बारे थप जान्नुहोस् ।

JS मा HTML र CSS

सम्भव भएसम्म, हामी JavaScript मा HTML र CSS लेख्न रुचाउँछौं। सामान्यतया, HTML र CSS सबै फरक अनुभव स्तरका धेरै व्यक्तिहरूका लागि धेरै प्रबल र पहुँचयोग्य छन्। HTML र CSS तपाईको ब्राउजरमा JavaScript भन्दा छिटो छन्, र तपाईको ब्राउजरले सामान्यतया तपाईको लागि धेरै प्रकारको कार्यक्षमता प्रदान गर्दछ।

यो सिद्धान्त हाम्रो प्रथम श्रेणीको JavaScript API dataविशेषताहरू हो। हाम्रो JavaScript प्लगइनहरू प्रयोग गर्नको लागि तपाईंले लगभग कुनै पनि JavaScript लेख्न आवश्यक छैन; बरु, HTML लेख्नुहोस्। हाम्रो जाभास्क्रिप्ट सिंहावलोकन पृष्ठमा यस बारे थप पढ्नुहोस् ।

अन्तमा, हाम्रा शैलीहरू सामान्य वेब तत्वहरूको आधारभूत व्यवहारमा निर्माण हुन्छन्। सम्भव भएसम्म, हामी ब्राउजरले उपलब्ध गराएको कुरा प्रयोग गर्न रुचाउँछौं। उदाहरण को लागी, तपाइँ लगभग कुनै पनि तत्व मा एक वर्ग राख्न सक्नुहुन्छ .btn, तर धेरै तत्वहरु कुनै पनि अर्थ मान वा ब्राउजर कार्यक्षमता प्रदान गर्दैनन्। त्यसोभए, हामी <button>s र <a>s प्रयोग गर्छौं।

उस्तै थप जटिल घटकहरूको लागि जान्छ। हामीले इनपुटको अवस्थाको आधारमा अभिभावक तत्वमा कक्षाहरू थप्नको लागि हाम्रो आफ्नै फारम प्रमाणीकरण प्लगइन लेख्न सक्छौं, जसले हामीलाई पाठलाई रातो भन्ने शैली दिन अनुमति दिन्छ, हामी प्रत्येक ब्राउजरले हामीलाई प्रदान गर्ने / स्यूडो-तत्वहरू प्रयोग गर्न रुचाउँछौं :valid।:invalid

उपयोगिताहरू

उपयोगिता वर्गहरू - पहिले बुटस्ट्र्याप 3 मा सहयोगीहरू - CSS ब्लोट र खराब पृष्ठ प्रदर्शन विरुद्ध लड्न एक शक्तिशाली सहयोगी हुन्। एक उपयोगिता वर्ग सामान्यतया एकल, अपरिवर्तनीय सम्पत्ति-मान जोडा वर्गको रूपमा व्यक्त गरिन्छ (जस्तै, .d-blockप्रतिनिधित्व गर्दछ display: block;)। तिनीहरूको प्राथमिक अपील HTML लेख्दा प्रयोगको गति हो र तपाईले लेख्नु पर्ने अनुकूलन CSS को मात्रा सीमित गर्नुहोस्।

विशेष रूपमा अनुकूलन CSS को सन्दर्भमा, उपयोगिताहरूले तपाइँको प्रायः दोहोरिने सम्पत्ति-मान जोडीहरूलाई एकल वर्गहरूमा घटाएर फाइलको आकार बढाउन लड्न मद्दत गर्न सक्छ। यसले तपाईंको परियोजनाहरूमा मापनमा नाटकीय प्रभाव पार्न सक्छ।

लचिलो HTML

सँधै सम्भव नभए पनि, हामी कम्पोनेन्टहरूका लागि हाम्रा HTML आवश्यकताहरूमा अत्यधिक कट्टरपन्थी हुनबाट जोगिन प्रयास गर्छौं। >यसैले, हामी हाम्रो CSS चयनकर्ताहरूमा एकल कक्षाहरूमा ध्यान केन्द्रित गर्छौं र तत्काल बालबालिका चयनकर्ताहरू ( ) बाट बच्न प्रयास गर्छौं । यसले तपाइँलाई तपाइँको कार्यान्वयनमा थप लचिलोपन दिन्छ र हाम्रो CSS सरल र कम विशिष्ट राख्न मद्दत गर्दछ।