சாரக்கட்டு

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

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

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

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

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

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

இந்த பாணிகளை சாரக்கட்டுக்குள் காணலாம். less .

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

பூட்ஸ்டார்ப் 2 உடன், பழைய ரீசெட் பிளாக் Normalize.css க்கு ஆதரவாக கைவிடப்பட்டது, இது Nicolas Gallagher மற்றும் Jonathan Neal ஆகியோரால் HTML5 பாய்லர் பிளேட்டையும் இயக்குகிறது . எங்களின் reset.less க்குள் நாம் இயல்பாக்குவதைப் பயன்படுத்தும் போது , பூட்ஸ்டார்ப்பிற்காக குறிப்பாக சில கூறுகளை அகற்றியுள்ளோம்.

நேரடி கட்டம் உதாரணம்

இயல்புநிலை பூட்ஸ்டார்ப் கிரிட் அமைப்பு 12 நெடுவரிசைகளைப் பயன்படுத்துகிறது , இது 940px அகலமான கொள்கலனை பதிலளிக்கக்கூடிய அம்சங்கள் இயக்கப்படாமல் உருவாக்குகிறது. பதிலளிக்கக்கூடிய CSS கோப்பு சேர்க்கப்பட்டால், உங்கள் காட்சிப் பகுதியைப் பொறுத்து கட்டம் 724px மற்றும் 1170px அகலத்திற்கு மாற்றியமைக்கிறது. 767px வியூபோர்ட்களுக்குக் கீழே, நெடுவரிசைகள் திரவமாகி செங்குத்தாக அடுக்கப்படும்.

அடிப்படை கட்டம் HTML

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

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

இந்த எடுத்துக்காட்டில், 12 மொத்த நெடுவரிசைகள் .span4மற்றும் .span8முழுமையான வரிசையை உருவாக்குகிறோம்.

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

.offset*வகுப்புகளைப் பயன்படுத்தி நெடுவரிசைகளை வலது பக்கம் நகர்த்தவும் . ஒவ்வொரு வகுப்பும் ஒரு நெடுவரிசையின் இடது விளிம்பை முழு நெடுவரிசையால் அதிகரிக்கிறது. எடுத்துக்காட்டாக, நான்கு நெடுவரிசைகளுக்கு மேல் .offset4நகரும் ..span4

3 ஆஃப்செட் 2

3 ஆஃப்செட் 1

3 ஆஃப்செட் 2

6 ஆஃப்செட் 3

<div class = "row" > 
  <div class = "span4" > ... </div> 
  <div class = "span3 offset2" > ... </div> 
</div>

நெஸ்டிங் பத்திகள்

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

நிலை 1 நெடுவரிசை

நிலை 2

<div class = "row" > 
  <div class = "span9" > 
    நிலை 1 நெடுவரிசை
    <div class = "row" > 
      <div class = "span6" > Level 2 </div> 
      <div class = "span3" > Level 2 </div> 
    </div>
  </div>
</div>

நேரடி திரவ கட்டம் உதாரணம்

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

அடிப்படை திரவ கட்டம் HTML

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

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

திரவ ஆஃப்செட்டிங்

நிலையான கிரிட் சிஸ்டம் ஆஃப்செட்டிங்கைப் போலவே செயல்படுகிறது: .offset*எந்த நெடுவரிசையிலும் பல நெடுவரிசைகளை ஈடுகட்டச் சேர்க்கவும்.

4 ஆஃப்செட் 4

3 ஆஃப்செட் 3

6 ஆஃப்செட் 6

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

திரவக் கூடு

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

திரவம் 12

திரவம் 6

<div class = "row-fluid" > 
  <div class = "span12" > 
    திரவம் 12
    <div class = "row-fluid" > 
      <div class = "span6" > 
        திரவம் 6
        <div class = "row-fluid" > 
          <div class = "span6" > திரவம் 6 </div> 
          <div class = "span6" > திரவம் 6 </div> 
        </div>
      </div>
      <div class = "span6" > திரவம் 6 </div> 
    </div>
  </div>
</div>

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

பொதுவான நிலையான-அகல (மற்றும் விருப்பமாக பதிலளிக்கக்கூடிய) தளவமைப்பை <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>

பதிலளிக்கக்கூடிய அம்சங்களை இயக்குகிறது

<head>உங்கள் ஆவணத்தில் சரியான மெட்டா டேக் மற்றும் கூடுதல் ஸ்டைல்ஷீட்டைச் சேர்ப்பதன் மூலம் உங்கள் திட்டத்தில் பதிலளிக்கக்கூடிய CSS ஐ இயக்கவும் . தனிப்பயனாக்கு பக்கத்திலிருந்து பூட்ஸ்டார்ப்பை நீங்கள் தொகுத்திருந்தால், நீங்கள் மெட்டா டேக்கை மட்டும் சேர்க்க வேண்டும்.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  
<link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >

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

பதிலளிக்கக்கூடிய பூட்ஸ்டார்ப் பற்றி

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

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

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

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

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

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

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

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

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

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

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

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

பதிலளிக்கக்கூடிய பயன்பாடுகள் சோதனை வழக்கு

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

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

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

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

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

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

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

உலகளாவிய அமைப்புகள்