Bootstrap CSS құру үшін қолданылатын айнымалы мәндердің, миксиндердің және т.б. артықшылықтарын пайдалану үшін LESS , CSS препроцессоры арқылы Bootstrap қолданбасын теңшеңіз және кеңейтіңіз .
Bootstrap негізі LESS көмегімен жасалған, бұл біздің жақсы досымыз Алексис Селлиер жасаған динамикалық стильдер тілі . Ол жүйеге негізделген CSS әзірлеуді жылдамырақ, оңайырақ және қызықты етеді.
CSS кеңейтімі ретінде LESS айнымалыларды, қайта пайдалануға болатын код үзінділеріне арналған миксиндерді, қарапайым математикаға арналған операцияларды, кірістіру және тіпті түс функцияларын қамтиды.
CSS-те түстер мен пиксель мәндерін басқару әдетте көшіру мен қоюға толы аздап ауыруы мүмкін. LESS параметрімен емес — айнымалылар ретінде түстерді немесе пиксель мәндерін тағайындаңыз және оларды бір рет өзгертіңіз.
Бұл үш шекаралық радиус декларациясын әдеттегі CSS-де жасау керек пе? Енді олар кез келген жерде қайта пайдалануға болатын миксиндердің, код үзінділерінің көмегімен бір жолға төмендеді.
Операциялармен жылдам математиканы орындау арқылы торыңызды, жетекші және аса икемді етіңіз. CSS ақыл-ойына жету жолын көбейтіңіз, бөліңіз, қосыңыз және шегеріңіз.
@linkColor |
#08c | Әдепкі сілтеме мәтінінің түсі | |
@linkColorHover |
darken(@linkColor, 15%) |
Әдепкі сілтеме мәтінінің меңзер түсі |
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6,382978723% |
@fluidGridGutterWidth |
2,127659574% |
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
@black |
#000 | |
@grayDarker |
№222 | |
@grayDark |
№333 | |
@gray |
№555 | |
@grayLight |
#999 | |
@grayLighter |
#еее | |
@white |
#фф |
@blue |
#049кдб | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Негізгі миксин негізінен CSS үзіндісі үшін қосу немесе ішінара болып табылады. Олар CSS сыныбы сияқты жазылған және оларды кез келген жерде шақыруға болады.
- . элемент {
- . clearfix ();
- }
Параметрлік араластырғыш негізгі миксин сияқты, бірақ ол сонымен қатар қосымша әдепкі мәндері бар параметрлерді (осыдан атауы) қабылдайды.
- . элемент {
- . шекара - радиус ( 4px );
- }
Bootstrap миксиндерінің барлығы дерлік mixins.less ішінде сақталады, тамаша утилита .less файлы, ол миксерді құралдар жинағындағы .less файлдарының кез келгенінде пайдалануға мүмкіндік береді.
Сондықтан, барын пайдаланыңыз немесе қажетінше өзіңізді қосыңыз.
Миксин | Параметрлер | Қолданылуы |
---|---|---|
.clearfix() |
жоқ | Ішіндегі қалтқыларды тазалау үшін кез келген ата-анаға қосыңыз |
.tab-focus() |
жоқ | Webkit фокус стилін және Firefox контурын дөңгелектеңіз |
.center-block() |
жоқ | Блок деңгейіндегі элементті автоматты түрде орталықтандыруmargin: auto |
.ie7-inline-block() |
жоқ | display: inline-block IE7 қолдауын алу үшін әдеттегіге қосымша пайдаланыңыз |
.size() |
@height: 5px, @width: 5px |
Бір жолға биіктік пен енді жылдам орнатыңыз |
.square() |
@size: 5px |
.size() Ені мен биіктігін бірдей мән ретінде орнату үшін құрастырылады |
.opacity() |
@opacity: 100 |
Бүкіл сандармен мөлдірлік пайызын орнатыңыз (мысалы, «50» немесе «75») |
Миксин | Параметрлер | Қолданылуы |
---|---|---|
.placeholder() |
@color: @placeholderText |
placeholder Енгізулер үшін мәтін түсін орнатыңыз |
Миксин | Параметрлер | Қолданылуы |
---|---|---|
#font > #family > .serif() |
жоқ | Элементті серифтік шрифт стегін пайдаланатын етіп жасаңыз |
#font > #family > .sans-serif() |
жоқ | Элементті sans-serif қаріп стекін пайдалануды жасаңыз |
#font > #family > .monospace() |
жоқ | Элементті монокеңістік шрифт стекін пайдаланатын етіп жасаңыз |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Қаріп өлшемін, салмағын және алдыңғы жағын оңай орнатыңыз |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Қаріптер тобын serif етіп орнатыңыз және өлшемді, салмақты және алдыңғы қатарды басқарыңыз |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Қаріптер тобын sans-serif етіп орнатыңыз және өлшемді, салмақты және алдыңғы қатарды басқарыңыз |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Қаріптер тобын монокеңістікке орнатыңыз және өлшемді, салмақты және алдыңғы қатарды басқарыңыз |
Миксин | Параметрлер | Қолданылуы |
---|---|---|
.container-fixed() |
жоқ | Мазмұнды сақтау үшін бекітілген ені (белгісі бар @siteWidth ) контейнерді қамтамасыз етіңіз |
.columns() |
@columns: 1 |
Бағандардың кез келген санын қамтитын тор бағанасын құрастырыңыз (әдепкі бойынша 1 баған) |
.offset() |
@columns: 1 |
Кез келген баған санын қамтитын сол жақ жиегі бар тор бағанының орнын ауыстырыңыз |
.gridColumn() |
жоқ | Элементті тор бағаны сияқты қалқымалы етіп жасаңыз |
Миксин | Параметрлер | Қолданылуы |
---|---|---|
.border-radius() |
@radius: 5px |
Элементтің бұрыштарын дөңгелектеңіз. Жалғыз мән немесе бос орынмен бөлінген төрт мән болуы мүмкін |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Элементке көлеңке қосыңыз |
.transition() |
@transition |
CSS3 өту әсерін қосыңыз (мысалы, all .2s linear ) |
.rotate() |
@degrees |
Элементті n градусқа бұру |
.scale() |
@ratio |
Scale an element to n times its original size |
.translate() |
@x: 0, @y: 0 |
Move an element on the x and y planes |
.background-clip() |
@clip |
Crop the background of an element (useful for border-radius ) |
.background-size() |
@size |
Control the size of background images via CSS3 |
.box-sizing() |
@boxmodel |
Change the box model for an element (e.g., border-box for a full-width input ) |
.user-select() |
@select |
Control cursor selection of text on a page |
.resizable() |
@direction: both |
Make any element resizable on the right and bottom |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Make the content of any element use CSS3 columns |
Mixin | Parameters | Usage |
---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Give an element a translucent background color |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Give an element a translucent border color |
.#gradient > .vertical() |
@startColor, @endColor |
Create a cross-browser vertical background gradient |
.#gradient > .horizontal() |
@startColor, @endColor |
Create a cross-browser horizontal background gradient |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Create a cross-browser directional background gradient |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Create a cross-browser three-color background gradient |
.#gradient > .radial() |
@innerColor, @outerColor |
Create a cross-browser radial background gradient |
.#gradient > .striped() |
@color, @angle |
Create a cross-browser striped background gradient |
.#gradientBar() |
@primaryColor, @secondaryColor |
Used for buttons to assign a gradient and slightly darker border |
Install the LESS command line compiler globally with npm by running the following command:
$ npm install -g less
Once installed just run make
from the root of your bootstrap directory and you're all set.
Additionally, if you have watchr installed, you may run make watch
to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).
Install the LESS command line tool via Node and run the following command:
$ lessc ./lib/bootstrap.less > bootstrap.css
Be sure to include --compress
in that command if you're trying to save some bytes!
Download the latest Less.js and include the path to it (and Bootstrap) in the <head>
.
<link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script>
To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.
The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.
If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.
Crunch is a great looking LESS editor and compiler built on Adobe Air.
Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.
Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.