ቡትስትራፕ

ምዝርጋሕ ቡትስትራፕ

ንዝተኻተቱ ቅዲታትን ኣካላትን ከምኡ’ውን LESS ተለዋዋጢን ሚክሲንን ንምጥቃም Bootstrap ምዝርጋሕ።

ብ LESS ዝተሃንጸ

LESS CSS ዝብል ጽሑፍ ኣሎ።

ቡትስትራፕ ኣብ ሕመረቱ ብ LESS ዝተሰርሐ ኮይኑ፡ ብጽቡቕ ዓርክና ኣሌክሲስ ሰሊየር ዝተፈጥረ ዳይናሚክ ስታይልሺት ቋንቋ እዩ ። ኣብ ስርዓት ዝተመስረተ CSS ምምዕባል ዝቐልጠፈን ዝቐለለን ዝያዳ ዘዘናግዕን ይገብሮ።

ስለምንታይ LESS?

ሓደ ካብ ፈጠርቲ Bootstrap ብዛዕባ እዚ ቅልጡፍ ብሎግ ጽሑፍ ጽሒፉ , ኣብዚ ብሓጺሩ፤

  • Bootstrap ምስ Sass ክነጻጸር ከሎ ብ Less ዝቐልጠፈ ~6x ዝቐልጠፈ ይጥርንፍ
  • ውሑድ ብጃቫስክሪፕት ይጽሓፍ፡ እዚ ድማ ምስ ሩቢ ምስ ሳስ ክነጻጸር እንከሎ፡ ንኽንጥሕልን ንፓችን ቀሊል ይገብረና።
  • ውሑድ እዩ ዝበዝሕ፤ CSS ንጽሕፍን Bootstrap ንኹሉ ዝቐርብ ንገብሮን ዘለና ኮይኑ ክስምዓና ንደሊ።

እንታይ ተሓዊስዎ ኣሎ?

ከም መቐጸልታ ናይ CSS፡ LESS ተለዋዋጢ ረቛሒታት፡ ዳግማይ ክጥቀሙ ዝኽእሉ ቁንጣሮ ኮድ ዝኸውን ሚክሲን፡ ንቐሊል ሒሳብ፡ ምድቃል፡ ዋላ’ውን ሕብራዊ ተግባራት ዝኸውን ስርሓት የጠቓልል።

ተወሳኺ ፍለጡ

ንዝያዳ ሓበሬታ ኣብ ወግዓዊ መርበብ ሓበሬታ http://lesscss.org/ ተወከሱ ።

ቡትስትራፕ ብ Less ምጥርናፍ

CSS ናትና ብ Less ዝተጻሕፈን ተለዋዋጢን ሚክሲንን ስለ ዝጥቀምን ንናይ መወዳእታ ምህርቲ ኣተገባብራ ክጥርነፍ ኣለዎ። እንሆ ከመይ።

መተሓሳሰቢ ፡ ብዝተመሓየሸ CSS ናብ GitHub ናይ ስሕበት ሕቶ ትቕርብ እንተኾንካ ፡ ነቲ CSS ብዝኾነ ካብዞም ሜላታት ኣቢልካ ዳግማይ ክትጥርንፎ ኣለካ ።

መሳርሒታት ምጥርናፍ

መስመር ምስ makefile

LESS command line compiler, JSHint, Recess, and uglify-js ብዓለም ደረጃ ብ npm ነዚ ዝስዕብ ትእዛዝ ብምፍጻም ንጽዓኖ።

$ npm ምትካል -g ውሑድ jshint ዕረፍቲ uglify-js

ሓንሳብ ምስ ተተኽለ በቃ makeካብ ሱር ናይ bootstrap directory ናትካ ምዝዋር ኩሉ ድማ ተዳልዩ ኣለኻ።

ብተወሳኺ watchr ተተኺሉ እንተሃልዩካ፡ ኣብ bootstrap lib ንሓደ ፋይል ኣብ እትእርመሉ ኩሉ ግዜ፡ bootstrap ብኣውቶማቲክ ዳግማይ ክህነጽ ክትጎዪ ትኽእል make watchኢኻ (እዚ ኣድላዪ ኣይኮነን፡ ምቹእነት ጥራይ እዩ)።

መስመር ትእዛዝ

መሳርሒ መስመር ትእዛዝ LESS ብመንገዲ Node ንጽዓኖ እሞ ነዚ ዝስዕብ ትእዛዝ ኣካይድ፤

$ lessc ./less/bootstrap.less > ቡትስትራፕ.ሲኤስ

--compressገለ ባይት ክትዕቅብ እንተፈቲንካ ኣብቲ ትእዛዝ ምእታውካ ኣረጋግጽ !

ጃቫስክሪፕት።

