Source

தளவமைப்புக்கான பயன்பாடுகள்

வேகமான மொபைலுக்கு ஏற்ற மற்றும் பதிலளிக்கக்கூடிய மேம்பாட்டிற்காக, உள்ளடக்கத்தைக் காண்பிப்பதற்கும், மறைப்பதற்கும், சீரமைப்பதற்கும் மற்றும் இடைவெளி வைப்பதற்குமான டஜன் கணக்கான பயன்பாட்டு வகுப்புகளை Bootstrap கொண்டுள்ளது.

மாறுகிறதுdisplay

சொத்தின் பொதுவான மதிப்புகளை மாற்றியமைக்க எங்கள் காட்சி பயன்பாடுகளைப் பயன்படுத்தவும். displayஎங்கள் கட்ட அமைப்பு, உள்ளடக்கம் அல்லது கூறுகளை குறிப்பிட்ட வியூபோர்ட்களில் காட்ட அல்லது மறைக்க அதை கலக்கவும்.

Flexbox விருப்பங்கள்

பூட்ஸ்டார்ப் 4 ஃப்ளெக்ஸ்பாக்ஸுடன் கட்டமைக்கப்பட்டுள்ளது, ஆனால் ஒவ்வொரு உறுப்புகளும் displayமாற்றப்படவில்லை, display: flexஏனெனில் இது பல தேவையற்ற மேலெழுதுதல்களைச் சேர்க்கும் மற்றும் முக்கிய உலாவி நடத்தைகளை எதிர்பாராத விதமாக மாற்றும். எங்களின் பெரும்பாலான கூறுகள் ஃப்ளெக்ஸ்பாக்ஸ் இயக்கப்பட்ட நிலையில் கட்டப்பட்டுள்ளன.

நீங்கள் display: flexஒரு உறுப்பில் சேர்க்க வேண்டும் என்றால், அதைச் செய்ய .d-flexஅல்லது பதிலளிக்கக்கூடிய வகைகளில் ஒன்றைச் செய்யுங்கள் (எ.கா., .d-sm-flex). அளவு, சீரமைப்பு, இடைவெளி மற்றும் பலவற்றிற்கு எங்கள் கூடுதல் ஃப்ளெக்ஸ்பாக்ஸ் பயன்பாடுகளைப் பயன்படுத்த உங்களுக்கு இந்த வகுப்பு அல்லது displayமதிப்பு தேவைப்படும்.

விளிம்பு மற்றும் திணிப்பு

உறுப்புகள் மற்றும் கூறுகள் எவ்வாறு இடைவெளி மற்றும் அளவுள்ளவை என்பதைக் கட்டுப்படுத்த marginமற்றும் padding இடைவெளி பயன்பாடுகளைப் பயன்படுத்தவும் . பூட்ஸ்டார்ப் 4 ஆனது 1remமதிப்பு இயல்புநிலை $spacerமாறியின் அடிப்படையில் இடைவெளி பயன்பாடுகளுக்கான ஐந்து-நிலை அளவை உள்ளடக்கியது. அனைத்து வியூபோர்ட்களுக்கான மதிப்புகளைத் தேர்வுசெய்யவும் (எ.கா., .mr-3க்கு ), அல்லது குறிப்பிட்ட margin-right: 1remவியூபோர்ட்களை இலக்காகக் கொள்ள பதிலளிக்கக்கூடிய மாறுபாடுகளைத் தேர்ந்தெடுக்கவும் (எ.கா., பிரேக் பாயிண்டில் தொடங்குவதற்கு )..mr-md-3margin-right: 1remmd

நிலைமாற்றுvisibility

மாறுதல் displayதேவையில்லாத போது, ​​எங்களின் தெரிவுநிலைப் பயன்பாடுகள்visibility மூலம் ஒரு உறுப்பை நீங்கள் மாற்றலாம் . கண்ணுக்குத் தெரியாத கூறுகள் பக்கத்தின் தளவமைப்பைப் பாதிக்கும், ஆனால் பார்வையாளர்களிடமிருந்து பார்வைக்கு மறைக்கப்படும்.