Berfireh bike · Bootstrap bi kurdî (kurmancî)

Bootstrap di bingehê xwe de bi LESS ve hatî çêkirin, zimanek şêwazek dînamîkî ku ji hêla hevalê me yê baş, Alexis Sellier ve hatî afirandin . Ew pêşveçûna pergalên-based CSS zûtir, hêsantir û bêtir kêfxweş dike.

Çima KÊM?

Yek ji afirînerên Bootstrap li ser vê yekê postek blogek bilez nivîsand , li vir kurt kir:

Bootstrap bi Less re li gorî Sass ~ 6x zûtir berhev dike
Kêmtir di JavaScript-ê de tê nivîsandin, ji me re hêsantir dike ku em li gorî Ruby bi Sass-ê bikevin hundur û paç bikin.
Kêmtir pirtir e; em dixwazin hîs bikin ku em CSS-ê dinivîsin û Bootstrap-ê ji hemîyan re nêzîkatî dikin.

Çi tê de heye?

Wekî dirêjkirina CSS-ê, LESS guhêrbar, mixînên ji bo perçeyên kodê yên ji nû ve bi kar anîn, operasyonên ji bo matematîkî yên hêsan, hêlîn, û hetta fonksiyonên rengîn vedihewîne.

Bêtir hîn bibin

Serdana malpera fermî ya http://lesscss.org/ bikin ku bêtir fêr bibin.

Ji ber ku CSS-ya me bi Less ve hatî nivîsandin û guhêrbar û mixîn bikar tîne, pêdivî ye ku ew ji bo pêkanîna hilberîna paşîn were berhev kirin. Li vir çawa ye.

Nîşe: Heke hûn bi CSS-ya guhertî daxwazek kişandinê ji GitHub re dişînin, divê hûn CSS-ê bi yek ji van rêbazan ji nû ve berhev bikin.

Amûrên berhevkirinê

Node bi makefile

Berhevkarê rêza fermanê LESS, JSHint, Recess, û uglify-js li seranserê cîhanê bi npm ve saz bikin û fermana jêrîn bicîh bikin:

$ npm saz bike -g kêmtir jshint recess uglify-js

Piştî ku hatî saz kirin tenê ji makekoka pelrêça bootstrap-a xwe bimeşîne û hûn hemî amade ne.

Wekî din, heke we watchr saz kiriye, dibe ku hûn make watchher carê ku hûn pelek di lib bootstrap-ê de biguherînin (ev ne hewce ye, tenê rêbazek hêsan e) bi rê ve bibin ku bootstrap bixweber ji nû ve were çêkirin.

Rêza fermanê

Amûra rêza fermanê LESS bi navgîniya Node saz bikin û emrê jêrîn bimeşînin:

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

--compressGer hûn hewl didin ku hin bytes hilînin, pê ewle bin ku hûn di wê fermanê de bicîh bikin!

JavaScript

Less.js-a herî dawî dakêşin û rêça wê (û Bootstrap) di nav <head>.

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

Ji bo ku pelên .less ji nû ve berhev bikin, tenê wan hilînin û rûpela xwe ji nû ve bar bikin. Less.js wan berhev dike û di hilanîna herêmî de hilîne.

Serlêdana nefermî ya Mac

Serlêdana nefermî ya Mac- ê li pelrêçên pelên .kêm temaşe dike û piştî her tomarkirina pelek .kêm hatî temaşekirin kodê li pelên herêmî berhev dike. Heke hûn bixwazin, hûn dikarin tercihên di sepanê de ji bo kêmkirina otomatîkî biguhezînin û pelên berhevkirî di kîjan pelrêça de diqedin.

Zêdetir sepan

Crunch

Crunch edîtor û berhevkarek Kêmtir e ku li ser Adobe Air hatî çêkirin e.

CodeKit

CodeKit ji hêla heman zilamê ve wekî sepana Mac-ê ya nefermî ve hatî afirandin, serîlêdanek Mac-ê ye ku LESS, SASS, Stylus û CoffeeScript berhev dike.

Simpless

Serlêdana Mac, Linux, û Windows-ê ji bo berhevkirina pelên KÊMÊ bikişîne û davêje. Zêdeyî, koda çavkaniyê li ser GitHub e .

Zû projeyek malperê bi avêtina CSS û JS-ya berhevkirî an kêmkirî dest pê bikin. Ji bo nûvekirin û domandina hêsan ku ber bi pêş ve diçin, li ser şêwazên xwerû ji hev cihê bikin.

Struktura pelê sazkirinê

Bootstrap-a herî dawî ya berhevkirî dakêşin û têxin nav projeya xwe. Mînakî, dibe ku we tiştek wusa hebe:

  sepan/
      layouts/
      şablon/
  alenî/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Şablona destpêkê bikar bînin

Ji bo destpêkirina HTML-ya bingehîn a jêrîn kopî bikin.

<html>
  <serê>
    <title> Şablon Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <beden>
    <h1> Silav, dinya! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" </script> 
  </body>
</html>

Layer li ser koda xwerû

Di CSS, JS, û bêtirên xweyên xwerû de wekî ku hewce be bixebitin da ku Bootstrap-ê bi pelên xweyên CSS û JS-ê yên cihêreng re bikin.

<html>
  <serê>
    <title> Şablon Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Proje -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <beden>
    <h1> Silav, dinya! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" </script> 
    <!-- Proje -->
    <script src = "public/js/application.js" </script> 
  </body>
</html>

Berfirehkirina Bootstrap

Bi LESS ve hatî çêkirin