Кеңейтүү · Bootstrap Кыргызча

Bootstrap негизги LESS менен жасалган, биздин жакшы досубуз Алексис Селлиер тарабынан түзүлгөн динамикалык стилдер жадыбалынын тили . Бул системаларга негизделген CSS иштеп чыгууну тезирээк, оңой жана кызыктуураак кылат.

Эмне үчүн АЗ?

Bootstrap'тин жаратуучуларынын бири бул жөнүндө кыскача блог постун жазган, бул жерде кыскача:

Bootstrap Sassга салыштырмалуу Less менен ~6x тезирээк түзүлөт
JavaScript'те азыраак жазылган, бул бизге Ruby менен Sass менен салыштырганда чөмүлүүнү жана оңдоону жеңилдетет.
азыраак - көбүрөөк; биз CSS жазып жаткандай сезилгибиз келет жана Bootstrap баарына жеткиликтүү болот.

Эмне камтылган?

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

Көбүрөөк билүү

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

Биздин CSS Less менен жазылгандыктан жана өзгөрмөлөрдү жана аралашмаларды колдонгондуктан, аны акыркы өндүрүштү ишке ашыруу үчүн компиляциялоо керек. Мына кантип.

Эскертүү: Эгерде сиз GitHub'ка өзгөртүү өтүнүчүн CSS менен жөнөтүп жатсаңыз, анда сиз CSSти ушул ыкмалардын бири аркылуу кайра компиляциялашыңыз керек .

Компиляция үчүн куралдар

Command line

Буйрук сабы аркылуу компиляциялоо үчүн GitHub'тагы долбоордун Readmeдеги нускамаларды аткарыңыз .

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

Crunch – бул Adobe Airде курулган эң сонун LESS редактору жана компилятору.

CodeKit

Бейрасмий Mac колдонмосу менен бир эле жигит тарабынан түзүлгөн CodeKit – LESS, SASS, Stylus жана CoffeeScriptти түзгөн Mac колдонмосу.

Жөнөкөй

Mac, Linux жана Windows колдонмосу LESS файлдарын сүйрөп барып түшүрүү үчүн. Мындан тышкары, булак коду GitHub .

Компиляцияланган же кичирейтилген CSS жана JS файлдарын таштап, каалаган веб-долбоорду тез баштаңыз . Оңой жаңыртуу жана алдыга жылдыруу үчүн ыңгайлаштырылган стилдерди өзүнчө катмарлаңыз.

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

Акыркы түзүлгөн Bootstrapти жүктөп алып, долбооруңузга жайгаштырыңыз. Мисалы, сизде мындай болушу мүмкүн:

  колдонмо/
      макеттер/
      шаблондор/
  коомдук/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Стартер үлгүсүн колдонуңуз

Баштоо үчүн төмөнкү базалык HTMLди көчүрүңүз.

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

Ыңгайлаштырылган код боюнча катмар

Bootstrap'ти өзүңүздүн өзүнчө CSS жана JS файлдарыңыз менен өзүңүздүкү кылуу үчүн, керек болсо, ыңгайлаштырылган CSS, JS жана башкаларда иштеңиз.

<html>
  <баш>
    <title> Bootstrap 101 шаблону </title>
    <!-- Bootstrap -->
    <link 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 кеңейтилүүдө

АЗ менен курулган