சாரக்கட்டு

பூட்ஸ்டார்ப் ஒரு பதிலளிக்கக்கூடிய 12-நெடுவரிசை கட்டம் கட்டப்பட்டுள்ளது. அந்த அமைப்பின் அடிப்படையில் நிலையான மற்றும் திரவ அகல தளவமைப்புகளையும் சேர்த்துள்ளோம்.

HTML5 டாக்டைப் தேவை

HTML5 டாக்டைப்பின் பயன்பாடு தேவைப்படும் HTML உறுப்புகள் மற்றும் CSS பண்புகளை பூட்ஸ்டார்ப் பயன்படுத்துகிறது. உங்கள் திட்டப்பணியில் ஒவ்வொரு பூட்ஸ்ட்ராப் செய்யப்பட்ட பக்கத்தின் தொடக்கத்திலும் அதைச் சேர்க்க மறக்காதீர்கள்.

<!DOCTYPE html>
<html lang = "en" > 
  ...
</html>

அச்சுக்கலை மற்றும் இணைப்புகள்

scaffolding.less கோப்பில், அடிப்படை உலகளாவிய காட்சி, அச்சுக்கலை மற்றும் இணைப்பு நடைகளை அமைக்கிறோம் . குறிப்பாக, நாங்கள்:

உடலில் உள்ள விளிம்பை அகற்றவும்
background-color: white;மீது அமைக்கவும்body
எங்கள் அச்சுக்கலை அடிப்படையாக @baseFontFamily, @baseFontSize, மற்றும் பண்புக்கூறுகளைப் பயன்படுத்தவும்@baseLineHeight
உலகளாவிய இணைப்பு வண்ணத்தை அமைத்து, @linkColorஇணைப்பு அடிக்கோடிட்டுகளை மட்டும் பயன்படுத்தவும்:hover

இயல்பாக்கம் மூலம் மீட்டமைக்கவும்

பூட்ஸ்டார்ப் 2 இன் படி, பாரம்பரிய CSS மீட்டமைப்பானது Normalize.css இலிருந்து கூறுகளைப் பயன்படுத்துவதற்காக உருவாகியுள்ளது, இது நிக்கோலஸ் கல்லாகரின் திட்டமாகும், இது HTML5 பாய்லர் பிளேட்டையும் இயக்குகிறது .

புதிய மீட்டமைப்பை இன்னும் reset.less இல் காணலாம் , ஆனால் சுருக்கம் மற்றும் துல்லியத்திற்காக பல கூறுகள் அகற்றப்பட்டுள்ளன.

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

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

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

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

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

4 ஆஃப்செட் 4

3 ஆஃப்செட் 3

8 ஆஃப்செட் 4

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

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

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

உதாரணமாக

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

நெடுவரிசையின் நிலை 1

நிலை 2

<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% எடுக்கும்.

திரவம் 12

திரவம் 6

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

மாறி	இயல்புநிலை மதிப்பு	விளக்கம்
`@gridColumns`	12	நெடுவரிசைகளின் எண்ணிக்கை
`@gridColumnWidth`	60px	ஒவ்வொரு நெடுவரிசையின் அகலம்
`@gridGutterWidth`	20px	நெடுவரிசைகளுக்கு இடையில் எதிர்மறை இடைவெளி

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

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

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

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

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

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

லேபிள்	தளவமைப்பு அகலம்	நெடுவரிசை அகலம்	கால்வாய் அகலம்
ஸ்மார்ட்போன்கள்	480px மற்றும் கீழே	திரவ நெடுவரிசைகள், நிலையான அகலங்கள் இல்லை
ஸ்மார்ட்போன்கள் முதல் டேப்லெட்டுகள்	767px மற்றும் கீழே	திரவ நெடுவரிசைகள், நிலையான அகலங்கள் இல்லை
உருவப்பட மாத்திரைகள்	768px மற்றும் அதற்கு மேல்	42px	20px
இயல்புநிலை	980px மற்றும் அதற்கு மேல்	60px	20px
பெரிய காட்சி	1200px மற்றும் அதற்கு மேல்	70px	30px

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

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

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

ஊடக வினவல்களைப் பயன்படுத்துதல்

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

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

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

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

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

அவை என்ன

வேகமான மொபைல்-நட்பு மேம்பாட்டிற்கு, சாதனத்தின் மூலம் உள்ளடக்கத்தைக் காண்பிக்கவும் மறைக்கவும் இந்த அடிப்படை பயன்பாட்டு வகுப்புகளைப் பயன்படுத்தவும்.

எப்போது பயன்படுத்த வேண்டும்

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

எடுத்துக்காட்டாக, மொபைல் தளவமைப்புகளில் navக்கான உறுப்பைக் காட்டலாம் <select>, ஆனால் டேப்லெட்டுகள் அல்லது டெஸ்க்டாப்களில் காட்ட முடியாது.

ஆதரவு வகுப்புகள்

நாங்கள் ஆதரிக்கும் வகுப்புகளின் அட்டவணை மற்றும் கொடுக்கப்பட்ட மீடியா வினவல் தளவமைப்பில் அவற்றின் விளைவு (சாதனத்தால் லேபிளிடப்பட்டது) இங்கே காட்டப்பட்டுள்ளது. அவற்றைக் காணலாம் responsive.less.

வர்க்கம்	தொலைபேசிகள்480px மற்றும் கீழே	மாத்திரைகள்767px மற்றும் கீழே	டெஸ்க்டாப்புகள்768px மற்றும் அதற்கு மேல்
`.visible-phone`	தெரியும்	மறைக்கப்பட்டது	மறைக்கப்பட்டது
`.visible-tablet`	மறைக்கப்பட்டது	தெரியும்	மறைக்கப்பட்டது
`.visible-desktop`	மறைக்கப்பட்டது	மறைக்கப்பட்டது	தெரியும்
`.hidden-phone`	மறைக்கப்பட்டது	தெரியும்	தெரியும்
`.hidden-tablet`	தெரியும்	மறைக்கப்பட்டது	தெரியும்
`.hidden-desktop`	தெரியும்	தெரியும்	மறைக்கப்பட்டது

சோதனை வழக்கு

மேலே உள்ள வகுப்புகளைச் சோதிக்க உங்கள் உலாவியின் அளவை மாற்றவும் அல்லது வெவ்வேறு சாதனங்களில் ஏற்றவும்.

இதில் தெரியும்...

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

தொலைபேசி✔ தொலைபேசி
டேப்லெட்✔ டேப்லெட்
டெஸ்க்டாப்✔ டெஸ்க்டாப்

மறைக்கப்பட்டுள்ளது...

இங்கே, பச்சை நிற சரிபார்ப்பு குறிகள் உங்கள் தற்போதைய காட்சிப் போர்ட்டில் வகுப்பு மறைக்கப்பட்டிருப்பதைக் குறிக்கிறது.

தொலைபேசி✔ தொலைபேசி
டேப்லெட்✔ டேப்லெட்
டெஸ்க்டாப்✔ டெஸ்க்டாப்