Extinde · Twitter Bootstrap in limba romana

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

Nod cu makefile

Instalați compilatorul de linie de comandă LESS, JSHint, Recess și uglify-js la nivel global cu npm, rulând următoarea comandă:

$ npm install -g mai puțin jshint recess uglify-js

Odată instalat, rulați makede la rădăcina directorului dvs. de bootstrap și sunteți gata.

În plus, dacă aveți watchr instalat, puteți rula make watchpentru ca bootstrap să fie reconstruit automat de fiecare dată când editați un fișier în lib-ul bootstrap (acest lucru nu este necesar, doar o metodă convenabilă).

Linie de comanda

Instalați instrumentul de linie de comandă LESS prin Node și rulați următoarea comandă:

$ lessc ./less/bootstrap.less > bootstrap.css

Asigurați-vă că includeți --compressîn acea comandă dacă încercați să salvați câțiva octeți!

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:

  aplicație / ├── machete / └── șabloane / public / ├── css / │ ├── bootstrap . min . css
   ├── js / │ ├── bootstrap . min . js
   └── img / ├── glificonuri - halflings . png
       └── glificonuri - halflings - alb . png

Utilizați șablonul de pornire

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>

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.

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

Extinderea Bootstrap

Construit cu LESS