Utöka Bootstrap för att dra nytta av inkluderade stilar och komponenter, såväl som MINDRE variabler och mixins.
Bootstrap är gjord med LESS som kärna, ett dynamiskt stilmallsspråk skapat av vår gode vän, Alexis Sellier . Det gör att utveckla systembaserad CSS snabbare, enklare och roligare.
En av Bootstraps skapare skrev ett snabbt blogginlägg om detta , sammanfattat här:
Som en förlängning av CSS innehåller LESS variabler, mixins för återanvändbara kodavsnitt, operationer för enkel matematik, kapsling och till och med färgfunktioner.
Besök den officiella webbplatsen på http://lesscss.org/ för att lära dig mer.
Eftersom vår CSS är skriven med Less och använder variabler och mixins, måste den kompileras för slutlig produktionsimplementering. Här är hur.
Följ instruktionerna i projektet readme på GitHub för kompilering via kommandoraden.
Ladda ner den senaste Less.js och inkludera sökvägen till den (och Bootstrap) i <head>
.
<länk rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
För att kompilera om .less-filerna, spara bara dem och ladda om din sida. Less.js kompilerar dem och lagrar dem i lokal lagring.
Den inofficiella Mac-appen tittar på kataloger med .less-filer och kompilerar koden till lokala filer efter varje lagring av en bevakad .less-fil. Om du vill kan du växla inställningar i appen för automatisk minifiering och i vilken katalog de kompilerade filerna hamnar.
Crunch är en snygg mindre redigerare och kompilator byggd på Adobe Air.
Skapat av samma kille som den inofficiella Mac-appen, CodeKit är en Mac-app som kompilerar LESS, SASS, Stylus och CoffeeScript.
Mac-, Linux- och Windows-app för att dra och släppa kompilering av MINDRE filer. Dessutom finns källkoden på GitHub .
Starta snabbt vilket webbprojekt som helst genom att släppa in den kompilerade eller minifierade CSS och JS. Lägg på anpassade stilar separat för enkla uppgraderingar och underhåll framåt.
Ladda ner den senaste kompilerade Bootstrap och placera i ditt projekt. Du kan till exempel ha något sånt här:
app/ layouter/ mallar/ offentlig/ css/ bootstrap.min.css js/ bootstrap.min.js img/ glyphicons-halflings.png glyphicons-halflings-white.png
Kopiera följande bas-HTML för att komma igång.
- <html>
- <huvud>
- <title> Bootstrap 101-mall </title>
- <!-- Bootstrap -->
- <länk href = "public/css/bootstrap.min.css" rel = "stilmall" >
- </head>
- <kropp>
- <h1> Hej världen! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
Arbeta i din anpassade CSS, JS och mer efter behov för att göra Bootstrap till din egen med dina egna separata CSS- och JS-filer.
- <html>
- <huvud>
- <title> Bootstrap 101-mall </title>
- <!-- Bootstrap -->
- <länk href = "public/css/bootstrap.min.css" rel = "stilmall" >
- <!-- Projekt -->
- <länk href = "public/css/application.css" rel = "stilmall" >
- </head>
- <kropp>
- <h1> Hej världen! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Projekt -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>