இந்த இடுகையில் வடிகால் இடைவெளிகள் என்றால் என்ன என்பதையும், பூட்ஸ்டார்ப்பில் ஒரு குறிப்பிட்ட பகுதிக்கு அவற்றை எவ்வாறு அகற்றலாம் என்பதையும் விவாதிக்கும்.
பூட்ஸ்டார்ப்பில் Gutter Space என்றால் என்ன?
கிடைமட்ட திணிப்பு மூலம் உற்பத்தி செய்யப்படும் நெடுவரிசைகளுக்கு இடையில் உள்ள இடைவெளிகள் அல்லது இடைவெளிகள் கால்வாய்கள் ஆகும். பூட்ஸ்டார்ப் கிரிட் அமைப்பில் பதிலளிக்கக்கூடிய உள்ளடக்க சீரமைப்பு மற்றும் இடைவெளிகளை ஆதரிக்க அவை பயன்படுத்தப்படுகின்றன.
கீழே கொடுக்கப்பட்டுள்ள படம் அதைச் சுற்றி ஒரு சிவப்புக் கரையுடன் ஒரு வரிசையைக் காட்டுகிறது. வரிசைக்குள், சம கட்ட நெடுவரிசைகளின் மூன்று சம அளவிலான div கூறுகள் உள்ளன. நெடுவரிசைகள் சமமாக இருந்தாலும், அவற்றுக்கிடையே இன்னும் சாக்கடை இடைவெளிகள் உள்ளன:
பூட்ஸ்டார்ப்பில் ஒரு குறிப்பிட்ட பகுதிக்கான கேட்டர் இடத்தை அகற்றுவது எப்படி?
பூட்ஸ்டார்ப்பில், வகுப்பு ' சாக்கடைகள் இல்லை 'எந்த வட்டத்தின் சாக்கடை இடைவெளிகளையும் அகற்றப் பயன்படுகிறது.
இந்த நோக்கத்திற்காக:
- சேர் ' 'வகுப்புடன் குறிச்சொல்' முக்கிய பகுதி ”.
- பின்னர், மற்றொன்றைச் சேர்ப்பதன் மூலம் வரிசைப் பகுதியைச் சரிசெய்யவும்
'வகுப்புடன் கூடிய உறுப்பு' வரிசை ”. வரிசையிலிருந்து இடைவெளிகளை அகற்ற வேண்டியிருப்பதால், ஒரு வகுப்பைக் குறிப்பிடவும் ' சாக்கடைகள் இல்லை ” அதற்குள்.- கட்டம் வரிசையை மூன்று சம நெடுவரிசைகளாகப் பிரிக்க, வகுப்பைப் பயன்படுத்தவும் ' கோல்-4 ”.
- ஒவ்வொரு நெடுவரிசையின் '
' கொள்கலனிலும், '' உறுப்புகளை '' வகுப்புகளுடன் சரிசெய்யவும் நெடுவரிசை-1 ”,” நெடுவரிசை-2 ', மற்றும் ' நெடுவரிசை-3 ', முறையே: < div வர்க்கம் = 'முக்கிய பகுதி' >
< div வர்க்கம் = 'வரிசை இல்லை-கட்டர்கள்' >
< div வர்க்கம் = 'col-4' >
< div வர்க்கம் = 'நெடுவரிசை-1' >< / div >
< / div >
< div வர்க்கம் = 'கோல்-4' >
< div வர்க்கம் = 'நெடுவரிசை-2' >< / div >
< / div >
< div வர்க்கம் = 'கோல்-4' >
< div வர்க்கம் = 'நெடுவரிசை-3' >< / div >
< / div >
< / div >
< / div >CSS
CSS பிரிவில், HTML பக்கத்தில் குறிப்பிடப்பட்டுள்ள வகுப்புகள் பல ஸ்டைலிங் பண்புகளுடன் வடிவமைக்கப்பட்டுள்ளன.
பாணி 'முதன்மை-டிவ்' வகுப்பு
.main-div {
அகலம் : 600px;
விளிம்பு: 50px தானியங்கு;
}' .main-div 'வகுப்பைக் கொண்ட div உறுப்பை அணுக குறிப்பிடப்பட்டுள்ளது' முக்கிய பகுதி ”. பின்வரும் பண்புகள் இந்த வகுப்பிற்குப் பயன்படுத்தப்படுகின்றன:
- ' அகலம் 'உறுப்பின் அகலத்தை வரையறுக்கிறது.
- ' விளிம்பு ” உறுப்பைச் சுற்றி இடைவெளியை அமைக்கிறது.
பாணி 'வரிசை' வகுப்பு
.வரிசை {
எல்லை : 1px திட சிவப்பு;
}பூட்ஸ்ட்ராப்' வரிசை 'வகுப்பு' உடன் சேர்க்கப்பட்டது எல்லை ”சொத்து. இது கட்டம் வரிசையை ஒரு குறிப்பிட்ட அகலம், நடை மற்றும் வண்ணக் கரையில் போர்த்திவிடும்.
மூன்று வகுப்புகள்' நெடுவரிசை-1 ”,” நெடுவரிசை-2 ', மற்றும் ' நெடுவரிசை-3 'சிஎஸ்எஸ் ஒதுக்கப்பட்டுள்ளது' பின்னணி நிறம் 'மற்றும்' உயரம் 'அவற்றை முக்கியப்படுத்துவதற்கான பண்புகள்.
பாணி 'நெடுவரிசை-1' வகுப்பு
.நெடுவரிசை- ஒன்று {
பின்னணி - நிறம் : டர்க்கைஸ்;
உயரம் : 200px;
}பாணி 'நெடுவரிசை-2' வகுப்பு
.நெடுவரிசை- 2 {
பின்னணி - நிறம் : ஊதா;
உயரம் : 200px;
}பாணி 'நெடுவரிசை-3' வகுப்பு
.நெடுவரிசை- 3 {
பின்னணி - நிறம் : மஞ்சள் பச்சை;
உயரம் : 200px;
}அதை அவதானிக்கலாம் '
'வகுப்புடன் கொள்கலன்' வரிசை ” அவற்றுக்கிடையே சாக்கடை இடைவெளி இல்லாமல் வெற்றிகரமாக சரிசெய்யப்பட்டது:
பூட்ஸ்டார்ப்பில் ஒரு குறிப்பிட்ட பகுதிக்கான சாக்கடை இடத்தை எவ்வாறு அகற்றுவது என்பதை நாங்கள் உங்களுக்குக் கற்பித்துள்ளோம்.
முடிவுரை
ஒரு குறிப்பிட்ட பிரிவுக்கான சாக்கடை இடைவெளிகளை அகற்ற, வகுப்பு ' சாக்கடைகள் இல்லை ' உபயோகிக்கலாம். இந்த நோக்கத்திற்காக, '
'உறுப்பு சேர்த்து' வரிசை இல்லை-கட்டர்கள் ' வர்க்கம். இந்த இடுகையானது சாக்கடை இடைவெளிகள் மற்றும் பூட்ஸ்டார்ப்பில் ஒரு குறிப்பிட்ட பகுதிக்கு அவற்றை எவ்வாறு அகற்றுவது என்பது பற்றிய விரிவான வழிகாட்டியை வழங்கியுள்ளது. - பின்னர், மற்றொன்றைச் சேர்ப்பதன் மூலம் வரிசைப் பகுதியைச் சரிசெய்யவும்