பூட்ஸ்ட்ராப் 5.3 இல் மாஸ்டரிங் பதிலளிக்கக்கூடிய நெடுவரிசை மடக்குதல்
பூட்ஸ்ட்ராப் 5.3 என்பது பதிலளிக்கக்கூடிய வடிவமைப்புகளை உருவாக்குவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும், ஆனால் சில நேரங்களில், எதிர்பார்க்கப்படும் நடத்தைகள் எதிர்பார்த்தபடி செயல்படாது. நீங்கள் பூட்ஸ்ட்ராப்பிற்கு புதியவர் என்றால், நீங்கள் ஒரு சிக்கலை சந்தித்திருக்கலாம் வகுப்பு எதிர்பார்த்தபடி நெடுவரிசைகளை உடைப்பதாகத் தெரியவில்லை. .
நீங்கள் தனியாக இல்லை! பல தொடக்க வீரர்கள் ஃப்ளெக்ஸ் பாக்ஸ் அடிப்படையிலான கட்டம் நடத்தை மற்றும் பூட்ஸ்ட்ராப் நெடுவரிசை மடக்குதலை எவ்வாறு கையாளுகிறார்கள். சில பூட்ஸ்ட்ராப் பயன்பாட்டு வகுப்புகள் அவற்றின் சூழலைப் பொறுத்து வித்தியாசமாக தொடர்புகொள்வதால், தீர்வு எப்போதும் நேரடியானதல்ல.
ஒவ்வொரு படமும் எடுக்கும் ஒரு பட கேலரியை நீங்கள் வடிவமைக்கிறீர்கள் என்று கற்பனை செய்து பாருங்கள் ஆனால் வேண்டும் . "W-100" DIV ஒரு வரி இடைவெளியை கட்டாயப்படுத்தும் என்று நீங்கள் எதிர்பார்க்கிறீர்கள், ஆனால் திரையை மறுஅளவிடுவது திட்டமிட்டபடி நடந்து கொள்ளாது. இது ஏன் நடக்கிறது? .
இந்த கட்டுரையில், இந்த பிரச்சினை ஏன் நிகழ்கிறது என்பதை நாங்கள் டைவ் செய்து பயனுள்ள தீர்வுகளை ஆராய்வோம். முடிவில், எதிர்பாராத காட்சி சிக்கல்கள் இல்லாமல் உங்கள் பூட்ஸ்ட்ராப் தளவமைப்புகளை நம்பிக்கையுடன் கட்டமைக்க முடியும். தொடங்குவோம்! .
| கட்டளை | பயன்பாட்டின் எடுத்துக்காட்டு |
|---|---|
| flex-basis | CSS இல் ஒரு நெகிழ்வு உருப்படியின் ஆரம்ப அளவை வளர அல்லது சுருங்குவதற்கு முன் வரையறுக்கப் பயன்படுத்தப்படுகிறது. இந்த வழக்கில், ஃப்ளெக்ஸ்-பிஏசி: 100%; உறுப்பு வரிசையின் முழு அகலத்தையும் எடுப்பதை உறுதி செய்கிறது. |
| window.innerWidth | உலாவி சாளரத்தின் அகலத்தை மீட்டெடுக்கும் ஜாவாஸ்கிரிப்ட் சொத்து. இது திரை அளவை மாறும் வகையில் தீர்மானிக்க உதவுகிறது மற்றும் பதிலளிக்கக்கூடிய நடத்தையைப் பயன்படுத்துகிறது. |
| querySelectorAll() | ஒரு குறிப்பிட்ட CSS தேர்வாளருடன் பொருந்தக்கூடிய அனைத்து கூறுகளையும் தேர்ந்தெடுக்கும் ஜாவாஸ்கிரிப்ட் முறை. ஒரே நேரத்தில் பல கூறுகளுக்கு நெடுவரிசை உடைக்கும் தர்க்கத்தைப் பயன்படுத்த பயன்படுகிறது. |
| window.addEventListener("resize", ...) | உலாவி மறுஅளவிடுதல் நிகழ்வைக் கேட்கிறது மற்றும் திரை அளவு மாறும்போது தளவமைப்பை மாறும் வகையில் சரிசெய்ய ஒரு செயல்பாட்டைத் தூண்டுகிறது. |
| document.addEventListener("DOMContentLoaded", ...) | HTML ஆவணம் முழுமையாக ஏற்றப்பட்ட பின்னரே ஒரு ஸ்கிரிப்ட் இயங்குவதை உறுதிசெய்கிறது, இது DOM கூறுகளை கையாளும்போது பிழைகளைத் தடுக்கிறது. |
| foreach ($images as $index => $img) | படங்களின் வரிசையை மீறி, பூட்ஸ்ட்ராப் நெடுவரிசை கட்டமைப்புகளை மாறும் வகையில் உருவாக்கும் PHP லூப். |
| if (($index + 1) % 3 !== 0) | PHP நிபந்தனை ஒரு நெடுவரிசை உடைக்கும் DIV ஐ செருக ஒரு வரிசையில் கடைசி நெடுவரிசை இல்லாவிட்டால், சரியான மடக்குதல் நடத்தையை உறுதி செய்கிறது. |
| class="d-block d-md-none w-100" | பூட்ஸ்ட்ராப் பயன்பாட்டு வகுப்புகள் சிறிய திரைகளில் ஒரு புதிய வரியை கட்டாயப்படுத்தப் பயன்படுகின்றன, ஆனால் நடுத்தர மற்றும் பெரிய காட்சியகங்களில் மறைக்கப்பட்டுள்ளன. |
பூட்ஸ்ட்ராப் நெடுவரிசை மடக்குதல் சிக்கல்கள் மற்றும் தீர்வுகளைப் புரிந்துகொள்வது
பூட்ஸ்ட்ராப் 5.3 நம்பியுள்ளது உள்ளடக்கத்தை கட்டமைக்க, மற்றும் பதிலளிக்கக்கூடிய வடிவமைப்பிற்கான சக்திவாய்ந்த கருவிகளை இது வழங்கும்போது, சில நடத்தைகள் எதிர்பார்த்தபடி செயல்படாது. பிரச்சினை ஒரு நெகிழ்வு கொள்கலனுக்குள் பூட்ஸ்ட்ராப் நெடுவரிசை இடைவெளிகளைக் கையாளும் விதத்தில் இருந்து வருகிறது. இந்த வகுப்புகளைப் பயன்படுத்தும் போது, டெவலப்பர்கள் சிறிய திரைகளில் ஒரு புதிய வரி இடைவெளியை எதிர்பார்க்கிறார்கள், ஆனால் ஃப்ளெக்ஸ் பாக்ஸ் அமைப்பு சில நேரங்களில் இது நடப்பதைத் தடுக்கிறது. .
முதல் அணுகுமுறை நெடுவரிசைகளை வெளிப்படையாக உடைக்க தனிப்பயன் CSS வகுப்பைப் பயன்படுத்தியது. விண்ணப்பிப்பதன் மூலம் , நெகிழ்வு நடத்தையை அப்படியே வைத்திருக்கும்போது உறுப்பு ஒரு வரி இடைவெளியை கட்டாயப்படுத்துவதை நாங்கள் உறுதி செய்கிறோம். இந்த முறை பயனுள்ளதாக இருக்கும், ஏனெனில் இது உலாவிக்கு உறுப்பு எப்போதும் ஒரு முழு வரிசையையும் காண வேண்டும் என்று கூறுகிறது. இருப்பினும், பூட்ஸ்ட்ராப்பின் இயல்புநிலை ஸ்டைலிங் குறுக்கிட்டால், கூடுதல் விதிகள் போன்ற விதிகள் தேவைப்படலாம்.
ஜாவாஸ்கிரிப்ட் தீர்வு மாறும் வகையில் நெடுவரிசை இடைவெளிகளைப் பயன்படுத்துகிறது . திரை அகலம் 768px க்கு கீழே இருந்தால் (பூட்ஸ்ட்ராப்பின் "MD" பிரேக் பாயிண்ட்), ஸ்கிரிப்ட் இடைவெளி கூறுகள் காட்டப்படுவதை உறுதி செய்கிறது. சிஎஸ்எஸ்-மட்டும் முறைகள் சரியாக பொருந்தாத வகையில் மாறும் ஏற்றப்பட்ட உள்ளடக்கத்தை கையாளும் போது இது பயனுள்ளதாக இருக்கும். தயாரிப்பு பட்டியல்கள் மாறும் வகையில் ஏற்றப்படும் ஒரு ஈ-காமர்ஸ் வலைத்தளத்தை கற்பனை செய்து பாருங்கள்-இந்த ஸ்கிரிப்ட் அனைத்து சாதனங்களிலும் சரியான நெடுவரிசை இடைவெளிகளை உறுதி செய்கிறது. .
இறுதியாக, PHP பின்தளத்தில் அணுகுமுறை HTML ஐ மாறும் வகையில் உருவாக்குகிறது, தேவைப்படும் இடங்களில் பூட்ஸ்ட்ராப் வகுப்புகளை செருகும். ஜாவாஸ்கிரிப்டை நம்பாமல் வெளியீட்டில் நெடுவரிசை இடைவெளிகள் சரியாகத் தோன்றுவதை இது உறுதி செய்கிறது. சேவையக பக்கத்தில் உள்ளடக்கம் உருவாக்கப்படும் CMS- அடிப்படையிலான வலைத்தளங்களுக்கு இந்த நுட்பம் ஏற்றது. CSS, ஜாவாஸ்கிரிப்ட் அல்லது PHP ஐப் பயன்படுத்தினாலும், குறிக்கோள் அப்படியே உள்ளது: பூட்ஸ்ட்ராப்பின் ஃப்ளெக்ஸ் பாக்ஸ் கட்டம் மறுமொழி மற்றும் பயன்பாட்டினைப் பராமரிக்கும் போது எதிர்பார்க்கப்படும் வரி முறிவுகளை மதிக்கிறது என்பதை உறுதிசெய்கிறது.
பூட்ஸ்ட்ராப் 5.3 நெடுவரிசை இடைவெளிகளைக் கையாளுதல்: ஏன் "W-100 டி-பிளாக் டி-எம்.டி-அல்லாத" தோல்வியடைகிறது?
ஃபிரான்டென்ட் தீர்வு: பூட்ஸ்ட்ராப் மற்றும் தனிப்பயன் CSS ஐப் பயன்படுத்துதல்
<style>.custom-break {flex-basis: 100%;height: 0;}</style><div class="row mt-1"><div class="col-12 col-md-4"><img class="img-fluid img-thumbnail"></div><div class="custom-break d-md-none"></div><div class="col-12 col-md-4"><img class="img-fluid img-thumbnail"></div><div class="custom-break d-md-none"></div><div class="col-12 col-md-4"><img class="img-fluid img-thumbnail"></div></div>
மாற்று அணுகுமுறை: டைனமிக் நெடுவரிசை இடைவெளிகளுக்கான ஜாவாஸ்கிரிப்ட் பிழைத்திருத்தம்
ஃபிரான்டென்ட் தீர்வு: பிரேக் பாயிண்டுகளை மாறும் வகையில் பயன்படுத்த ஜாவாஸ்கிரிப்ட்
<script>function applyColumnBreaks() {let screenWidth = window.innerWidth;let breakElements = document.querySelectorAll(".column-break");breakElements.forEach(el => {el.style.display = screenWidth < 768 ? "block" : "none";});}window.addEventListener("resize", applyColumnBreaks);document.addEventListener("DOMContentLoaded", applyColumnBreaks);</script>
பின்தளத்தில் அணுகுமுறை: PHP உடன் டைனமிக் HTML ரெண்டரிங்
சேவையக பக்க தீர்வு: பதிலளிக்கக்கூடிய நெடுவரிசைகளை PHP உடன் மாறும்
//php$break_class = "d-block d-md-none w-100";$images = ["img1.jpg", "img2.jpg", "img3.jpg"];echo '<div class="row mt-1">';foreach ($images as $index => $img) {echo '<div class="col-12 col-md-4"><img src="' . $img . '" class="img-fluid img-thumbnail"></div>';if (($index + 1) % 3 !== 0) {echo '<div class="' . $break_class . '"></div>';}}echo '</div>';//
கட்டம் பயன்பாடுகளுடன் பூட்ஸ்ட்ராப் நெடுவரிசை மறுமொழியை மேம்படுத்துதல்
பூட்ஸ்ட்ராப்புடன் பணிபுரியும் போது ஒரு அம்சம் பெரும்பாலும் கவனிக்கப்படவில்லை எப்படி பயன்பாட்டு வகுப்புகளைப் பயன்படுத்தும் போது செயல்படுகிறது மற்றும் d-block. இந்த வகுப்புகள் பல சந்தர்ப்பங்களில் சிறப்பாக செயல்படுகையில், அவை நெகிழ்வு கொள்கலனில் எதிர்பார்க்கப்படும் வரி இடைவெளிகளை உருவாக்காது. பூட்ஸ்ட்ராப்பின் வரிசை மற்றும் நெடுவரிசை அமைப்பு அடிப்படையாகக் கொண்டிருப்பதால் இது நிகழ்கிறது , அதாவது நெடுவரிசைகள் புதிய வரியை உடைப்பதை விட கிடைக்கக்கூடிய இடத்திற்குள் பொருந்த முயற்சிக்கும்.
ஒரு நெடுவரிசை சிறிய திரைகளில் சரியாக மூடப்படுவதை உறுதிசெய்ய, சில நேரங்களில் பயன்படுத்த வேண்டியது அவசியம் நம்புவதற்கு பதிலாக . கவனிக்கப்படாத மற்றொரு முறை பயன்படுத்துகிறது உறுப்புகளின் வரிசையை கையாள வகுப்புகள், சரியான வேலைவாய்ப்பை உறுதி செய்கின்றன. உதாரணமாக, பல நெடுவரிசை கேலரியில், வெளிப்படையானதை வரையறுக்கிறது col-12 order-md-2 சிறிய திரைகளில் கூடுதல் டிவ் கூறுகள் தேவையில்லாமல் உள்ளடக்கத்தை திறம்பட மறுசீரமைக்க உதவும்.
பட காட்சியகங்கள் அல்லது அட்டை அடிப்படையிலான தளவமைப்புகளைக் கையாளும் போது வேலை செய்யக்கூடிய மற்றொரு அணுகுமுறை பூட்ஸ்ட்ராப்பை மேம்படுத்துகிறது வகுப்புகள், நெடுவரிசைகளுக்கு இடையில் குழல் இடைவெளியைக் கட்டுப்படுத்துகின்றன. உடன் குழி அளவுகளை குறைத்தல் அல்லது அதிகரிப்பது அல்லது மறுஅளவிடும்போது நெடுவரிசைகள் எவ்வாறு நடந்துகொள்கின்றன என்பதை மறைமுகமாக பாதிக்கலாம். எடுத்துக்காட்டாக, ஒரு புதிய வரியை உடைக்கும்போது படங்களை மிகவும் திறம்பட அடுக்கி வைக்க ஒரு சிறிய குழல் அனுமதிக்கிறது. வடிவமைக்கும்போது இந்த நுட்பம் குறிப்பாக பயனுள்ளதாக இருக்கும் பதிலளிக்கக்கூடிய ஈ-காமர்ஸ் தயாரிப்பு கட்டங்கள் அல்லது படங்கள் சரியாக சீரமைக்கப்பட வேண்டிய உள்ளடக்க-கனமான வலைப்பதிவுகள். .
- ஏன் இல்லை எதிர்பார்த்தபடி எனது பூட்ஸ்ட்ராப் நெடுவரிசைகளை உடைக்கவா?
- ஏனெனில் பூட்ஸ்ட்ராப்பின் கட்டம் அமைப்பு அடிப்படையாகக் கொண்டது , நெடுவரிசைகள் இயல்பாகவே கிடைக்கக்கூடிய இடத்திற்குள் பொருந்த முயற்சிக்கின்றன.
- சிறிய திரைகளை உடைக்க ஒரு நெடுவரிசையை எவ்வாறு கட்டாயப்படுத்த முடியும்?
- பயன்படுத்துகிறது அதற்கு பதிலாக காட்சி பயன்பாடுகளை நம்புவதை விட நெடுவரிசை அகலத்தை நேரடியாக வரையறுப்பதால் இது பெரும்பாலும் மிகவும் பயனுள்ளதாக இருக்கும்.
- நெடுவரிசை இடைவெளிகளைக் கட்டுப்படுத்த என்ன மாற்று முறைகள் உள்ளன?
- பயன்படுத்துகிறது வகுப்புகள் கூறுகளை மாறும் வகையில் மாற்ற உதவுகின்றன, திரை அளவுகளுக்கு இடையில் மாறும்போது சிறந்த கட்டமைப்பை உறுதி செய்யும்.
- குழல் அளவுகளை சரிசெய்வது நெடுவரிசை மடக்குதலை பாதிக்க முடியுமா?
- ஆம்! பூட்ஸ்ட்ராப் நெடுவரிசைகளுக்கு இடையில் இடைவெளியைக் கட்டுப்படுத்த பயன்பாடுகள் உதவுகின்றன, அவை சிறிய திரைகளில் எவ்வாறு அடுக்கி வைக்கப்படுகின்றன என்பதை மறைமுகமாக பாதிக்கின்றன.
- ஏன் என் வகுப்பு எதிர்பார்த்தபடி வேலை செய்யவில்லையா?
- பெற்றோர் கொள்கலன் பாணிகள் போன்ற பிற CSS விதிகள் அதை மேலெழுதினால் அல்லது பண்புகள், உறுப்பு நோக்கம் கொண்டதாக செயல்படாது.
வேலை செய்யும் போது , நெடுவரிசை இடைவெளிகளைக் கையாள்வது சில நேரங்களில் தந்திரமானதாக இருக்கும் அடிப்படையிலான கட்டம் அமைப்பு. பல டெவலப்பர்கள் எதிர்பார்க்கிறார்கள் ஒரு வரி இடைவெளியை உருவாக்க, ஆனால் அது எப்போதும் நோக்கம் கொண்டதாக செயல்படாது. இந்த சவால் எழுகிறது, ஏனெனில் பூட்ஸ்ட்ராப்பின் இயல்புநிலை நடத்தை கிடைக்கக்கூடிய இடத்திற்குள் நெடுவரிசைகளுக்கு பொருந்த முயற்சிக்கிறது. இதைத் தீர்க்க, பயன்படுத்துவது போன்ற நுட்பங்கள் கோல் -12, குழல் அளவுகளை சரிசெய்வது அல்லது ஜாவாஸ்கிரிப்டை செயல்படுத்துவது உள்ளடக்க மறைப்புகளை சரியாக உறுதிப்படுத்த உதவும். படத்தொகுப்பு அல்லது தயாரிப்பு கட்டத்தை வடிவமைத்தாலும், உண்மையிலேயே பதிலளிக்கக்கூடிய தளவமைப்புகளை உருவாக்க இந்த நுணுக்கங்களைப் புரிந்துகொள்வது அவசியம். .
மாஸ்டரிங் பூட்ஸ்ட்ராப்பின் கட்டம் அமைப்புக்கு எப்படி என்பதைப் புரிந்துகொள்ள வேண்டும் நெடுவரிசை நடத்தையை பாதிக்கிறது. பாரம்பரிய முறைகள் போன்றவை என்றால் வேலை செய்யாதீர்கள், நெடுவரிசைகளை வரிசைப்படுத்துதல், குழி அளவுகளை சரிசெய்தல் அல்லது சிஎஸ்எஸ் விதிகளைப் பயன்படுத்துதல் போன்ற மாற்று அணுகுமுறைகள் சிறந்த முடிவுகளை வழங்க முடியும். தடையற்ற பயனர் அனுபவத்தை உறுதிப்படுத்த வெவ்வேறு திரை அளவுகளில் சோதனை முக்கியமானது. .
இணைப்பதன் மூலம் அருவடிக்கு , மற்றும் கட்டமைப்பு மாற்றங்கள், டெவலப்பர்கள் பொதுவான நெடுவரிசை-மடக்குதல் சிக்கல்களை வெல்ல முடியும். ஒரு தளவமைப்பு அல்லது டைனமிக் பட கேலரி, சரியான நுட்பங்களைப் பயன்படுத்துவது உள்ளடக்கம் எல்லா சாதனங்களிலும் சரியாக சீரமைக்கப்படுவதை உறுதி செய்யும். பரிசோதனை செய்யுங்கள், உங்கள் பதிலளிக்கக்கூடிய வடிவமைப்பு கருவித்தொகுப்பில் பூட்ஸ்ட்ராப் ஒரு சக்திவாய்ந்த கருவியாக மாறும்! .
- நெடுவரிசை தளவமைப்பு மற்றும் பதிலளிக்கக்கூடிய பயன்பாடுகள் குறித்த பூட்ஸ்ட்ராப்பின் அதிகாரப்பூர்வ ஆவணங்கள்: பூட்ஸ்ட்ராப் 5.3 நெடுவரிசை இடைவெளிகள் .
- பூட்ஸ்ட்ராப் காட்சி பயன்பாடுகள் மற்றும் திரை அளவின் அடிப்படையில் மறைக்கும் கூறுகளில் வழிகாட்டி: பூட்ஸ்ட்ராப் 5.3 காட்சி பயன்பாடுகள் .
- ஃப்ளெக்ஸ் பாக்ஸ் கோட்பாடுகள் மற்றும் பூட்ஸ்ட்ராப் கட்டம் நடத்தையில் அவற்றின் தாக்கம்: எம்.டி.என் வலை ஆவணங்கள் - ஃப்ளெக்ஸ் பாக்ஸ் .
- பதிலளிக்கக்கூடிய பட கட்டங்கள் மற்றும் நெடுவரிசை மேலாண்மைக்கான சிறந்த நடைமுறைகள்: ஸ்மாஷிங் இதழ் - பதிலளிக்கக்கூடிய தளவமைப்புகள் .