Brei Bootstrap uit om voordeel te trek uit ingesluit style en komponente, sowel as MINDER veranderlikes en mixins.
Bootstrap is gemaak met MINDER in sy kern, 'n dinamiese stylbladtaal wat deur ons goeie vriend, Alexis Sellier , geskep is . Dit maak die ontwikkeling van stelselgebaseerde CSS vinniger, makliker en lekkerder.
Een van Bootstrap se skeppers het 'n vinnige blogplasing hieroor geskryf , hier opgesom:
As 'n uitbreiding van CSS, bevat MINDER veranderlikes, mixins vir herbruikbare kodefragmente, bewerkings vir eenvoudige wiskunde, nes en selfs kleurfunksies.
Besoek die amptelike webwerf by http://lesscss.org/ om meer te wete te kom.
Aangesien ons CSS met Less geskryf is en veranderlikes en mixins gebruik, moet dit saamgestel word vir finale produksie-implementering. Hier is hoe.
Volg die instruksies in die projek readme op GitHub vir samestelling via opdragreël.
Laai die nuutste Less.js af en sluit die pad daarheen (en Bootstrap) in die <head>
.
<skakel rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Om die .less lêers te hersaamstel, stoor hulle net en herlaai jou bladsy. Less.js stel dit saam en stoor dit in plaaslike berging.
Die nie-amptelike Mac-toepassing kyk na gidse van .less-lêers en stel die kode saam na plaaslike lêers na elke stoor van 'n gekykte .less-lêer. As jy wil, kan jy voorkeure in die toepassing wissel vir outomatiese verkleining en in watter gids die saamgestelde lêers beland.
Crunch is 'n wonderlike MINDER redigeerder en samesteller wat op Adobe Air gebou is.
Geskep deur dieselfde ou as die nie-amptelike Mac-toepassing, CodeKit is 'n Mac-toepassing wat LESS, SASS, Stylus en CoffeeScript saamstel.
Mac-, Linux- en Windows-toepassing vir sleep-en-los-samestelling van MINDER lêers. Boonop is die bronkode op GitHub .
Begin vinnig enige webprojek deur die saamgestelde of verkleinde CSS en JS in te gooi. Lae op pasgemaakte style afsonderlik vir maklike opgraderings en instandhouding vorentoe.
Laai die nuutste saamgestelde Bootstrap af en plaas dit in jou projek. Byvoorbeeld, jy kan iets soos hierdie hê:
toepassing/ uitlegte/ sjablone/ publiek/ css/ bootstrap.min.css js/ bootstrap.min.js img/ glyphicons-halflings.png glyphicons-halflings-white.png
Kopieer die volgende basiese HTML om te begin.
- <html>
- <kop>
- <title> Bootstrap 101-sjabloon </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- </head>
- <liggaam>
- <h1> Hallo, wêreld! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
Werk in jou pasgemaakte CSS, JS en meer soos nodig om Bootstrap jou eie te maak met jou eie afsonderlike CSS- en JS-lêers.
- <html>
- <kop>
- <title> Bootstrap 101-sjabloon </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- <!-- Projek -->
- <link href = "public/css/application.css" rel = "stylesheet" >
- </head>
- <liggaam>
- <h1> Hallo, wêreld! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Projek -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>