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

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

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

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

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

உதாரணமாக

<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>

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

பூட்ஸ்டார்ப்பில் உள்ளமைக்கப்பட்டவை, மேலே ஆவணப்படுத்தப்பட்ட இயல்புநிலை 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>

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

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

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

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

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

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

1. தொகுக்கப்பட்ட பதிலளிக்கக்கூடிய பதிப்பு, bootstrap-responsive.css ஐப் பயன்படுத்தவும்
2. @import "responsive.less" ஐச் சேர்த்து பூட்ஸ்டார்ப்பை மீண்டும் தொகுக்கவும்
3. responsive.less என்பதை தனித்தனியாக மாற்றி மீண்டும் தொகுக்கவும்

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

  // லேண்ட்ஸ்கேப் ஃபோன்கள் மற்றும் கீழே
  @media ( அதிகபட்ச அகலம் : 480px ) { ... } _     
 
  // போர்ட்ரெய்ட் டேப்லெட்டிற்கு லேண்ட்ஸ்கேப் ஃபோன்
  @media ( அதிகபட்ச அகலம் : 768px ) { ... } _     
 
  // நிலப்பரப்பு மற்றும் டெஸ்க்டாப்பில் போர்ட்ரெய்ட் டேப்லெட்
  @media ( நிமிடம் - அகலம் : 768px ) மற்றும் ( அதிகபட்சம் - அகலம் : 940px ) { ... }        
 
  // பெரிய டெஸ்க்டாப்
  @media ( நிமிடம் - அகலம் : 1200px ) { .. }