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

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

Нигә аз?

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

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

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

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

Тулырак

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

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

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

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

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

Команда сызыгы аша компиляцияләү өчен GitHub проект проектындагы күрсәтмәләрне үтәгез .

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-ны ташлап, теләсә нинди веб-проектны тиз башлап җибәрегез . Easyиңел яңарту һәм алга бару өчен махсус стильләр буенча катлам.

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

Соңгы тупланган 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 белән төзелгән