පලංචිය

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 ගේ ව්‍යාපෘතියක් වන එය HTML5 Boilerplate ද බලගන්වයි . අපි අපගේ 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*

උදාහරණයක්

මෙහි කැදැලි .span4තීරු දෙකක් a තුළ තබා ඇත .span8.

තීරුවේ 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>

දියර කූඩුව

ද්‍රව ජාලක සමඟ කූඩු කිරීම තරමක් වෙනස් ය: කූඩු කළ තීරු ගණන මාපියන්ගේ තීරු ගණනට නොගැලපේ. ඒ වෙනුවට, එක් එක් පේළිය මව් තීරුවෙන් 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>

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

අවශ්‍ය පමණක් සහිත පොදු ස්ථාවර පළල (සහ විකල්ප වශයෙන් ප්‍රතිචාර දක්වන) පිරිසැලසුමක් සපයයි <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 විවිධ උපාංග සහ තිර විභේදන මත ඔබේ ව්‍යාපෘති වඩාත් යෝග්‍ය කිරීමට උදවු කිරීමට තනි ගොනුවක් තුළ මාධ්‍ය විමසුම් අතලොස්සකට සහය දක්වයි. මෙහි ඇතුළත් දේ:

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

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

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

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

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

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

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

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

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

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

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

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

සඟවාගෙන...

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

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

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