Ymestyn · Bootstrap yn Gymraeg

Gwneir Bootstrap gyda LLAI yn ei graidd, iaith arddull ddeinamig a grëwyd gan ein ffrind da, Alexis Sellier . Mae'n gwneud datblygu CSS sy'n seiliedig ar systemau yn gyflymach, yn haws ac yn fwy o hwyl.

Pam LLAI?

Ysgrifennodd un o grewyr Bootstrap bost blog cyflym am hyn , wedi'i grynhoi yma:

Mae Bootstrap yn llunio'n gyflymach ~ 6x yn gyflymach gyda Llai o'i gymharu â Sass
Mae llai wedi'i ysgrifennu yn JavaScript, gan ei gwneud hi'n haws i ni blymio i mewn a chlytio o'i gymharu â Ruby gyda Sass.
Mae llai yn fwy; rydyn ni eisiau teimlo ein bod ni'n ysgrifennu CSS ac yn gwneud Bootstrap yn hygyrch i bawb.

Beth sy'n cael ei gynnwys?

Fel estyniad o CSS, mae LLAI yn cynnwys newidynnau, cymysgeddau ar gyfer pytiau o god y gellir eu hailddefnyddio, gweithrediadau ar gyfer swyddogaethau mathemateg syml, nythu, a hyd yn oed lliw.

Dysgu mwy

Ewch i'r wefan swyddogol yn http://lesscss.org/ i ddysgu mwy.

Gan fod ein CSS wedi'i ysgrifennu â Llai ac yn defnyddio newidynnau a chymysgeddau, mae angen ei lunio ar gyfer gweithredu'r cynhyrchiad terfynol. Dyma sut.

Nodyn: Os ydych chi'n cyflwyno cais tynnu i GitHub gyda CSS wedi'i addasu, rhaid i chi ail-grynhoi'r CSS trwy unrhyw un o'r dulliau hyn.

Offer ar gyfer llunio

Llinell orchymyn

Dilynwch y cyfarwyddiadau yn readme y prosiect ar GitHub i'w lunio trwy linell orchymyn.

JavaScript

Lawrlwythwch y Less.js diweddaraf a chynnwys y llwybr ato (a Bootstrap) yn y ffeil <head>.

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

I ail-grynhoi'r ffeiliau .less, arbedwch nhw ac ail-lwythwch eich tudalen. Mae Less.js yn eu llunio ac yn eu storio mewn storfa leol.

Ap Mac answyddogol

Mae ap Mac answyddogol yn gwylio cyfeiriaduron o ffeiliau .less ac yn llunio'r cod i ffeiliau lleol ar ôl pob arbediad o ffeil .less a wylir. Os dymunwch, gallwch newid dewisiadau yn yr app ar gyfer miniogi awtomatig a pha gyfeiriadur y mae'r ffeiliau a gasglwyd yn y pen draw ynddo.

Mwy o apiau

Gwasgfa

Mae Crunch yn olygydd a chrynhoydd LLAI sy'n edrych yn wych wedi'i adeiladu ar Adobe Air.

CodeKit

Wedi'i greu gan yr un dyn â'r app Mac answyddogol, mae CodeKit yn app Mac sy'n llunio LLAI, SASS, Stylus, a CoffeeScript.

Syml

Ap Mac, Linux, a Windows ar gyfer llusgo a gollwng casglu ffeiliau LLAI. Hefyd, mae'r cod ffynhonnell ar GitHub .

Dechreuwch unrhyw brosiect gwe yn gyflym trwy ollwng y CSS a JS sydd wedi'u llunio neu eu minimeiddio. Haen ar arddulliau arfer ar wahân ar gyfer uwchraddio a chynnal a chadw hawdd wrth symud ymlaen.

Gosod strwythur ffeil

Dadlwythwch y Bootstrap diweddaraf a'i osod yn eich prosiect. Er enghraifft, efallai y bydd gennych rywbeth fel hyn:

  ap/
      gosodiadau /
      templedi/
  cyhoeddus /
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Defnyddiwch dempled cychwynnol

Copïwch yr HTML sylfaen canlynol i ddechrau.

<html>
  <pen>
    <title> Templed Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "ddalen arddull" >  
  </pen>
  <corff>
    <h1> Helo, fyd! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </corff>
</html>

Haen ar god personol

Gweithiwch yn eich CSS personol, JS, a mwy yn ôl yr angen i wneud Bootstrap yn un eich hun gyda'ch ffeiliau CSS a JS ar wahân eich hun.

<html>
  <pen>
    <title> Templed Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "ddalen arddull" >  
    <!-- Prosiect -->
    <link href = "public/css/application.css" rel = "ddalen arddull" >  
  </pen>
  <corff>
    <h1> Helo, fyd! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Prosiect -->
    <script src = "public/js/application.js" ></script> 
  </corff>
</html>

Ymestyn Bootstrap

Adeiladwyd gyda LLAI