Source

கட்ட அமைப்பு

பன்னிரெண்டு நெடுவரிசை அமைப்பு, ஐந்து இயல்புநிலை பதிலளிக்கக்கூடிய அடுக்குகள், சாஸ் மாறிகள் மற்றும் மிக்சின்கள் மற்றும் டஜன் கணக்கான முன் வரையறுக்கப்பட்ட வகுப்புகளுக்கு நன்றி, அனைத்து வடிவங்கள் மற்றும் அளவுகளின் தளவமைப்புகளை உருவாக்க எங்கள் சக்திவாய்ந்த மொபைல்-முதல் ஃப்ளெக்ஸ்பாக்ஸ் கட்டத்தைப் பயன்படுத்தவும்.

எப்படி இது செயல்படுகிறது

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

ஃப்ளெக்ஸ்பாக்ஸுக்குப் புதியவரா அல்லது அறிமுகமில்லாதவரா? பின்னணி, சொற்கள், வழிகாட்டுதல்கள் மற்றும் குறியீடு துணுக்குகளுக்கான இந்த CSS ட்ரிக்ஸ் ஃப்ளெக்ஸ்பாக்ஸ் வழிகாட்டியைப் படிக்கவும் .

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

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

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

அதை உடைத்து, இது எவ்வாறு செயல்படுகிறது என்பது இங்கே:

உங்கள் தளத்தின் உள்ளடக்கங்களை மையப்படுத்தவும் கிடைமட்டமாக பேட் செய்யவும் கொள்கலன்கள் வழிவகை செய்கின்றன. .containerபதிலளிக்கக்கூடிய பிக்சல் அகலத்திற்கு அல்லது .container-fluidஎல்லா width: 100%வியூபோர்ட் மற்றும் சாதன அளவுகளிலும் பயன்படுத்தவும் .
வரிசைகள் நெடுவரிசைகளுக்கான ரேப்பர்கள். ஒவ்வொரு நெடுவரிசையும் paddingஅவற்றுக்கிடையேயான இடைவெளியைக் கட்டுப்படுத்துவதற்கு கிடைமட்டமாக (ஒரு சாக்கடை என்று அழைக்கப்படுகிறது) உள்ளது. இது paddingஎதிர்மறை விளிம்புகளுடன் வரிசைகளில் எதிர்க்கப்படுகிறது. இந்த வழியில், உங்கள் நெடுவரிசைகளில் உள்ள அனைத்து உள்ளடக்கங்களும் பார்வைக்கு இடது பக்கமாக சீரமைக்கப்படுகின்றன.
ஒரு கட்ட அமைப்பில், உள்ளடக்கம் நெடுவரிசைகளுக்குள் வைக்கப்பட வேண்டும் மற்றும் நெடுவரிசைகள் மட்டுமே வரிசைகளின் உடனடி குழந்தைகளாக இருக்கலாம்.
ஃப்ளெக்ஸ்பாக்ஸுக்கு நன்றி, குறிப்பிடப்படாத கட்ட நெடுவரிசைகள் widthதானாக சம அகல நெடுவரிசைகளாக வடிவமைக்கப்படும். எடுத்துக்காட்டாக, நான்கு நிகழ்வுகள் .col-smஒவ்வொன்றும் தானாக சிறிய இடைவெளியில் இருந்து 25% அகலத்தில் இருக்கும். மேலும் எடுத்துக்காட்டுகளுக்கு தானியங்கு-தளவமைப்பு நெடுவரிசைகள் பகுதியைப் பார்க்கவும்.
ஒரு வரிசைக்கு சாத்தியமான 12 நெடுவரிசைகளில் நீங்கள் பயன்படுத்த விரும்பும் நெடுவரிசைகளின் எண்ணிக்கையை நெடுவரிசை வகுப்புகள் குறிப்பிடுகின்றன. எனவே, மூன்று சம அகல நெடுவரிசைகளை நீங்கள் விரும்பினால், நீங்கள் பயன்படுத்தலாம் .col-4.
நெடுவரிசைகள் widthசதவீதத்தில் அமைக்கப்பட்டுள்ளன, எனவே அவை எப்போதும் திரவமாகவும் அவற்றின் மூல உறுப்புடன் ஒப்பிடும் அளவிலும் இருக்கும்.
தனித்தனி நெடுவரிசைகளுக்கு இடையே பள்ளங்களை உருவாக்க நெடுவரிசைகள் கிடைமட்டமாக இருக்கும், இருப்பினும், நீங்கள் வரிசைகளில் இருந்து மற்றும் நெடுவரிசைகளில் இருந்து paddingஅகற்றலாம் .marginpadding.no-gutters.row
கட்டத்தை பதிலளிக்கக்கூடியதாக மாற்ற, ஐந்து கட்ட முறிவுப் புள்ளிகள் உள்ளன, ஒவ்வொன்றும் பதிலளிக்கக்கூடிய பிரேக் பாயிண்ட் : அனைத்து பிரேக் பாயிண்டுகளும் (கூடுதல் சிறியது), சிறியது, நடுத்தரமானது, பெரியது மற்றும் கூடுதல் பெரியது.
கிரிட் பிரேக் பாயிண்ட்கள் குறைந்தபட்ச அகல மீடியா வினவல்களை அடிப்படையாகக் கொண்டவை, அதாவது அவை அந்த ஒரு பிரேக் பாயிண்ட் மற்றும் அதற்கு மேலே உள்ள எல்லாவற்றுக்கும் பொருந்தும் (எ.கா. .col-sm-4சிறிய, நடுத்தர, பெரிய மற்றும் கூடுதல் பெரிய சாதனங்களுக்குப் பொருந்தும், ஆனால் முதல் xsபிரேக் பாயிண்ட் அல்ல).
நீங்கள் முன் வரையறுக்கப்பட்ட கட்ட வகுப்புகள் (போன்றவை .col-4) அல்லது சாஸ் மிக்ஸின்களை அதிக சொற்பொருள் மார்க்அப் செய்ய பயன்படுத்தலாம்.

