පලංචිය

Bootstrap ගොඩනගා ඇත්තේ ප්‍රතිචාරාත්මක 12-තීරු ජාලකය මත ය. අපි එම පද්ධතිය මත පදනම් වූ ස්ථාවර සහ තරල පළල පිරිසැලසුම් ද ඇතුළත් කර ඇත.

HTML5 doctype අවශ්‍යයි

Bootstrap HTML5 doctype භාවිතා කිරීමට අවශ්‍ය HTML මූලද්‍රව්‍ය සහ CSS ගුණාංග භාවිතා කරයි. ඔබගේ ව්‍යාපෘතියේ සෑම Bootstrapped පිටුවකම ආරම්භයේදීම එය ඇතුලත් කිරීමට වග බලා ගන්න.

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

මුද්‍රණ ශිල්පය සහ සබැඳි

scaffolding.less ගොනුව තුළ , අපි මූලික ගෝලීය සංදර්ශකය, මුද්‍රණ ශිල්පය සහ සබැඳි විලාසයන් සකස් කරමු. විශේෂයෙන්, අපි:

ශරීරයේ මායිම ඉවත් කරන්න
background-color: white;මත සකසන්නbody
අපගේ මුද්‍රණ පදනම ලෙස @baseFontFamily, @baseFontSize, සහ ගුණාංග භාවිතා කරන්න@baseLineHeight
ගෝලීය සබැඳි වර්ණය සකසන්න @linkColorසහ සබැඳි යටින් ඉරි පමණක් යොදන්න:hover

සාමාන්‍යකරණය හරහා යළි පිහිටුවන්න

Bootstrap 2 වන විට, සාම්ප්‍රදායික CSS යළි පිහිටුවීම පරිණාමය වී ඇත්තේ Normalize.css වෙතින් වන මූලද්‍රව්‍ය භාවිතා කිරීම සඳහා වන අතර එය Nicolas Gallagher ගේ ව්‍යාපෘතියක් වන අතර එය HTML5 බොයිලර් ප්ලේට් ද බලගන්වයි .

නව යළි පිහිටුවීම තවමත් reset.less හි සොයා ගත හැක , නමුත් සංක්ෂිප්තභාවය සහ නිරවද්‍යතාවය සඳහා බොහෝ මූලද්‍රව්‍ය ඉවත් කර ඇත.

