Udvid Bootstrap for at drage fordel af inkluderede stilarter og komponenter samt MINDRE variabler og mixins.
Bootstrap er lavet med LESS i sin kerne, et dynamisk stylesheet-sprog skabt af vores gode ven, Alexis Sellier . Det gør udvikling af systembaseret CSS hurtigere, nemmere og sjovere.
En af Bootstraps skabere skrev et hurtigt blogindlæg om dette , opsummeret her:
Som en udvidelse af CSS inkluderer LESS variabler, mixins til genanvendelige kodestykker, operationer til simpel matematik, indlejring og endda farvefunktioner.
Besøg den officielle hjemmeside på http://lesscss.org/ for at lære mere.
Da vores CSS er skrevet med Less og bruger variabler og mixins, skal den kompileres til den endelige produktionsimplementering. Sådan gør du.
Følg instruktionerne i projektet readme på GitHub til kompilering via kommandolinjen.
Download den seneste Less.js og inkluder stien til den (og Bootstrap) i <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
For at genkompilere .less-filerne skal du bare gemme dem og genindlæse din side. Less.js kompilerer dem og gemmer dem i lokalt lager.
Den uofficielle Mac-app overvåger mapper med .less-filer og kompilerer koden til lokale filer efter hver lagring af en overvåget .less-fil. Hvis du vil, kan du skifte præferencer i appen for automatisk minificering, og hvilken mappe de kompilerede filer ender i.
Crunch er en flot MINDRE editor og compiler bygget på Adobe Air.
Oprettet af den samme fyr som den uofficielle Mac-app, CodeKit er en Mac-app, der kompilerer LESS, SASS, Stylus og CoffeeScript.
Mac, Linux og Windows app til træk og slip kompilering af MINDRE filer. Derudover er kildekoden på GitHub .
Start hurtigt ethvert webprojekt ved at droppe den kompilerede eller minificerede CSS og JS. Læg lag på brugerdefinerede stilarter separat for nemme opgraderinger og vedligeholdelse fremover.
Download den seneste kompilerede Bootstrap og placer den i dit projekt. For eksempel kan du have noget som dette:
app/ layouts/ skabeloner/ offentlig/ css/ bootstrap.min.css js/ bootstrap.min.js img/ glyphicons-halflings.png glyphicons-halflings-white.png
Kopier følgende basis-HTML for at komme i gang.
- <html>
- <hoved>
- <title> Bootstrap 101 skabelon </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- </head>
- <body>
- <h1> Hej verden! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
Arbejd i din tilpassede CSS, JS og mere efter behov for at gøre Bootstrap til din egen med dine egne separate CSS- og JS-filer.
- <html>
- <hoved>
- <title> Bootstrap 101 skabelon </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- <!-- Projekt -->
- <link href = "public/css/application.css" rel = "stylesheet" >
- </head>
- <body>
- <h1> Hej verden! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Projekt -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>