சில HTML உறுப்புகளை ஃப்ளெக்ஸ் கொள்கலன்களாகப் பயன்படுத்த இயலாமை போன்ற ஃப்ளெக்ஸ்பாக்ஸைச் சுற்றியுள்ள வரம்புகள் மற்றும் பிழைகள் குறித்து எச்சரிக்கையாக இருங்கள் .

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

பூட்ஸ்டார்ப் பெரும்பாலான அளவுகளை வரையறுக்க ems அல்லது s ஐப் பயன்படுத்தும் போது, s ஆனது கட்டம் முறிவு புள்ளிகள் மற்றும் கொள்கலன் அகலங்களுக்கு பயன்படுத்தப்படுகிறது. ஏனென்றால், வியூபோர்ட் அகலம் பிக்சல்களில் உள்ளது மற்றும் எழுத்துரு அளவுடன் மாறாது .rempx

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

	கூடுதல் சிறிய <576px	சிறிய ≥576px	நடுத்தர ≥768px	பெரிய ≥992px	கூடுதல் பெரிய ≥1200px
அதிகபட்ச கொள்கலன் அகலம்	எதுவுமில்லை (தானியங்கு)	540px	720px	960px	1140px
வகுப்பு முன்னொட்டு	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# நெடுவரிசைகள்	12
கால்வாய் அகலம்	30px (ஒரு நெடுவரிசையின் ஒவ்வொரு பக்கத்திலும் 15px)
நெஸ்டபிள்	ஆம்
நெடுவரிசை வரிசைப்படுத்துதல்	ஆம்

தானியங்கு-தளவமைப்பு நெடுவரிசைகள்

போன்ற வெளிப்படையான எண்ணிடப்பட்ட வகுப்பு இல்லாமல் எளிதாக நெடுவரிசையை அளவிடுவதற்கு பிரேக்பாயிண்ட்-குறிப்பிட்ட நெடுவரிசை வகுப்புகளைப் பயன்படுத்தவும் .col-sm-6.

சம அகலம்

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

2 இல் 1

2 இல் 2

3 இல் 1

3 இல் 2

3 இல் 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

சம அகலம் பல வரி

.w-100நெடுவரிசைகள் ஒரு புதிய கோட்டிற்கு உடைக்கப்பட வேண்டும் என்று நீங்கள் விரும்பும் இடத்தில் செருகுவதன் மூலம் பல வரிகளை விரிவுபடுத்தும் சம அகல நெடுவரிசைகளை உருவாக்கவும் . .w-100சில பதிலளிக்கக்கூடிய காட்சி பயன்பாடுகளுடன் கலந்து இடைவேளைகளை பதிலளிக்கக்கூடியதாக மாற்றவும் .

