அணுகுமுறை

தொடங்கும் பக்கங்கள் திட்டத்தின் அறிமுகப் பயணத்தையும் அது என்ன வழங்குகிறது என்பதையும் இந்த ஆவணம் பூட்ஸ்டார்ப்பில் நாம் ஏன் செய்கிறோம் என்பதில் கவனம் செலுத்துகிறது. இணையத்தில் உருவாக்குவதற்கான எங்கள் தத்துவத்தை இது விளக்குகிறது, இதன் மூலம் மற்றவர்கள் எங்களிடமிருந்து கற்றுக்கொள்ளவும், எங்களுடன் பங்களிக்கவும், மேலும் நம்மை மேம்படுத்த உதவவும் முடியும்.

சரியாகத் தெரியவில்லை, அல்லது இன்னும் சிறப்பாகச் செய்ய முடியுமா? ஒரு சிக்கலைத் திறக்கவும் - அதை உங்களுடன் விவாதிக்க நாங்கள் விரும்புகிறோம்.

சுருக்கம்

இவை ஒவ்வொன்றிலும் முழுக்க முழுக்க முழுக்கச் செய்வோம், ஆனால் உயர் மட்டத்தில், எங்கள் அணுகுமுறைக்கு வழிகாட்டுவது இங்கே.

• கூறுகள் பதிலளிக்கக்கூடியதாகவும் மொபைலாகவும் இருக்க வேண்டும்
• கூறுகள் அடிப்படை வகுப்பைக் கொண்டு கட்டமைக்கப்பட வேண்டும் மற்றும் மாற்றி வகுப்புகள் வழியாக நீட்டிக்கப்பட வேண்டும்
• கூறு நிலைகள் பொதுவான 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அளவைப் பகிர்ந்து கொள்கின்றன .03
• 0இயல்புநிலை (ஆரம்ப), 1உள்ளது :hover, 2உள்ளது :active/ , .activeமற்றும் 3.:focus
• இந்த அணுகுமுறை அதிக பயனர் முன்னுரிமைக்கான எங்கள் எதிர்பார்ப்புகளுடன் பொருந்துகிறது. ஒரு உறுப்பு கவனம் செலுத்தினால், அது பார்வையிலும் பயனரின் கவனத்திலும் இருக்கும். செயலில் உள்ள கூறுகள் இரண்டாவது மிக உயர்ந்தவை, ஏனெனில் அவை நிலையைக் குறிக்கின்றன. ஹோவர் மூன்றாவது இடத்தில் உள்ளது, ஏனெனில் இது பயனர் நோக்கத்தைக் குறிக்கிறது, ஆனால் கிட்டத்தட்ட எதையும் வட்டமிடலாம்.

மேலடுக்கு கூறுகள்

பூட்ஸ்டார்ப் சில வகையான மேலடுக்குகளாக செயல்படும் பல கூறுகளை உள்ளடக்கியது. இதில், மிக உயர்ந்த z-index, கீழ்தோன்றும், நிலையான மற்றும் ஒட்டும் நேவ்பார்கள், மாதிரிகள், உதவிக்குறிப்புகள் மற்றும் பாப்ஓவர்கள் ஆகியவை அடங்கும். இந்த கூறுகள் அவற்றின் சொந்த z-indexஅளவைக் கொண்டுள்ளன, அவை தொடங்கும் 1000. இந்த தொடக்க எண் தன்னிச்சையாக தேர்ந்தெடுக்கப்பட்டது மற்றும் எங்கள் பாணிகள் மற்றும் உங்கள் திட்டத்தின் தனிப்பயன் பாணிகளுக்கு இடையில் ஒரு சிறிய இடையகமாக செயல்படுகிறது.

ஒவ்வொரு மேலடுக்கு கூறுகளும் அதன் z-indexமதிப்பை சிறிது அதிகரிக்கிறது, இதனால் பொதுவான UI கொள்கைகள் பயனர் கவனம் செலுத்திய அல்லது வட்டமிடப்பட்ட கூறுகளை எல்லா நேரங்களிலும் பார்வைக்கு அனுமதிக்கும். எடுத்துக்காட்டாக, ஒரு மாதிரி என்பது ஆவணத்தைத் தடுப்பதாகும் (எ.கா., மாதிரியின் செயலைத் தவிர வேறு எந்தச் செயலையும் நீங்கள் எடுக்க முடியாது), எனவே அதை எங்கள் navbarகளுக்கு மேலே வைக்கிறோம்.

z-indexஎங்கள் தளவமைப்பு பக்கத்தில் இதைப் பற்றி மேலும் அறிக .

JS மூலம் HTML மற்றும் CSS

முடிந்தவரை, ஜாவாஸ்கிரிப்ட் மூலம் HTML மற்றும் CSS ஐ எழுத விரும்புகிறோம். பொதுவாக, HTML மற்றும் CSS ஆகியவை மிகவும் செழிப்பானவை மற்றும் பல்வேறு அனுபவ நிலைகளில் உள்ள அதிகமான நபர்களுக்கு அணுகக்கூடியவை. ஜாவாஸ்கிரிப்டை விட HTML மற்றும் CSS ஆகியவை உங்கள் உலாவியில் வேகமானவை, மேலும் உங்கள் உலாவி பொதுவாக உங்களுக்காக ஒரு பெரிய செயல்பாட்டை வழங்குகிறது.

