Laiendada · Bootstrap eesti keeles

Bootstrap on tehtud meie hea sõbra Alexis Sellieri loodud dünaamilise stiilitabeli keelega LESS . See muudab süsteemipõhise CSS-i arendamise kiiremaks, lihtsamaks ja lõbusamaks.

Miks VÄHEM?

Üks Bootstrapi loojatest kirjutas selle kohta kiire blogipostituse , mille kokkuvõte on siin:

Bootstrap kompileerib vähemaga võrreldes Sassiga kiiremini ~6x kiiremini
JavaScriptis kirjutatakse vähem, mis muudab meie jaoks lihtsamaks sukeldumise ja lappimise võrreldes Ruby with Sassiga.
Vähem on rohkem; tahame tunda, et kirjutame CSS-i ja muudame Bootstrapi kõigile kättesaadavaks.

Mis on kaasas?

CSS-i laiendusena sisaldab LESS muutujaid, korduvkasutatavate koodijuppide segusid, lihtsa matemaatika toiminguid, pesastamist ja isegi värvifunktsioone.

Lisateavet

Lisateabe saamiseks külastage ametlikku veebisaiti http://lesscss.org/ .

Kuna meie CSS on kirjutatud käsuga Less ja kasutab muutujaid ja segusid, tuleb see lõplikuks tootmisrakenduseks kompileerida. Siin on, kuidas.

Märkus. Kui saadate GitHubile tõmbetaotluse muudetud CSS-iga, peate CSS -i uuesti kompileerima, kasutades mõnda neist meetoditest.

Koostamise vahendid

Makefile'iga sõlm

Installige käsurea kompilaator LESS, JSHint, Recess ja uglify-js globaalselt npm-iga, käivitades järgmise käsu:

$ npm install -g vähem jshint süvend uglify-js

Pärast installimist käivitage makelihtsalt alglaadimiskataloogi juurtest ja oletegi valmis.

Lisaks, kui teil on installitud watchr , võite käivitada make watchalglaadimisfaili automaatse ümberehitamise iga kord, kui redigeerite faili bootstrap lib-is (see pole vajalik, vaid mugavusmeetod).

Käsurida

Installige käsurea tööriist VÄHEM sõlme kaudu ja käivitage järgmine käsk:

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

Lisage kindlasti --compresssee käsk, kui proovite mõnda baiti salvestada!

JavaScript

Laadige alla uusim Less.js ja lisage selle (ja Bootstrapi) tee <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

Failide .less uuesti kompileerimiseks lihtsalt salvestage need ja laadige oma leht uuesti. Less.js kompileerib need ja salvestab kohalikku salvestusruumi.

Mitteametlik Maci rakendus

Mitteametlik Maci rakendus jälgib .less failide katalooge ja kompileerib koodi kohalikeks failideks pärast vaadatud .less faili iga salvestamist. Soovi korral saate rakenduses automaatse minimeerimise eelistusi ja seda, millisesse kataloogi kompileeritud failid jõuavad.

Rohkem rakendusi

Prõks

Crunch on suurepärase välimusega LESS-redaktor ja kompilaator, mis on üles ehitatud Adobe Airile.

CodeKit

CodeKit on Maci mitteametliku rakendusega sama mehe loodud rakendus, mis kompileerib LESS, SASS, Stylus ja CoffeeScript.

Lihtne

Maci, Linuxi ja Windowsi rakendus VÄHEM failide pukseerimiseks. Lisaks on lähtekood GitHubis .

Käivitage kiiresti mis tahes veebiprojekt, sisestades kompileeritud või minimeeritud CSS-i ja JS-i. Lihtsaks uuendamiseks ja edasiseks hoolduseks lisage kohandatud stiilidele eraldi kiht.

Seadistage faili struktuur

Laadige alla uusim kompileeritud Bootstrap ja asetage see oma projekti. Näiteks võib teil olla midagi sellist:

  rakendus/
      paigutused/
      mallid/
  avalik/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Kasutage starteri malli

Alustamiseks kopeerige järgmine põhi-HTML.

<html>
  <pea>
    <title> Bootstrap 101 mall </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "laadileht" >  
  </head>
  <keha>
    <h1> Tere, maailm! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

Kiht kohandatud koodile

Vajadusel töötage oma kohandatud CSS-i, JS-i ja muuga, et muuta Bootstrap oma eraldi CSS- ja JS-failidega omaks.

<html>
  <pea>
    <title> Bootstrap 101 mall </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "laadileht" >  
    <!-- Projekt -->
    <link href = "public/css/application.css" rel = "laadileht" >  
  </head>
  <keha>
    <h1> Tere, maailm! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Projekt -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Bootstrapi pikendamine

Ehitatud LESS-iga