ஒரு சஃபாரி ஃப்ளெக்ஸ்பாக்ஸ் பிழை உள்ளது, இது வெளிப்படையான flex-basisஅல்லது border. பழைய உலாவி பதிப்புகளுக்கு தீர்வுகள் உள்ளன, ஆனால் உங்கள் இலக்கு உலாவிகள் தரமற்ற பதிப்புகளுக்குள் வரவில்லை என்றால் அவை தேவையில்லை.

col

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

ஒரு நெடுவரிசை அகலத்தை அமைத்தல்

ஃப்ளெக்ஸ்பாக்ஸ் கிரிட் நெடுவரிசைகளுக்கான தானியங்கு-தளவமைப்பு என்பது ஒரு நெடுவரிசையின் அகலத்தை நீங்கள் அமைக்கலாம் மற்றும் உடன்பிறப்பு நெடுவரிசைகளை தானாகவே மறுஅளவிடலாம். நீங்கள் முன் வரையறுக்கப்பட்ட கட்ட வகுப்புகள் (கீழே காட்டப்பட்டுள்ளபடி), கிரிட் மிக்சின்கள் அல்லது இன்லைன் அகலங்களைப் பயன்படுத்தலாம். மைய நெடுவரிசையின் அகலத்தைப் பொருட்படுத்தாமல் மற்ற நெடுவரிசைகள் அளவை மாற்றும் என்பதை நினைவில் கொள்ளவும்.

3 இல் 1

3 இல் 2 (அகலமானது)

3 இல் 3

3 இல் 1

3 இல் 2 (அகலமானது)

3 இல் 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

மாறக்கூடிய அகல உள்ளடக்கம்

col-{breakpoint}-autoஅவற்றின் உள்ளடக்கத்தின் இயல்பான அகலத்தின் அடிப்படையில் நெடுவரிசைகளின் அளவு வகுப்புகளைப் பயன்படுத்தவும் .

3 இல் 1

மாறக்கூடிய அகல உள்ளடக்கம்

3 இல் 3

3 இல் 1

மாறக்கூடிய அகல உள்ளடக்கம்

3 இல் 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

பதிலளிக்கக்கூடிய வகுப்புகள்

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

அனைத்து முறிவு புள்ளிகள்

சிறிய சாதனங்கள் முதல் பெரியது வரை ஒரே மாதிரியான கட்டங்களுக்கு, .colமற்றும் .col-*வகுப்புகளைப் பயன்படுத்தவும். உங்களுக்கு குறிப்பிட்ட அளவிலான நெடுவரிசை தேவைப்படும்போது எண்ணிடப்பட்ட வகுப்பைக் குறிப்பிடவும்; இல்லையெனில், தயங்காமல் ஒட்டிக்கொள்ளுங்கள் .col.

col

கோல்-8

கோல்-4

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

கிடைமட்டமாக அடுக்கி வைக்கப்பட்டுள்ளது

வகுப்புகளின் ஒரு தொகுப்பைப் பயன்படுத்தி .col-sm-*, நீங்கள் ஒரு அடிப்படை கட்ட அமைப்பை உருவாக்கலாம், அது அடுக்கி வைக்கப்பட்டு சிறிய இடைவெளியில் கிடைமட்டமாக smமாறும்

col-sm-8

col-sm-4

col-sm

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

கலக்கவும்

உங்கள் நெடுவரிசைகள் சில கட்ட அடுக்குகளில் அடுக்கி வைக்க வேண்டாமா? தேவைக்கேற்ப ஒவ்வொரு அடுக்குக்கும் வெவ்வேறு வகுப்புகளின் கலவையைப் பயன்படுத்தவும். இவை அனைத்தும் எவ்வாறு செயல்படுகின்றன என்பதற்கான சிறந்த யோசனைக்கு கீழே உள்ள உதாரணத்தைப் பார்க்கவும்.

.col-md-8

.col-6 .col-md-4

.col-6

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

குழிகள்

பிரேக்பாயிண்ட்-குறிப்பிட்ட திணிப்பு மற்றும் எதிர்மறை விளிம்பு பயன்பாட்டு வகுப்புகள் மூலம் கேட்டர்களை பதிலளிக்கக்கூடிய வகையில் சரிசெய்யலாம். கொடுக்கப்பட்ட வரிசையில் உள்ள கால்வாய்களை மாற்ற, s இல் ஒரு எதிர்மறை விளிம்பு பயன்பாடு .rowமற்றும் பொருந்தக்கூடிய திணிப்பு பயன்பாடுகளை இணைக்கவும் .col. தேவையற்ற வழிதல்களைத் தவிர்க்க, மீண்டும் பொருந்தக்கூடிய திணிப்புப் பயன்பாட்டைப் பயன்படுத்தி, பெற்றோர் .containerஅல்லது .container-fluidபெற்றோரையும் சரிசெய்ய வேண்டியிருக்கலாம்.

