Пашырыць · Twitter Bootstrap на беларускай мове

У аснове Bootstrap ляжыць LESS, дынамічная мова табліц стыляў, створаная нашым добрым сябрам Алексісам Селье . Гэта робіць распрацоўку сістэмнага CSS больш хуткай, прасцейшай і весялейшай.

Чаму МЕНШ?

Адзін са стваральнікаў Bootstrap напісаў кароткае паведамленне ў блогу пра гэта , абагульненае тут:

Bootstrap кампілюецца хутчэй ~у 6 разоў хутчэй з Less у параўнанні з Sass
На JavaScript напісана менш, што палягчае нам паглыбленне і ўнясенне выпраўленняў у параўнанні з Ruby з Sass.
Менш значыць больш; мы хочам адчуваць, што мы пішам CSS і робім Bootstrap даступным для ўсіх.

Што ўключана?

У якасці пашырэння CSS LESS уключае зменныя, міксіны для шматразовых фрагментаў кода, аперацыі для простай матэматыкі, укладвання і нават функцыі колеру.

Даведайцеся больш

Наведайце афіцыйны сайт http://lesscss.org/ , каб даведацца больш.

Паколькі наш CSS напісаны з дапамогай Less і выкарыстоўвае зменныя і міксіны, яго неабходна скампіляваць для канчатковай вытворчасці. Вось як.

Заўвага: калі вы адпраўляеце запыт на выцягванне ў GitHub са змененым CSS, вы павінны перакампіляваць CSS любым з гэтых метадаў.

Інструменты для кампіляцыі

Вузел з make-файлам

Усталюйце кампілятар каманднага радка LESS, JSHint, Recess і uglify-js глабальна з дапамогай npm, выканаўшы наступную каманду:

$ npm install -g less jshint recess uglify-js

Пасля ўстаноўкі проста запусціце makeз кораня загрузачнага каталога, і ўсё гатова.

Акрамя таго, калі ў вас усталяваны watchr , вы можаце запускаць make watchаўтаматычную перабудову загрузніка кожны раз, калі вы рэдагуеце файл у бібліятэцы загрузкі (гэта неабавязкова, проста для зручнасці).

Камандны радок

Усталюйце інструмент каманднага радка 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 - выдатны рэдактар і кампілятар LESS, створаны на аснове Adobe Air.

CodeKit

Створаны тым жа чалавекам, што і неафіцыйнае прыкладанне для Mac, CodeKit - гэта дадатак для Mac, якое кампілюе LESS, SASS, Stylus і CoffeeScript.

Бяспроста

Прыкладанне для Mac, Linux і Windows для кампіляцыі LESS файлаў перацягваннем. Акрамя таго, зыходны код знаходзіцца на GitHub .

Хутка запусціце любы вэб-праект, дадаўшы скампіляваны або скарочаны CSS і JS. Накладвайце індывідуальныя стылі асобна для лёгкага абнаўлення і далейшага абслугоўвання.

Налада структуры файла

Спампуйце апошнюю скампіляваную версію Bootstrap і змясціце яе ў свой праект. Напрыклад, у вас можа быць нешта накшталт гэтага:

  дадатак / ├── макеты / └── шаблоны / агульнадаступныя / ├── css / │ ├── загрузка . мін . css
   ├── js / │ ├── загрузка . мін . 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 = "табліца стыляў" >  
    <!-- Праект -->
    <спасылка 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

Пабудаваны з МЕНШЫМ