Ipaatiddog · Bootstrap iti Ilocano

Ti Bootstrap ket naaramid nga addaan iti LESS iti kangrunaanna, maysa a dinamiko a pagsasao ti stylesheet a pinartuat babaen ti nasayaat a gayyemtayo, ni Alexis Sellier . Daytoy ket mangaramid ti panagparang-ay kadagiti sistema-a naibatay a CSS a naparpartak, nalaklaka, ken ad-adda a makaay-ayo.

Apay a BASSIT?

Maysa kadagiti nangpartuat ti Bootstrap ket nagsurat ti napardas a blog post maipapan iti daytoy , a nagupgop ditoy:

Ti Bootstrap ket agtipon ti naparpartak ~6x a naparpartak nga addaan iti Basbassit no idilig iti Sass
Basbassit ti naisurat iti JavaScript, a mangpalaka kadakami ti ag-dive in ken ag-patch no idilig iti Ruby nga addaan iti Sass.
Basbassit ti ad-adu; kayatmi a marikna a kasla agsursuratkami iti CSS ken pagbalinenmi a maasitgan ti Bootstrap iti amin.

Ania ti nairaman?

Kas maysa a panagpaatiddog ti CSS, ti LESS ket mangiraman kadagiti variable, dagiti mixin para kadagiti mausar manen a snippet ti kodigo, dagiti panagpataray para iti simple a matematika, panagumok, ken urayno dagiti panagandar ti kolor.

Ammuem ti ad-adu pay

Bisitaen ti opisial a website iti http://lesscss.org/ tapno maammuan ti ad-adu pay.

Gapu ta ti CSS mi ket naisurat babaen ti Less ken agus-usar kadagiti variable ken mixin, daytoy ket kasapulan a maurnong para iti maudi a pannakaipatungpal ti produksion. Ania ti kasano.

Pakaammo: No mangisubmitir ka ti kiddaw ti panagguyod iti GitHub nga addaan iti nabaliwan a CSS, masapul a mangtipon manen ti CSS babaen ti ania man kadagitoy a pamay-an.

Dagiti ramit para iti panagtipon

Linya ti bilin

Suroten dagiti instruksion iti proyekto a readme iti GitHub para iti panagtipon babaen ti linia ti bilin.

JavaScript nga Pagsasao

I-download ti kaudian a Less.js ken iraman ti dalan nga agturong iti dayta (ken Bootstrap) iti <head>.

<link rel = "stylesheet/basbassit" href = "/dalan/agingga/bootstrap.basbassit" > <script src = "/dalan/iti/basbassit.js" ></script>

Tapno maurnong manen dagiti .less a file, i-save laeng dagitoy ken ikarga manen ti panidmo. Ti Less.js ket mangtipon kadagitoy ken mangidulin kadagitoy iti lokal a pagipempenan.

Di opisial nga app ti Mac

Ti saan nga opisial a Mac app ket mangbuybuya kadagiti direktorio dagiti .less a file ken mangtipon iti kodigo kadagiti lokal a file kalpasan ti tunggal panagidulin ti nabuya a .less a file. No kayatmo, mabalinmo nga i-toggle dagiti preferences iti app para iti automatic minifying ken no ania a direktorio ti pagtungpalan dagiti naurnong a file.

Ad-adu pay nga apps

Crunch nga

Ti Crunch ket maysa a nagsayaat ti langana a LESS editor ken compiler a naibangon iti Adobe Air.

CodeKit nga

Pinartuat ti isu met laeng a lalaki a kas iti saan nga opisial a Mac app, ti CodeKit ket maysa a Mac app a mangtipon iti LESS, SASS, Stylus, ken CoffeeScript.

Awan Simple

Mac, Linux, ken Windows app para iti drag and drop a panagtipon kadagiti LESS a file. Plus, ti taudan a kodigo ket adda iti GitHub .

Napardas a rugian ti ania man a proyekto ti web babaen ti panangibaba ti naurnong wenno napabassit a CSS ken JS. Layer kadagiti kostumbre nga estilo a naisina para kadagiti nalaka nga upgrade ken maintenance nga umabante.

Itakderan ti estruktura ti file

I-download ti kaudian a naurnong a Bootstrap ken ikabil iti proyektom. Kas pagarigan, mabalin nga addaanka iti kastoy:

  app/
      dagiti layout/ .
      dagiti plantilia/ .
  publiko/
      css/ .
          bootstrap.min.css nga
      js/
          bootstrap.min.js nga bootstrap
      img/
          glyphicons-paggudua.png
          glyphicons-kagudua-a-puraw.png

Usaren ti plantilia ti pangrugian

Kopiaen ti sumaganad a base HTML tapno mangrugi.

<html> nga
  <ulo>
    <titulo> Plantilia ti Bootstrap 101 </title>
    <!-- Pag-boot -->
    <silpo href = "publiko/css/bootstrap.min.css" rel = "panid ti estilo" >  
  </head>
  <bagi> nga
    <h1> Hello, lubong! </h1>
    <!-- Pag-boot -->
    <script src = "publiko/js/bootstrap.min.js" ></script> 
  </bagi>
</html>

Layer iti kostumbre a kodigo

Agtrabaho iti kostumbre a CSS, JS, ken dadduma pay no kasapulan tapno agbalin a bukodmo ti Bootstrap nga addaan kadagiti bukodmo a naisina a CSS ken JS a file.

<html> nga
  <ulo>
    <titulo> Plantilia ti Bootstrap 101 </title>
    <!-- Pag-boot -->
    <silpo href = "publiko/css/bootstrap.min.css" rel = "panid ti estilo" >  
    <!-- Proyekto nga -->
    <silpo href = "publiko/css/aplikasion.css" rel = "panid ti estilo" >  
  </head>
  <bagi> nga
    <h1> Hello, lubong! </h1>
    <!-- Pag-boot -->
    <script src = "publiko/js/bootstrap.min.js" ></script> 
    <!-- Proyekto nga -->
    <script src = "publiko/js/aplikasion.js" ></script> 
  </bagi>
</html>

Panagpalawa ti Bootstrap

Naibangon nga addaan iti LESS