समीपगमनम्‌

यदा आरम्भपृष्ठानि परियोजनायाः परिचयात्मकं भ्रमणं प्रददति तथा च तत् किं प्रदाति, तथापि एतत् दस्तावेजं तस्मिन् केन्द्रितं भवति यत् वयं Bootstrap मध्ये यत् कार्यं कुर्मः तत् किमर्थं कुर्मः। एतत् अस्माकं दर्शनं जालपुटे निर्माणं प्रति व्याख्यायते येन अन्ये अस्मात् शिक्षितुं, अस्माभिः सह योगदानं दातुं, अस्मान् उन्नतिं कर्तुं च साहाय्यं कर्तुं शक्नुवन्ति।

किमपि पश्यन्तु यत् सम्यक् न ध्वनितुं शक्यते, अथवा सम्भवतः उत्तमं कर्तुं शक्यते स्म? एकं मुद्दाम् उद्घाटयतु —वयं भवद्भिः सह तस्य विषये चर्चां कर्तुं प्रीतिमान् भविष्यामः।

संक्षेपः

वयं एतेषु प्रत्येकं अधिकं सम्पूर्णे गोतां करिष्यामः, परन्तु उच्चस्तरस्य, अत्र अस्माकं दृष्टिकोणं किं मार्गदर्शनं करोति।

• घटक प्रतिक्रियाशील एवं चल-प्रथम होना चाहिए
• घटकाः आधारवर्गेण सह निर्मिताः भवेयुः तथा च परिवर्तकवर्गाणां माध्यमेन विस्तारिताः भवेयुः
• घटक अवस्थाओं को एक सामान्य z-सूचकांक स्केल का पालन करना चाहिए
• यदा यदा सम्भवं तदा जावास्क्रिप्ट् इत्यस्मात् अपेक्षया HTML तथा CSS कार्यान्वयनम् प्राधान्यं ददातु
• यदा यदा सम्भवं तदा कस्टम् शैल्याः उपरि उपयोगितानां उपयोगं कुर्वन्तु
• यदा यदा सम्भवं तदा कठोर HTML आवश्यकताः (बालचयनकर्तारः) प्रवर्तयितुं परिहरन्तु ।

प्रतिक्रियाशीलः

Bootstrap इत्यस्य प्रतिक्रियाशीलशैल्याः प्रतिक्रियाशीलाः भवितुम् निर्मिताः सन्ति, एकः दृष्टिकोणः यः प्रायः mobile-first इति उच्यते । वयं अस्माकं docs मध्ये एतत् पदं उपयुञ्ज्महे तथा च बहुधा सहमताः स्मः, परन्तु कदाचित् अतीव व्यापकं भवितुम् अर्हति । यद्यपि Bootstrap मध्ये प्रत्येकं घटकं पूर्णतया प्रतिक्रियाशीलं न भवितुमर्हति तथापि एषः प्रतिक्रियाशीलः उपायः दृश्यपोर्ट् बृहत् भवति चेत् शैल्याः योजयितुं भवन्तं धक्काय CSS अधिलेखनस्य न्यूनीकरणस्य विषये अस्ति

Bootstrap इत्यस्य पारं, भवान् अस्माकं मीडिया-प्रश्नेषु एतत् सर्वाधिकं स्पष्टतया पश्यति । अधिकांशतया, वयं min-widthतान् प्रश्नान् उपयुञ्ज्महे ये विशिष्टे breakpoint इत्यत्र प्रयोक्तुं आरभन्ते तथा च उच्चतर breakpoints मार्गेण उपरि वहन्ति । यथा - अ .d-noneतः min-width: 0अनन्तं प्रति प्रसज्येत । अपरं तु .d-md-noneमध्यमभङ्गात् ऊर्ध्वं च क प्रवर्तते ।

कदाचित् वयं max-widthयदा घटकस्य निहितजटिलतायाः आवश्यकता भवति तदा तस्य उपयोगं करिष्यामः । कदाचित्, एते अधिलेखाः अस्माकं घटकेभ्यः मूलकार्यक्षमतां पुनर्लेखनस्य अपेक्षया कार्यान्वितुं समर्थयितुं च कार्यात्मकरूपेण मानसिकरूपेण च स्पष्टतराः भवन्ति । वयं एतत् उपायं सीमितं कर्तुं प्रयत्नशीलाः स्मः, परन्तु समये समये तस्य उपयोगं करिष्यामः।

