బూట్‌స్ట్రాప్‌ని విస్తరిస్తోంది

చేర్చబడిన శైలులు మరియు భాగాలు, అలాగే తక్కువ వేరియబుల్స్ మరియు మిక్సిన్‌ల ప్రయోజనాన్ని పొందడానికి బూట్‌స్ట్రాప్‌ను విస్తరించండి.

తక్కువ CSS

బూట్‌స్ట్రాప్ మా మంచి స్నేహితుడు అలెక్సిస్ సెల్లియర్ చేత సృష్టించబడిన డైనమిక్ స్టైల్‌షీట్ లాంగ్వేజ్‌తో దాని ప్రధాన భాగంలో తక్కువతో తయారు చేయబడింది . ఇది సిస్టమ్ ఆధారిత CSSని అభివృద్ధి చేయడాన్ని వేగంగా, సులభంగా మరియు మరింత సరదాగా చేస్తుంది.

ఎందుకు తక్కువ?

బూట్‌స్ట్రాప్ సృష్టికర్తలలో ఒకరు దీని గురించి శీఘ్ర బ్లాగ్ పోస్ట్‌ను వ్రాసారు , ఇక్కడ సంగ్రహించబడింది:

  • Sassతో పోలిస్తే బూట్‌స్ట్రాప్ తక్కువతో ~6x వేగంగా కంపైల్ చేస్తుంది
  • జావాస్క్రిప్ట్‌లో తక్కువగా వ్రాయబడింది, రూబీ విత్ సాస్‌తో పోలిస్తే డైవ్ చేయడం మరియు ప్యాచ్ చేయడం మాకు సులభతరం చేస్తుంది.
  • తక్కువే ఎక్కువ; మేము CSS వ్రాస్తున్నట్లు మరియు బూట్‌స్ట్రాప్‌ను అందరికీ అందుబాటులోకి తెచ్చినట్లుగా భావించాలనుకుంటున్నాము.

ఏమి చేర్చబడింది?

CSS యొక్క పొడిగింపుగా, తక్కువ వేరియబుల్స్, కోడ్ యొక్క పునర్వినియోగ స్నిప్పెట్‌ల కోసం మిక్సిన్‌లు, సాధారణ గణితానికి సంబంధించిన కార్యకలాపాలు, గూడు మరియు రంగు ఫంక్షన్‌లను కూడా కలిగి ఉంటుంది.

ఇంకా నేర్చుకో

మరింత తెలుసుకోవడానికి http://lesscss.org/ వద్ద అధికారిక వెబ్‌సైట్‌ను సందర్శించండి .

మా CSS తక్కువతో వ్రాయబడింది మరియు వేరియబుల్స్ మరియు మిక్సిన్‌లను ఉపయోగిస్తుంది కాబట్టి, తుది ఉత్పత్తి అమలు కోసం దీనిని కంపైల్ చేయాలి. ఇక్కడ ఎలా ఉంది.

గమనిక: మీరు సవరించిన CSSతో GitHubకి పుల్ అభ్యర్థనను సమర్పిస్తున్నట్లయితే, మీరు తప్పనిసరిగా ఈ పద్ధతుల్లో దేని ద్వారానైనా CSSని తిరిగి కంపైల్ చేయాలి.

కంపైలింగ్ కోసం సాధనాలు

కమాండ్ లైన్

కమాండ్ లైన్ ద్వారా కంపైల్ చేయడానికి GitHub లో ప్రాజెక్ట్ రీడ్‌మీలోని సూచనలను అనుసరించండి .

జావాస్క్రిప్ట్

తాజా Les.jsని డౌన్‌లోడ్ చేయండి మరియు దానికి మార్గాన్ని (మరియు బూట్‌స్ట్రాప్) చేర్చండి <head>.

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

.less ఫైల్‌లను మళ్లీ కంపైల్ చేయడానికి, వాటిని సేవ్ చేసి, మీ పేజీని మళ్లీ లోడ్ చేయండి. Less.js వాటిని కంపైల్ చేస్తుంది మరియు వాటిని స్థానిక నిల్వలో నిల్వ చేస్తుంది.

అనధికారిక Mac యాప్

