Leudaich · Bootstrap ann an Gàidhlig na h-Alba

Tha Bootstrap air a dhèanamh le LESS aig a chridhe, cànan duilleag stoidhle fiùghantach a chruthaich ar deagh charaid, Alexis Sellier . Bidh e a’ dèanamh leasachadh CSS stèidhichte air siostaman nas luaithe, nas fhasa agus nas spòrsail.

Carson nas lugha?

Sgrìobh fear de luchd-cruthachaidh Bootstrap post blog sgiobalta mu dheidhinn seo , le geàrr-chunntas an seo:

Bidh Bootstrap a’ cur ri chèile nas luaithe ~ 6x nas luaithe le Nas lugha an taca ri Sass
Tha nas lugha air a sgrìobhadh ann an JavaScript, ga dhèanamh nas fhasa dhuinn dàibheadh a-steach agus a dhol an coimeas ri Ruby le Sass.
Nas lugha tha barrachd; tha sinn airson a bhith a’ faireachdainn gu bheil sinn a’ sgrìobhadh CSS agus a’ dèanamh Bootstrap furasta bruidhinn ris a h-uile duine.

Dè tha air a ghabhail a-steach?

Mar leudachadh air CSS, tha LESS a’ toirt a-steach caochladairean, measgachadh airson criomagan còd ath-chleachdadh, gnìomhachd airson gnìomhan matamataigs sìmplidh, neadachadh, agus eadhon dath.

Ionnsaich barrachd

Tadhail air an làrach-lìn oifigeil aig http://lesscss.org/ gus tuilleadh ionnsachadh.

Leis gu bheil an CSS againn air a sgrìobhadh le Nas lugha agus a’ cleachdadh caochladairean agus measgachaidhean, feumar a chuir ri chèile airson buileachadh cinneasachaidh deireannach. Seo mar a tha.

Nota: Ma tha thu a’ cur a-steach iarrtas tarraing gu GitHub le CSS atharraichte, feumaidh tu an CSS ath-chruinneachadh tro gin de na dòighean sin.

Innealan airson cruinneachadh

Nod le makefile

Stàlaich an inneal-cruinneachaidh loidhne-àithne LESS, JSHint, Recess, agus uglify-js air feadh na cruinne le npm le bhith a’ ruith an àithne a leanas:

$ npm install -g nas lugha jshint fosadh uglify-js

Nuair a bhios tu air a chuir a-steach dìreach ruith makebho fhreumh an eòlaire bootstrap agad agus tha thu uile deiseil.

A bharrachd air an sin, ma tha neach- faire agad air a chuir a-steach, faodaidh tu ruith make watchgus am bi bootstrap air ath-thogail gu fèin-ghluasadach a h-uile uair a dheasaicheas tu faidhle anns an lib bootstrap (chan eil seo riatanach, dìreach dòigh goireasachd).

Loidhne-àithne

Stàlaich an inneal loidhne-àithne LESS tro Node agus ruith an àithne a leanas:

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

Dèan cinnteach gun cuir thu a-steach --compresssan àithne sin ma tha thu a’ feuchainn ri beagan bytes a shàbhaladh!

JavaScript

Luchdaich sìos na Less.js as ùire agus cuir a-steach an t-slighe thuige (agus Bootstrap) anns an fhaidhle <head>.

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

Gus na faidhlichean .less ath-chruinneachadh, dìreach sàbhail iad agus ath-luchdaich do dhuilleag. Bidh Less.js gan cur ri chèile agus gan stòradh ann an stòradh ionadail.

Aplacaid neo-oifigeil Mac

Bidh an app Mac neo-oifigeil a ’ coimhead clàran de fhaidhlichean .less agus a’ cur ri chèile a’ chòd gu faidhlichean ionadail às deidh gach sàbhaladh de fhaidhle .less faire. Ma thogras tu, is urrainn dhut roghainnean a thogail san app airson mion-sgrùdadh fèin-ghluasadach agus dè an eòlaire anns a bheil na faidhlichean cruinnichte a’ tighinn gu crìch.

Tuilleadh aplacaidean

Crùisg

Tha Crunch na dheagh neach-deasachaidh agus neach-cruinneachaidh LESS air a thogail air Adobe Air.

CodeKit

Air a chruthachadh leis an aon ghille ris an app Mac neo-oifigeil, is e app Mac a th’ ann an CodeKit a bhios a ’cur ri chèile LESS, SASS, Stylus, agus CoffeeScript.

Sìmplidh

Aplacaid Mac, Linux, agus Windows airson slaodadh is leigeil às de fhaidhlichean LESS. A bharrachd air an sin, tha an còd stòr air GitHub .

Tòisich gu sgiobalta pròiseact lìn sam bith le bhith a’ cuir a-steach an CSS agus JS cruinnichte no mion-leasaichte. Sreath air stoidhlichean àbhaisteach air leth airson ùrachadh is cumail suas furasta a’ gluasad air adhart.

Stèidhich structar faidhle

Luchdaich sìos am Bootstrap as ùire agus cuir a-steach don phròiseact agad. Mar eisimpleir, is dòcha gu bheil rudeigin mar seo agad:

  app/
      dealbhadh/
      teamplaidean/
  poblach/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halfings.png
          glyphicons-halfings-white.png

Cleachd teamplaid tòiseachaidh

Dèan lethbhreac den HTML bunaiteach a leanas airson tòiseachadh.

<html>
  <ceann>
    <title> Bootstrap 101 Teamplaid </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "duilleag stoidhle" >  
  </ceann>
  <corp>
    <h1> Halo, a shaoghal! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </corp>
</html>

Sreath air còd gnàthaichte

Obraich anns an CSS àbhaisteach agad, JS, agus barrachd mar a dh’ fheumar gus Bootstrap a dhèanamh leat fhèin leis na faidhlichean CSS agus JS agad fhèin.

<html>
  <ceann>
    <title> Bootstrap 101 Teamplaid </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "duilleag stoidhle" >  
    <!-- Pròiseact -->
    <link href = "public/css/application.css" rel = "duilleag stoidhle" >  
  </ceann>
  <corp>
    <h1> Halo, a shaoghal! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Pròiseact -->
    <script src = "public/js/application.js" ></script> 
  </corp>
</html>

A 'leudachadh Bootstrap

Air a thogail le LÌON