விரிவாக்கு · பூட்ஸ்டார்ப் தமிழில்

பூட்ஸ்டார்ப் அதன் மையத்தில் குறைவாகவே உருவாக்கப்பட்டுள்ளது, இது எங்களின் நல்ல நண்பரான அலெக்சிஸ் செல்லியரால் உருவாக்கப்பட்ட டைனமிக் ஸ்டைல்ஷீட் மொழியாகும் . இது சிஸ்டம் அடிப்படையிலான CSSகளை வேகமாகவும் எளிதாகவும் மேலும் வேடிக்கையாகவும் உருவாக்குகிறது.

ஏன் குறைவாக?

பூட்ஸ்டார்ப்பின் படைப்பாளிகளில் ஒருவர் இதைப் பற்றி ஒரு விரைவான வலைப்பதிவு இடுகையை எழுதினார் , இங்கே சுருக்கமாக:

சாஸ் உடன் ஒப்பிடும்போது பூட்ஸ்டார்ப் ~6 மடங்கு வேகமாக தொகுக்கிறது
ஜாவாஸ்கிரிப்ட்டில் குறைவாக எழுதப்பட்டுள்ளது, ரூபி வித் சாஸுடன் ஒப்பிடும்போது டைவ் செய்வதையும் பேட்ச் செய்வதையும் எளிதாக்குகிறது.
குறைவே நிறைவு; நாங்கள் CSS ஐ எழுதுவது போலவும், பூட்ஸ்டார்ப்பை அனைவருக்கும் அணுகக்கூடியதாக மாற்றுவது போலவும் உணர விரும்புகிறோம்.

என்ன சேர்க்கப்பட்டுள்ளது?

CSS இன் நீட்டிப்பாக, LESS ஆனது மாறிகள், மீண்டும் பயன்படுத்தக்கூடிய குறியீட்டின் துணுக்குகளுக்கான மிக்சின்கள், எளிய கணிதத்திற்கான செயல்பாடுகள், கூடு கட்டுதல் மற்றும் வண்ண செயல்பாடுகளை உள்ளடக்கியது.

மேலும் அறிக

மேலும் அறிய http://lesscss.org/ என்ற அதிகாரப்பூர்வ இணையதளத்தைப் பார்வையிடவும்.

எங்கள் CSS குறைவாக எழுதப்பட்டு மாறிகள் மற்றும் மிக்ஸின்களைப் பயன்படுத்துவதால், இறுதி உற்பத்திச் செயலாக்கத்திற்காக இது தொகுக்கப்பட வேண்டும். எப்படி என்பது இங்கே.

குறிப்பு: மாற்றியமைக்கப்பட்ட CSS உடன் GitHub க்கு இழுக்கும் கோரிக்கையைச் சமர்ப்பித்தால் , இந்த முறைகளில் ஏதேனும் ஒன்றின் மூலம் நீங்கள் CSS ஐ மீண்டும் தொகுக்க வேண்டும் .

தொகுப்பதற்கான கருவிகள்

மேக்ஃபைலுடன் முனை

பின்வரும் கட்டளையை இயக்குவதன் மூலம் குறைந்த கட்டளை வரி கம்பைலர், JSHint, Recess மற்றும் uglify-js ஐ உலகளவில் npm உடன் நிறுவவும்:

$ npm நிறுவல் -g குறைவான jshint இடைவெளி uglify-js

நிறுவியதும் make, உங்கள் பூட்ஸ்ட்ராப் கோப்பகத்தின் மூலத்திலிருந்து இயக்கவும், நீங்கள் தயாராகிவிட்டீர்கள்.

கூடுதலாக, நீங்கள் வாட்சர் நிறுவியிருந்தால், பூட்ஸ்ட்ராப் லிப்பில்make watch கோப்பைத் திருத்தும் ஒவ்வொரு முறையும் பூட்ஸ்ட்ராப் தானாகவே மீண்டும் கட்டமைக்கப்படும் (இது தேவையில்லை, ஒரு வசதியான முறை).

கட்டளை வரி

Node வழியாக LESS கட்டளை வரி கருவியை நிறுவி பின்வரும் கட்டளையை இயக்கவும்:

$ lessc ./less/bootstrap.less > bootstrap.css

--compressநீங்கள் சில பைட்டுகளைச் சேமிக்க முயற்சிக்கிறீர்கள் என்றால், அந்தக் கட்டளையில் சேர்க்க மறக்காதீர்கள் !

ஜாவாஸ்கிரிப்ட்

சமீபத்திய Les.jsஐப் பதிவிறக்கி, அதற்கான பாதையை (மற்றும் பூட்ஸ்டார்ப்) இல் சேர்க்கவும் <head>.

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

