Estendi · Bootstrap bil-Malti

Bootstrap huwa magħmul b'INQAS fil-qalba tiegħu, lingwa ta 'stylesheet dinamika maħluqa mill-ħabib tajjeb tagħna, Alexis Sellier . Jagħmel l-iżvilupp tas-CSS ibbażat fuq is-sistemi aktar mgħaġġel, eħfef u aktar divertenti.

Għaliex INQAS?

Wieħed mill-ħallieqa ta' Bootstrap kiteb post ta' malajr fil- blog dwar dan , miġbur fil-qosor hawn:

Bootstrap jikkompila aktar malajr ~ 6x aktar malajr b'Inqas meta mqabbel ma 'Sass
Inqas huwa miktub f'JavaScript, li jagħmilha aktar faċli għalina li ngħaddu u nirranġaw meta mqabbla ma 'Ruby ma' Sass.
Inqas huwa iktar; irridu nħossu li qed niktbu CSS u nagħmlu Bootstrap avviċinabbli għal kulħadd.

X'inhu inkluż?

Bħala estensjoni ta 'CSS, LESS jinkludi varjabbli, mixins għal siltiet ta' kodiċi li jistgħu jerġgħu jintużaw, operazzjonijiet għal matematika sempliċi, nesting, u anke funzjonijiet tal-kulur.

Itagħllem iżjed

Żur il-websajt uffiċjali fuq http://lesscss.org/ biex titgħallem aktar.

Peress li s-CSS tagħna huwa miktub b'Inqas u juża varjabbli u mixins, jeħtieġ li jiġi kkompilat għall-implimentazzjoni tal-produzzjoni finali. Ara kif.

Nota: Jekk qed tissottometti talba ta' pull lil GitHub b'CSS modifikat, trid terġa ' tikkompila s-CSS permezz ta' kwalunkwe minn dawn il-metodi.

Għodda għall-kumpilazzjoni

Linja tal-kmand

Segwi l-istruzzjonijiet fil-proġett readme fuq GitHub għall-kumpilazzjoni permezz tal-linja tal-kmand.

JavaScript

Niżżel l-aħħar Less.js u inkludi t-triq għaliha (u Bootstrap) fil- <head>.

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

Biex tikkompila mill-ġdid il-fajls .less, issalvahom u erġa' tagħbija l-paġna tiegħek. Less.js jiġborhom u jaħżenhom f'ħażna lokali.

App mhux uffiċjali tal-Mac

L-app mhux uffiċjali tal-Mac tara direttorji ta' fajls .less u tiġbor il-kodiċi għal fajls lokali wara kull salvataġġ ta' fajl .less osservat. Jekk tixtieq, tista' taqleb il-preferenzi fl-app għal minifikazzjoni awtomatika u f'liema direttorju jispiċċaw fih il-fajls ikkumpilati.

Aktar apps

Crunch

Crunch huwa editur u kompilatur LESS li jidher tajjeb ħafna mibni fuq Adobe Air.

CodeKit

Maħluq mill-istess raġel bħall-app Mac mhux uffiċjali, CodeKit hija app Mac li tiġbor LESS, SASS, Stylus, u CoffeeScript.

Sempliċi

App Mac, Linux, u Windows għall-kumpilazzjoni tad-drag and drop ta’ LESS files. Barra minn hekk, il- kodiċi tas-sors jinsab fuq GitHub .

Ibda malajr kwalunkwe proġett tal-web billi twaqqa' fis-CSS u JS ikkumpilati jew imminifikati. Saff fuq stili tad-dwana separatament għal titjib faċli u manutenzjoni li jimxu 'l quddiem.

Setup l-istruttura tal-fajl

Niżżel l-aħħar Bootstrap ikkumpilat u poġġi fil-proġett tiegħek. Per eżempju, jista 'jkollok xi ħaġa bħal din:

  app/
      layouts/
      mudelli/
  pubbliku/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Uża mudell tal-bidu

Ikkopja l-HTML bażi li ġej biex tibda.

<html>
  <ras>
    <title> Mudell Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <korp>
    <h1> Hello, dinja! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

Saff fuq kodiċi tad-dwana

Aħdem fis-CSS, JS, u aktar tad-dwana tiegħek kif meħtieġ biex tagħmel Bootstrap tiegħek bil-fajls CSS u JS separati tiegħek.

<html>
  <ras>
    <title> Mudell Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Proġett -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <korp>
    <h1> Hello, dinja! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Proġett -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

L-estensjoni tal-Bootstrap

Mibnija b'INQAS