dataஇந்தக் கொள்கையானது பண்புக்கூறுகளைப் பயன்படுத்தி எங்களின் முதல் வகுப்பு JavaScript API ஆகும் . எங்கள் ஜாவாஸ்கிரிப்ட் செருகுநிரல்களைப் பயன்படுத்த நீங்கள் கிட்டத்தட்ட எந்த ஜாவாஸ்கிரிப்டையும் எழுத வேண்டியதில்லை; அதற்கு பதிலாக, HTML எழுதவும். எங்கள் ஜாவாஸ்கிரிப்ட் மேலோட்டப் பக்கத்தில் இதைப் பற்றி மேலும் படிக்கவும் .

கடைசியாக, எங்கள் பாணிகள் பொதுவான வலை கூறுகளின் அடிப்படை நடத்தைகளை உருவாக்குகின்றன. முடிந்தவரை, உலாவி வழங்குவதைப் பயன்படுத்த விரும்புகிறோம். எடுத்துக்காட்டாக, நீங்கள் ஏறக்குறைய எந்த உறுப்புக்கும் ஒரு வகுப்பை வைக்கலாம் .btn, ஆனால் பெரும்பாலான கூறுகள் எந்த சொற்பொருள் மதிப்பையும் உலாவி செயல்பாட்டையும் வழங்காது. எனவே அதற்கு பதிலாக, நாம் <button>s மற்றும் <a>s ஐப் பயன்படுத்துகிறோம்.

மிகவும் சிக்கலான கூறுகளுக்கும் இதுவே செல்கிறது. ஒரு உள்ளீட்டின் நிலையின் அடிப்படையில் ஒரு பெற்றோர் உறுப்புக்கு வகுப்புகளைச் சேர்க்க, எங்கள் சொந்த படிவ சரிபார்ப்பு செருகுநிரலை எழுதலாம், இதன் மூலம் உரையை சிவப்பு நிறத்தில் வடிவமைக்க அனுமதிக்கிறது, ஒவ்வொரு உலாவியும்:valid நமக்கு வழங்கும் / :invalidபோலி உறுப்புகளைப் பயன்படுத்த விரும்புகிறோம்.

பயன்பாடுகள்

பயன்பாட்டு வகுப்புகள்—முன்பு பூட்ஸ்டார்ப் 3 இல் உதவியவர்கள்—CSS வீக்கம் மற்றும் மோசமான பக்க செயல்திறனை எதிர்த்துப் போராடுவதில் சக்திவாய்ந்த கூட்டாளிகள். ஒரு பயன்பாட்டு வகுப்பு என்பது பொதுவாக ஒற்றை, மாறாத சொத்து மதிப்பு இணைத்தல் என்பது ஒரு வகுப்பாக வெளிப்படுத்தப்படுகிறது (எ.கா., .d-blockகுறிக்கிறது display: block;). HTML எழுதும் போது பயன்படுத்தும் வேகம் மற்றும் நீங்கள் எழுத வேண்டிய தனிப்பயன் CSS அளவைக் கட்டுப்படுத்துவது அவர்களின் முதன்மை வேண்டுகோள்.

குறிப்பாக தனிப்பயன் CSS ஐப் பொறுத்தவரை, பயன்பாடுகள் உங்கள் பொதுவாக மீண்டும் மீண்டும் வரும் சொத்து மதிப்பு ஜோடிகளை ஒற்றை வகுப்புகளாகக் குறைப்பதன் மூலம் கோப்பு அளவை அதிகரிப்பதை எதிர்த்துப் போராட உதவும். இது உங்கள் திட்டங்களில் வியத்தகு விளைவை ஏற்படுத்தும்.

நெகிழ்வான HTML

எப்போதும் சாத்தியமில்லை என்றாலும், கூறுகளுக்கான எங்கள் HTML தேவைகளில் அதிகப்படியான பிடிவாதமாக இருப்பதைத் தவிர்க்க முயற்சி செய்கிறோம். எனவே, நாங்கள் எங்கள் CSS தேர்வாளர்களில் ஒற்றை வகுப்புகளில் கவனம் செலுத்துகிறோம் மற்றும் உடனடி குழந்தைகள் தேர்வாளர்களைத் தவிர்க்க முயற்சிக்கிறோம் ( >). இது உங்கள் செயலாக்கத்தில் அதிக நெகிழ்வுத்தன்மையை அளிக்கிறது மற்றும் எங்கள் CSS ஐ எளிமையாகவும் குறைவாகவும் வைத்திருக்க உதவுகிறது.

குறியீடு மரபுகள்

குறியீடு வழிகாட்டி (பூட்ஸ்டார்ப் இணை உருவாக்கியவர், @mdo இலிருந்து) பூட்ஸ்டார்ப் முழுவதும் நமது HTML மற்றும் CSS ஐ எவ்வாறு எழுதுகிறோம் என்பதை ஆவணப்படுத்துகிறது. இது பொதுவான வடிவமைப்பு, பொது அறிவு இயல்புநிலை, சொத்து மற்றும் பண்புக்கூறு ஆர்டர்கள் மற்றும் பலவற்றிற்கான வழிகாட்டுதல்களைக் குறிப்பிடுகிறது.

எங்கள் Sass/CSS இல் இந்தத் தரநிலைகள் மற்றும் பலவற்றைச் செயல்படுத்த Stylelint ஐப் பயன்படுத்துகிறோம் . எங்கள் தனிப்பயன் Stylelint கட்டமைப்பு திறந்த மூலமாகும் மற்றும் மற்றவர்கள் பயன்படுத்தவும் நீட்டிக்கவும் கிடைக்கிறது.

நிலையான மற்றும் சொற்பொருள் HTML ஐச் செயல்படுத்தவும், பொதுவான பிழைகளைக் கண்டறியவும் vnu-jar ஐப் பயன்படுத்துகிறோம் .