பூட்ஸ்ட்ராப்

சாரக்கட்டு

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

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

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

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

  1. <!DOCTYPE html>
  2. <html lang = "en" > 
  3.   ...
  4. </html>

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

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

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

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

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

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

இயல்புநிலை கட்ட அமைப்பு

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

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

1
1
1
1
1
1
1
1
1
2
3
4
4
5
9

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

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

  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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

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

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

4
3 ஆஃப்செட் 2
3 ஆஃப்செட் 1
3 ஆஃப்செட் 2
6 ஆஃப்செட் 3 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span3 offset2" > ... </div> 
  4. </div>

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

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

உதாரணமாக

இங்கே இரண்டு உள்ளமை .span4நெடுவரிசைகள் ஒரு க்குள் வைக்கப்பட்டுள்ளன .span8.

நெடுவரிசையின் நிலை 1
நிலை 2
நிலை 2 
  1. <div class = "row" > 
  2.   <div class = "span9" > 
  3.     நிலை 1 நெடுவரிசை
  4.     <div class = "row" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span3" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

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

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

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

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
4
8
6
6
12

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

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

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </div> 
  4. </div>

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

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

4
4 ஆஃப்செட் 4
3 ஆஃப்செட் 3
3 ஆஃப்செட் 3
6 ஆஃப்செட் 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset2" > ... </div> 
  4. </div>

திரவக் கூடு

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

திரவம் 12
திரவம் 6
திரவம் 6 
  1. <div class = "row-fluid" > 
  2.   <div class = "span12" > 
  3.     நெடுவரிசையின் நிலை 1
  4.     <div class = "row-fluid" > 
  5.       <div class = "span6" > Level 2 </div> 
  6.       <div class = "span6" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

தளவமைப்புகள்

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

பொதுவான நிலையான-அகல (மற்றும் விருப்பமாக பதிலளிக்கக்கூடிய) தளவமைப்பை <div class="container">தேவையானது மட்டுமே வழங்குகிறது.

  1. <உடல்>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

திரவ அமைப்பு

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

  1. <div class = "container-fluid" > 
  2.   <div class = "row-fluid" > 
  3.     <div class = "span2" > 
  4.       <!--பக்கப்பட்டி உள்ளடக்கம்-->
  5.     </div>
  6.     <div class = "span10" > 
  7.       <!--உடல் உள்ளடக்கம்-->
  8.     </div>
  9.   </div>
  10. </div>

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

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

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

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

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

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

பதிலளிக்கக்கூடிய சாதனங்கள்

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

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

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

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

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

லேபிள் தளவமைப்பு அகலம் நெடுவரிசை அகலம் கால்வாய் அகலம்
தொலைபேசிகள் 480px மற்றும் கீழே திரவ நெடுவரிசைகள், நிலையான அகலங்கள் இல்லை
தொலைபேசிகள் முதல் மாத்திரைகள் வரை 767px மற்றும் கீழே திரவ நெடுவரிசைகள், நிலையான அகலங்கள் இல்லை
உருவப்பட மாத்திரைகள் 768px மற்றும் அதற்கு மேல் 42px 20px
இயல்புநிலை 980px மற்றும் அதற்கு மேல் 60px 20px
பெரிய காட்சி 1200px மற்றும் அதற்கு மேல் 70px 30px 
  1. /* லேண்ட்ஸ்கேப் ஃபோன்கள் மற்றும் கீழே */
  2. @media ( அதிகபட்ச அகலம் : 480px ) { ... } _     
  3.  
  4. /* போர்ட்ரெய்ட் டேப்லெட்டிற்கு லேண்ட்ஸ்கேப் ஃபோன் */
  5. @media ( அதிகபட்ச அகலம் : 767px ) { ... } _     
  6.  
  7. /* போர்ட்ரெய்ட் டேப்லெட் டு லேண்ட்ஸ்கேப் மற்றும் டெஸ்க்டாப் */
  8. @media ( நிமிடம் - அகலம் : 768px ) மற்றும் ( அதிகபட்சம் - அகலம் : 979px ) { ... }        
  9.  
  10. /* பெரிய டெஸ்க்டாப் */
  11. @media ( நிமிடம் - அகலம் : 1200px ) { ... }

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

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

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

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

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

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

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

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

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

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

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

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

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