Extindeți Bootstrap pentru a profita de stilurile și componentele incluse, precum și de variabile și mixuri LESS.
Bootstrap este creat cu LESS la bază, un limbaj dinamic pentru foi de stil creat de bunul nostru prieten, Alexis Sellier . Face dezvoltarea CSS bazate pe sisteme mai rapidă, mai ușoară și mai distractivă.
Unul dintre creatorii Bootstrap a scris o postare rapidă pe blog despre aceasta , rezumată aici:
Ca o extensie a CSS, LESS include variabile, mixuri pentru fragmente de cod reutilizabile, operații pentru matematică simplă, imbricare și chiar funcții de culoare.
Vizitați site-ul oficial la http://lesscss.org/ pentru a afla mai multe.
Deoarece CSS-ul nostru este scris cu Less și utilizează variabile și mixuri, trebuie să fie compilat pentru implementarea finală a producției. Iată cum.
Urmați instrucțiunile din proiectul readme pe GitHub pentru compilare prin linia de comandă.
Descărcați cel mai recent Less.js și includeți calea către acesta (și Bootstrap) în fișierul <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Pentru a recompila fișierele .less, salvați-le și reîncărcați pagina. Less.js le compilează și le stochează în stocarea locală.
Aplicația neoficială pentru Mac urmărește directoarele fișierelor .less și compilează codul în fișiere locale după fiecare salvare a unui fișier .less urmărit. Dacă doriți, puteți comuta preferințele în aplicație pentru minimizarea automată și în ce director ajung fișierele compilate.
Crunch este un editor și un compilator LESS cu aspect minunat, construit pe Adobe Air.
Creată de același tip ca și aplicația neoficială pentru Mac, CodeKit este o aplicație pentru Mac care comilează LESS, SASS, Stylus și CoffeeScript.
Aplicația Mac, Linux și Windows pentru compilarea prin glisare și plasare a fișierelor LESS. În plus, codul sursă este pe GitHub .
Porniți rapid orice proiect web introducând CSS și JS compilat sau minimizat. Stratificați separat stilurile personalizate pentru upgrade-uri și întreținere ușoare.
Descărcați cel mai recent Bootstrap compilat și plasați-l în proiectul dvs. De exemplu, s-ar putea să aveți ceva de genul acesta:
aplicatie/ machete/ șabloane/ public/ css/ bootstrap.min.css js/ bootstrap.min.js img/ glyphicons-halflings.png gliphicons-halflings-alb.png
Copiați următorul cod HTML de bază pentru a începe.
- <html>
- <cap>
- <title> Șablon Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "foaia de stil" >
- </cap>
- <corp>
- <h1> Bună, lume! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </corp>
- </html>
Lucrați în CSS, JS și altele personalizate, după cum este necesar, pentru a face Bootstrap al dvs. cu propriile fișiere CSS și JS separate.
- <html>
- <cap>
- <title> Șablon Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "foaia de stil" >
- <!-- Proiect -->
- <link href = "public/css/application.css" rel = "foaia de stil" >
- </cap>
- <corp>
- <h1> Bună, lume! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Proiect -->
- <script src = "public/js/application.js" ></script>
- </corp>
- </html>