lgபெரிய ( ) பிரேக் பாயிண்ட் மற்றும் அதற்கு மேல் உள்ள பூட்ஸ்டார்ப் கட்டத்தை தனிப்பயனாக்குவதற்கான உதாரணம் இங்கே . .colஉடன் பேடிங்கை அதிகப்படுத்தியுள்ளோம், அதை பெற்றோர் மீது .px-lg-5எதிர்கொண்டு பின்னர் ரேப்பரை சரிசெய்தோம் ..mx-lg-n5.row.container.px-lg-5

தனிப்பயன் நெடுவரிசை திணிப்பு

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

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

.row-cols-*உங்கள் உள்ளடக்கத்தையும் தளவமைப்பையும் சிறப்பாக வழங்கும் நெடுவரிசைகளின் எண்ணிக்கையை விரைவாக அமைக்க, பதிலளிக்கக்கூடிய வகுப்புகளைப் பயன்படுத்தவும். சாதாரண .col-*வகுப்புகள் தனிப்பட்ட நெடுவரிசைகளுக்கு பொருந்தும் (எ.கா., ), வரிசை நெடுவரிசை வகுப்புகள் குறுக்குவழியாக .col-md-4பெற்றோரில் அமைக்கப்பட்டுள்ளன ..row

அடிப்படை கட்ட தளவமைப்புகளை விரைவாக உருவாக்க அல்லது உங்கள் கார்டு தளவமைப்புகளைக் கட்டுப்படுத்த, இந்த வரிசை நெடுவரிசை வகுப்புகளைப் பயன்படுத்தவும்.

நெடுவரிசை

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

நெடுவரிசை

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

நெடுவரிசை

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

நெடுவரிசை

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

நெடுவரிசை

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

நீங்கள் அதனுடன் உள்ள சாஸ் மிக்சினையும் பயன்படுத்தலாம் row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

சீரமைப்பு

நெடுவரிசைகளை செங்குத்தாகவும் கிடைமட்டமாகவும் சீரமைக்க ஃப்ளெக்ஸ்பாக்ஸ் சீரமைப்பு பயன்பாடுகளை��் பயன்படுத்தவும். இன்டர்நெட் எக்ஸ்புளோரர் 10-11 ஃப்ளெக்ஸ் கன்டெய்னரில் கீழே காட்டப்பட்டுள்ளபடி செங்குத்துச் சீரமைப்பை ஆதரிக்காது . min-height மேலும் விவரங்களுக்கு Flexbugs #3 ஐப் பார்க்கவும்.

செங்குத்து சீரமைப்பு

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

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

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

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

கிடைமட்ட சீரமைப்பு

இரண்டு நெடுவரிசைகளில் ஒன்று

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

சாக்கடைகள் இல்லை

எங்கள் முன் வரையறுக்கப்பட்ட கிரிட் வகுப்புகளில் உள்ள நெடுவரிசைகளுக்கு இடையே உள்ள கால்வாய்களை உடன் அகற்றலாம் .no-gutters. இது அனைத்து உடனடி குழந்தைகள் நெடுவரிசைகளிலிருந்தும் எதிர்மறை marginகள் .rowமற்றும் கிடைமட்டத்தை நீக்குகிறது .padding

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

எட்ஜ்-டு-எட்ஜ் டிசைன் வேண்டுமா? பெற்றோரை கைவிடவும் .containerஅல்லது .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

நெடுவரிசை மடக்குதல்

ஒரு வரிசையில் 12க்கும் மேற்பட்ட நெடுவரிசைகள் இருந்தால், கூடுதல் நெடுவரிசைகளின் ஒவ்வொரு குழுவும், ஒரு யூனிட்டாக, ஒரு புதிய வரியில் மடிக்கப்படும்.

.col-9

.col-4
9 + 4 = 13 > 12 முதல், இந்த 4-நெடுவரிசை-அகலமான பகுதி ஒரு புதிய வரியில் ஒரு தொடர்ச்சியான அலகு என மூடப்பட்டிருக்கும்.

