मोख
Bootstrap तयार करपाक आनी सांबाळपाक वापरिल्ल्या मार्गदर्शक तत्वां, रणनिती, आनी तंत्रां विशीं जाणून घेयात जेणे करून तुमी स्वता चड सोंपेंपणान सानुकूल करूंक आनी विस्तार करूंक शकतात.
सुरवात करपाचीं पानां प्रकल्पाची आनी तो कितें दिता हाची परिचयात्मक भोंवडी दितात, जाल्यार, हो दस्तावेज आमी Bootstrap त करतात तीं कामां कित्याक करतात हाचेर लक्ष केंद्रीत करता. हेरांक आमचे कडल्यान शिकपाक, आमचे वांगडा योगदान दिवपाक आनी आमकां सुदारपाक मदत करपाक वेबचेर बांदपाक आमचें तत्वगिन्यान स्पश्ट करता.
कितें तरी दिसता जें बरोबर आयकूंक येना, वा घडये ताचे परस बरे तरेन करूं येतालें? एक मुद्दो उगडा —तुमच्या कडेन ताचेर चर्चा करपाक आमकां खूब आवडटलें.
सारांश
आमी ह्या दरेकाक चड करून बुडटले, पूण उंचेल्या पांवड्यार, हांगा आमच्या पद्दतीक मार्गदर्शन करता तें.
- घटक प्रतिसाद दिवपी आनी मोबायल-पयले आसूंक जाय
- घटक बेस क्लासासयत तयार करपाक जाय आनी संशोधक वर्गांवरवीं विस्तारपाक जाय
- घटक अवस्थांनी एक सामान्य z-सूचकांक प्रमाण पाळपाक जाय
- शक्य आसल्यार, जावास्क्रिप्ट परस HTML आनी CSS कार्यान्वयन पसंत करात
- शक्य आसल्यार, सानुकूल शैलींचेर उपयुक्तताय वापरात
- शक्य आसल्यार, खर HTML गरजां लागू करप टाळचें (भुरग्यांचे निवडक)
प्रतिसाद दिवपी
बूटस्ट्रॅपाची प्रतिसाद शैली प्रतिसाद दिवपी जावपाक तयार केल्यात, एक पद्दत जाका चड करून मोबायल-पयली अशें म्हण्टात . आमी ही संज्ञा आमच्या डॉक्सांत वापरतात आनी चड करून ताका मान्यताय दितात, पूण कांय वेळार ती चड व्यापक आसूं येता. बूटस्ट्रॅपांत दरेक घटक पुरायपणान प्रतिसाद दिवपी आसूंक फावना, तरी हो प्रतिसाद दिवपी पद्दत दृश्यपोर्ट व्हड जातकच तुमकां शैली जोडपाक धक्को दिवन CSS ओव्हररायड्स उणे करपा विशीं आसा.
बूटस्ट्रॅपभर, तुमकां आमच्या मिडिया क्वेरींत हें सगळ्यांत स्पश्ट दिसतलें. चडशा प्रकरणांनी, आमी min-width
विशिश्ट ब्रेकपॉइंटाचेर लागू जावपाक सुरवात करपी आनी चड ब्रेकपॉइंटांतल्यान वयर व्हरपी क्वेरी वापरतात. देखीक- a पासून अनंताक .d-none
लागू जाता . min-width: 0
दुसरे वटेन a .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
मुलभूत (सुरवाती) आसा,1
आसा:hover
,2
आसा:active
/.active
, आनी3
आसा:focus
.- हो पद्दत आमच्या सगळ्यांत चड वापरप्यांच्या प्राधान्याच्या अपेक्षां कडेन जुळटा. घटक केंद्रीत आसल्यार तो नदरेक आनी वापरप्याच्या लक्षांत आसता. सक्रिय घटक अवस्था दाखयतात म्हणून ते दुसरे क्रमांकाचेर आसतात. होवर वापरप्याचो हेतू दाखयता म्हणून तिसरो सगळ्यांत चड आसा, पूण लागीं लागीं खंयचीय गजाल होवर करूं येता.
घटक आच्छादन करतात
बूटस्ट्रॅपांत कांय प्रकारचे आच्छादन म्हणून काम करपी जायते घटक आसपावीत आसात. हातूंत, चडांत चड क्रमांकान z-index
, ड्रॉपडावन, स्थिर आनी चिकट नवबार, मोडल, टूलटिप्स, आनी पोपोव्हर हांचो आस्पाव जाता. ह्या घटकांक आपलें z-index
प्रमाण आसता जें सुरू जाता 1000
. हो सुरवातीचो क्रमांक मनमानीपणान निवडला आनी आमच्या शैलीं मदीं आनी तुमच्या प्रकल्पाच्या सानुकूल शैलीं मदीं एक ल्हान बफर म्हणून काम करता.
दरेक आच्छादन घटक आपलें z-index
मोल मात्शें वाडयता अशे तरेन की सामान्य UI तत्वां वापरप्याक केंद्रीत वा होवर केल्ल्या घटकांक सगळ्या वेळार पळोवपांत उरपाक परवानगी दितात. देखीक, एक मोडल दस्तावेज आडावप आसा (देखीक, मोडालाच्या कृती खातीर जतनाय सोडल्यार तुमी हेर कसलीच कृती करूंक शकना), देखून आमी तें आमच्या नवबारां वयर दवरतात.
हे विशीं चड जाणून घेयात आमच्या z-index
मांडावळ पानांत .
जेएसचेर एचटीएमएल आनी सीएसएस
शक्य आसल्यार जावास्क्रिप्टाचेर HTML आनी CSS बरोवपाक आमी पसंत करतात. सादारणपणान, एचटीएमएल आनी सीएसएस चड उत्पादनशील आनी सगळ्या वेगवेगळ्या अणभव पातळेच्या चड लोकांक सुलभ आसात. HTML आनी CSS लेगीत तुमच्या ब्राउझरांत JavaScript परस वेगवान आसतात, आनी तुमचो ब्राउझर सादारणपणान तुमकां व्हड प्रमाणांत कार्यक्षमताय पुरवण करता.
हें तत्व आमचें पयल्या दर्जाचें जावास्क्रिप्ट एपीआय आसा जें data
गुणधर्म वापरता. आमचे जावास्क्रिप्ट प्लगइन वापरपाक तुमकां लागीं लागीं खंयचीय जावास्क्रिप्ट बरोवपाची गरज ना; ताचे बदला एचटीएमएल बरयात. हाचे विशीं चड वाचात आमच्या जावास्क्रिप्ट अवलोकन पानांत .
निमाणें, आमच्यो शैली सामान्य वेब घटकांच्या मुळाव्या वर्तनाचेर उबारतात. शक्य आसल्यार, ब्राउझर दिता तें वापरपाक आमी पसंत करतात. देखीक, तुमी .btn
लागीं लागीं खंयच्याय घटकाचेर वर्ग घालूंक शकतात, पूण चडशे घटक कसलेंच अर्थपूर्ण मोल वा ब्राउझर कार्यक्षमताय दिना. देखून ताचे बदला आमी <button>
s आनी <a>
s वापरतात.
चड गुंतागुंतीच्या घटकांविशींय तशेंच. आमी एक इनपुटाचे स्थितीचेर आदारीत पालक घटकाक वर्ग जोडपाक आमचें स्वताचें फॉर्म प्रमाणीकरण प्लगइन बरोवंक शकतले , जाका लागून आमकां तांबडो म्हण मजकूर शैली करपाक मेळटा, आमी दरेक ब्राउझर आमकां पुरवण करता ते :valid
/ pseudo-elements वापरपाक पसंत करतात.:invalid
उपयुक्तताय
उपयुक्तताय वर्ग-आदीं Bootstrap 3 त मदत करपी-CSS bloat आनी वायट पान कार्यक्षमताय आडावंक एक बळिश्ट इश्ट आसात. उपयुक्तताय वर्ग हो सादारणपणान एकूच, अपरिवर्तनीय गुणधर्म-मूल्य जोडणी आसता जी वर्ग म्हणून व्यक्त केल्ली आसता (देखीक, .d-block
प्रतिनिधित्व करता display: block;
). तांचें मुखेल आवाहन म्हणल्यार HTML बरयतना वापरपाची गती आनी तुमकां बरोवपाक जाय आशिल्ल्या सानुकूल CSS चें प्रमाण मर्यादीत करप.
खासा करून सानुकूल CSS संबंदी, उपयुक्तताय तुमच्या चड करून परत परत केल्लीं गुणधर्म-मोल जोडयो एकाच वर्गांत उणी करून फायल आकार वाडपाक आडावपाक मदत करूंक शकतात. हाचो तुमच्या प्रकल्पांत प्रमाणांत नाटकीय परिणाम जावंक शकता.
लवचीक एचटीएमएल
सदांच शक्य नासलें तरी, घटकां खातीर आमच्या HTML गरजांत चड रूढिवाद टाळपाचो आमी यत्न करतात. अशे तरेन, आमी आमच्या CSS निवडकांतल्या एकाच वर्गांचेर लक्ष केंद्रीत करतात आनी तात्काळ भुरगीं निवडक टाळपाचो यत्न करतात ( >
). हाका लागून तुमच्या कार्यान्वयनांत चड लवचीकता मेळटा आनी आमचो CSS सादें आनी उणो विशिश्ट दवरपाक मदत जाता.
संहिता रूढिवाद
कोड मार्गदर्शक (बूटस्ट्रॅप सह-निर्माता, @mdo कडल्यान) आमी आमचें HTML आनी CSS बूटस्ट्रॅपभर कशें बरयतात तें दस्तावेजीकरण करता. तो सामान्य स्वरूपण, सामान्य बुद्दी मुलभूत, गुणधर्म आनी गुणधर्म क्रम, आनी हेर खातीर मार्गदर्शक तत्वां निर्देशीत करता.
आमच्या Sass/CSS त हे मानक आनी चड लागू करपाक आमी Stylelint वापरतात . आमची सानुकूल Stylelint कॉन्फिग मुक्त स्रोत आसा आनी हेरांक वापरपाक आनी विस्तारपाक उपलब्ध आसा.
मानक आनी अर्थपूर्ण HTML लागू करपाक, तशेंच सामान्य चुको सोदून काडपाक आमी vnu-jar वापरतात.