.less கோப்புகளை மீண்டும் தொகுக்க, அவற்றைச் சேமித்து, உங்கள் பக்கத்தை மீண்டும் ஏற்றவும். Less.js அவற்றை தொகுத்து உள்ளூர் சேமிப்பகத்தில் சேமிக்கிறது.

அதிகாரப்பூர்வமற்ற மேக் பயன்பாடு

அதிகாரப்பூர்வமற்ற Mac செயலியானது .less கோப்புகளின் கோப்பகங்களைப் பார்க்கிறது மற்றும் பார்த்த .less கோப்பை ஒவ்வொரு சேமித்த பிறகும் குறியீட்டை உள்ளூர் கோப்புகளுக்கு தொகுக்கிறது. நீங்கள் விரும்பினால், தானாகவே சிறிதாக்குதல் மற்றும் தொகுக்கப்பட்ட கோப்புகள் எந்த கோப்பகத்தில் முடிவடையும் என்பதற்கான விருப்பத்தேர்வுகளை ஆப்ஸில் மாற்றலாம்.

மேலும் பயன்பாடுகள்

க்ரஞ்ச்

க்ரஞ்ச் என்பது அடோப் ஏரில் கட்டமைக்கப்பட்ட குறைந்த எடிட்டர் மற்றும் கம்பைலர்.

கோட்கிட்

அதிகாரப்பூர்வமற்ற Mac செயலியைப் போலவே அதே பையனால் உருவாக்கப்பட்டது, CodeKit என்பது LESS, SASS, Stylus மற்றும் CoffeeScript ஐ தொகுக்கும் Mac பயன்பாடாகும்.

எளிமையானது

Mac, Linux மற்றும் Windows பயன்பாடுகள் குறைவான கோப்புகளை தொகுக்க இழுத்து விடுகின்றன. மேலும், மூல குறியீடு GitHub இல் உள்ளது .

தொகுக்கப்பட்ட அல்லது சிறிதாக்கப்பட்ட CSS மற்றும் JS இல் கைவிடுவதன் மூலம் எந்தவொரு வலைத் திட்டத்தையும் விரைவாகத் தொடங்கவும் . எளிதாக மேம்படுத்தல்கள் மற்றும் பராமரிப்பு முன்னோக்கி நகர்த்த தனிப்பயன் பாணிகளை தனித்தனியாக அடுக்கு.

கோப்பு கட்டமைப்பை அமைக்கவும்

சமீபத்திய தொகுக்கப்பட்ட பூட்ஸ்டார்ப்பைப் பதிவிறக்கி உங்கள் திட்டத்தில் வைக்கவும். உதாரணமாக, உங்களிடம் இது போன்ற ஏதாவது இருக்கலாம்:

  செயலி/
      தளவமைப்புகள்/
      வார்ப்புருக்கள்/
  பொது/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

ஸ்டார்டர் டெம்ப்ளேட்டைப் பயன்படுத்தவும்

தொடங்குவதற்கு பின்வரும் அடிப்படை HTML ஐ நகலெடுக்கவும்.

<html>
  <தலை>
    <title> பூட்ஸ்டார்ப் 101 டெம்ப்ளேட் </title>
    <!-- பூட்ஸ்ட்ராப் -->
    <link href = "public/css/bootstrap.min.css" rel = "ஸ்டைல்ஷீட்" >  
  </head>
  <உடல்>
    <h1> வணக்கம், உலகம்! </h1>
    <!-- பூட்ஸ்ட்ராப் -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

தனிப்பயன் குறியீட்டில் அடுக்கு

உங்களின் தனித்தனி CSS மற்றும் JS கோப்புகளுடன் பூட்ஸ்டார்ப்பை உங்கள் சொந்தமாக்குவதற்கு தேவையான உங்கள் தனிப்பயன் CSS, JS மற்றும் பலவற்றில் வேலை செய்யுங்கள்.

<html>
  <தலை>
    <title> பூட்ஸ்டார்ப் 101 டெம்ப்ளேட் </title>
    <!-- பூட்ஸ்ட்ராப் -->
    <link href = "public/css/bootstrap.min.css" rel = "ஸ்டைல்ஷீட்" >  
    <!-- திட்டம் -->
    <link href = "public/css/application.css" rel = "ஸ்டைல்ஷீட்" >  
  </head>
  <உடல்>
    <h1> வணக்கம், உலகம்! </h1>
    <!-- பூட்ஸ்ட்ராப் -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- திட்டம் -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

பூட்ஸ்டார்ப்பை நீட்டிக்கிறது

குறைவாக கட்டப்பட்டது