Proširite Bootstrap kako biste iskoristili prednosti uključenih stilova i komponenti, kao i LESS varijabli i mixina.
Bootstrap je izrađen s LESS-om u svojoj jezgri, dinamičnim stilskim jezikom koji je stvorio naš dobar prijatelj, Alexis Sellier . Čini razvijanje CSS-a temeljenog na sustavima bržim, lakšim i zabavnijim.
Jedan od kreatora Bootstrapa napisao je kratki post na blogu o ovome , sažeto ovdje:
Kao proširenje CSS-a, LESS uključuje varijable, mixins za ponovno upotrebljive isječke koda, operacije za jednostavnu matematiku, gniježđenje, pa čak i funkcije boja.
Posjetite službenu web stranicu na http://lesscss.org/ kako biste saznali više.
Budući da je naš CSS napisan s Lessom i koristi varijable i mixins, potrebno ga je kompajlirati za konačnu produkcijsku implementaciju. Evo kako.
Slijedite upute u readme-u projekta na GitHubu za kompajliranje putem naredbenog retka.
Preuzmite najnoviji Less.js i uključite put do njega (i Bootstrapa) u <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Za ponovno kompajliranje .less datoteka, samo ih spremite i ponovno učitajte svoju stranicu. Less.js ih kompajlira i pohranjuje u lokalnu pohranu.
Neslužbena Mac aplikacija prati direktorije .less datoteka i kompajlira kod u lokalne datoteke nakon svakog spremanja promatrane .less datoteke. Ako želite, možete promijeniti postavke u aplikaciji za automatsko smanjivanje i direktorij u kojem kompajlirane datoteke završavaju.
Crunch je izvrstan LESS uređivač i kompajler izgrađen na Adobe Airu.
Stvorio ga je isti čovjek kao i neslužbenu Mac aplikaciju, CodeKit je Mac aplikacija koja kompilira LESS, SASS, Stylus i CoffeeScript.
Mac, Linux i Windows aplikacija za povlačenje i ispuštanje datoteka LESS. Osim toga, izvorni kod je na GitHubu .
Brzo pokrenite bilo koji web projekt ubacivanjem kompajliranog ili umanjenog CSS-a i JS-a. Zasebno nanesite prilagođene stilove za jednostavnu nadogradnju i održavanje.
Preuzmite najnoviji kompajlirani Bootstrap i postavite ga u svoj projekt. Na primjer, možda imate nešto poput ovoga:
aplikacija/ rasporedi/ predlošci/ javnost/ css/ bootstrap.min.css js/ bootstrap.min.js img/ glifikoni-polovice.png glyphicons-halflings-white.png
Kopirajte sljedeći osnovni HTML da biste započeli.
- <html>
- <glava>
- <title> Predložak Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- </head>
- <tijelo>
- <h1> Zdravo, svijete! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
Radite na svom prilagođenom CSS-u, JS-u i više po potrebi kako biste Bootstrap učinili svojim vlastitim s vlastitim zasebnim CSS i JS datotekama.
- <html>
- <glava>
- <title> Predložak Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- <!-- Projekt -->
- <link href = "public/css/application.css" rel = "stylesheet" >
- </head>
- <tijelo>
- <h1> Zdravo, svijete! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Projekt -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>