Utvid Bootstrap for å dra nytte av inkluderte stiler og komponenter, samt MINDRE variabler og mixins.
Bootstrap er laget med LESS i kjernen, et dynamisk stilarkspråk skapt av vår gode venn, Alexis Sellier . Det gjør utvikling av systembasert CSS raskere, enklere og morsommere.
En av Bootstraps skapere skrev et raskt blogginnlegg om dette , oppsummert her:
Som en utvidelse av CSS inkluderer LESS variabler, mixins for gjenbrukbare kodebiter, operasjoner for enkel matematikk, nesting og til og med fargefunksjoner.
Besøk det offisielle nettstedet på http://lesscss.org/ for å lære mer.
Siden vår CSS er skrevet med Less og bruker variabler og mixins, må den kompileres for endelig produksjonsimplementering. Dette er hvordan.
Følg instruksjonene i prosjektet readme på GitHub for kompilering via kommandolinje.
Last ned den nyeste Less.js og ta med banen til den (og Bootstrap) i <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
For å rekompilere .less-filene, lagrer du dem og laster inn siden på nytt. Less.js kompilerer dem og lagrer dem i lokal lagring.
Den uoffisielle Mac-appen ser på kataloger med .less-filer og kompilerer koden til lokale filer etter hver lagring av en overvåket .less-fil. Hvis du vil, kan du bytte innstillinger i appen for automatisk minifisering og hvilken katalog de kompilerte filene havner i.
Crunch er en flott mindre editor og kompilator bygget på Adobe Air.
Laget av samme fyr som den uoffisielle Mac-appen, CodeKit er en Mac-app som kompilerer LESS, SASS, Stylus og CoffeeScript.
Mac-, Linux- og Windows-app for dra og slipp kompilering av MINDRE filer. I tillegg er kildekoden på GitHub .
Start ethvert nettprosjekt raskt ved å slippe inn den kompilerte eller minifiserte CSS og JS. Legg på tilpassede stiler separat for enkle oppgraderinger og vedlikehold fremover.
Last ned den siste kompilerte Bootstrap og plasser i prosjektet ditt. Du kan for eksempel ha noe slikt:
app/ oppsett/ maler/ offentlig/ css/ bootstrap.min.css js/ bootstrap.min.js img/ glyphicons-halflings.png glyphicons-halflings-white.png
Kopier følgende grunnleggende HTML for å komme i gang.
- <html>
- <hode>
- <title> Bootstrap 101-mal </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stilark" >
- </head>
- <body>
- <h1> Hei, verden! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
Arbeid i din egendefinerte CSS, JS og mer etter behov for å gjøre Bootstrap til din egen med dine egne separate CSS- og JS-filer.
- <html>
- <hode>
- <title> Bootstrap 101-mal </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stilark" >
- <!-- Prosjekt -->
- <link href = "public/css/application.css" rel = "stilark" >
- </head>
- <body>
- <h1> Hei, verden! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Prosjekt -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>