అనధికారిక Mac యాప్ .less ఫైల్‌ల డైరెక్టరీలను చూస్తుంది మరియు చూసిన .less ఫైల్‌ని ప్రతి సేవ్ చేసిన తర్వాత కోడ్‌ను స్థానిక ఫైల్‌లకు కంపైల్ చేస్తుంది. మీరు కావాలనుకుంటే, ఆటోమేటిక్ మినిఫైయింగ్ కోసం యాప్‌లో ప్రాధాన్యతలను టోగుల్ చేయవచ్చు మరియు కంపైల్ చేసిన ఫైల్‌లు ఏ డైరెక్టరీలో ముగుస్తాయి.

మరిన్ని యాప్‌లు

క్రంచ్

క్రంచ్ అనేది అడోబ్ ఎయిర్‌లో నిర్మించిన తక్కువ ఎడిటర్ మరియు కంపైలర్.

కోడ్‌కిట్

అనధికారిక Mac యాప్ వలె అదే వ్యక్తి సృష్టించిన కోడ్‌కిట్ అనేది తక్కువ, సాస్, స్టైలస్ మరియు కాఫీస్క్రిప్ట్‌లను కంపైల్ చేసే Mac యాప్.

సరళమైనది

Mac, Linux మరియు Windows యాప్ తక్కువ ఫైల్‌లను డ్రాగ్ మరియు డ్రాప్ కంపైలింగ్ కోసం. అదనంగా, సోర్స్ కోడ్ GitHubలో ఉంది .

కంపైల్డ్ లేదా మినిఫైడ్ CSS మరియు JSలో డ్రాప్ చేయడం ద్వారా ఏదైనా వెబ్ ప్రాజెక్ట్‌ను త్వరగా ప్రారంభించండి . సులభమైన అప్‌గ్రేడ్‌లు మరియు మెయింటెనెన్స్ ముందుకు సాగడం కోసం విడివిడిగా కస్టమ్ స్టైల్స్‌పై లేయర్ చేయండి.

ఫైల్ నిర్మాణాన్ని సెటప్ చేయండి

తాజా కంపైల్ చేసిన బూట్‌స్ట్రాప్‌ని డౌన్‌లోడ్ చేసి, మీ ప్రాజెక్ట్‌లో ఉంచండి. ఉదాహరణకు, మీరు ఇలాంటివి కలిగి ఉండవచ్చు:

  అనువర్తనం/
      లేఅవుట్లు/
      టెంప్లేట్లు/
  ప్రజా/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

స్టార్టర్ టెంప్లేట్ ఉపయోగించండి

ప్రారంభించడానికి క్రింది బేస్ HTMLని కాపీ చేయండి.

  1. <html>
  2. <తల>
  3. <title> బూట్‌స్ట్రాప్ 101 టెంప్లేట్ </title>
  4. <!-- బూట్‌స్ట్రాప్ -->
  5. <link href = "public/css/bootstrap.min.css" rel = "స్టైల్‌షీట్" >
  6. </head>
  7. <బాడీ>
  8. <h1> హలో, ప్రపంచం! </h1>
  9. <!-- బూట్‌స్ట్రాప్ -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </body>
  12. </html>

కస్టమ్ కోడ్‌పై లేయర్

మీ స్వంత ప్రత్యేక CSS మరియు JS ఫైల్‌లతో బూట్‌స్ట్రాప్‌ను మీ స్వంతం చేసుకోవడానికి అవసరమైన మీ అనుకూల CSS, JS మరియు మరిన్నింటిలో పని చేయండి.

  1. <html>
  2. <తల>
  3. <title> బూట్‌స్ట్రాప్ 101 టెంప్లేట్ </title>
  4. <!-- బూట్‌స్ట్రాప్ -->
  5. <link href = "public/css/bootstrap.min.css" rel = "స్టైల్‌షీట్" >
  6. <!-- ప్రాజెక్ట్ -->
  7. <link href = "public/css/application.css" rel = "స్టైల్‌షీట్" >
  8. </head>
  9. <బాడీ>
  10. <h1> హలో, ప్రపంచం! </h1>
  11. <!-- బూట్‌స్ట్రాప్ -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- ప్రాజెక్ట్ -->
  14. <script src = "public/js/application.js" ></script>
  15. </body>
  16. </html>