Bootstrap දිගු කිරීම

ඇතුළත් කර ඇති මෝස්තර සහ සංරචක මෙන්ම අඩු විචල්‍යයන් සහ මිශ්‍රණයන්ගෙන් ප්‍රයෝජන ගැනීමට Bootstrap දිගු කරන්න.

අඩු CSS

Bootstrap සෑදී ඇත්තේ එහි හරය අඩුවෙන්, අපගේ හොඳ මිතුරා වන Alexis Sellier විසින් නිර්මාණය කරන ලද ගතික මෝස්තර පත්‍ර භාෂාවකි . එය පද්ධති මත පදනම් වූ CSS සංවර්ධනය වේගවත්, පහසු සහ වඩාත් විනෝදජනක කරයි.

ඇයි අඩු?

Bootstrap හි නිර්මාපකයෙකු මේ ගැන ඉක්මන් බ්ලොග් සටහනක් ලිවීය , මෙහි සාරාංශගත කර ඇත:

  • Bootstrap Sass හා සසඳන විට අඩු සමඟින් ~6x වේගයෙන් සම්පාදනය කරයි
  • ජාවාස්ක්‍රිප්ට් වලින් අඩුවෙන් ලියා ඇති අතර, Ruby with Sass හා සසඳන විට අපට කිමිදීම සහ පැච් කිරීම පහසු කරයි.
  • අඩු වැඩි; අපි CSS ලියනවා සහ Bootstrap සියල්ලන්ට ප්‍රවේශ විය හැකි බවට හැඟෙන්නට අවශ්‍යයි.

ඇතුළත් වන්නේ කුමක්ද?

CSS හි දිගුවක් ලෙස, LESS හි විචල්‍යයන්, නැවත භාවිත කළ හැකි කේත කොටස් සඳහා මිශ්‍රණයන්, සරල ගණිතය සඳහා මෙහෙයුම්, කැදැල්ල සහ වර්ණ ශ්‍රිත පවා ඇතුළත් වේ.

තවත් හදාරන්න

වැඩිදුර දැන ගැනීමට http://lesscss.org/ හි නිල වෙබ් අඩවියට පිවිසෙන්න .

අපගේ CSS අඩුවෙන් ලියා ඇති අතර විචල්‍යයන් සහ මිශ්‍රණයන් භාවිතා කරන බැවින්, අවසාන නිෂ්පාදන ක්‍රියාත්මක කිරීම සඳහා එය සම්පාදනය කළ යුතුය. මෙන්න මෙහෙමයි.

සටහන: ඔබ නවීකරණය කරන ලද CSS සමඟින් GitHub වෙත ඇදීමේ ඉල්ලීමක් ඉදිරිපත් කරන්නේ නම්, ඔබ මෙම ඕනෑම ක්‍රමයක් හරහා CSS නැවත සම්පාදනය කළ යුතුය .

සම්පාදනය සඳහා මෙවලම්

විධාන රේඛාව

විධාන රේඛාව හරහා සම්පාදනය කිරීම සඳහා GitHub හි ව්‍යාපෘති readme හි උපදෙස් අනුගමනය කරන්න .

JavaScript

නවතම Les.js බාගත කර එයට (සහ Bootstrap) මාර්ගය ඇතුළත් කරන්න <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>  
 

.less ගොනු නැවත සම්පාදනය කිරීමට, ඒවා සුරකින්න සහ ඔබේ පිටුව නැවත පූරණය කරන්න. Less.js ඒවා සම්පාදනය කර දේශීය ගබඩාවේ ගබඩා කරයි.

නිල නොවන මැක් යෙදුම

නිල නොවන Mac යෙදුම .less ගොනු නාමාවලි නරඹන අතර නැරඹූ .less ගොනුවක සෑම සුරැකුමකින්ම පසුව දේශීය ගොනු වෙත කේතය සම්පාදනය කරයි. ඔබ කැමති නම්, ඔබට ස්වයංක්‍රීයව කුඩා කිරීම සඳහා යෙදුම තුළ මනාප ටොගල කළ හැකි අතර සම්පාදනය කරන ලද ගොනු අවසන් වන්නේ කුමන නාමාවලියෙහිද යන්න.

තවත් යෙදුම්

හැපීම

Crunch යනු Adobe Air මත ගොඩනගා ඇති විශිෂ්ට පෙනුමක් ඇති අඩු සංස්කාරකයක් සහ සම්පාදකයකි.

CodeKit

නිල නොවන Mac යෙදුම ලෙස එකම පුද්ගලයා විසින් නිර්මාණය කරන ලද, CodeKit යනු LESS, SASS, Stylus සහ CoffeeScript සම්පාදනය කරන Mac යෙදුමකි.

සරල නැති

මැක්, ලිනක්ස්, සහ වින්ඩෝස් ඇප් එක අඩුවෙන් ගොනු සම්පාදනය කිරීම සඳහා. තවද, මූලාශ්‍ර කේතය GitHub මත ඇත.

සම්පාදනය කරන ලද හෝ කුඩා කළ CSS සහ JS තුළට දැමීමෙන් ඕනෑම වෙබ් ව්‍යාපෘතියක් ඉක්මනින් ආරම්භ කරන්න. පහසු වැඩිදියුණු කිරීම් සහ නඩත්තුව ඉදිරියට යාම සඳහා වෙන වෙනම අභිරුචි මෝස්තර මත ස්තරය කරන්න.

ගොනු ව්යුහය සකසන්න

නවතම සම්පාදනය කරන ලද Bootstrap බාගත කර ඔබේ ව්‍යාපෘතියට ඇතුල් කරන්න. උදාහරණයක් ලෙස, ඔබට මෙවැනි දෙයක් තිබිය හැක:

  යෙදුම/
      පිරිසැලසුම්/
      සැකිලි/
  මහජන/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

ආරම්භක අච්චුව භාවිතා කරන්න

ආරම්භ කිරීමට පහත පාදක HTML පිටපත් කරන්න.

  1. <html>
  2. <හිස>
  3. <title> Bootstrap 101 සැකිල්ල </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <ශරීරය>
  8. <h1> ආයුබෝවන්, ලෝකය! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </body>
  12. </html>

අභිරුචි කේතය මත ස්තරය

ඔබේ වෙනම CSS සහ JS ගොනු සමඟ Bootstrap ඔබේම කර ගැනීමට අවශ්‍ය පරිදි ඔබේ අභිරුචි CSS, JS සහ තවත් දේවල වැඩ කරන්න.

  1. <html>
  2. <හිස>
  3. <title> Bootstrap 101 සැකිල්ල </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. <!-- ව්‍යාපෘතිය -->
  7. <link href = "public/css/application.css" rel = "stylesheet" >
  8. </head>
  9. <ශරීරය>
  10. <h1> ආයුබෝවන්, ලෝකය! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- ව්‍යාපෘතිය -->
  14. <script src = "public/js/application.js" ></script>
  15. </body>
  16. </html>