Hedatu · Twitter Bootstrap euskaraz

Bootstrap LESS oinarrian egina dago, gure lagun onak, Alexis Sellier -ek, sortutako estilo-orri hizkuntza dinamikoa . Sistemetan oinarritutako CSS garatzea azkarrago, errazagoa eta dibertigarriagoa egiten du.

Zergatik GUTXIAGO?

Bootstrap-en sortzaileetako batek blog-argitalpen azkar bat idatzi zuen honi buruz , hemen laburbilduta:

Bootstrap-ek ~6 aldiz azkarrago konpilatzen du Less-ekin Sass-ekin alderatuta
Gutxiago JavaScript-en idazten da, eta errazagoa zaigu murgiltzea eta adabakia egitea Ruby-rekin Sass-ekin alderatuta.
Gutxiago gehiago da; CSS idazten ari garela sentitu nahi dugu eta Bootstrap guztientzako hurbiltzen ari garela.

Zer sartzen da?

CSS-ren luzapen gisa, LESS-ek aldagaiak, kode zati berrerabilgarrietarako nahasketak, matematika sinpleetarako eragiketak, habiak eta kolore funtzioak ere barne hartzen ditu.

Gehiago ikasi

Bisitatu webgune ofiziala http://lesscss.org/ helbidean informazio gehiago lortzeko.

Gure CSS Less-ekin idatzita dagoenez eta aldagaiak eta nahasketak erabiltzen dituenez, konpilatu behar da azken ekoizpena inplementatzeko. Hona hemen nola.

Oharra: GitHub-i tira-eskaera bat bidaltzen ari bazara CSS aldatuarekin, CSS-a berriro konpilatu behar duzu metodo hauetako edozeinen bidez.

Konpilatzeko tresnak

Makefiledun nodoa

Instalatu LESS komando-lerroko konpilatzailea, JSHint, Recess eta uglify-js globalki npm-rekin komando hau exekutatuz:

$ npm instalatu -g gutxiago jshint recess uglify-js

Instalatu ondoren, exekutatu makezure bootstrap direktorioaren errotik eta prest zaude.

Gainera, watchr instalatuta baduzu, make watchbootstrap automatikoki berreraikitzeko exekutatu dezakezu bootstrap lib-eko fitxategi bat editatzen duzun bakoitzean (hau ez da beharrezkoa, erosotasun metodo bat besterik ez).

Komando-lerroa

Instalatu LESS komando lerroko tresna Node bidez eta exekutatu komando hau:

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

Ziurtatu --compresskomando horretan sartzen duzula byte batzuk gordetzen saiatzen ari bazara!

Javascript

Deskargatu azken Less.js eta sartu haren bidea (eta Bootstrap) <head>.

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

.less fitxategiak berriro konpilatzeko, gorde itzazu eta berriro kargatu orria. Less.js-ek konpilatu egiten ditu eta tokiko biltegian gordetzen ditu.

Mac aplikazio ez ofiziala

Mac aplikazio ez-ofizialak .less fitxategien direktorioak ikusten ditu eta kodea fitxategi lokaletan konpilatzen du ikusitako .less fitxategi bat gorde ondoren. Nahi baduzu, aplikazioan hobespenak alda ditzakezu txikitze automatikorako eta konpilatutako fitxategiak zein direktoriotan amaitzen diren.

Aplikazio gehiago

Kruska

Crunch Adobe Air-en eraikitako LESS editore eta konpilatzaile bikaina da.

CodeKit

Mac aplikazio ez-ofizialaren tipo berak sortua, CodeKit LESS, SASS, Stylus eta CoffeeScript konpilatzen dituen Mac aplikazioa da.

Sinplea

Mac, Linux eta Windows aplikazioa LESS fitxategiak arrastatu eta jaregiteko. Gainera, iturburu kodea GitHub-en dago .

Abiarazi azkar edozein web-proiektu CSS eta JS konpilatuak edo txikituak utziz. Geruza estilo pertsonalizatuak bereizita eguneratzeko eta mantentze-lanak errazteko.

Konfiguratu fitxategien egitura

Deskargatu konpilatutako azken Bootstrap eta sartu zure proiektuan. Adibidez, baliteke horrelako zerbait izatea:

  aplikazioa / ├── diseinuak / └── txantiloiak / publikoa / ├── css / │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . min . js
   └── img / ├── glifikoiak - erdiak . png
       └── glifikonoak - erdiak - zuriak . png

Erabili hasierako txantiloia

Kopiatu oinarrizko HTML hau hasteko.

<html>
  <burua>
    <title> Bootstrap 101 txantiloia </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "estilo-orria" >  
  </burua>
  <gorputza>
    <h1> Kaixo, mundua! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

Kode pertsonalizatuan geruza

Lan egin zure CSS, JS eta beste pertsonalizatuetan behar den moduan Bootstrap zeurea egiteko, zure CSS eta JS fitxategi bereiziekin.

<html>
  <burua>
    <title> Bootstrap 101 txantiloia </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "estilo-orria" >  
    <!-- Proiektua -->
    <link href = "public/css/application.css" rel = "estilo-orria" >  
  </burua>
  <gorputza>
    <h1> Kaixo, mundua! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Proiektua -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Bootstrap luzatzea

GUTXIAGOrekin eraikia