विस्तार करप · बूटस्ट्रॅप कोंकणी भाशेंत

बूटस्ट्रॅप ताच्या मुळाक LESS कडेन तयार केला, आमचो बरो इश्ट, Alexis Sellier हांणी तयार केल्ली एक गतिशील स्टाइलशीट भास . ताका लागून प्रणाली आदारीत CSS विकसीत करप बेगीन, सोंपें आनी चड मजा जाता.

LESS कित्याक?

Bootstrap च्या एका निर्मात्यान ह्या विशीं एक बेगीन ब्लॉग पोस्ट बरयलें , हांगा सारांश:

बूटस्ट्रॅप Sass च्या तुळेंत Less कडेन वेगान ~6x वेगान संकलित करता
जावास्क्रिप्टांत उणें बरयलां, जाका लागून रूबी विथ सॅसच्या तुळेंत आमकां बुडप आनी पॅच करप सोंपें जाता.
उणें म्हळ्यार चड; आमी CSS बरयतात आनी Bootstrap सगळ्यांक लागीं येता अशें आमकां दिसपाक जाय.

कितें आस्पावलां?

CSS चो विस्तार म्हूण, LESS हातूंत चड-उणें, कोडाच्या परत वापरपाक येवपी स्निपेटांखातीर मिक्सिन, साद्या गणिताखातीर ऑपरेशनां, नेस्टिंग, आनी रंग कार्यां लेगीत आसतात.

चड जाणून घेयात

चड जाणून घेवपा खातीर http://lesscss.org/ ह्या अधिकृत संकेतथळाक भेट दिवची .

आमचो CSS Less कडेन बरयला आनी व्हेरिएबल आनी मिक्सिन वापरता देखून, निमाण्या उत्पादन कार्यान्वयनाक संकलित करपाची गरज आसा. हांगा कशें आसा.

टिप: तुमी सुदारीत CSS आशिल्ल्या GitHub कडेन पुल विनंती सादर करतात जाल्यार, तुमी ह्या खंयच्याय पद्दती वरवीं CSS परतून संकलित करपाक जाय .

संकलन करपाखातीर साधनां

मेकफायल आशिल्ली नोड

सकयल दिल्लो आदेश चालीक लावून npm कडेन LESS आदेश ओळ संकलक, JSHint, Recess, आनी uglify-js जागतीकपणान प्रतिष्ठापीत करात:

$ npm स्थापन करचें -g कमी jshint अवकाश uglify-js

एकदां प्रतिष्ठापीत केल्या उपरांत फकत makeतुमच्या बूटस्ट्रॅप निर्देशिकेच्या मुळा वयल्यान चालयात आनी तुमी सगळे सेट जाल्यात.

ते भायर, तुमचे कडेन watchr प्रतिष्ठापीत आसल्यार, तुमी bootstrap lib त फायल संपादीत करतना दर खेपे bootstrap आपसूक परतून तयार करपाक धांवपाक शकतात make watch(हाची गरज ना, फकत सोयीची पद्दत).

आदेश ओळ

Node वरवीं LESS आदेश ओळी साधन प्रतिष्ठापीत करात आनी सकयल दिल्लो आदेश चालीक लावचो:

$ lessc ./less/bootstrap.less > बूटस्ट्रॅप.css

--compressतुमी कांय बाइट जतनाय घेवपाचो यत्न करीत जाल्यार त्या आदेशांत आस्पाव करपाची खात्री करात !

जावास्क्रिप्ट

नवीनतम Less.js डावनलोड करात आनी ताचो मार्ग (आनी Bootstrap) हातूंत समाविष्ट करात <head>.

<link rel = "स्टाइलशीट/उणें" href = "/मार्ग/ते/बूटस्ट्रॅप.उणें" > <script src = "/मार्ग/ते/उणें. js" ></script>

.less फायली परतून संकलित करपाक, फकत तीं जतनाय घेयात आनी तुमचें पान परतून लोड करात. Less.js तांकां संकलित करता आनी थळाव्या सांठवणेंत सांठयता.

अनधिकृत मॅक अॅप

