Кеңейту · Bootstrap қазақ тілінде

Bootstrap негізі LESS көмегімен жасалған, бұл біздің жақсы досымыз Алексис Селлиер жасаған динамикалық стильдер тілі . Ол жүйеге негізделген CSS әзірлеуді жылдамырақ, оңайырақ және қызықты етеді.

Неліктен АЗ?

Bootstrap жасаушылардың бірі бұл туралы қысқаша блог жазбасын жазды, оның қысқаша мазмұны мына жерде:

Bootstrap Sass-пен салыстырғанда Less көмегімен ~6 есе жылдамырақ құрастырады
JavaScript-те азырақ жазылған, бұл Ruby-мен Sass-пен салыстырғанда бізге енуді және түзетуді жеңілдетеді.
Аз - көп; біз CSS-ті жазып, Bootstrap-ті барлығына қолжетімді ететіндей сезінгіміз келеді.

Не кіреді?

CSS кеңейтімі ретінде LESS айнымалыларды, қайта пайдалануға болатын код үзінділеріне арналған миксиндерді, қарапайым математикаға арналған операцияларды, кірістіру және тіпті түс функцияларын қамтиды.

Көбірек білу үшін

Қосымша ақпарат алу үшін http://lesscss.org/ ресми веб-сайтына кіріңіз .

Біздің CSS Less көмегімен жазылғандықтан және айнымалылар мен араластырғыштарды пайдаланатындықтан, оны түпкілікті өндірісті енгізу үшін құрастыру қажет. Міне, осылай.

Ескертпе: GitHub-қа өзгертілген CSS арқылы тарту сұрауын жіберіп жатсаңыз, CSS-ті осы әдістердің кез келгені арқылы қайта құрастыруыңыз керек .

Компиляцияға арналған құралдар

Пәрмен жолы

Пәрмен жолы арқылы компиляциялау үшін GitHub жүйесіндегі жобаны оқудағы нұсқауларды орындаңыз .

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 жүйесінде жасалған тамаша көрінетін LESS редакторы және компиляторы.

CodeKit

Бейресми Mac қолданбасы сияқты бір адам жасаған CodeKit - LESS, SASS, Stylus және CoffeeScript құрастыратын Mac қолданбасы.

Қарапайым

LESS файлдарын апарып тастауға арналған Mac, Linux және Windows қолданбасы. Сонымен қатар, бастапқы код 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 кеңейтілуде

АЗырақ салынған