Faalautele · Bootstrap i le gagana Samoa

O le Bootstrap e faia i le LESS i lona autu, o se gagana sitaili malosi na fatuina e la tatou uo lelei, Alexis Sellier . E fa'avavevave, faigofie, ma sili atu ona malie le atina'eina o CSS fa'avae.

Aisea ua ITIITI?

Na tusia e se tasi o tagata na faia le Bootstrap se blog blog vave e uiga i lenei mea , aoteleina iinei:

O le Bootstrap e faʻapipiʻi vave ~ 6x vave ma le Itiiti faʻatusatusa i Sass
Le itiiti o loʻo tusia i le JavaScript, faʻafaigofie ia i matou ona maulu ma faʻapipiʻi faʻatusatusa ia Ruby ma Sass.
E itiiti le tele; matou te fia lagona e pei o loʻo matou tusia le CSS ma faʻafaigofieina le Bootstrap i tagata uma.

O ā mea e aofia ai?

I le avea ai ma faʻaopoopoga o le CSS, LESS e aofia ai fesuiaiga, faʻafefiloi mo snippets toe faʻaaogaina o code, faʻagaioiga mo numera faigofie, ofaga, ma e oʻo lava i galuega lanu.

Aoao atili

Asiasi i le upegatafa'ilagi aloaia ile http://lesscss.org/ e aoao atili.

Talu ai o la matou CSS ua tusia i le Itiiti ma faʻaaogaina fesuiaiga ma faʻafefiloi, e manaʻomia le tuʻufaʻatasia mo le faʻatinoina o le gaosiga mulimuli. O le auala lenei.

Fa'aaliga: Afai o lo'o e tu'uina atu se talosaga toso ile GitHub fa'atasi ai ma le CSS ua suia, e tatau ona e toe fa'aopoopo le CSS e ala i so'o se tasi o nei metotia.

Meafaigaluega mo le tuufaatasia

Laina fa'atonu

Mulimuli i faʻatonuga ile poloketi readme ile GitHub mo le tuʻufaʻatasia e ala ile laina ole laina.

Javascript

Sii mai le Less.js lata mai ma aofia ai le ala i ai (ma Bootstrap) i le <head>.

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

Ina ia toe fa'aopoopo faila .less, na'o le fa'asaoina ma toe uta lau itulau. Less.js e tu'ufa'atasia ma teu i totonu o le fale teu oloa.

Le'o aloaia Mac app

O le Mac app e le'o aloaia e mata'ituina fa'atonuga o faila .less ma tu'ufa'atasia le code i faila fa'apitonu'u pe a mae'a fa'asaoina uma se faila .less mata'ituina. Afai e te manaʻo ai, e mafai ona e fesuiaʻi mea e te manaʻo i ai i totonu o le app mo le faʻaitiitia otometi ma poʻo fea le lisi o faila tuʻufaʻatasia e faʻamutaina i totonu.

Tele polokalame

Crunch

O le Crunch o se fa'atonu sili ona lelei LESS ma fa'apipi'i na fausia ile Adobe Air.

CodeKit

Faia e le tagata lava e tasi e pei o le Mac app le aloaia, CodeKit o se Mac app e tuufaatasia LESS, SASS, Stylus, ma CoffeeScript.

Faigofie

Mac, Linux, ma le Windows app mo le toso ma le pa'u le tuufaatasia o faila LESS. Ma le isi, o le source code o loʻo i luga ole GitHub .

Fa'amata vave so'o se 'upega tafa'ilagi e ala i le tu'u i totonu o le CSS ma le JS tu'ufa'atasia. Fa'apipi'i i luga o sitaili fa'ale-aganu'u fa'apitoa mo fa'alelei fa'alelei ma fa'aleleia aga'i i luma.

Seti faila faila

La'u mai le Bootstrap tu'ufa'atasi fou ma tu'u i lau galuega. Mo se faʻataʻitaʻiga, atonu e iai sau mea e pei o lenei:

  app/
      fa'atulagaina/
      fa'ata'ita'iga/
  lautele/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Fa'aaoga le mamanu amata

Kopi le HTML faavae nei e amata ai.

<html>
  <ulu>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <tino>
    <h1> Talofa, lalolagi! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </tino>
</html>

Fa'asaga ile fa'ailoga masani

Galue i lau CSS masani, JS, ma isi mea e manaʻomia e fai ai oe Bootstrap ma au lava faila CSS ma JS.

<html>
  <ulu>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Poloketi -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <tino>
    <h1> Talofa, lalolagi! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Poloketi -->
    <script src = "public/js/application.js" ></script> 
  </tino>
</html>

Fa'alautele Bootstrap

Fausia ile LESS