Wonjezerani · Bootstrap m’chinenero cha Cheva

Bootstrap imapangidwa ndi LESS pachimake, chilankhulo chosinthika chamitundu yopangidwa ndi bwenzi lathu lapamtima, Alexis Sellier . Zimapangitsa kupanga CSS yokhazikika pamakina mwachangu, kosavuta, komanso kosangalatsa.

Chifukwa chiyani ZOCHEPA?

M'modzi mwa omwe adapanga Bootstrap adalemba positi mwachangu paza izi , mwachidule apa:

Bootstrap imapanga mwachangu ~ 6x mwachangu ndi Zochepa poyerekeza ndi Sass
Zochepa zalembedwa mu JavaScript, zomwe zimapangitsa kuti zikhale zosavuta kwa ife kulowa mkati ndikuyika chigamba poyerekeza ndi Ruby ndi Sass.
Zochepa ndi zambiri; tikufuna kumva ngati tikulemba CSS ndikupanga Bootstrap kufikika kwa onse.

Zomwe zikuphatikizidwa?

Monga chowonjezera cha CSS, LESS imaphatikizapo zosinthika, zosakaniza za ma code osinthika, magwiridwe antchito a masamu osavuta, zisa, ngakhale mitundu.

Dziwani zambiri

Pitani patsamba lovomerezeka pa http://lesscss.org/ kuti mudziwe zambiri.

Popeza CSS yathu idalembedwa ndi Zochepa ndipo imagwiritsa ntchito zosinthika ndi zosakaniza, ziyenera kupangidwa kuti zitheke kupanga komaliza. Umu ndi momwe.

Zindikirani: Ngati mukutumiza pempho la kukoka ku GitHub yokhala ndi CSS yosinthidwa, muyenera kubwezeretsanso CSS kudzera mwa njira izi.

Zida zopangira

Node yokhala ndi makefile

Ikani makina a LESS command line compiler, JSHint, Recess, ndi uglip-js padziko lonse lapansi ndi npm poyendetsa lamulo ili:

$ npm install -g zochepa jshint recess ugify-js

Mukangoyika, ingothamanga makekuchokera muzu wa bootstrap directory ndipo mwakonzeka.

Kuphatikiza apo, ngati mwayika watchr , mutha kuthamanga make watchkuti bootstrap imangidwenso nthawi zonse mukasintha fayilo mu bootstrap lib (izi sizofunikira, njira yosavuta).

Mzere wolamula

Ikani chida cha mzere wa LESS kudzera pa Node ndikuyendetsa lamulo ili:

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

Onetsetsani kuti muphatikizepo --compresslamuloli ngati mukuyesera kusunga ma byte ena!

JavaScript

Tsitsani zaposachedwa za Les.js ndikuphatikiza njira yopitako (ndi Bootstrap) mu fayilo ya <head>.

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

Kuti mukonzenso mafayilo a .less, ingowasunga ndikutsitsanso tsamba lanu. Less.js amazipanga ndikuzisunga m'malo osungira kwanuko.

Pulogalamu ya Mac yosavomerezeka

Pulogalamu yosavomerezeka ya Mac imayang'ana maulozera a mafayilo .less ndikuphatikiza ma code kumafayilo am'deralo pambuyo pa kusungidwa kulikonse kwa fayilo yowonera .less. Ngati mukufuna, mutha kusintha zokonda mu pulogalamuyo kuti muzingodzipangira zokha komanso kuti mafayilo omwe aphatikizidwa amatheramo.

Mapulogalamu ena

Crunch

Crunch ndiwowoneka bwino kwambiri wa LESS mkonzi komanso wopanga zinthu zomangidwa pa Adobe Air.

KodiKit

Wopangidwa ndi munthu yemweyo ngati pulogalamu ya Mac yosavomerezeka, CodeKit ndi pulogalamu ya Mac yomwe imapanga LESS, SASS, Stylus, ndi CoffeeScript.

Zosavuta

Mac, Linux, ndi Windows app pokoka ndikuponya mafayilo Ochepa. Kuphatikiza apo, code source ili pa GitHub .

Yambitsani mwachangu projekiti iliyonse yapaintaneti poponya CSS yophatikizidwa kapena yochepetsedwa ndi JS. Sanjikani masitayelo amtundu padera kuti mukweze mosavuta ndikukonza kupita patsogolo.

Kupanga mawonekedwe a fayilo

Tsitsani Bootstrap yaposachedwa ndikuyika mu projekiti yanu. Mwachitsanzo, mungakhale ndi chinthu chonga ichi:

  pulogalamu/
      masanjidwe/
      ma tempulo/
  pagulu/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Gwiritsani ntchito template yoyambira

Lembani HTML yoyambira yotsatirayi kuti muyambe.

<html>
  <mutu>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </mutu>
  <thupi>
    <h1> Moni, dziko! </ h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </ thupi>
</html>

Layer pa code code

Gwirani ntchito mu CSS yanu, JS, ndi zina zambiri momwe mungapangire Bootstrap kukhala yanu ndi mafayilo anu osiyana a CSS ndi JS.

<html>
  <mutu>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Ntchito -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </mutu>
  <thupi>
    <h1> Moni, dziko! </ h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Ntchito -->
    <script src = "public/js/application.js" ></script> 
  </ thupi>
</html>

Kuwonjezera Bootstrap

Yomangidwa ndi LESS