Киңәйтү · Ботстрап татар телендә

Ботстрап LESS белән ясалган, динамик стиль таблицасы теле, безнең яхшы дустыбыз Алексис Селлиер тарафыннан ясалган . Бу системага нигезләнгән CSSны тизрәк, җиңелрәк һәм кызыклырак итә.

Нигә аз?

Bootstrap ясаучыларның берсе бу турыда кыскача блог язды, монда йомгак ясады:

Bootstrap тизрәк ~ 6x тизрәк компиляцияләнә, Sass белән чагыштырганда азрак
JavaScript белән азрак язылган, Ruby белән Sass белән чагыштырганда, суга чуму җиңелрәк.
Азрак; без CSS язабыз һәм Bootstrapны барысына да якынайтабыз кебек тоелырга телибез.

Нәрсә кертелгән?

CSS киңәйтү буларак, LESS үзгәрүчәннәрне, кабат кулланыла торган кодның фрагментлары өчен миксиннарны, гади математика өчен операцияләр, оя кору, хәтта төс функцияләрен үз эченә ала.

Тулырак

Күбрәк белү өчен http://lesscss.org/ рәсми сайтына керегез .

Безнең CSS азрак язылган һәм үзгәрүчәннәр һәм миксиннар кулланганлыктан, аны соңгы җитештерүне тормышка ашыру өчен тупларга кирәк. Менә ничек.

Искәрмә: Әгәр сез GitHub'ка үзгәртелгән CSS белән тарту соравын җибәрәсез икән, сез бу ысулларның теләсә кайсысы аша CSSны компиляцияләргә тиеш .

Компиляцияләү өчен кораллар

Макфил белән төен

LESS командование компилярын урнаштырыгыз, JSHint, Recess, һәм uglify-js глобаль рәвештә npm белән түбәндәге боерыкны эшләп:

$ npm урнаштыру -g азрак jshint каникуллары uglify-js

Урнаштырылганнан соң make, сезнең bootstrap каталогының тамырыннан эшләгез һәм сез барыгыз да әзер.

Өстәвенә, сездә сәгать урнаштырылган булса make watch, bootstrap lib-та файлны редакцияләгән саен bootstrap автоматик рәвештә яңадан торгызылырга мөмкин (бу кирәк түгел, уңайлык ысулы гына).

Команда сызыгы

Node аша LESS командование коралын урнаштырыгыз һәм түбәндәге боерыкны эшләгез:

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

Әгәр дә сез кайбер байтларны --compressсакларга тырышсагыз, бу боерыкка кертегез!

JavaScript

Соңгы Less.js -ны йөкләгез һәм аңа юлны (һәм Bootstrap) кертегез <head>.

<сылтама rel = "стиль таблицасы / азрак" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" > </script>

.Лайсыз файлларны кабатлау өчен, аларны саклагыз һәм битегезне яңадан йөкләгез. Less.js аларны туплый һәм җирле саклагычта саклый.

Рәсми булмаган Mac кушымтасы

Рәсми булмаган Mac кушымтасы .less файлларның каталогларын карый һәм караган .less файлны саклаганнан соң кодны җирле файлларга туплый. Сез теләсәгез, кушымтадагы өстенлекләрне автоматик минимальләштерү өчен һәм тупланган файлларның кайсы каталог белән тәмамлануы турында күчә аласыз.

Күбрәк кушымталар

Бәрелү

Crunch - Adobe Air өстендә төзелгән бик яхшы LESS редакторы һәм компиляциясе.

CodeKit

Рәсми булмаган Mac кушымтасы белән бер үк егет тарафыннан ясалган CodeKit - LESS, SASS, Stylus һәм CoffeeScript туплаучы Mac кушымтасы.

Гади

LESS файлларын тарту һәм төшерү өчен Mac, Linux, һәм Windows кушымтасы. Моннан тыш, чыганак коды GitHub'та .

Anyыелган яки минималь CSS һәм JS-ны ташлап, теләсә нинди веб-проектны тиз башлап җибәрегез . Алга бару өчен җиңел яңарту һәм хезмәт күрсәтү өчен махсус стильләр катламы.

Файл структурасын урнаштыру

Соңгы тупланган Bootstrap-ны йөкләгез һәм сезнең проектка урнаштырыгыз. Мәсәлән, сездә мондый әйбер булырга мөмкин:

  кушымта /
      макетлар /
      шаблоннар /
  җәмәгать /
      css /
          bootstrap.min.css
      js /
          bootstrap.min.js
      img /
          glyphicons-halflings.png
          глификон-ярты-ак.пнг

Стартер шаблонын кулланыгыз

Башлау өчен түбәндәге HTML ны күчерегез.

<html>
  <head>
    <title> Bootstrap 101 Шаблон </title>
    <! - Bootstrap ->
    <link href = "public / css / bootstrap.min.css" rel = "стиль таблицасы" >  
  </head>
  <body>
    <h1> Сәлам, дөнья! </h1>
    <! - Bootstrap ->
    <script src = "public / js / bootstrap.min.js" > </script> 
  </body>
</html>

Заказ коды

Bootstrap-ны үзегезнең аерым CSS һәм JS файлларыгыз белән ясау өчен, үзегезнең CSS, JS һәм тагын да күбрәк эшләгез.

<html>
  <head>
    <title> Bootstrap 101 Шаблон </title>
    <! - Bootstrap ->
    <link href = "public / css / bootstrap.min.css" rel = "стиль таблицасы" >  
    <! - Проект ->
    <link href = "public / css / application.css" rel = "стиль таблицасы" >  
  </head>
  <body>
    <h1> Сәлам, дөнья! </h1>
    <! - Bootstrap ->
    <script src = "public / js / bootstrap.min.js" > </script> 
    <! - Проект ->
    <script src = "public / js / application.js" > </script> 
  </body>
</html>

Ботстрапны киңәйтү

LESS белән төзелгән