कक्षाः

अस्माकं Reboot, एकं cross-browser normalization stylesheet इत्येतत् अपि विहाय, अस्माकं सर्वाणि शैल्यानि वर्गान् चयनकर्तारूपेण उपयोक्तुं लक्ष्यन्ते । अस्य अर्थः अस्ति यत् प्रकारचयनकर्तृभ्यः (उदा., input[type="text"]) तथा च अतिरिक्तमातृवर्गेभ्यः (उदा., .parent .child) दूरं गन्तुं यत् शैल्याः अत्यन्तं विशिष्टानि कुर्वन्ति येन सुलभतया अधिलिखितुं शक्यते ।

तथा च, घटकाः एकेन आधारवर्गेण सह निर्मिताः भवेयुः यस्मिन् सामान्यानि, अ-अवरोहिताः गुण-मूल्य-युग्मानि सन्ति । यथा, .btnतथा .btn-primary. वयं , , .btnइत्यादीनां सर्वेषां सामान्यशैल्याः कृते उपयुञ्ज्महे | ततः वयं वर्णं, background-color, border-color इत्यादीनि योजयितुं इत्यादीनि modifiers इत्यस्य उपयोगं कुर्मः ।displaypaddingborder-width.btn-primary

परिवर्तकवर्गाणां उपयोगः केवलं तदा एव कर्तव्यः यदा बहुविधरूपान्तरेषु परिवर्तनीयानि बहुविधाः गुणाः वा मूल्यानि वा सन्ति । परिवर्तकाः सर्वदा आवश्यकाः न भवन्ति, अतः सुनिश्चितं कुर्वन्तु यत् भवान् वास्तवतः कोडस्य रेखाः रक्षति तथा च तान् निर्माय अनावश्यक-अधिक्रमणं निवारयति । परिवर्तकानाम् उत्तमाः उदाहरणानि अस्माकं विषयवर्णवर्गाः आकारविविधताः च सन्ति ।

z-सूचकांक स्केल

Bootstrap इत्यस्मिन् द्वौ स्केलौ स्तः z-index—एकस्य घटकस्य अन्तः तत्त्वानि तथा च ओवरले घटकानि ।

घटक तत्व

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

घटकों को ओवरले करें

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

प्रत्येकं ओवरले घटकं स्वस्य मूल्यं किञ्चित् वर्धयति z-indexएतादृशरीत्या यत् सामान्य UI सिद्धान्ताः उपयोक्तृकेन्द्रितानि अथवा मण्डितानि तत्त्वानि सर्वदा दृश्ये एव तिष्ठन्ति यथा, एकः मोडल् document blocking अस्ति (उदा., भवान् मोडलस्य क्रियायाः कृते रक्षित्वा अन्यत् किमपि कार्यं कर्तुं न शक्नोति), अतः वयं तत् अस्माकं navbars उपरि स्थापयामः ।

z-indexअस्माकं विन्यासपृष्ठे अस्य विषये अधिकं ज्ञातुं शक्नुवन्ति .

JS इत्यस्य उपरि HTML तथा CSS

यदा यदा सम्भवं तदा वयं जावास्क्रिप्ट् इत्यस्मात् अधिकं HTML तथा CSS इति लिखितुं रोचयामः । सामान्यतया HTML तथा CSS अधिकं प्रचुरं भवति तथा च सर्वेषां भिन्न-भिन्न-अनुभव-स्तरस्य अधिक-जनानाम् कृते सुलभं भवति । HTML तथा CSS अपि भवतः ब्राउजरे जावास्क्रिप्ट् इत्यस्मात् अपेक्षया द्रुततरं भवति, तथा च भवतः ब्राउजर् सामान्यतया भवतः कृते महतीं कार्यक्षमतां प्रदाति ।

