Extinderea Bootstrap

Extindeți Bootstrap pentru a profita de stilurile și componentele incluse, precum și de variabile și mixuri LESS.

Atenție! Aceste documente sunt pentru v2.3.2, care nu mai este acceptată oficial. Consultați cea mai recentă versiune de Bootstrap!
MAI MAI CSS

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ă.

De ce mai puțin?

Unul dintre creatorii Bootstrap a scris o postare rapidă pe blog despre aceasta , rezumată aici:

  • Bootstrap se compilează mai rapid de ~6 ori mai rapid cu Less comparativ cu Sass
  • Mai puțin este scris în JavaScript, ceea ce ne face mai ușor să ne scufundăm și să corectăm în comparație cu Ruby cu Sass.
  • Mai puțin este mai mult; vrem să simțim că scriem CSS și facem Bootstrap accesibil tuturor.

Ce este inclus?

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.

Află mai multe

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.

Notă: dacă trimiteți o cerere de extragere către GitHub cu CSS modificat, trebuie să recompilați CSS-ul prin oricare dintre aceste metode.

Instrumente pentru compilare

Linie de comanda

Urmați instrucțiunile din proiectul readme pe GitHub pentru compilare prin linia de comandă.

JavaScript

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ție neoficială pentru Mac

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.

Mai multe aplicatii

Crunch

Crunch este un editor și un compilator LESS cu aspect minunat, construit pe Adobe Air.

CodeKit

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.

Simplu

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.

Configurați structura fișierului

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

Utilizați șablonul de pornire

Copiați următorul cod HTML de bază pentru a începe.

  1. <html>
  2. <cap>
  3. <title> Șablon Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "foaia de stil" >
  6. </cap>
  7. <corp>
  8. <h1> Bună, lume! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </corp>
  12. </html>

Strat pe cod personalizat

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.

  1. <html>
  2. <cap>
  3. <title> Șablon Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "foaia de stil" >
  6. <!-- Proiect -->
  7. <link href = "public/css/application.css" rel = "foaia de stil" >
  8. </cap>
  9. <corp>
  10. <h1> Bună, lume! </h1>
  11. <!-- Bootstrap -->
  12. <script src = "public/js/bootstrap.min.js" ></script>
  13. <!-- Proiect -->
  14. <script src = "public/js/application.js" ></script>
  15. </corp>
  16. </html>