दृष्टीकोन

सुरुवातीची पृष्ठे प्रकल्पाची प्रास्ताविक फेरफटका देतात आणि ते काय ऑफर करते, हा दस्तऐवज आम्ही बूटस्ट्रॅपमध्ये का करतो त्या गोष्टींवर लक्ष केंद्रित करतो. हे वेबवर तयार करण्याचे आमचे तत्त्वज्ञान स्पष्ट करते जेणेकरून इतर आमच्याकडून शिकू शकतील, आमच्यासोबत योगदान देऊ शकतील आणि आम्हाला सुधारण्यात मदत करू शकतील.

योग्य वाटत नाही असे काहीतरी पहा, किंवा कदाचित चांगले केले जाऊ शकते? एक समस्या उघडा — आम्हाला तुमच्याशी चर्चा करायला आवडेल.

सारांश

आम्ही यापैकी प्रत्येकामध्ये अधिक डुबकी मारू, परंतु उच्च स्तरावर, आमच्या दृष्टीकोनाचे मार्गदर्शन येथे आहे.

• घटक प्रतिसादात्मक आणि मोबाइल-प्रथम असावेत
• घटक बेस क्लाससह तयार केले पाहिजेत आणि सुधारक वर्गांद्वारे विस्तारित केले पाहिजेत
• घटक राज्यांनी सामान्य 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सारख्या सर्व सामान्य शैलींसाठी वापरतो . त्यानंतर रंग, पार्श्वभूमी-रंग, बॉर्डर-रंग इ. जोडण्यासाठी आम्ही मॉडिफायर्स वापरतो .displaypaddingborder-width.btn-primary

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

z-इंडेक्स स्केल

बूटस्ट्रॅपमध्ये दोन z-indexस्केल आहेत—घटकामधील घटक आणि आच्छादन घटक.

घटक घटक

• गुणधर्म बदलल्याशिवाय दुहेरी सीमा टाळण्यासाठी बूटस्ट्रॅपमधील काही घटक ओव्हरलॅपिंग घटकांसह तयार केले जातात border. उदाहरणार्थ, बटण गट, इनपुट गट आणि पृष्ठांकन.
• हे घटक थ्रूचे मानक z-indexस्केल सामायिक 0करतात 3.
• 0डीफॉल्ट आहे (प्रारंभिक), 1आहे :hover, 2आहे :active/ .active, आणि 3आहे :focus.
• हा दृष्टीकोन सर्वोच्च वापरकर्ता प्राधान्याच्या आमच्या अपेक्षांशी जुळतो. एखाद्या घटकावर लक्ष केंद्रित केले असल्यास, ते दृश्यात आणि वापरकर्त्याच्या लक्षात असते. सक्रिय घटक दुसऱ्या क्रमांकावर आहेत कारण ते स्थिती दर्शवतात. होव्हर तिसऱ्या क्रमांकावर आहे कारण ते वापरकर्त्याचा हेतू दर्शवते, परंतु जवळपास काहीही फिरवले जाऊ शकते.

आच्छादन घटक

बूटस्ट्रॅपमध्ये अनेक घटक समाविष्ट असतात जे काही प्रकारचे आच्छादन म्हणून कार्य करतात. यामध्ये सर्वोच्च z-index, ड्रॉपडाउन्स, निश्चित आणि चिकट नॅव्हबार, मॉडेल्स, टूलटिप्स आणि पॉपओव्हर्सचा समावेश आहे. या घटकांची स्वतःची z-indexस्केल आहे जी येथे सुरू होते 1000. हा प्रारंभिक क्रमांक अनियंत्रितपणे निवडला गेला आणि आमच्या शैली आणि तुमच्या प्रकल्पाच्या सानुकूल शैलींमध्ये एक लहान बफर म्हणून काम करतो.

प्रत्येक आच्छादन घटक त्याचे z-indexमूल्य अशा प्रकारे थोडेसे वाढवतो की सामान्य UI तत्त्वे वापरकर्त्यावर केंद्रित किंवा फिरवलेले घटक नेहमी दृश्यात राहू देतात. उदाहरणार्थ, एक मॉडेल दस्तऐवज अवरोधित करणे आहे (उदा., आपण मॉडेलच्या कृतीशिवाय इतर कोणतीही कृती करू शकत नाही), म्हणून आम्ही ते आमच्या नॅव्हबारच्या वर ठेवले आहे.

z-indexआमच्या लेआउट पृष्ठावर याबद्दल अधिक जाणून घ्या .

JS वर HTML आणि CSS

जेव्हा शक्य असेल तेव्हा, आम्ही JavaScript वर HTML आणि CSS लिहिण्यास प्राधान्य देतो. सर्वसाधारणपणे, HTML आणि CSS अधिक विपुल आणि सर्व भिन्न अनुभव स्तरांच्या अधिक लोकांसाठी प्रवेशयोग्य आहेत. तुमच्‍या ब्राउझरमध्‍ये JavaScript पेक्षा HTML आणि CSS देखील जलद आहेत आणि तुमचा ब्राउझर साधारणपणे तुमच्यासाठी मोठ्या प्रमाणात कार्यक्षमता प्रदान करतो.

