பூட்ஸ்டார்ப்பின் அட்டைகள் பல மாறுபாடுகள் மற்றும் விருப்பங்களுடன் நெகிழ்வான மற்றும் நீட்டிக்கக்கூடிய உள்ளடக்க கொள்கலனை வழங்குகின்றன.
பற்றி
அட்டை என்பது நெகிழ்வான மற்றும் விரிவாக்கக்கூடிய உள்ளடக்கக் கொள்கலன் ஆகும். இதில் தலைப்புகள் மற்றும் அடிக்குறிப்புகளுக்கான விருப்பங்கள், பல்வேறு வகையான உள்ளடக்கம், சூழல் பின்னணி வண்ணங்கள் மற்றும் சக்திவாய்ந்த காட்சி விருப்பங்கள் ஆகியவை அடங்கும். பூட்ஸ்டார்ப் 3 பற்றி உங்களுக்குத் தெரிந்திருந்தால், அட்டைகள் எங்கள் பழைய பேனல்கள், கிணறுகள் மற்றும் சிறுபடங்களை மாற்றும். அந்த கூறுகளுக்கு ஒத்த செயல்பாடுகள் கார்டுகளுக்கான மாற்றி வகுப்புகளாகக் கிடைக்கும்.
உதாரணமாக
கார்டுகள் முடிந்தவரை சிறிய மார்க்அப் மற்றும் ஸ்டைல்களுடன் கட்டப்பட்டுள்ளன, ஆனால் இன்னும் ஒரு டன் கட்டுப்பாடு மற்றும் தனிப்பயனாக்கத்தை வழங்க நிர்வகிக்கின்றன. ஃப்ளெக்ஸ்பாக்ஸுடன் கட்டமைக்கப்பட்டுள்ளது, அவை எளிதான சீரமைப்பை வழங்குகின்றன மற்றும் பிற பூட்ஸ்டார்ப் கூறுகளுடன் நன்றாக கலக்கின்றன. அவை marginமுன்னிருப்பாக இல்லை, எனவே தேவைக்கேற்ப இடைவெளி பயன்பாடுகளைப் பயன்படுத்தவும்.
கலப்பு உள்ளடக்கம் மற்றும் நிலையான அகலம் கொண்ட அடிப்படை அட்டையின் எடுத்துக்காட்டு கீழே உள்ளது. கார்டுகள் தொடங்குவதற்கு நிலையான அகலம் இல்லை, எனவே அவை இயற்கையாகவே அதன் மூல உறுப்பின் முழு அகலத்தையும் நிரப்பும். இது எங்களின் பல்வேறு அளவு விருப்பங்களுடன் எளிதாக தனிப்பயனாக்கப்படுகிறது .
அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
படங்கள், உரை, பட்டியல் குழுக்கள், இணைப்புகள் மற்றும் பலவற்றை உள்ளடக்கிய பல்வேறு வகையான உள்ளடக்கத்தை கார்டுகள் ஆதரிக்கின்றன. ஆதரிக்கப்படுவதற்கான எடுத்துக்காட்டுகள் கீழே உள்ளன.
உடல்
ஒரு அட்டையின் கட்டுமானத் தொகுதி என்பது .card-body. ஒரு கார்டில் உங்களுக்கு பேட் செய்யப்பட்ட பகுதி தேவைப்படும் போதெல்லாம் அதைப் பயன்படுத்தவும்.
இது ஒரு அட்டை அமைப்பில் உள்ள சில உரை.
தலைப்புகள், உரை மற்றும் இணைப்புகள்
குறிச்சொல்லில் சேர்ப்பதன் .card-titleமூலம் அட்டை தலைப்புகள் பயன்படுத்தப்படுகின்றன . அதே வழியில், ஒரு குறிச்சொல்லைச் <h*>சேர்ப்பதன் மூலம் இணைப்புகள் சேர்க்கப்பட்டு ஒருவருக்கொருவர் அடுத்ததாக வைக்கப்படுகின்றன ..card-link<a>
.card-subtitleஒரு <h*>குறிச்சொல்லில் a ஐ சேர்ப்பதன் மூலம் வசன வரிகள் பயன்படுத்தப்படுகின்றன . மற்றும் உருப்படிகள் .card-titleஒரு உருப்படியில் .card-subtitleவைக்கப்பட்டிருந்தால் .card-body, அட்டையின் தலைப்பும் வசனமும் நன்றாக சீரமைக்கப்படும்.
அட்டை தலைப்பு
அட்டை வசனம்
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
.card-img-topஅட்டையின் மேல் ஒரு படத்தை வைக்கிறது. உடன் .card-text, அட்டையில் உரையைச் சேர்க்கலாம். உள்ள உரையை .card-textநிலையான HTML குறிச்சொற்கள் மூலம் வடிவமைக்க முடியும்.
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
பட்டியல் குழுக்கள்
ஃப்ளஷ் பட்டியல் குழுவுடன் கார்டில் உள்ளடக்கப் பட்டியலை உருவாக்கவும்.
க்ராஸ் ஜஸ்டோ ஓடியோ
டாபிபஸ் ஏசி வசதி
வெஸ்டிபுலம் அட் ஈரோஸ்
இடம்பெற்றது
க்ராஸ் ஜஸ்டோ ஓடியோ
டாபிபஸ் ஏசி வசதி
வெஸ்டிபுலம் அட் ஈரோஸ்
க்ராஸ் ஜஸ்டோ ஓடியோ
டாபிபஸ் ஏசி வசதி
வெஸ்டிபுலம் அட் ஈரோஸ்
சமையலறை கழுவு தொட்டி
உங்களுக்குத் தேவையான அட்டையை உருவாக்க, பல உள்ளடக்க வகைகளைக் கலந்து பொருத்தவும் அல்லது எல்லாவற்றையும் அதில் எறியவும். பட நடைகள், தொகுதிகள், உரை நடைகள் மற்றும் பட்டியல் குழு ஆகியவை கீழே காட்டப்பட்டுள்ளன - இவை அனைத்தும் நிலையான அகல அட்டையில் மூடப்பட்டிருக்கும்.
அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
கார்டுகள் widthதொடங்குவதற்கு குறிப்பிட்டதாக இருக்காது, எனவே வேறுவிதமாகக் கூறப்படாவிட்டால் அவை 100% அகலமாக இருக்கும். தனிப்பயன் CSS, கிரிட் வகுப்புகள், கிரிட் சாஸ் மிக்சின்கள் அல்லது பயன்பாடுகள் மூலம் இதை நீங்கள் தேவைக்கேற்ப மாற்றலாம்.
கிரிட் மார்க்அப்பைப் பயன்படுத்துதல்
கட்டத்தைப் பயன்படுத்தி, தேவைக்கேற்ப நெடுவரிசைகள் மற்றும் வரிசைகளில் அட்டைகளை மடிக்கவும்.
சிறப்பு தலைப்பு சிகிச்சை
கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன்.
அட்டைகளில் படங்களுடன் வேலை செய்வதற்கான சில விருப்பங்கள் உள்ளன. அட்டையின் இரு முனைகளிலும் “படத் தொப்பிகளை” சேர்ப்பது, அட்டை உள்ளடக்கத்துடன் படங்களை மேலெழுதுவது அல்லது அட்டையில் படத்தை உட்பொதிப்பது ஆகியவற்றிலிருந்து தேர்வு செய்யவும்.
பட தொப்பிகள்
தலைப்புகள் மற்றும் அடிக்குறிப்புகளைப் போலவே, அட்டைகளிலும் மேல் மற்றும் கீழ் "படத் தொப்பிகள்"-ஒரு அட்டையின் மேல் அல்லது கீழே உள்ள படங்கள் இருக்கலாம்.
அட்டை தலைப்பு
இது கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய பரந்த அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
கடைசியாக 3 நிமிடங்களுக்கு முன்பு புதுப்பிக்கப்பட்டது
அட்டை தலைப்பு
இது கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய பரந்த அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
கடைசியாக 3 நிமிடங்களுக்கு முன்பு புதுப்பிக்கப்பட்டது
பட மேலடுக்குகள்
ஒரு படத்தை அட்டை பின்னணியாக மாற்றி, உங்கள் அட்டையின் உரையை மேலடுக்கு. படத்தைப் பொறுத்து, உங்களுக்கு கூடுதல் பாணிகள் அல்லது பயன்பாடுகள் தேவைப்படலாம் அல்லது தேவைப்படாமல் இருக்கலாம்.
அட்டை தலைப்பு
இது கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய பரந்த அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
கடைசியாக 3 நிமிடங்களுக்கு முன்பு புதுப்பிக்கப்பட்டது
படத்தின் உயரத்தை விட உள்ளடக்கம் பெரிதாக இருக்கக்கூடாது என்பதை நினைவில் கொள்ளவும். படத்தை விட உள்ளடக்கம் பெரியதாக இருந்தால், உள்ளடக்கம் படத்திற்கு வெளியே காட்டப்படும்.
கிடைமட்ட
கட்டம் மற்றும் பயன்பாட்டு வகுப்புகளின் கலவையைப் பயன்படுத்தி, மொபைல் நட்பு மற்றும் பதிலளிக்கக்கூடிய வகையில் கார்டுகளை கிடைமட்டமாக மாற்றலாம். கீழே உள்ள எடுத்துக்காட்டில், க்ரிட் கேட்டர்களை அகற்றி, பிரேக் பாயிண்டில் கார்டை கிடைமட்டமாக்க வகுப்புகளைப் .no-guttersபயன்படுத்துகிறோம் . உங்கள் கார்டின் உள்ளடக்கத்தைப் பொறுத்து மேலும் மாற்றங்கள் தேவைப்படலாம்..col-md-*md
அட்டை தலைப்பு
இது கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய பரந்த அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
கடைசியாக 3 நிமிடங்களுக்கு முன்பு புதுப்பிக்கப்பட்டது
அட்டை பாணிகள்
கார்டுகளில் அவற்றின் பின்னணி, எல்லைகள் மற்றும் வண்ணத்தைத் தனிப்பயனாக்க பல்வேறு விருப்பங்கள் உள்ளன.
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
இரண்டாம் நிலை அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
வெற்றி அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
அபாய அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
எச்சரிக்கை அட்டையின் தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
தகவல் அட்டையின் தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
ஒளி அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
இருண்ட அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
உதவி தொழில்நுட்பங்களுக்கு அர்த்தத்தை வெளிப்படுத்துதல்
பொருளைச் சேர்க்க வண்ணத்தைப் பயன்படுத்துவது ஒரு காட்சிக் குறிப்பை மட்டுமே வழங்குகிறது, இது ஸ்கிரீன் ரீடர்கள் போன்ற உதவித் தொழில்நுட்பங்களைப் பயன்படுத்துபவர்களுக்குத் தெரிவிக்கப்படாது. வண்ணத்தால் குறிக்கப்படும் தகவல் உள்ளடக்கத்திலிருந்தே (எ.கா. புலப்படும் உரை) தெளிவாக இருப்பதை உறுதிசெய்யவும் அல்லது .sr-onlyவகுப்பில் மறைக்கப்பட்ட கூடுதல் உரை போன்ற மாற்று வழிகளில் சேர்க்கப்பட்டுள்ளது.
எல்லை
கார்டை மட்டும் மாற்ற பார்டர் பயன்பாடுகளைப் பயன்படுத்தவும் . கீழே காட்டப்பட்டுள்ளபடி , பெற்றோர் அல்லது அட்டையின் உள்ளடக்கங்களின் துணைக்குழுவில் வகுப்புகளை border-colorவைக்கலாம் என்பதை நினைவில் கொள்ளவும் ..text-{color}.card
தலைப்பு
முதன்மை அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
இரண்டாம் நிலை அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
வெற்றி அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
அபாய அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
எச்சரிக்கை அட்டையின் தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
தகவல் அட்டையின் தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
ஒளி அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
தலைப்பு
இருண்ட அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
மிக்ஸின்ஸ் பயன்பாடுகள்
கார்டு தலைப்பு மற்றும் அடிக்குறிப்பில் உள்ள பார்டர்களை தேவைக்கேற்ப மாற்றலாம், மேலும் அவற்றை அகற்றலாம் background-color..bg-transparent
தலைப்பு
வெற்றி அட்டை தலைப்பு
கார்டின் தலைப்பில் உருவாக்க மற்றும் கார்டின் உள்ளடக்கத்தின் பெரும்பகுதியை உருவாக்க சில விரைவான எடுத்துக்காட்டு உரை.
அட்டை தளவமைப்பு
கார்டுகளுக்குள் உள்ளடக்கத்தை வடிவமைக்கும் கூடுதலாக, பூட்ஸ்டார்ப் தொடர் அட்டைகளை அமைப்பதற்கான சில விருப்பங்களை உள்ளடக்கியது. தற்போதைக்கு, இந்த தளவமைப்பு விருப்பங்கள் இன்னும் பதிலளிக்கவில்லை .
அட்டை குழுக்கள்
ஒரே அகலம் மற்றும் உயர நெடுவரிசைகளுடன் இணைக்கப்பட்ட உறுப்பாக கார்டுகளை ரெண்டர் செய்ய கார்டு குழுக்களைப் பயன்படுத்தவும். அட்டைக் குழுக்கள் அடுக்கி வைக்கப்பட்டு, இடைவேளையில் display: flex;தொடங்கி ஒரே மாதிரியான பரிமாணங்களுடன் இணைக்கப் பயன்படுகின்றன sm.
அட்டை தலைப்பு
இது கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய பரந்த அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
கடைசியாக 3 நிமிடங்களுக்கு முன்பு புதுப்பிக்கப்பட்டது
அட்டை தலைப்பு
இந்த கார்டில் கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே ஆதரவு உரை உள்ளது.
கடைசியாக 3 நிமிடங்களுக்கு முன்பு புதுப்பிக்கப்பட்டது
அட்டை தலைப்பு
இது கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய பரந்த அட்டையாகும். இந்த கார்டில் சமமான உயரச் செயலைக் காட்டும் முதல் உள்ளடக்கத்தை விட நீளமான உள்ளடக்கம் உள்ளது.
கடைசியாக 3 நிமிடங்களுக்கு முன்பு புதுப்பிக்கப்பட்டது
அடிக்குறிப்புகளுடன் அட்டைக் குழுக்களைப் பயன்படுத்தும் போது, அவற்றின் உள்ளடக்கம் தானாகவே வரிசையாக இருக்கும்.
அட்டை தலைப்பு
இது கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய பரந்த அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
அட்டை தலைப்பு
இந்த கார்டில் கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே ஆதரவு உரை உள்ளது.
அட்டை தலைப்பு
இது கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய பரந்த அட்டையாகும். இந்த கார்டில் சமமான உயரச் செயலைக் காட்டும் முதல் உள்ளடக்கத்தை விட நீளமான உள்ளடக்கம் உள்ளது.
அட்டை அடுக்குகள்
ஒன்றோடொன்று இணைக்கப்படாத சமமான அகலம் மற்றும் உயர அட்டைகளின் தொகுப்பு வேண்டுமா? அட்டை தளங்களைப் பயன்படுத்தவும்.
அட்டை தலைப்பு
இது, கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய நீளமான அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
கடைசியாக 3 நிமிடங்களுக்கு முன்பு புதுப்பிக்கப்பட்டது
அட்டை தலைப்பு
இந்த கார்டில் கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே ஆதரவு உரை உள்ளது.
கடைசியாக 3 நிமிடங்களுக்கு முன்பு புதுப்பிக்கப்பட்டது
அட்டை தலைப்பு
இது கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய பரந்த அட்டையாகும். இந்த கார்டில் சமமான உயரச் செயலைக் காட்டும் முதல் உள்ளடக்கத்தை விட நீளமான உள்ளடக்கம் உள்ளது.
கடைசியாக 3 நிமிடங்களுக்கு முன்பு புதுப்பிக்கப்பட்டது
கார்டு குழுக்களைப் போலவே, டெக்குகளிலும் கார்டு அடிக்குறிப்புகள் தானாகவே வரிசையாக இருக்கும்.
அட்டை தலைப்பு
இது கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய பரந்த அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
அட்டை தலைப்பு
இந்த கார்டில் கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே ஆதரவு உரை உள்ளது.
அட்டை தலைப்பு
இது கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய பரந்த அட்டையாகும். இந்த கார்டில் சமமான உயரச் செயலைக் காட்டும் முதல் உள்ளடக்கத்தை விட நீளமான உள்ளடக்கம் உள்ளது.
கட்ட அட்டைகள்
ஒரு வரிசைக்கு எத்தனை கிரிட் நெடுவரிசைகளை (உங்கள் கார்டுகளைச் சுற்றி) காட்டுகிறீர்கள் என்பதைக் கட்டுப்படுத்த பூட்ஸ்டார்ப் கிரிட் அமைப்பு மற்றும் அதன் .row-colsவகுப்புகளைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, .row-cols-1ஒரு நெடுவரிசையில் .row-cols-md-2கார்டுகளை இடுவதும், நடுத்தர பிரேக் பாயிண்ட் மேலே இருந்து பல வரிசைகளில் நான்கு கார்டுகளை சம அகலத்திற்குப் பிரிப்பதும் இங்கே.
அட்டை தலைப்பு
இது, கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய நீளமான அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
அட்டை தலைப்பு
இது, கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய நீளமான அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
அட்டை தலைப்பு
இது, கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய நீளமான அட்டையாகும்.
அட்டை தலைப்பு
இது, கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய நீளமான அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
அதை மாற்றவும் .row-cols-3, நான்காவது அட்டை மடக்கைக் காண்பீர்கள்.
அட்டை தலைப்பு
இது, கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய நீளமான அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
அட்டை தலைப்பு
இது, கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய நீளமான அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
அட்டை தலைப்பு
இது, கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய நீளமான அட்டையாகும்.
அட்டை தலைப்பு
இது, கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய நீளமான அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
உங்களுக்கு சமமான உயரம் தேவைப்படும்போது .h-100, அட்டைகளில் சேர்க்கவும். நீங்கள் இயல்பாகவே சமமான உயரங்களை விரும்பினால், நீங்கள் Sass இல் அமைக்கலாம் $card-height: 100%.
அட்டை தலைப்பு
இது, கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய நீளமான அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
அட்டை தலைப்பு
இது ஒரு குறுகிய அட்டை.
அட்டை தலைப்பு
இது, கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய நீளமான அட்டையாகும்.
அட்டை தலைப்பு
இது, கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய நீளமான அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
அட்டை நெடுவரிசைகள்
கார்டுகளை கொத்து போன்ற நெடுவரிசைகளில் ஒரு CSS இல் போர்த்துவதன் மூலம் ஒழுங்கமைக்க முடியும் .card-columns. columnஎளிதாக சீரமைப்பதற்காக ஃப்ளெக்ஸ்பாக்ஸுக்குப் பதிலாக CSS பண்புகளுடன் கார்டுகள் கட்டப்பட்டுள்ளன . அட்டைகள் மேலிருந்து கீழாகவும் இடமிருந்து வலமாகவும் வரிசைப்படுத்தப்படுகின்றன.
எச்சரிக்கை! கார்டு நெடுவரிசைகளுடன் உங்கள் மைலேஜ் மாறுபடலாம். நெடுவரிசைகளில் கார்டுகள் உடைவதைத் தடுக்க, அவற்றை இன்னும் குண்டு துளைக்காத தீர்வாக அமைக்க display: inline-blockவேண்டும் column-break-inside: avoid.
அட்டையின் தலைப்பு ஒரு புதிய வரியில் மூடப்பட்டிருக்கும்
இது, கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே உள்ள துணை உரையுடன் கூடிய நீளமான அட்டையாகும். இந்த உள்ளடக்கம் சிறிது நீளமானது.
லோரெம் இப்சம் டோலர் சிட் அமெட், கான்செக்டெர் அடிபிஸ்சிங் எலிட். முழு எண்கள் ஒரு முன்னும் பின்னும்.
அட்டை தலைப்பு
இந்த கார்டில் கூடுதல் உள்ளடக்கத்திற்கு இயற்கையான வழிகாட்டுதலாக கீழே ஆதரவு உரை உள்ளது.
கடைசியாக 3 நிமிடங்களுக்கு முன்பு புதுப்பிக்கப்பட்டது
லோரெம் இப்சம் டோலர் சிட் அமெட், கான்செக்டெர் அடிபிஸ்சிங் எலிட். முழு எண்.
அட்டை தலைப்பு
இந்தக் கார்டில் வழக்கமான தலைப்பும் அதற்குக் கீழே உரையின் குறுகிய பத்தியும் உள்ளது.
கடைசியாக 3 நிமிடங்களுக்கு முன்பு புதுப்பிக்கப்பட்டது
லோரெம் இப்சம் டோலர் சிட் அமெட், கான்செக்டெர் அடிபிஸ்சிங் எலிட். முழு எண்கள் ஒரு முன்னும் பின்னும்.
அட்டை தலைப்பு
இது கீழே தலைப்பு மற்றும் துணை உரையுடன் கூடிய மற்றொரு அட்டை. இந்த கார்டை ஒட்டுமொத்தமாக சற்று உயரமாக மாற்ற சில கூடுதல் உள்ளடக்கம் உள்ளது.
கடைசியாக 3 நிமிடங்களுக்கு முன்பு புதுப்பிக்கப்பட்டது
அட்டை நெடுவரிசைகளை சில கூடுதல் குறியீடுகளுடன் நீட்டிக்கவும் தனிப்பயனாக்கவும் முடியும். .card-columnsநெடுவரிசைகளின் எண்ணிக்கையை மாற்றுவதற்கு பதிலளிக்கக்கூடிய அடுக்குகளின் தொகுப்பை உருவாக்க, நாங்கள் பயன்படுத்தும் அதே CSS - CSS நெடுவரிசைகளைப் பயன்படுத்தி வகுப்பின் நீட்டிப்பு கீழே காட்டப்பட்டுள்ளது .