ቡትስትራፕ

ምዝርጋሕ ቡትስትራፕ

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

ብ LESS ዝተሃንጸ

LESS CSS ዝብል ጽሑፍ ኣሎ።

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

ስለምንታይ LESS?

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

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

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

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

ተወሳኺ ፍለጡ

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

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

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

መተሓሳሰቢ ፡ ብዝተመሓየሸ 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 ኣፕ እዩ።

ቀሊል ዘይብሉ

Mac, Linux, ከምኡ ውን Windows app ንናይ 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> ዝብል ጽሑፍ ኣሎ።