Прошири · Twitter Bootstrap на македонски

Bootstrap е направен со LESS во неговото јадро, динамичен јазик за стилски лист создаден од нашиот добар пријател, Алексис Селиер . Го прави развојот на CSS базиран на системи побрзо, полесно и позабавно.

Зошто ПОМАЛКУ?

Еден од креаторите на Bootstrap напиша брз блог пост за ова , сумиран овде:

Bootstrap се компајлира побрзо ~ 6x побрзо со Less во споредба со Sass
Помалку е напишано во JavaScript, што ни го олеснува нуркањето и закрпи во споредба со Ruby со Sass.
Помалку е повеќе; сакаме да се чувствуваме како да пишуваме CSS и го правиме Bootstrap достапен за сите.

Што е вклучено?

Како продолжување на CSS, LESS вклучува променливи, мешавини за фрагменти од код што може да се користат повеќекратно, операции за едноставна математика, вгнездување, па дури и функции за боја.

Научи повеќе

Посетете ја официјалната веб-страница на http://lesscss.org/ за да дознаете повеќе.

Бидејќи нашиот CSS е напишан со Less и користи променливи и миксини, треба да се компајлира за финална имплементација на производството. Еве како.

Забелешка: Ако поднесувате барање за повлекување до GitHub со изменет CSS, мора повторно да го компајлирате CSS преку кој било од овие методи.

Алатки за составување

Јазол со фајл

Инсталирајте го компајлерот на командната линија LESS, JSHint, Recess и uglify-js глобално со npm со извршување на следнава команда:

$ npm инсталирај -g помалку jshint вдлабнатина uglify-js

Откако ќе се инсталира, само стартувајте makeод коренот на директориумот за подигање и сè сте подготвени.

Дополнително, ако имате инсталирано Watchr , може да се кандидира make watchза автоматско обновување на bootstrap секој пат кога уредувате датотека во подигнувачката lib (ова не е потребно, само практичен метод).

Командна линија

Инсталирајте ја алатката за командната линија LESS преку Node и извршете ја следнава команда:

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

Бидете сигурни да вклучите --compressво таа команда ако се обидувате да зачувате некои бајти!

Javascript

Преземете го најновиот Less.js и вклучете ја патеката до неа (и Bootstrap) во <head>.

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

За да ги прекомпајлирате датотеките .less, само зачувајте ги и повторно вчитајте ја вашата страница. Less.js ги компајлира и ги складира во локално складирање.

Неофицијална апликација за Mac

Неофицијалната апликација за Mac гледа директориуми со датотеки .less и го компајлира кодот во локални датотеки по секое зачувување на гледана датотека .less. Ако сакате, можете да ги префрлите параметрите во апликацијата за автоматско минимизирање и во кој директориум завршуваат компајлираните датотеки.

Повеќе апликации

Крцкање

Crunch е извонреден уредник и компајлер за ПОМАЛКУ, изграден на Adobe Air.

CodeKit

Создадена од истиот човек како и неофицијалната апликација за Mac, CodeKit е апликација за Mac која компајлира LESS, SASS, Stylus и CoffeeScript.

Едноставно

Апликација за Mac, Linux и Windows за влечење и пушти компајлирање на ПОМАЛКУ датотеки. Плус, изворниот код е на GitHub .

Брзо стартувајте кој било веб-проект со пуштање на компајлираните или минифицираните CSS и JS. Слој на сопствени стилови одделно за лесни надградби и одржување напред.

Поставете структура на датотека

Преземете го најновиот компајлиран Bootstrap и ставете го во вашиот проект. На пример, може да имате нешто како ова:

  апликација / ├── распоред / └── шаблони / јавни / ├── css / │ ├── подигање . мин . css
   ├── js / │ ├── bootstrap . мин . js
   └── img / ├── глификони - полтрони . png
       └── глификони - полтрони - бели . png

Користете го шаблонот за стартер

Копирајте го следниов основен HTML за да започнете.

<html>
  <глава>
    Шаблон < title> Bootstrap 101 </title>
    <!-- Bootstrap -->
    <врска href = "public/css/bootstrap.min.css" rel = "лист на стилови" >  
  </head>
  <тело>
    <h1> Здраво, свет! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" </script> 
  </body>
</html>

Слој на сопствен код

Работете во вашите сопствени CSS, JS и повеќе колку што е потребно за да го направите Bootstrap ваш со ваши посебни CSS и JS датотеки.

<html>
  <глава>
    Шаблон < title> Bootstrap 101 </title>
    <!-- Bootstrap -->
    <врска href = "public/css/bootstrap.min.css" rel = "лист на стилови" >  
    <!-- Проект -->
    <link href = "public/css/application.css" rel = "стил лист" >  
  </head>
  <тело>
    <h1> Здраво, свет! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" </script> 
    <!-- Проект -->
    <script src = "public/js/application.js" </script> 
  </body>
</html>

Проширување на Bootstrap

Изграден со ПОМАЛКУ