ነቲ ዝሓለፈ Less.js ኣውሪድካ ናብኡ ዝወስድ መንገዲ (ከምኡ’ውን Bootstrap) ኣብቲ <head>.

<link rel = "ቅዲ/ዝወሓደ" href = "/መንገዲ/ናብ/ቦትስትራፕ.ውሑድ" > <script src = "/መንገዲ/ናብ/ውሑድ.js" ></script>

ነቶም .less ፋይላት ዳግማይ ንምጥርናፍ፡ በቃ ንዕቅቦም እሞ ገጽካ ዳግማይ ጽዓኖም። Less.js ኣጠቓሊሉ ኣብ ሎካል ስቶሬጅ ይዕቅቦም።

ዘይወግዓዊ ናይ ማክ ኣፕ

እቲ ዘይወግዓዊ ናይ ማክ ኣፕ ፡ ማህደራት ናይ .less ፋይላት ይከታተልን ድሕሪ ነፍሲ ወከፍ ምዕቃብ ናይ ሓደ ዝተዓዘብናዮ .less ፋይል ነቲ ኮድ ናብ ሎካል ፋይላት የጠቓልሎን። እንተደሊኻ፡ ኣብቲ ኣፕ ዘሎ ምርጫታት ንኣውቶማቲክ ምጉዳልን እቶም ዝተጠርነፉ ፋይላት ኣብ ኣየናይ ማህደር ከም ዝውድኡን ክትቅይር ትኽእል ኢኻ።

ተወሳኺ መተግበሪታት

ምጭብባጥ

Crunch ኣብ Adobe Air ዝተሃንጸ ብሉጽ ትርኢት ዘለዎ LESS editorን compilerን እዩ።

ኮድኪት ዝበሃል ትካል

ብሓደ ወዲ ምስቲ ዘይወግዓዊ ማክ ኣፕ ዝተፈጥረ ኮድኪት LESS, SASS, Stylus, ከምኡውን CoffeeScript ዘጠቓልል ናይ Mac ኣፕ እዩ።

ቀሊል ዘይኮነ

ማክ፡ ሊኑክስን ዊንዶውስን ንኣፕሊኬሽን ስሓብን ምውራድን LESS ፋይላት። ተወሳኺ፡ እቲ ምንጪ ኮድ ኣብ GitHub ኣሎ ።

ከም ስታትቲክ ንብረት ምጥቃም

ዝኾነ ዌብ ፕሮጀክት ብቕልጡፍ ኣብቲ ዝተጠርነፈ ወይ ዝተቐነሰ CSSን JSን ብምውዳቕ ጀምር። ንቐሊል ምዕባይን ጽገናን ንቕድሚት ንምስጓም ኣብ ብሕታዊ ቅዲታት ብተናጸል ንጣር።

ኣቃውማ ፋይል ምድላው

እቲ ዝሓለፈ ዝተጠርነፈ Bootstrap ኣውሪድካ ኣብ ፕሮጀክትካ ኣቐምጦ። ንኣብነት ከምዚ ዝኣመሰለ ነገር ክህልወካ ይኽእል እዩ፤

  ኣፕ/
      ኣቀማምጣታት/
      ቅጥዕታት/
  ህዝባዊ/
      ሲኤስኤስ/
          ቡትስትራፕ.ሚን.ሲኤስ
      js/
          ቡትስትራፕ.ሚን.ጀይኤስ
      img/
          ግሊፊኮንስ-ፍርቂ ፍረታት.png
          ግሊፊኮንስ-ፍርቂ-ፍርቂ-ጻዕዳ.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 = "ህዝባዊ/js/bootstrap.min.js" </script> ዝብል ጽሑፍ ኣሎ። 
  11.   </body> ዝብል ጽሑፍ ኣሎ።
  12. </html> ዝብል ጽሑፍ ኣሎ።

ንጣር ኣብ ብሕታዊ ኮድ

Bootstrap ብናይ ገዛእ ርእስኻ ፍሉያት 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 = "ህዝባዊ/css/መተግበሪ.css" rel = "ቅዲ ጽሑፍ" >  
  8.   </head> ዝብል ጽሑፍ ኣሎ።
  9.   <ኣካል> ዝብል እዩ።
  10.     <h1> ሰላም ዓለም! </h1> ዝብል ጽሑፍ ኣሎ።
  11.     <!-- ቡትስትራፕ -->
  12.     <script src = "ህዝባዊ/js/bootstrap.min.js" </script> ዝብል ጽሑፍ ኣሎ። 
  13.     <!-- ፕሮጀክት -->
  14.     <script src = "ህዝባዊ/js/መተግበሪ.js" ></script> 
  15.   </body> ዝብል ጽሑፍ ኣሎ።
  16. </html> ዝብል ጽሑፍ ኣሎ።