.col-6
புதிய வரியில் அடுத்தடுத்த நெடுவரிசைகள் தொடரும்.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

நெடுவரிசை உடைகிறது

ஃப்ளெக்ஸ்பாக்ஸில் புதிய வரியில் நெடுவரிசைகளை உடைக்க ஒரு சிறிய ஹேக் தேவைப்படுகிறது: width: 100%உங்கள் நெடுவரிசைகளை ஒரு புதிய வரியில் மடிக்க விரும்பும் இடத்தில் ஒரு உறுப்பைச் சேர்க்கவும். பொதுவாக இது பல வினாடிகள் மூலம் நிறைவேற்றப்படுகிறது .row, ஆனால் ஒவ்வொரு செயல்படுத்தும் முறையும் இதைக் கணக்கிட முடியாது.

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

எங்களின் பதிலளிக்கக்கூடிய காட்சிப் பயன்பாடுகளுடன் குறிப்பிட்ட பிரேக் பாயிண்ட்களிலும் இந்த இடைவெளியை நீங்கள் பயன்படுத்தலாம் .

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

மறுவரிசைப்படுத்துதல்

வகுப்புகளை ஆர்டர் செய்யுங்கள்

உங்கள் உள்ளடக்கத்தின் காட்சி வரிசையைக்.order- கட்டுப்படுத்த வகுப்புகளைப் பயன்படுத்தவும் . இந்த வகுப்புகள் பதிலளிக்கக்கூடியவை, எனவே நீங்கள் பிரேக் பாயின்ட் மூலம் அமைக்கலாம் (எ.கா., ). அனைத்து ஐந்து கட்ட அடுக்குகளிலும் ஆதரவை உள்ளடக்கியது .order.order-1.order-md-2112

முதலில் DOM இல், எந்த ஆர்டரும் பயன்படுத்தப்படவில்லை

பெரிய வரிசையுடன் DOM இல் இரண்டாவது

DOM இல் மூன்றாவது, 1 வரிசையுடன்

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

முறையே மற்றும் ( ) ஐப் பயன்படுத்துவதன் மூலம் ஒரு உறுப்பை மாற்றும் பதிலளிக்கக்கூடிய .order-firstமற்றும் வகுப்புகளும் உள்ளன. இந்த வகுப்புகள் தேவைக்கேற்ப எண்ணிடப்பட்ட வகுப்புகளுடன் கலக்கலாம்..order-lastorderorder: -1order: 13order: $columns + 1.order-*

DOM இல் முதலில், கடைசியாக ஆர்டர் செய்யப்பட்டது

DOM இல் இரண்டாவது, வரிசைப்படுத்தப்படவில்லை

DOM இல் மூன்றாவது, முதலில் ஆர்டர் செய்யப்பட்டது

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

நெடுவரிசைகளை ஈடுசெய்கிறது

நீங்கள் இரண்டு வழிகளில் கட்ட நெடுவரிசைகளை ஈடுசெய்யலாம்: எங்கள் பதிலளிக்கக்கூடிய .offset-கட்ட வகுப்புகள் மற்றும் எங்கள் விளிம்பு பயன்பாடுகள் . கிரிட் வகுப்புகள் நெடுவரிசைகளுடன் பொருந்தக்கூடிய அளவில் உள்ளன, அதே சமயம் ஆஃப்செட்டின் அகலம் மாறி இருக்கும் விரைவான தளவமைப்புகளுக்கு விளிம்புகள் மிகவும் பயனுள்ளதாக இருக்கும்.

ஆஃப்செட் வகுப்புகள்

.offset-md-*வகுப்புகளைப் பயன்படுத்தி நெடுவரிசைகளை வலது பக்கம் நகர்த்தவும் . இந்த வகுப்புகள் நெடுவரிசையின் இடது விளிம்பை நெடுவரிசைகளால் அதிகரிக்கின்றன *. எடுத்துக்காட்டாக, நான்கு நெடுவரிசைகளுக்கு மேல் .offset-md-4நகரும் ..col-md-4

.col-md-4

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

.col-md-3 .offset-md-3

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

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

பதிலளிக்கக்கூடிய பிரேக் பாயிண்ட்களில் நெடுவரிசையை அகற்றுவதற்கு கூடுதலாக, நீங்கள் ஆஃப்செட்களை மீட்டமைக்க வேண்டியிருக்கலாம். கட்டம் எடுத்துக்காட்டில் இதை செயலில் பார்க்கவும் .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
    <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

