சாரக்கட்டு

பூட்ஸ்டார்ப் ஒரு பதிலளிக்கக்கூடிய 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	நெடுவரிசைகளுக்கு இடையில் எதிர்மறை இடைவெளி
`@siteWidth`	அனைத்து நெடுவரிசைகள் மற்றும் கால்வாய்களின் கணக்கிடப்பட்ட தொகை	`.container-fixed()`மிக்சினின் அகலத்தை அமைக்க நெடுவரிசைகள் மற்றும் கால்வாய்களின் எண்ணிக்கையைக் கணக்கிடுகிறது

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

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

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

கட்டத்தை மாற்றுவது என்பது மூன்று @grid*மாறிகளை மாற்றுவது மற்றும் பூட்ஸ்டார்ப்பை மீண்டும் தொகுத்தல் ஆகும். கட்ட மாறிகளை மாறிகள்.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.

Modify the width of column in our grid
Stack elements instead of float wherever necessary
Resize headings and text to be more appropriate for devices

Use media queries responsibly and only as a start to your mobile audiences. For larger projects, do consider dedicated code bases and not layers of media queries.

Supported devices

Bootstrap supports a handful of media queries in a single file to help make your projects more appropriate on different devices and screen resolutions. Here's what's included:

Label	Layout width	Column width	Gutter width
Smartphones	480px and below	Fluid columns, no fixed widths
Smartphones to tablets	767px and below	Fluid columns, no fixed widths
Portrait tablets	768px and above	42px	20px
Default	980px and up	60px	20px
Large display	1200px and up	70px	30px

Requires meta tag

To ensure devices display responsive pages properly, include the viewport meta tag.

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

Using the media queries

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

Use the compiled responsive version, bootstrap-responsive.css
Add @import "responsive.less" and recompile Bootstrap
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) { .. }

Responsive utility classes

What are they

For faster mobile-friendly development, use these basic utility classes for showing and hidding content by device.

When to use

Use on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

For example, you might show a <select> element for nav on mobile layouts, but not on tablets or desktops.

Support classes

Shown here is a table of the classes we support and their effect on a given media query layout (labeled by device). They can be found in responsive.less.

Class	Phones 480px and below	Tablets 767px and below	Desktops 768px and above
`.visible-phone`	Visible	Hidden	Hidden
`.visible-tablet`	Hidden	Visible	Hidden
`.visible-desktop`	Hidden	Hidden	Visible
`.hidden-phone`	Hidden	Visible	Visible
`.hidden-tablet`	Visible	Hidden	Visible
`.hidden-desktop`	Visible	Visible	Hidden

Test case

Resize your browser or load on different devices to test the above clases.

Visible on...

Phone✔ தொலைபேசி
Tablet✔ மாத்திரை
Desktop✔ Desktop

Hidden on...

Phone✔ Phone
Tablet✔ Tablet
Desktop✔ டெஸ்க்டாப்