Verlängeren · Bootstrap op Lëtzebuergesch

Bootstrap gëtt mat MESS am Kär gemaach, eng dynamesch Stylesheet Sprooch erstallt vun eisem gudde Frënd, Alexis Sellier . Et mécht d'Entwécklung vu Systembaséiert CSS méi séier, méi einfach a méi Spaass.

Firwat MANNER?

Ee vun de Schëpfer vun Bootstrap huet e séiere Blogpost iwwer dëst geschriwwen, hei zesummegefaasst:

Bootstrap kompiléiert méi séier ~ 6x méi séier mat manner am Verglach zum Sass
Manner gëtt a JavaScript geschriwwen, wat et eis méi einfach mécht fir anzekucken an ze patchen am Verglach mam Ruby mat Sass.
Manner ass méi; mir wëllen d'Gefill hunn datt mir CSS schreiwen an Bootstrap fir jiddereen zougänglech maachen.

Wat ass mat abegraff?

Als Ausdehnung vu CSS enthält LESS Variablen, Mixins fir wiederverwendbare Snippets vum Code, Operatioune fir einfach Mathematik, Nesting, a souguer Faarffunktiounen.

Léier méi

Besicht déi offiziell Websäit http://lesscss.org/ fir méi ze léieren.

Well eis CSS mat Manner geschriwwe gëtt a Variablen a Mixins benotzt, muss et kompiléiert ginn fir d'final Produktiounsimplementatioun. Hei ass wéi.

Notiz: Wann Dir eng Pull-Ufro op GitHub mat modifizéierten CSS ofgitt, musst Dir den CSS iwwer eng vun dëse Methoden nei kompiléieren.

Tools fir ze kompiléieren

Kommando Linn

Follegt d'Instruktiounen am Projet Readme op GitHub fir iwwer Kommandozeil ze kompiléieren.

JavaScript

Luet déi lescht Less.js erof an enthält de Wee dohinner (a Bootstrap) an der <head>.

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

Fir d'.less Dateien nei ze kompiléieren, späichert se einfach a lued Är Säit nei. Less.js kompiléiert se a späichert se an der lokaler Späichere.

Inoffiziell Mac App

Déi inoffiziell Mac App kuckt Verzeechnes vun .less Dateien a kompiléiert de Code op lokal Dateien no all Späichere vun enger iwwerwaachter .less Datei. Wann Dir wëllt, kënnt Dir Virléiften an der App wiesselen fir automatesch Minifizéierung a wéi engem Verzeichnis déi kompiléiert Dateien ophalen.

Méi Apps

Crunch

Crunch ass e super ausgesinn LESS Editor a Compiler op Adobe Air gebaut.

CodeKit

Erstellt vum selwechte Guy wéi déi inoffiziell Mac App, CodeKit ass eng Mac App déi LESS, SASS, Stylus a CoffeeScript kompiléiert.

Einfach

Mac, Linux, a Windows App fir Drag and Drop Zesummesetzung vu MENG Dateien. Plus, de Quellcode ass op GitHub .

Fänkt séier all Webprojet un andeems Dir déi kompiléiert oder minifizéiert CSS an JS erofgeet. Layer op personaliséiert Stiler separat fir einfach Upgrades an Ënnerhalt no vir.

Setup Dateistruktur

Luet déi lescht kompiléiert Bootstrap erof a setzt an Äre Projet. Zum Beispill kënnt Dir eppes wéi dat hunn:

  app/
      Layouten/
      Schablounen/
  ëffentlech/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Benotzt Starter Schabloun

Kopéiert déi folgend Basis HTML fir unzefänken.

<html>
  <Kapp>
    <title> Bootstrap 101 Schabloun </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <Kierper>
    <h1> Moien, Welt! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

Layer op Benotzerdefinéiert Code

Schafft an Ärem personaliséierte CSS, JS, a méi wéi néideg fir Bootstrap Ären eegene mat Ären eegene separaten CSS an JS Dateien ze maachen.

<html>
  <Kapp>
    <title> Bootstrap 101 Schabloun </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Projet -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <Kierper>
    <h1> Moien, Welt! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Projet -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Bootstrap verlängeren

Gebaut mat MANNER