एषः सिद्धान्तः अस्माकं प्रथमश्रेणीयाः जावास्क्रिप्ट् एपिआइ अस्ति dataविशेषतानां उपयोगेन । अस्माकं जावास्क्रिप्ट् प्लगिन्स् इत्यस्य उपयोगाय भवद्भिः प्रायः किमपि जावास्क्रिप्ट् लिखितुं न प्रयोजनम्; तस्य स्थाने HTML लिखन्तु । अस्य विषये अधिकं पठन्तु अस्माकं जावास्क्रिप्ट् अवलोकनपृष्ठे .

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

अधिकजटिलघटकानाम् अपि तथैव भवति । यद्यपि वयं स्वकीयं form validation plugin लिखितुं शक्नुमः यत् एकस्य input इत्यस्य स्थितिम् आधारीकृत्य parent element मध्ये classes योजयितुं शक्नुमः, तस्मात् अस्मान् text इत्यस्य style red इति कृत्वा, वयं प्रत्येकं browser अस्मान् प्रदाति :valid/ pseudo-elements इत्यस्य उपयोगं रोचयामः:invalid

उपयोगिताएँ

उपयोगितावर्गाः-पूर्वं Bootstrap 3 इत्यस्मिन् सहायकाः-CSS bloat इत्यस्य निवारणे तथा च पृष्ठस्य दुर्बलप्रदर्शनस्य निवारणे एकः शक्तिशाली मित्रपक्षः अस्ति । एकः उपयोगितावर्गः सामान्यतया एकः, अपरिवर्तनीयः गुण-मूल्य-युग्मः भवति यः वर्गरूपेण व्यक्तः भवति (उदा., .d-blockप्रतिनिधियति display: block;) । तेषां प्राथमिकं आकर्षणं HTML लेखनकाले उपयोगस्य गतिः अस्ति तथा च भवद्भिः लिखितव्यस्य कस्टम् CSS इत्यस्य परिमाणं सीमितं भवति ।

विशेषतः कस्टम् CSS इत्यस्य विषये, उपयोगिताः भवतः अधिकतया पुनरावृत्ति-गुण-मूल्य-युग्मान् एकवर्गेषु न्यूनीकृत्य वर्धमान-सञ्चिका-आकारस्य निवारणे सहायतां कर्तुं शक्नुवन्ति एतेन भवतः परियोजनासु स्केल-रूपेण नाटकीयः प्रभावः भवितुम् अर्हति ।

लचीला एचटीएमएल

यद्यपि सर्वदा सम्भवं न भवति तथापि घटकानां कृते अस्माकं HTML आवश्यकतासु अत्यधिकं हठधर्मीत्वं परिहरितुं प्रयत्नशीलाः स्मः । एवं वयं अस्माकं CSS चयनकर्तासु एकवर्गेषु ध्यानं दद्मः तथा च तत्कालीनबालचयनकर्तृषु ( >) परिहारं कर्तुं प्रयत्नशीलाः स्मः। एतेन भवतः कार्यान्वयनस्य अधिकं लचीलता प्राप्यते तथा च अस्माकं CSS सरलं न्यूनविशिष्टं च स्थापयितुं साहाय्यं भवति ।

संहिता रूढ़ियाँ

Code Guide (Botstrap co-creator, @mdo इत्यस्मात्) दस्तावेजीकरणं करोति यत् वयं Bootstrap मध्ये अस्माकं HTML तथा CSS कथं लिखामः । सामान्यस्वरूपणस्य, सामान्यज्ञानस्य पूर्वनिर्धारितस्य, गुणस्य विशेषतायाः च आदेशानां, इत्यादीनां मार्गदर्शिकाः निर्दिशति ।

वयं अस्माकं Sass/CSS मध्ये एतान् मानकान् अधिकं च प्रवर्तयितुं Stylelint इत्यस्य उपयोगं कुर्मः । अस्माकं कस्टम् Stylelint config open source अस्ति तथा च अन्येषां उपयोगाय विस्ताराय च उपलभ्यते ।

वयं मानक-शब्दार्थ-HTML-प्रवर्तनार्थं, सामान्यदोषान् ज्ञातुं च vnu-jar इत्यस्य उपयोगं कुर्मः ।