Bootstrap හි කොටසක් ලෙස සපයන ලද පෙරනිමි ජාල පද්ධතිය 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()`මික්සින් පළල සැකසීමට තීරු සහ කාණු ගණන ගණන් කරයි

විචල්‍යයන් අඩුවෙන්

Bootstrap තුළට ගොඩනගා ඇත්තේ ඉහත ලේඛනගත කර ඇති පෙරනිමි 940px ජාල පද්ධතිය අභිරුචිකරණය කිරීම සඳහා අතලොස්සක් වන විචල්‍යයන්ය. ජාලකය සඳහා වන සියලුම විචල්‍යයන් විචල්‍ය ලෙස ගබඩා කර ඇත.less.

අභිරුචිකරණය කරන්නේ කෙසේද

ජාලකය වෙනස් කිරීම යනු @grid*විචල්‍ය තුන වෙනස් කිරීම සහ බූට්ස්ට්‍රැප් නැවත සම්පාදනය කිරීමයි. ග්‍රිඩ් විචල්‍යයන් variables.less ලෙස වෙනස් කර නැවත සම්පාදනය කිරීමට ලේඛනගත කර ඇති ක්‍රම හතරෙන් එකක් භාවිතා කරන්න . ඔබ තවත් තීරු එකතු කරන්නේ නම්, grid.less හි ඇති අය සඳහා CSS එක් කිරීමට වග බලා ගන්න.

ප්‍රතිචාරාත්මකව සිටීම

ජාලක අභිරුචිකරණය ක්‍රියාත්මක වන්නේ පෙරනිමි මට්ටමේ, 940px ජාලකයේ පමණි. Bootstrap හි ප්‍රතිචාරාත්මක අංගයන් පවත්වා ගැනීමට, ඔබට responsive.less හි ජාලක අභිරුචිකරණය කිරීමටද සිදුවේ.

ස්ථාවර පිරිසැලසුම

පෙරනිමි සහ සරල 940px-පුළුල්, ඕනෑම වෙබ් අඩවියක් හෝ පිටුවක් සඳහා කේන්ද්‍රගත පිරිසැලසුම තනි <div class="container">.

<ශරීරය>
  <div class = "බහාලකය" > 
    ...
  </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.

අපගේ ජාලකයේ තීරුවේ පළල වෙනස් කරන්න
අවශ්‍ය ඕනෑම තැනක පාවෙන වෙනුවට මූලද්‍රව්‍ය ගොඩගසන්න
උපාංග සඳහා වඩාත් සුදුසු පරිදි ශීර්ෂ සහ පෙළ ප්‍රතිප්‍රමාණ කරන්න

මාධ්‍ය විමසුම් වගකීමෙන් යුතුව භාවිතා කරන්න සහ ඔබේ ජංගම ප්‍රේක්ෂකයන්ට ආරම්භයක් ලෙස පමණි. විශාල ව්‍යාපෘති සඳහා, මාධ්‍ය විමසුම් ස්ථර නොව කැපවූ කේත පදනම් සලකා බලන්න.

සහාය දක්වන උපාංග

Bootstrap විවිධ උපාංග සහ තිර විභේදන මත ඔබේ ව්‍යාපෘති වඩාත් යෝග්‍ය කිරීමට උදවු කිරීමට තනි ගොනුවක් තුළ මාධ්‍ය විමසුම් අතලොස්සකට සහය දක්වයි. මෙහි ඇතුළත් දේ:

ලේබලය	පිරිසැලසුම් පළල	තීරු පළල	කාණු පළල
ස්මාර්ට්ෆෝන්	480px සහ පහත	ද්රව තීරු, ස්ථාවර පළල නැත
ස්මාර්ට්ෆෝන් සිට ටැබ්ලට් දක්වා	767px සහ පහත	ද්රව තීරු, ස්ථාවර පළල නැත
පෝට්රේට් ටැබ්ලට්	768px සහ ඉහළ	42px	20px
පෙරනිමිය	980px සහ ඉහළ	60px	20px
විශාල සංදර්ශකය	1200px සහ ඉහළ	70px	30px

මෙටා ටැග් අවශ්‍යයි

උපාංග නිසි ලෙස ප්‍රතිචාර දක්වන පිටු සංදර්ශනය කිරීම සහතික කිරීම සඳහා, viewport meta tag එක ඇතුළත් කරන්න.

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

මාධ්‍ය විමසුම් භාවිතා කිරීම

Bootstrap ස්වයංක්‍රීයව මෙම මාධ්‍ය විමසුම් ඇතුළත් නොවේ, නමුත් ඒවා තේරුම් ගැනීම සහ එකතු කිරීම ඉතා පහසු වන අතර අවම සැකසුම අවශ්‍ය වේ. Bootstrap හි ප්‍රතිචාරාත්මක විශේෂාංග ඇතුළත් කිරීමට ඔබට විකල්ප කිහිපයක් තිබේ:

සම්පාදනය කරන ලද ප්‍රතිචාරාත්මක අනුවාදය, bootstrap-responsive.css භාවිතා කරන්න
@import "responsive.less" එකතු කර Bootstrap නැවත සම්පාදනය කරන්න
responsive.less වෙනම ගොනුවක් ලෙස වෙනස් කර නැවත සම්පාදනය කරන්න

එය පමණක් ඇතුළත් නොකරන්නේ ඇයි? ඇත්තම කිව්වොත් හැමදේටම ප්‍රතිචාර දැක්වීම අවශ්‍ය නැහැ. මෙම විශේෂාංගය ඉවත් කිරීමට සංවර්ධකයින් දිරිමත් කරනවා වෙනුවට, එය සක්‍රීය කිරීම වඩාත් සුදුසු යැයි අපි සලකමු.

  // භූ දර්ශන දුරකථන සහ පහළ
  @media ( උපරිම - පළල : 480px ) { ... }     
 
  // පෝට්රේට් ටැබ්ලටයට භූ දර්ශන දුරකථනය
  @media ( උපරිම - පළල : 768px ) { ... }     
 
  // පෝට්රේට් ටැබ්ලටය භූ දර්ශනයට සහ ඩෙස්ක්ටොප් එකට
  @මාධ්‍ය ( මිනි - පළල : 768px ) සහ ( උපරිම - පළල : 980px ) { ... }        
 
  // විශාල ඩෙස්ක්ටොප්
  @මාධ්‍ය ( විනාඩි - පළල : 1200px ) { .. }

ප්‍රතිචාරාත්මක උපයෝගිතා පන්ති

ඒවා කුමක් ද

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✔ ඩෙස්ක්ටොප්