ቡት ማሰሪያ

Bootstrapን ማራዘም

የተካተቱትን ቅጦች እና አካላት እንዲሁም አነስተኛ ተለዋዋጮች እና ድብልቅ ነገሮችን ለመጠቀም ቡትስትራፕን ዘርጋ።

በLESS የተሰራ

ያነሰ CSS

ቡትስትራፕ በዋናው ወዳጃችን አሌክሲስ ሴሊየር የተፈጠረ ተለዋዋጭ የቅጥ ሉህ ቋንቋ በLESS የተሰራ ነው ። በስርዓቶች ላይ የተመሰረተ CSSን በፍጥነት፣ ቀላል እና የበለጠ አስደሳች ያደርገዋል።

ለምን ያነሰ?

ከ Bootstrap ፈጣሪዎች አንዱ ስለዚህ ጉዳይ ፈጣን ብሎግ ጽፏል ፣ እዚህ ተጠቃሏል፡-

  • Bootstrap በፍጥነት ~6x በፍጥነት ያጠናቅራል ከ Sass ጋር ሲነጻጸር
  • በጃቫ ስክሪፕት የተፃፈው ያነሰ ነው፣ ከ Ruby with Sass ጋር ሲነጻጸር ዘልቆ ለመግባት ቀላል አድርጎልናል።
  • ሲቀንስ ጥሩ ነው; CSS የምንጽፍ እና ቡትስትራፕን ለሁሉም የሚቀርብ እያደረግን እንደሆነ እንዲሰማን እንፈልጋለን።

ምን ይካተታል?

እንደ CSS ማራዘሚያ፣ LESS ተለዋዋጮችን፣ ድብልቆችን ለዳግም ጥቅም ላይ ሊውሉ ለሚችሉ የኮድ ቅንጣቢዎች፣ ለቀላል ሂሳብ ኦፕሬሽኖች፣ ጎጆዎች እና እንዲሁም የቀለም ተግባራትን ያካትታል።

ተጨማሪ እወቅ

የበለጠ ለማወቅ በ http://lesscss.org/ ላይ ያለውን ኦፊሴላዊ ድረ-ገጽ ይጎብኙ ።

Bootstrapን ባነሰ ማጠናቀር

የእኛ CSS በትንንሽ የተፃፈ እና ተለዋዋጮችን እና ድብልቆችን ስለሚጠቀም ለመጨረሻው የምርት ትግበራ ማጠናቀር አለበት። እንዴት እንደሆነ እነሆ።

ማሳሰቢያ ፡ ከተሻሻለው CSS ጋር ለ GitHub የመጎተት ጥያቄ እያስገቡ ከሆነ፣ በእነዚህ ስልቶች በማንኛውም መንገድ CSSን ማጠናቀር አለቦት ።

ለማጠናቀር መሳሪያዎች

መስቀለኛ መንገድ ከ makefile ጋር

የሚከተለውን ትዕዛዝ በማስኬድ LESS የትእዛዝ መስመር አቀናባሪ፣ JSHint፣ Recess እና ugify-js በአለምአቀፍ ደረጃ በ npm ጫን።

$ npm መጫን -g ያነሰ jshint recess uglify-js

አንዴ ከተጫነ makeከቡትስትራፕ ማውጫዎ ስር ያሂዱ እና ዝግጁ ነዎት።

በተጨማሪም ጠባቂ ከተጫነ በቡትስትራፕ ሊብ ውስጥ ፋይልን ባርትዑ ቁጥር ቡትስትራፕmake watch በራስ-ሰር እንደገና እንዲገነባ ሊሮጡ ይችላሉ (ይህ አያስፈልግም፣ የምቾት ዘዴ ብቻ)።

የትእዛዝ መስመር

LESS የትእዛዝ መስመር መሳሪያን በኖድ በኩል ይጫኑ እና የሚከተለውን ትዕዛዝ ያሂዱ፡

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

--compressአንዳንድ ባይት ለማስቀመጥ እየሞከሩ ከሆነ በዚያ ትዕዛዝ ውስጥ ማካተትዎን እርግጠኛ ይሁኑ !

ጃቫስክሪፕት

የቅርብ ጊዜዎቹን Less.js ያውርዱ እና ወደ እሱ የሚወስደውን መንገድ (እና Bootstrap) በ ውስጥ ያካትቱ <head>።

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

ያነሱ ፋይሎችን እንደገና ለመሰብሰብ፣ በቀላሉ ያስቀምጡ እና ገጽዎን እንደገና ይጫኑ። Less.js ያጠናቅራቸዋል እና በአካባቢው ማከማቻ ውስጥ ያስቀምጣቸዋል።

መደበኛ ያልሆነ የማክ መተግበሪያ

መደበኛ ያልሆነው የማክ መተግበሪያ .ያነሱ ፋይሎች ማውጫዎችን ይመለከታቸዋል እና ኮዱን ወደ አካባቢያዊ ፋይሎች ያጠናቅራል ከእያንዳንዱ የታየ . አልባ ፋይል በኋላ። ከፈለጉ በመተግበሪያው ውስጥ ምርጫዎችን በራስ-ሰር ለመቀነስ እና የተጠናቀሩ ፋይሎች በየትኛው ማውጫ ውስጥ እንደሚገኙ መቀያየር ይችላሉ።

ተጨማሪ መተግበሪያዎች

ክራንች

ክራንች በAdobe Air ላይ የተገነባ በጣም ጥሩ የሆነ ትንሽ አርታዒ እና ማጠናከሪያ ነው።

CodeKit

ከመደበኛው የማክ መተግበሪያ ጋር በተመሳሳይ ሰው የተፈጠረ፣ CodeKit LESS፣ SASS፣ Stylus እና CoffeeScript የሚያጠናቅቅ የማክ መተግበሪያ ነው።

ቀላል

LESS ፋይሎችን ለመጎተት እና ለመጣል የማክ፣ ሊኑክስ እና ዊንዶውስ መተግበሪያ። በተጨማሪም፣ የምንጭ ኮድ በ GitHub ላይ ነው።

እንደ ቋሚ ንብረቶች ይጠቀሙ

የተቀናበረውን ወይም የተቀነሰውን CSS እና JS በመጣል ማንኛውንም የድር ፕሮጀክት በፍጥነት ጀምር ። ለቀላል ማሻሻያዎች እና ወደፊት ለመንከባከብ በተበጁ ቅጦች ላይ ንብርብር።

የፋይል መዋቅርን ያዋቅሩ

የቅርብ ጊዜውን የተቀናበረ Bootstrap ያውርዱ እና ወደ ፕሮጀክትዎ ያስገቡ። ለምሳሌ፣ እንደዚህ ያለ ነገር ሊኖርዎት ይችላል፡-

  መተግበሪያ/
      አቀማመጥ/
      አብነቶች/
  የህዝብ/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-ነጭ.png

የጀማሪ አብነት ተጠቀም

ለመጀመር የሚከተለውን መሰረታዊ HTML ይቅዱ።

  1. <html>
  2.   <ጭንቅላት>
  3.     <title> Bootstrap 101 አብነት </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  6.   </ጭንቅላት>
  7.   <ሰውነት>
  8.     <h1> ሰላም፣ ዓለም! </ h1>
  9.     <!-- Bootstrap -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </ body>
  12. </html>

በብጁ ኮድ ላይ ንብርብር

በራስዎ CSS እና JS ፋይሎች ቡትስትራፕን የራስዎ ለማድረግ በብጁ 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.   </ጭንቅላት>
  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>