Eketsa · Bootstrap ka puo ya Sesotho

Bootstrap e entsoe ka LESS motheong oa eona, puo e matla ea li-stylesheet e entsoeng ke motsoalle oa rona oa hlooho ea khomo, Alexis Sellier . E etsa hore ho nts'etsapele CSS e thehiloeng ho sistimi kapele, ho be bonolo, hape ho be monate.

Ke Hobane'ng ha HO LE TLASE?

E mong oa baqapi ba Bootstrap o ngotse poso ea blog e potlakileng mabapi le sena , e akaretsoang mona:

Bootstrap e kopanya kapele ~ 6x ka potlako le e Nyane ha e bapisoa le Sass
E fokolang e ngotsoe ka JavaScript, e re nolofalletsa ho qoela le ho pata ha ho bapisoa le Ruby le Sass.
Nyenyane ke ho feta; re batla ho utloa eka re ngola CSS le ho etsa hore Bootstrap e atamelehe ho bohle.

Ho kenyelelitsoe eng?

E le katoloso ea CSS, LESS e kenyelletsa mefuta e fapaneng, li-mixins bakeng sa likaroloana tse ka sebelisoang hape tsa khoutu, ts'ebetso ea lipalo tse bonolo, ho etsa sehlaha, esita le mesebetsi ea mebala.

Ithute haholoanyane

Etela webosaete ea semmuso ho http://lesscss.org/ ho ithuta haholoanyane.

Kaha CSS ea rona e ngotsoe ka Tlase 'me e sebelisa mefuta-futa le metsoako, e hloka ho bokelloa bakeng sa ts'ebetsong ea ho qetela ea tlhahiso. Tsela ke ena.

Tlhokomeliso: Haeba u fana ka kopo ea ho hula ho GitHub ka CSS e fetotsoeng, u tlameha ho khutlisa CSS ka e 'ngoe ea mekhoa ena.

Lisebelisoa tsa ho bokella

Node e nang le makefile

Kenya khokahanyo ea taelo ea LESS, JSHnt, Recess, le uglip-js lefatšeng ka bophara ka npm ka ho sebelisa taelo e latelang:

$ npm kenya -g tlase jshint recess ugify-js

Hang ha e kenyelitsoe feela matha makeho tloha motso oa bukana ea hau ea bootstrap 'me u se u hlophisitsoe.

Ho phaella moo, haeba u kentse watchr , u ka 'na ua matha make watchho etsa hore bootstrap e tsosolosoe nako le nako ha u hlophisa faele ho bootstrap lib (sena ha se hlokehe, mokhoa o bonolo feela).

Mola oa taelo

Kenya sesebelisoa sa mola oa taelo oa LESS ka Node 'me u tsamaise taelo e latelang:

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

Etsa bonnete ba hore o kenyelletsa --compresstaelong eo haeba o leka ho boloka li-byte tse ling!

JavaScript

Khoasolla tsa morao-rao Les.js 'me u kenyelle tsela e eang ho eona (le Bootstrap) ho <head>.

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

Ho bokella lifaele tsa .less, li boloke feela 'me u kenye leqephe la hau bocha. Less.js ea li bokella le ho li boloka polokelong ea lehae.

Sesebelisoa sa Mac se seng molaong

Sesebelisoa se seng sa semmuso sa Mac se shebella li-directory tsa lifaele tse .less mme se bokella khoutu ho lifaele tsa lehae kamora ho boloka nako le nako ha faele e shebeliloeng .less. Haeba u rata, u ka fetola likhetho ho app bakeng sa miniifying ea othomathiki le hore na lifaele tse hlophisitsoeng li qetella li le ho eng.

Lisebelisoa tse ling

Kgutla

Crunch ke mohlophisi ea shebahalang hantle haholo LESS le moqapi o hahiloeng holim'a Adobe Air.

CodeKit

CodeKit e entsoe ke mohlankana ea tšoanang le app e seng ea semmuso ea Mac, ke sesebelisoa sa Mac se kopanyang LESS, SASS, Stylus, le CoffeeScript.

E bonolo

Mac, Linux, le Windows app bakeng sa ho hula le ho theola lifaele tse LES. Ho feta moo, khoutu ea mohloli e ho GitHub .

Qala morero ofe kapa ofe oa tepo ka potlako ka ho kenya CSS le JS tse hlophisitsoeng kapa tse ntlafalitsoeng. Lokisetsa litaele tsa moetlo ka thoko bakeng sa lintlafatso tse bonolo le tlhokomelo e eang pele.

Seta sebopeho sa faele

Khoasolla Bootstrap ea morao-rao e hlophisitsoeng 'me u e kenye morerong oa hau. Ka mohlala, u ka ba le ntho e kang ena:

  app/
      dipeakanyo/
      litempele/
  phatlalatsa/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Sebelisa template ea ho qala

Kopitsa HTML ea motheo e latelang ho qala.

<html>
  <hlooho>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </ hloho>
  <'mele>
    <h1> Lumela, lefatše! </ h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </ mmele>
</html>

Laya ho khoutu e ikhethileng

Sebetsa ka CSS ea hau ea tloaelo, JS, le tse ling ha ho hlokahala ho etsa Bootstrap ea hau ka lifaele tsa hau tse arohaneng tsa CSS le JS.

<html>
  <hlooho>
    <title> Bootstrap 101 Template </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Morero -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </ hloho>
  <'mele>
    <h1> Lumela, lefatše! </ h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Morero -->
    <script src = "public/js/application.js" ></script> 
  </ mmele>
</html>

Ho eketsa Bootstrap

E hahiloe ka TLHOKOMELO