Bootstrap

පලංචිය

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

CSS යළි පිහිටුවීම, මුද්‍රණ ශිල්පය සහ සබැඳි සඳහා ගෝලීය මෝස්තර

HTML5 doctype අවශ්‍යයි

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

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

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

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

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

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

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

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

පෙරනිමි ජාල පද්ධතිය ප්‍රතිචාරාත්මක පෙරළියක් සහිත තීරු 12 ක්

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

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

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

මෙහි පෙන්වා ඇති පරිදි, "තීරු" දෙකකින් මූලික පිරිසැලසුමක් සෑදිය හැක, ඒ සෑම එකක්ම අපගේ ජාල පද්ධතියේ කොටසක් ලෙස අර්ථ දක්වා ඇති පදනම් තීරු 12 කින් සමන්විත වේ.


තීරු කපා හැරීම

4
4 ඕෆ්සෙට් 4
3 ඕෆ්සෙට් 3
3 ඕෆ්සෙට් 3
8 ඕෆ්සෙට් 4 
  1. <div class = "row" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span4 offset4" > ... </div> 
  4. </div>

කූඩු තීරු

බූට්ස්ට්‍රැප් හි ස්ථිතික (ද්‍රව නොවන) ජාල පද්ධතිය සමඟින්, කූඩු කිරීම පහසුය. ඔබේ අන්තර්ගතය කැදවා ගැනීමට, පවතින තීරුවක් තුළ නව .rowසහ තීරු කට්ටලයක් එක් කරන්න ..span*.span*

උදාහරණයක්

කැදලි පේළිවල එහි මාපිය තීරු ගණනට එකතු වන තීරු කට්ටලයක් ඇතුළත් විය යුතුය. උදාහරණයක් ලෙස, කූඩු .span3තීරු දෙකක් තුළ තැබිය යුතුය .span6.

තීරුවේ 1 මට්ටම
2 මට්ටම
2 මට්ටම 
  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     1 මට්ටමේ තීරුව
  4.     <div class = "row" > 
  5.       <div class = "span3" > Level 2 </div> 
  6.       <div class = "span3" > Level 2 </div> 
  7.     </div>
  8.   </div>
  9. </div>

ද්‍රව ජාල පද්ධතිය 12 ප්‍රතිචාරාත්මක, සියයට මත පදනම් වූ තීරු

දියර තීරු

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

ප්‍රතිශත, පික්සල නොවේ

ද්රව ජාල පද්ධතිය ස්ථාවර පික්සල වෙනුවට තීරු පළල සඳහා සියයට භාවිතා කරයි. එය අපගේ ස්ථාවර ජාල පද්ධතියට සමාන ප්‍රතිචාරාත්මක විචලනයන් ද ඇත, ප්‍රධාන තිර විභේදන සහ උපාංග සඳහා නිසි අනුපාත සහතික කරයි.

දියර පේළි

.rowවෙත වෙනස් කිරීමෙන් ඕනෑම පේළි තරලයක් සාදන්න .row-fluid. තීරු හරියටම පවතිනු ඇත, ස්ථාවර සහ තරල පිරිසැලසුම් අතර පෙරලීම ඉතා සරල කරයි.

සලකුණු කිරීම

  1. <div class = "row-fluid" > 
  2.   <div class = "span4" > ... </div> 
  3.   <div class = "span8" > ... </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>

ජාල අභිරුචිකරණය

විචල්ය පෙරනිමි අගය විස්තර
@gridColumns 12 තීරු ගණන
@gridColumnWidth 60px එක් එක් තීරුවේ පළල
@gridGutterWidth 20px තීරු අතර සෘණ අවකාශය

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

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

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

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

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

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

පිරිසැලසුම් වෙබ් පිටු නිර්මාණය කිරීමට මූලික සැකිලි

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

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

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

ප්‍රතිචාරාත්මක නිර්මාණය විවිධ උපාංග සහ විභේදන සඳහා මාධ්‍ය විමසුම්

ප්රතිචාර දක්වන උපාංග

ඔවුන් කරන දේ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ඒවා කුමක් ද

වේගවත් ජංගම-හිතකාමී සංවර්ධනයක් සඳහා, උපාංගය මගින් අන්තර්ගතය පෙන්වීමට සහ සැඟවීමට මෙම මූලික උපයෝගිතා පන්ති භාවිතා කරන්න.

භාවිතා කරන විට

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

උදාහරණයක් ලෙස, ඔබ <select>ජංගම පිරිසැලසුම් මත nav සඳහා අංගයක් පෙන්විය හැක, නමුත් ටැබ්ලට් හෝ ඩෙස්ක්ටොප් මත නොවේ.

උපකාරක පන්ති

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

පන්තිය දුරකථන480px සහ පහත ටැබ්ලට්767px සහ පහත ඩෙස්ක්ටොප්768px සහ ඉහළ
.visible-phone දෘශ්‍යමානයි
.visible-tablet දෘශ්‍යමානයි
.visible-desktop දෘශ්‍යමානයි
.hidden-phone දෘශ්‍යමානයි දෘශ්‍යමානයි
.hidden-tablet දෘශ්‍යමානයි දෘශ්‍යමානයි
.hidden-desktop දෘශ්‍යමානයි දෘශ්‍යමානයි

පරීක්ෂණ නඩුව

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

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

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

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

සඟවාගෙන...

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

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