விளிம்பு பயன்பாடுகள்

v4 இல் ஃப்ளெக்ஸ்பாக்ஸுக்கு நகர்த்துவதன் மூலம், .mr-autoஉடன்பிறப்பு நெடுவரிசைகளை ஒருவருக்கொருவர் விலக்கி வைப்பது போன்ற விளிம்பு பயன்பாடுகளைப் பயன்படுத்தலாம்.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
    <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto mr-auto">.col-auto .mr-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

கூடு கட்டுதல்

உங்கள் உள்ளடக்கத்தை இயல்புநிலை கட்டத்துடன் இணைக்க, ஏற்கனவே உள்ள நெடுவரிசையில் புதிய .rowமற்றும் நெடுவரிசைகளின் தொகுப்பைச் சேர்க்கவும் . உள்ளமைக்கப்பட்ட வரிசைகளில் 12 அல்லது அதற்கும் குறைவான நெடுவரிசைகள் சேர்க்கப்பட வேண்டும் (கிடைக்கும் 12 நெடுவரிசைகளையும் நீங்கள் பயன்படுத்த வேண்டிய அவசியமில்லை)..col-sm-*.col-sm-*

நிலை 1: .col-sm-9

நிலை 2: .col-8 .col-sm-6

நிலை 2: .col-4 .col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-9">
      Level 1: .col-sm-9
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

சாஸ் கலவைகள்

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

மாறிகள்

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

கலவைகள்

தனிப்பட்ட கட்ட நெடுவரிசைகளுக்கான சொற்பொருள் CSS ஐ உருவாக்க, கிரிட் மாறிகளுடன் இணைந்து மிக்சின்கள் பயன்படுத்தப்படுகின்றன.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

எடுத்துக்காட்டு பயன்பாடு

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

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

முக்கிய உள்ளடக்கம்

இரண்டாம் நிலை உள்ளடக்கம்

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

கட்டத்தைத் தனிப்பயனாக்குதல்

எங்கள் உள்ளமைக்கப்பட்ட கட்டம் Sass மாறிகள் மற்றும் வரைபடங்களைப் பயன்படுத்தி, முன் வரையறுக்கப்பட்ட கட்ட வகுப்புகளை முழுமையாகத் தனிப்பயனாக்க முடியும். அடுக்குகளின் எண்ணிக்கை, மீடியா வினவல் பரிமாணங்கள் மற்றும் கொள்கலன் அகலங்களை மாற்றவும் - பின்னர் மீண்டும் தொகுக்கவும்.

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

கட்ட நெடுவரிசைகளின் எண்ணிக்கையை Sass மாறிகள் மூலம் மாற்றலாம். $grid-columnsஒவ்வொரு நெடுவரிசையின் அகலத்தையும் (சதவீதத்தில்) உருவாக்கப் பயன்படுகிறது, அதே நேரத்தில் $grid-gutter-widthநெடுவரிசை கால்வாய்களுக்கான அகலத்தை அமைக்கிறது.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

கட்ட அடுக்குகள்

நெடுவரிசைகளுக்கு அப்பால் நகரும், நீங்கள் கட்ட அடுக்குகளின் எண்ணிக்கையையும் தனிப்பயனாக்கலாம். நீங்கள் நான்கு கட்ட அடுக்குகளை மட்டுமே விரும்பினால், நீங்கள் இதைப் போன்றவற்றைப் $grid-breakpointsபுதுப்பிக்க வேண்டும்:$container-max-widths

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass மாறிகள் அல்லது வரைபடங்களில் ஏதேனும் மாற்றங்களைச் செய்யும்போது, உங்கள் மாற்றங்களைச் சேமித்து மீண்டும் தொகுக்க வேண்டும். அவ்வாறு செய்வது, நெடுவரிசை அகலங்கள், ஆஃப்செட்கள் மற்றும் ஆர்டர் செய்வதற்கான புத்தம் புதிய முன் வரையறுக்கப்பட்ட கட்ட வகுப்புகளின் தொகுப்பை வெளியிடும். தனிப்பயன் முறிவுப் புள்ளிகளைப் பயன்படுத்த, பதிலளிக்கக்கூடிய தெரிவுநிலை பயன்பாடுகளும் புதுப்பிக்கப்படும். pxகட்ட மதிப்புகளை (இல்லை rem, em, அல்லது %) இல் அமைக்க உறுதிசெய்யவும் .