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

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

Неліктен АЗ?

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

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

Не кіреді?

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

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

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

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

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

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

makefile бар түйін

Келесі пәрменді іске қосу арқылы LESS пәрмен жолы компиляторын, JSHint, Recess және uglify-js жаһандық npm көмегімен орнатыңыз:

$ npm орнату -g аз jshint үзіліс uglify-js

Орнатқаннан кейін makeжүктеу каталогының түбірінен іске қосыңыз және бәрі дайын.

Бұған қоса, егер сізде watchr орнатылған make watchболса, bootstrap lib ішіндегі файлды өңдеген сайын жүктеуді автоматты түрде қайта құру үшін іске қосуға болады (бұл қажет емес, жай ғана ыңғайлы әдіс).

Пәрмен жолы

Түйін арқылы LESS пәрмен жолы құралын орнатыңыз және келесі пәрменді орындаңыз:

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

CodeKit

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

Қарапайым

LESS файлдарын апарып тастауға арналған Mac, Linux және Windows қолданбасы. Сонымен қатар, бастапқы код GitHub жүйесінде .

Кез келген веб-жобаны құрастырылған немесе кішірейтілген CSS және JS ішіне түсіру арқылы жылдам бастаңыз . Оңай жаңарту және техникалық қызмет көрсету үшін алға қарай жылжыту үшін теңшелетін стильдерді бөлек орналастырыңыз.

Файл құрылымын орнату

Ең соңғы құрастырылған Bootstrap нұсқасын жүктеп алып, жобаңызға орналастырыңыз. Мысалы, сізде келесідей нәрсе болуы мүмкін:

  қолданба / ├── макеттер / └── үлгілер / жалпы / ├── css / │ ├── жүктеу жолы . мин . css
   ├── js / │ ├── жүктеу жолағы . мин . js
   └── img / ├── глификондар - жартықұстар . png
       └── глификондар - жартылай балықтар - ақ . 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 кеңейтілуде

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