Bootstrap

„Bootstrap“ išplėtimas

Išplėskite „Bootstrap“, kad galėtumėte pasinaudoti įtrauktais stiliais ir komponentais, taip pat MAŽIAU kintamųjų ir mišinių.

Pastatyta su LESS

MAŽIAU CSS

„Bootstrap“ sukurta naudojant LESS – dinamišką stilių lentelių kalbą, kurią sukūrė mūsų geras draugas Alexis Sellier . Tai leidžia kurti sistemomis pagrįstą CSS greičiau, lengviau ir smagiau.

Kodėl MAŽIAU?

Vienas iš „Bootstrap“ kūrėjų parašė greitą tinklaraščio įrašą apie tai , apibendrintas čia:

  • „Bootstrap“ kompiliuoja greičiau ~ 6 kartus greičiau su Less, palyginti su „Sass“.
  • Mažiau parašyta JavaScript, todėl mums lengviau pasinerti ir pataisyti, palyginti su Ruby with Sass.
  • Mažiau yra daugiau; norime jaustis taip, lyg rašome CSS ir darome Bootstrap prieinamą visiems.

Kas įtraukta?

Kaip CSS plėtinys, LESS apima kintamuosius, daugkartinio naudojimo kodo fragmentų mišinius, paprastas matematikos operacijas, įdėjimą ir net spalvų funkcijas.

Sužinokite daugiau

Norėdami sužinoti daugiau , apsilankykite oficialioje svetainėje http://lesscss.org/ .

„Bootstrap“ kompiliavimas naudojant „Less“.

Kadangi mūsų CSS yra parašytas su Less ir naudoja kintamuosius bei mišinius, jį reikia sukompiliuoti, kad būtų galima galutinai įdiegti. Štai kaip.

Pastaba: jei pateikiate ištraukimo užklausą „GitHub“ naudodami pakeistą CSS, turite iš naujo kompiliuoti CSS naudodami bet kurį iš šių metodų.

Kompiliavimo įrankiai

Mazgas su makefile

Įdiekite LESS komandinės eilutės kompiliatorių, JSHint, Recess ir uglify-js globaliai naudodami npm, vykdydami šią komandą:

$ npm install -g less jshint recess uglify-js

Įdiegę tiesiog paleiskite makeįkrovos katalogo šaknį ir viskas.

Be to, jei turite įdiegtą stebėjimo programą, galite paleisti make watch, kad įkrovos failas būtų automatiškai atkurtas kiekvieną kartą, kai redaguojate failą įkrovos lib.

Komandinė eilutė

Įdiekite LESS komandų eilutės įrankį per Node ir paleiskite šią komandą:

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

Būtinai įtraukite --compressį šią komandą, jei bandote išsaugoti keletą baitų!

JavaScript

Atsisiųskite naujausią Less.js ir įtraukite kelią į jį (ir „Bootstrap“) į <head>.

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

Norėdami iš naujo sukompiliuoti .less failus, tiesiog išsaugokite juos ir įkelkite puslapį iš naujo. Less.js juos sukompiliuoja ir išsaugo vietinėje saugykloje.

Neoficiali „Mac“ programa

Neoficiali „Mac“ programa stebi .less failų katalogus ir sukompiliuoja kodą į vietinius failus po kiekvieno žiūrimo .less failo išsaugojimo. Jei norite, programoje galite perjungti nuostatas, skirtas automatiniam sumažinimui ir į kurį katalogą pateks sukurti failai.

Daugiau programėlių

Traškėti

Crunch yra puikiai atrodantis LESS redaktorius ir kompiliatorius, sukurtas naudojant „Adobe Air“.

CodeKit

Sukurtas to paties vaikino kaip ir neoficialią „Mac“ programą, „CodeKit“ yra „Mac“ programa, kuri kompiliuoja LESS, SASS, Stylus ir CoffeeScript.

Paprasta

„Mac“, „Linux“ ir „Windows“ programa, skirta MAUŽIŲ failų kompiliavimui. Be to, šaltinio kodas yra „GitHub“ .

Naudoti kaip statinį turtą

Greitai pradėkite bet kokį žiniatinklio projektą įmesdami sukompiliuotą arba sumažintą CSS ir JS. Atskirai padėkite tinkintus stilius, kad būtų lengviau atnaujinti ir prižiūrėti.

Sąrankos failo struktūra

Atsisiųskite naujausią kompiliuotą „Bootstrap“ ir įdėkite į savo projektą. Pavyzdžiui, galite turėti kažką panašaus:

  programa/
      maketai/
      šablonai/
  viešas/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Naudokite starterio šabloną

Norėdami pradėti, nukopijuokite toliau pateiktą bazinį HTML.

  1. <html>
  2.   <galva>
  3.     <title> „ Bootstrap 101“ šablonas </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stiliaus lapas" >  
  6.   </head>
  7.   <kūnas>
  8.     <h1> Sveiki, pasauli! </h1>
  9.     <!-- Bootstrap -->
  10.     <script src = "public/js/bootstrap.min.js" ></script> 
  11.   </body>
  12. </html>

Padėkite tinkintą kodą

Jei reikia, dirbkite su tinkintu CSS, JS ir kt., kad „Bootstrap“ taptų savo nuosavu, naudodami atskirus CSS ir JS failus.

  1. <html>
  2.   <galva>
  3.     <title> „ Bootstrap 101“ šablonas </title>
  4.     <!-- Bootstrap -->
  5.     <link href = "public/css/bootstrap.min.css" rel = "stiliaus lapas" >  
  6.     <!-- Projektas -->
  7.     <link href = "public/css/application.css" rel = "stiliaus lapas" >  
  8.   </head>
  9.   <kūnas>
  10.     <h1> Sveiki, pasauli! </h1>
  11.     <!-- Bootstrap -->
  12.     <script src = "public/js/bootstrap.min.js" ></script> 
  13.     <!-- Projektas -->
  14.     <script src = "public/js/application.js" ></script> 
  15.   </body>
  16. </html>