Bootstrap

Bootstrap verlängeren

Verlängert Bootstrap fir vun abegraff Stiler a Komponenten ze profitéieren, souwéi MANNER Variablen a Mixins.

Gebaut mat MANNER

MANNER CSS

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.

Kompiléiere Bootstrap mat Manner

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

Node mat Makefile

Installéiert de LESS Kommandozeil Compiler, JSHint, Recess, an uglify-js weltwäit mat npm andeems Dir de folgende Kommando ausféiert:

$ npm installéieren -g manner jshint recess uglify-js

Eemol installéiert, lafen einfach makevun der Root vun Ärem Bootstrap Verzeichnis an Dir sidd alles ageriicht.

Zousätzlech, wann Dir Watchr installéiert hutt, kënnt Dir lafen make watchfir Bootstrap automatesch opzebauen all Kéier wann Dir eng Datei am Bootstrap lib ännert (dëst ass net erfuerderlech, just eng Komfortmethod).

Kommando Linn

Installéiert de LESS Kommandozeil Tool iwwer Node a lafen de folgende Kommando:

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

Gitt sécher datt Dir --compressan deem Kommando enthält wann Dir probéiert e puer Bytes ze späicheren!

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 .

Benotzt als statesch Verméigen

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 / └── Templates / Public / ├── css / │ ├── Bootstrap . min . css
   ├── js / │ ├── bootstrap . min . js
   └── img / ├── glyphicons - halflings . png
       └── glyphicons - halflings - wäiss . png

Benotzt Starter Schabloun

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

  1. <html>
  2.   <Kapp>
  3.     <title> Bootstrap 101 Schabloun </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  6.   </head>
  7.   <Kierper>
  8.     <h1> Moien, Welt! </h1>
  9.     <!-- Bootstrap -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </body>
  12. </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.

  1. <html>
  2.   <Kapp>
  3.     <title> Bootstrap 101 Schabloun </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  6.     <!-- Projet -->
  7.     <link href = "public/css/application.css" rel = "stylesheet" >  
  8.   </head>
  9.   <Kierper>
  10.     <h1> Moien, Welt! </h1>
  11.     <!-- Bootstrap -->
  12.     <script src = "public/js/bootstrap.min.js" ></script> 
  13.     <!-- Projet -->
  14.     <script src = "public/js/application.js" ></script> 
  15.   </body>
  16. </html>