பூட்ஸ்டார்ப்பின் ஒரு பகுதியாக வழங்கப்படும் இயல்புநிலை கட்ட அமைப்பு 940px-அகலம், 12-நெடுவரிசை கட்டம் ஆகும் .

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

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

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

உதாரணமாக

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

<div class = "row" > 
  <div class = "span12" > 
    நெடுவரிசையின் நிலை 1
    <div class = "row" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span6" > Level 2 </div> 
    </div>
  </div>
</div>

சதவீதம், பிக்சல்கள் அல்ல

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

திரவ வரிசைகள்

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

மார்க்அப்

<div class = "row-fluid" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

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

<div class = "row-fluid" > 
  <div class = "span12" > 
    நெடுவரிசையின் நிலை 1
    <div class = "row-fluid" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span6" > Level 2 </div> 
    </div>
  </div>
</div>

குறைவாக உள்ள மாறிகள்

பூட்ஸ்டார்ப்பில் உள்ளமைக்கப்பட்டவை, மேலே ஆவணப்படுத்தப்பட்ட இயல்புநிலை 940px கட்ட அமைப்பைத் தனிப்பயனாக்குவதற்கான ஒரு சில மாறிகள் ஆகும். கட்டத்திற்கான அனைத்து மாறிகளும் மாறிகளில் சேமிக்கப்படும்.less.

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

கட்டத்தை மாற்றியமைத்தல் என்பது மூன்று @grid*மாறிகளை மாற்றி பூட்ஸ்டார்ப்பை மீண்டும் தொகுத்தல் ஆகும். கட்ட மாறிகளை variables.less இல் மாற்றி, ஆவணப்படுத்தப்பட்ட நான்கு வழிகளில் ஒன்றை மீண்டும் தொகுக்க பயன்படுத்தவும் . நீங்கள் அதிக நெடுவரிசைகளைச் சேர்த்தால், grid.less இல் உள்ளவர்களுக்கு CSS ஐச் சேர்க்க மறக்காதீர்கள்.

பதிலளிப்பதாக இருப்பது

கட்டத்தின் தனிப்பயனாக்கம் இயல்புநிலை மட்டத்தில், 940px கட்டத்தில் மட்டுமே வேலை செய்கிறது. பூட்ஸ்டார்ப்பின் பதிலளிக்கக்கூடிய அம்சங்களைப் பராமரிக்க, நீங்கள் responsive.less இல் கட்டங்களைத் தனிப்பயனாக்க வேண்டும்.

நிலையான தளவமைப்பு

இயல்புநிலை மற்றும் எளிமையான 940px-அகலமான, மையப்படுத்தப்பட்ட தளவமைப்பு எந்தவொரு இணையதளம் அல்லது ஒரு பக்கத்தால் வழங்கப்படும் <div class="container">.

<உடல்>
  <div class = "container" > 
    ...
  </div>
</body>

திரவ அமைப்பு

<div class="container-fluid">நெகிழ்வான பக்க அமைப்பு, குறைந்தபட்ச மற்றும் அதிகபட்ச அகலம் மற்றும் இடது பக்க பக்கப்பட்டியை வழங்குகிறது. பயன்பாடுகள் மற்றும் ஆவணங்களுக்கு இது சிறந்தது.

<div class = "container-fluid" > 
  <div class = "row-fluid" > 
    <div class = "span2" > 
      <!--பக்கப்பட்டி உள்ளடக்கம்-->
    </div>
    <div class = "span10" > 
      <!--உடல் உள்ளடக்கம்-->
    </div>
  </div>
</div>

ஆதரிக்கப்படும் சாதனங்கள்

வெவ்வேறு சாதனங்கள் மற்றும் திரைத் தீர்மானங்களில் உங்கள் திட்டங்களை மிகவும் பொருத்தமானதாக மாற்றுவதற்கு பூட்ஸ்டார்ப் ஒரு சி�� மீடியா வினவல்களை ஒரே கோப்பில் ஆதரிக்கிறது. இதில் உள்ளவை இங்கே:

மெட்டா டேக் தேவை

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

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

அவர்கள் என்ன செய்கிறார்கள்

மீடியா வினவல்கள் பல நிபந்தனைகளின் அடிப்படையில் தனிப்பயன் CSS ஐ அனுமதிக்கின்றன-விகிதங்கள், அகலங்கள், காட்சி வகை போன்றவை-ஆனால் பொதுவாக கவனம் செலுத்துகிறது min-widthமற்றும் max-width.

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

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

1. தொகுக்கப்பட்ட பதிலளிக்கக்கூடிய பதிப்பு, bootstrap-responsive.css ஐப் பயன்படுத்தவும்
2. Add @import "responsive.less" and recompile Bootstrap
3. Modify and recompile responsive.less as a separate file

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

  // Landscape phones and down
  @media (max-width: 480px) { ... }
 
  // Landscape phone to portrait tablet
  @media (max-width: 768px) { ... }
 
  // Portrait tablet to landscape and desktop
  @media (min-width: 768px) and (max-width: 980px) { ... }
 
  // Large desktop
  @media (min-width: 1200px) { .. }