පලංචි · බූට්ස්ට්රැප් සිංහලෙන්

HTML5 doctype අවශ්‍යයි

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

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

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

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

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

මෙම විලාසිතාවන් පලංචිය තුළ සොයාගත හැකිය .less .

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

Bootstrap 2 සමඟින්, පැරණි reset block එක Normalize.css සඳහා අතහැර දමා ඇත , එය Nicolas Gallagher සහ Jonathan Neal විසින් HTML5 බොයිලර් ප්ලේට් බලගන්වන ව්‍යාපෘතියකි . අපගේ reset.less තුළ අපි සාමාන්‍යකරණය බොහෝමයක් භාවිතා කරන අතර , අපි Bootstrap සඳහා විශේෂයෙන් සමහර අංග ඉවත් කර ඇත.

සජීවී ජාල උදාහරණය

පෙරනිමි බූට්ස්ට්‍රැප් ජාල පද්ධතිය තීරු 12ක් භාවිතා කරයි, ප්‍රතිචාරාත්මක විශේෂාංග සක්‍රීය නොකර 940px පළල කන්ටේනරයක් සාදයි . ප්‍රතිචාරාත්මක CSS ගොනුව එකතු කිරීමත් සමඟ, ජාලකය ඔබගේ දර්ශන තොටට අනුව 724px සහ 1170px පළලට අනුගත වේ. 767px viewports ට පහළින්, තීරු තරල බවට පත් වී සිරස් අතට ගොඩගැසී ඇත.

මූලික ජාල HTML

සරල තීරු දෙකක පිරිසැලසුමක් සඳහා, a නිර්මාණය කර සුදුසු තීරු .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" > Fluid 6 </div> 
          <div class = "span6" > Fluid 6 </div> 
        </div>
      </div>
      <div class = "span6" > Fluid 6 </div> 
    </div>
  </div>
</div>

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

අවශ්‍ය පමණක් සහිත පොදු ස්ථාවර පළල (සහ විකල්ප වශයෙන් ප්‍රතිචාර දක්වන) පිරිසැලසුමක් සපයයි <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>

ප්‍රතිචාරාත්මක විශේෂාංග සබල කිරීම

<head>ඔබේ ලේඛනය තුළ නිසි මෙටා ටැගය සහ අමතර මෝස්තර පත්‍රිකාව ඇතුළත් කිරීමෙන් ඔබේ ව්‍යාපෘතියේ ප්‍රතිචාරාත්මක CSS ක්‍රියාත්මක කරන්න . ඔබ අභිරුචිකරණය පිටුවෙන් Bootstrap සම්පාදනය කර ඇත්නම්, ඔබට මෙටා ටැගය පමණක් ඇතුළත් කළ යුතුය.

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

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

ප්‍රතිචාර දක්වන Bootstrap ගැන

මාධ්‍ය විමසුම් කොන්දේසි ගණනාවක් මත පදනම්ව අභිරුචි CSS සඳහා ඉඩ ලබා දේ - අනුපාත, පළල, සංදර්ශක වර්ගය යනාදිය - නමුත් සාමාන්‍යයෙන් අවධානය යොමු කරන්නේ min-widthසහ max-width.

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

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

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

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

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

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

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

වේගවත් ජංගම-හිතකාමී සංවර්ධනයක් සඳහා, උපාංගය මඟින් අන්තර්ගතය පෙන්වීමට සහ සැඟවීමට මෙම උපයෝගිතා පන්ති භාවිතා කරන්න. ලබා දී ඇති මාධ්‍ය විමසුම් පිරිසැලසුමකට (උපාංගය මගින් ලේබල් කර ඇති) පවතින පන්ති සහ ඒවායේ බලපෑම පිළිබඳ වගුවක් පහත දැක්වේ. ඔවුන් සොයා ගත හැක responsive.less.

පන්තිය	දුරකථන767px සහ පහත	ටැබ්ලට්979px සිට 768px දක්වා	ඩෙස්ක්ටොප්පෙරනිමිය
`.visible-phone`	දෘශ්‍යමානයි	සැඟවී ඇත	සැඟවී ඇත
`.visible-tablet`	සැඟවී ඇත	දෘශ්‍යමානයි	සැඟවී ඇත
`.visible-desktop`	සැඟවී ඇත	සැඟවී ඇත	දෘශ්‍යමානයි
`.hidden-phone`	සැඟවී ඇත	දෘශ්‍යමානයි	දෘශ්‍යමානයි
`.hidden-tablet`	දෘශ්‍යමානයි	සැඟවී ඇත	දෘශ්‍යමානයි
`.hidden-desktop`	දෘශ්‍යමානයි	දෘශ්‍යමානයි	සැඟවී ඇත

භාවිතා කළ යුත්තේ කවදාද

සීමිත පදනමක් මත භාවිතා කරන්න සහ එකම වෙබ් අඩවියේ සම්පූර්ණයෙන්ම වෙනස් අනුවාද නිර්මාණය කිරීමෙන් වළකින්න. ඒ වෙනුවට, එක් එක් උපාංගයේ ඉදිරිපත් කිරීම සම්පූර්ණ කිරීමට ඒවා භාවිතා කරන්න. වගු සමඟ ප්‍රතිචාරාත්මක උපයෝගිතා භාවිතා නොකළ යුතු අතර, සහය නොදක්වයි.

ප්‍රතිචාරාත්මක උපයෝගිතා පරීක්ෂණ නඩුව

ඉහත පන්ති පරීක්ෂා කිරීමට ඔබගේ බ්‍රවුසරයේ ප්‍රමාණය වෙනස් කරන්න හෝ විවිධ උපාංග මත පූරණය කරන්න.

දෘශ්‍යමානයි...

හරිත පිරික්සුම් සලකුණු පෙන්නුම් කරන්නේ ඔබේ වත්මන් දර්ශන තොටේ පන්තිය දෘශ්‍යමාන බවයි.

දුරකථන✔ දුරකථනය
ටැබ්ලට්✔ ටැබ්ලට්
ඩෙස්ක්ටොප්✔ ඩෙස්ක්ටොප්

සඟවාගෙන...

මෙන්න, හරිත පිරික්සුම් සලකුණු පෙන්නුම් කරන්නේ ඔබේ වත්මන් දර්ශන තොටේ පන්තිය සඟවා ඇති බවයි.

දුරකථන✔ දුරකථනය
ටැබ්ලට්✔ ටැබ්ලට්
ඩෙස්ක්ටොප්✔ ඩෙස්ක්ටොප්

පලංචිය

ගෝලීය සැකසුම්