अनधिकृत Mac ऍप्लिकेशन .less फायलींच्यो निर्देशिका पळयता आनी पळयल्ल्या .less फायलीन दरेक सेव्ह केल्या उपरांत कोड थळाव्या फायलींनी संकलित करता. तुमकां आवडल्यार, तुमी स्वयंचलित ल्हान करपा खातीर ऍप्लिकेशनांत प्राधान्यां टॉगल करूंक शकतात आनी संकलित फायली खंयच्या निर्देशिकेंत सोंपतात.

आनीक अॅप्स

क्रंच करप

Crunch हो Adobe Air चेर तयार केल्लो एक उत्कृश्ट दिसपी LESS संपादक आनी संकलक.

कोडकिट हें नांव

अनधिकृत मॅक ऍप्लिकेशनाच्याच मनशान तयार केल्लो, कोडकिट हो एक मॅक अॅप जो LESS, SASS, Stylus, आनी कॉफीस्क्रिप्ट संकलित करता.

सादें नाशिल्लें

LESS फायलींचें ड्रॅग आनी ड्रॉप संकलन करपाखातीर Mac, Linux, आनी Windows ऍप्लिकेशन. प्लस, स्त्रोत कोड GitHub चेर आसा .

संकलित वा ल्हान केल्लें CSS आनी JS सोडून खंयचोय वॅब प्रकल्प बेगीन सुरू करचो. सोप्या अपग्रेड आनी देखरेखी खातीर मुखार वचपा खातीर वेगवेगळे सानुकूल शैलींचेर थर.

फायल रचणूक सेटअप करात

नवीनतम संकलित बूटस्ट्रॅप डावनलोड करात आनी तुमच्या प्रकल्पांत दवरात. देखीक, तुमचे कडेन अशें कितें तरी आसूं येता:

  अॅप/ 1 .
      मांडावळी/ २.
      साचे/ 1.1.
  भौशीक/
      css/ 1.1.
          बूटस्ट्रॅप.मिन.सीएसएस
      जे एस / 1 .
          बूटस्ट्रॅप.मिन.जेएस
      img/ 1.1.
          ग्लिफिकॉन्स-हाफलिंग्स.पीएनजी
          ग्लिफिकॉन्स-हाफलिंग्स-व्हाइट.पीएनजी

स्टार्टर टेम्पलेट वापरात

सुरवात करपाक सकयल दिल्लो बेस एचटीएमएल कॉपी करात.

<html> हें नांव
  <मस्तक> हें नांव
    <title> बूटस्ट्रॅप 101 साचा </title>
    <!-- बूटस्ट्रॅप -->
    <link href = "public/css/bootstrap.min.css" rel = "शैलीशीट" >  
  </head> हें नांव
  <शरीर> हें नांव
    <h1> नमस्कार, संवसार! </h1> हें नांव
    <!-- बूटस्ट्रॅप -->
    <script src = "पब्लीक/जेएस/बूटस्ट्रॅप.मिनिट.जेएस" ></script> 
  </body> हें नांव
</html> अशें म्हण्टात

सानुकूल कोडाचेर थर

तुमच्या स्वताच्या वेगळ्या CSS आनी JS फायलींनी बूटस्ट्रॅप तुमचो स्वताचो करपाक तुमच्या सानुकूल CSS, JS, आनी चडांत गरज पडल्यार काम करात.

<html> हें नांव
  <मस्तक> हें नांव
    <title> बूटस्ट्रॅप 101 साचा </title>
    <!-- बूटस्ट्रॅप -->
    <link href = "public/css/bootstrap.min.css" rel = "शैलीशीट" >  
    <!-- प्रकल्प -->
    <link href = "सार्वजनिक/css/ऍप्लिकेशन.css" rel = "शैलीशीट" >  
  </head> हें नांव
  <शरीर> हें नांव
    <h1> नमस्कार, संवसार! </h1> हें नांव
    <!-- बूटस्ट्रॅप -->
    <script src = "पब्लीक/जेएस/बूटस्ट्रॅप.मिनिट.जेएस" ></script> 
    <!-- प्रकल्प -->
    <script src = "पब्लीक/जेएस/ऍप्लिकेशन.जेएस" ></script> 
  </body> हें नांव
</html> अशें म्हण्टात

बूटस्ट्रॅप विस्तारप

LESS च्या आदारान बांदिल्लें