हे तत्त्व dataविशेषता वापरून आमचे प्रथम श्रेणीचे JavaScript API आहे. आमचे JavaScript प्लगइन वापरण्यासाठी तुम्हाला जवळपास कोणतीही JavaScript लिहिण्याची गरज नाही; त्याऐवजी HTML लिहा. आमच्या JavaScript विहंगावलोकन पृष्ठावर याबद्दल अधिक वाचा .

शेवटी, आमच्या शैली सामान्य वेब घटकांच्या मूलभूत वर्तनांवर आधारित असतात. जेव्हा शक्य असेल तेव्हा, आम्ही ब्राउझर पुरवतो ते वापरण्यास प्राधान्य देतो. उदाहरणार्थ, तुम्ही .btnजवळजवळ कोणत्याही घटकावर क्लास लावू शकता, परंतु बहुतेक घटक कोणतेही अर्थपूर्ण मूल्य किंवा ब्राउझर कार्यक्षमता प्रदान करत नाहीत. म्हणून त्याऐवजी, आम्ही <button>s आणि <a>s वापरतो.

तेच अधिक जटिल घटकांसाठी जाते. आम्ही इनपुटच्या स्थितीवर आधारित पालक घटकामध्ये वर्ग जोडण्यासाठी आमचे स्वतःचे फॉर्म प्रमाणीकरण प्लगइन लिहू शकतो , ज्यामुळे आम्हाला मजकूर लाल रंगात स्टाईल करण्याची परवानगी मिळते, आम्ही प्रत्येक ब्राउझरने आम्हाला प्रदान केलेले :valid/ स्यूडो-एलिमेंट वापरण्यास प्राधान्य देतो.:invalid

उपयुक्तता

युटिलिटी क्लासेस—आधी बूटस्ट्रॅप ३ मधील मदतनीस—सीएसएस ब्लोट आणि खराब पृष्ठ कामगिरीचा सामना करण्यासाठी एक शक्तिशाली सहयोगी आहेत. एक उपयुक्तता वर्ग हा सामान्यत: एकल, अपरिवर्तनीय मालमत्ता-मूल्य जोडणी आहे जो वर्ग म्हणून व्यक्त केला जातो (उदा. .d-blockप्रतिनिधित्व करतो display: block;). एचटीएमएल लिहिताना वापरण्याची गती आणि तुम्हाला लिहिण्यासाठी सानुकूल CSS चे प्रमाण मर्यादित करणे हे त्यांचे प्राथमिक आवाहन आहे.

विशेषत: सानुकूल CSS संदर्भात, युटिलिटीज तुमच्या सर्वात सामान्यपणे पुनरावृत्ती केलेल्या प्रॉपर्टी-व्हॅल्यू जोड्या एकल वर्गांमध्ये कमी करून फाइल आकार वाढवण्यास मदत करू शकतात. याचा तुमच्या प्रकल्पांमध्ये मोठ्या प्रमाणावर परिणाम होऊ शकतो.

लवचिक HTML

नेहमी शक्य नसले तरी, आम्ही घटकांसाठी आमच्या HTML आवश्यकतांमध्ये अत्याधिक कट्टरता टाळण्याचा प्रयत्न करतो. अशा प्रकारे, आम्ही आमच्या CSS निवडकांमध्ये एकल वर्गांवर लक्ष केंद्रित करतो आणि तात्काळ मुलांच्या निवडकांना टाळण्याचा प्रयत्न करतो ( >). हे तुम्हाला तुमच्या अंमलबजावणीमध्ये अधिक लवचिकता देते आणि आमची CSS सोपी आणि कमी विशिष्ट ठेवण्यात मदत करते.

संहिता अधिवेशने

कोड मार्गदर्शक (बूटस्ट्रॅप सह-निर्माता, @mdo कडून) आम्ही आमचे HTML आणि CSS बूटस्ट्रॅपवर कसे लिहितो हे दस्तऐवज देतो. हे सामान्य स्वरूपन, सामान्य ज्ञान डीफॉल्ट, मालमत्ता आणि विशेषता ऑर्डर आणि बरेच काही यासाठी मार्गदर्शक तत्त्वे निर्दिष्ट करते.

आम्ही आमच्या Sass/CSS मध्ये ही मानके आणि बरेच काही लागू करण्यासाठी Stylelint वापरतो. आमची सानुकूल स्टाइलिंट कॉन्फिगरेशन मुक्त स्रोत आहे आणि इतरांसाठी वापरण्यासाठी आणि विस्तारित करण्यासाठी उपलब्ध आहे.

आम्ही मानक आणि अर्थपूर्ण HTML लागू करण्यासाठी तसेच सामान्य त्रुटी शोधण्यासाठी vnu-jar वापरतो.