பூட்ஸ்ட்ராப் கட்டத்தின் எடுத்துக்காட்டுகள்

பூட்ஸ்டார்ப் கிரிட் அமைப்பிற்குள் உருவாக்குவதைப் பற்றி உங்களுக்குத் தெரிந்துகொள்ள அடிப்படை கட்ட தளவமைப்புகள்.

இந்த எடுத்துக்காட்டுகளில், .themed-grid-colசில தீமிங்கைச் சேர்க்க, நெடுவரிசைகளில் வகுப்பு சேர்க்கப்படுகிறது. இது பூட்ஸ்டார்ப்பில் இயல்பாகக் கிடைக்கும் வகுப்பு அல்ல.

ஐந்து கட்ட அடுக்குகள்

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

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

மூன்று சம நெடுவரிசைகள்

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

.col-md-4
.col-md-4
.col-md-4

மூன்று சம நெடுவரிசைகள் மாற்று

வகுப்புகளைப் பயன்படுத்துவதன் மூலம் .row-cols-*, சமமான நெடுவரிசைகளுடன் ஒரு கட்டத்தை எளிதாக உருவாக்கலாம்.

.colகுழந்தை .row-cols-md-3
.colகுழந்தை .row-cols-md-3
.colகுழந்தை .row-cols-md-3

மூன்று சமமற்ற நெடுவரிசைகள்

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

.col-md-3
.col-md-6
.col-md-3

இரண்டு நெடுவரிசைகள்

டெஸ்க்டாப்பில் தொடங்கி பெரிய டெஸ்க்டாப்புகளுக்கு அளவிடும் இரண்டு நெடுவரிசைகளைப் பெறவும் .

.col-md-8
.col-md-4

முழு அகலம், ஒற்றை நெடுவரிசை

முழு அகல உறுப்புகளுக்கு கட்ட வகுப்புகள் தேவையில்லை.

இரண்டு உள்ளமை நெடுவரிசைகளுடன் இரண்டு நெடுவரிசைகள்

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

மொபைல் சாதன அளவுகள், டேப்லெட்டுகள் மற்றும் கீழே, இந்த நெடுவரிசைகளும் அவற்றின் உள்ளமை நெடுவரிசைகளும் அடுக்கி வைக்கப்படும்.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

கலப்பு: மொபைல் மற்றும் டெஸ்க்டாப்

பூட்ஸ்டார்ப் v4 கிரிட் அமைப்பு ஐந்து அடுக்கு வகுப்புகளைக் கொண்டுள்ளது: xs (கூடுதல் சிறியது, இந்த வகுப்பு இன்ஃபிக்ஸ் பயன்படுத்தப்படவில்லை), sm (சிறியது), md (நடுத்தரம்), lg (பெரியது) மற்றும் xl (கூடுதல் பெரியது). அதிக மாறும் மற்றும் நெகிழ்வான தளவமைப்புகளை உருவாக்க, இந்த வகுப்புகளின் எந்த கலவையையும் நீங்கள் பயன்படுத்தலாம்.

ஒவ்வொரு அடுக்கு வகுப்புகளும் மேம்படுகின்றன, அதாவது md, lg மற்றும் xl ஆகியவற்றிற்கு ஒரே அகலத்தை அமைக்க நீங்கள் திட்டமிட்டால், நீங்கள் md ஐ மட்டும் குறிப்பிட வேண்டும்.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

கலப்பு: மொபைல், டேப்லெட் மற்றும் டெஸ்க்டாப்

.col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

குழிகள்

வகுப்புகள் மூலம் .gx-*, கிடைமட்ட gutters சரிசெய்ய முடியும்.

.col.gx-4சாக்கடைகளுடன் _
.col.gx-4சாக்கடைகளுடன் _
.col.gx-4சாக்கடைகளுடன் _
.col.gx-4சாக்கடைகளுடன் _
.col.gx-4சாக்கடைகளுடன் _
.col.gx-4சாக்கடைகளுடன் _

.gy-*செங்குத்து சாக்கடைகளைக் கட்டுப்படுத்த வகுப்புகளைப் பயன்படுத்தவும் .

.col.gy-4சாக்கடைகளுடன் _
.col.gy-4சாக்கடைகளுடன் _
.col.gy-4சாக்கடைகளுடன் _
.col.gy-4சாக்கடைகளுடன் _
.col.gy-4சாக்கடைகளுடன் _
.col.gy-4சாக்கடைகளுடன் _

வகுப்புகள் மூலம் .g-*, இரு திசைகளிலும் உள்ள சாக்கடைகளை சரிசெய்யலாம்.

.col.g-3சாக்கடைகளுடன் _
.col.g-3சாக்கடைகளுடன் _
.col.g-3சாக்கடைகளுடன் _
.col.g-3சாக்கடைகளுடன் _
.col.g-3சாக்கடைகளுடன் _
.col.g-3சாக்கடைகளுடன் _

கொள்கலன்கள்

பூட்ஸ்டார்ப் v4.4 இல் சேர்க்கப்பட்ட கூடுதல் வகுப்புகள் ஒரு குறிப்பிட்ட இடைவெளி வரை 100% அகலமுள்ள கொள்கலன்களை அனுமதிக்கின்றன. v5 புதிய பிரேக் பாயிண்ட்டை சேர்க்கிறது xxl.

.கொள்கலன்
.கொள்கலன்-sm
.container-md
கொள்கலன்-எல்ஜி
.container-xl
.container-xxl
.கொள்கலன்-திரவம்