विस्तारित करा · बूटस्ट्रॅप मराठी भाषेत

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

कमी का?

बूटस्ट्रॅपच्या निर्मात्यांपैकी एकाने याबद्दल एक द्रुत ब्लॉग पोस्ट लिहिली आहे , त्याचा सारांश येथे आहे:

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

काय समाविष्ट आहे?

CSS चा विस्तार म्हणून, LESS मध्ये व्हेरिएबल्स, कोडच्या पुन्हा वापरता येण्याजोग्या स्निपेट्ससाठी मिक्सिन्स, साध्या गणितासाठी ऑपरेशन्स, नेस्टिंग आणि अगदी कलर फंक्शन्स समाविष्ट आहेत.

अधिक जाणून घ्या

अधिक जाणून घेण्यासाठी http://lesscss.org/ येथे अधिकृत वेबसाइटला भेट द्या .

आमचे CSS कमी ने लिहिलेले असल्यामुळे आणि व्हेरिएबल्स आणि मिक्सिनचा वापर करते, अंतिम उत्पादन अंमलबजावणीसाठी ते संकलित करणे आवश्यक आहे. कसे ते येथे आहे.

टीप: तुम्ही सुधारित CSS सह GitHub वर पुल विनंती सबमिट करत असल्यास, तुम्ही यापैकी कोणत्याही पद्धतीद्वारे CSS पुन्हा कंपाइल करणे आवश्यक आहे.

संकलित करण्यासाठी साधने

मेकफाइलसह नोड

खालील आदेश चालवून LESS कमांड लाइन कंपाइलर, JSHint, Recess आणि uglify-js npm सह जागतिक स्तरावर स्थापित करा:

$npm install -g less jshint recess ugliify-js

एकदा इंस्‍टॉल makeकेल्‍यावर तुमच्‍या बूटस्ट्रॅप डिरेक्‍ट्रीच्‍या रूटमधून रन करा आणि तुम्‍ही तयार आहात.

याव्यतिरिक्त, जर तुमच्याकडे वॉचर स्थापित असेल, तर तुम्ही make watchबूटस्ट्रॅप लिबमध्ये फाइल संपादित करता तेव्हा प्रत्येक वेळी बूटस्ट्रॅप स्वयंचलितपणे पुन्हा तयार होईल (हे आवश्यक नाही, फक्त एक सोयीची पद्धत).

कमांड लाइन

नोडद्वारे LESS कमांड लाइन टूल स्थापित करा आणि खालील कमांड चालवा:

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

--compressतुम्ही काही बाइट्स सेव्ह करण्याचा प्रयत्न करत असल्यास त्या कमांडमध्ये नक्की समाविष्ट करा!

JavaScript

नवीनतम Less.js डाउनलोड करा आणि त्यात त्याचा मार्ग (आणि बूटस्ट्रॅप) समाविष्ट करा <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 वर तयार केलेला एक उत्कृष्ट दिसणारा कमी संपादक आणि कंपाइलर आहे.

कोडकिट

अनधिकृत Mac अॅप सारख्याच व्यक्तीने तयार केलेले, CodeKit एक Mac अॅप आहे जे LESS, SASS, Stylus आणि CoffeeScript संकलित करते.

साधे

कमी फाइल्सच्या ड्रॅग आणि ड्रॉप संकलित करण्यासाठी Mac, Linux आणि Windows अॅप. शिवाय, स्त्रोत कोड GitHub वर आहे .

संकलित किंवा मिनिफाइड CSS आणि JS मध्ये टाकून कोणताही वेब प्रोजेक्ट त्वरीत सुरू करा. सुलभ अपग्रेड आणि देखभाल पुढे जाण्यासाठी सानुकूल शैलींवर स्वतंत्रपणे स्तर करा.

फाइल संरचना सेट करा

नवीनतम संकलित बूटस्ट्रॅप डाउनलोड करा आणि आपल्या प्रकल्पात ठेवा. उदाहरणार्थ, आपल्याकडे असे काहीतरी असू शकते:

  अॅप/
      मांडणी/
      टेम्पलेट्स/
  सार्वजनिक/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

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

प्रारंभ करण्यासाठी खालील बेस HTML कॉपी करा.

<html>
  <head>
    <title> Bootstrap 101 टेम्पलेट </title>
    <!-- बूटस्ट्रॅप -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <body>
    <h1> नमस्कार, जगा! </h1>
    <!-- बूटस्ट्रॅप -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

सानुकूल कोडवर स्तर

तुमच्या स्वतःच्या CSS आणि JS फायलींसह बूटस्ट्रॅपला तुमचा स्वतःचा बनवण्यासाठी तुमच्या सानुकूल CSS, JS आणि अधिकमध्ये काम करा.

<html>
  <head>
    <title> Bootstrap 101 टेम्पलेट </title>
    <!-- बूटस्ट्रॅप -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- प्रकल्प -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <body>
    <h1> नमस्कार, जगा! </h1>
    <!-- बूटस्ट्रॅप -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- प्रकल्प -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

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

कमी सह बांधले