Bootstrap bilan LESS dan foydalanish
Bootstrap-ning CSS-ni yaratishda foydalaniladigan o'zgaruvchilar, miksinlar va boshqa imkoniyatlardan foydalanish uchun CSS protsessori LESS bilan Bootstrap-ni sozlang va kengaytiring .
LESS bilan qurilgan
Nega KAM?
Bootstrap LESS asosida yaratilgan bo'lib, bizning yaxshi do'stimiz Aleksis Sellier tomonidan yaratilgan dinamik uslublar jadvali tili . Bu tizimga asoslangan CSS-ni ishlab chiqishni tezroq, oson va qiziqarli qiladi.
Nimalar kiritilgan?
CSS kengaytmasi sifatida LESS o'zgaruvchilarni, qayta foydalanish mumkin bo'lgan kod parchalari uchun miksinlarni, oddiy matematika uchun operatsiyalarni, joylashtirish va hatto rang funktsiyalarini o'z ichiga oladi.
Ko'proq ma'lumot olish
Qo'shimcha ma'lumot olish uchun http://lesscss.org/ rasmiy veb-saytiga tashrif buyuring .
O'zgaruvchilar
CSS-da ranglar va piksel qiymatlarini boshqarish biroz og'riqli bo'lishi mumkin, odatda nusxa ko'chirish va joylashtirish bilan to'la. LESS bilan emas - ranglar yoki piksel qiymatlarini o'zgaruvchilar sifatida belgilang va ularni bir marta o'zgartiring.
Aralashmalar
Oddiy CSS da qilishingiz kerak bo'lgan uchta chegara radiusi deklaratsiyasi? Endi ular har qanday joyda qayta ishlatishingiz mumkin bo'lgan miksinlar, kod parchalari yordamida bir qatorga tushdi.
Operatsiyalar
Matematikani amallar bilan bajarib, tarmoqni, yetakchi va yanada moslashuvchan qiling. Ko'paytirish, bo'lish, qo'shish va ayirish CSS aql-idrokiga o'tish.
Bootstrap o'zgaruvchilari LESS o'zgaruvchilari, ularning qiymatlari va foydalanish ko'rsatmalari
Giperhavolalar
@linkColor |
#08c | Standart havola matn rangi | |
@linkColorHover |
darken(@linkColor, 15%) |
Standart havola matni kursor rangi |
Grid tizimi
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6,382978723% |
@fluidGridGutterWidth |
2,127659574% |
Tipografiya
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Kulrang ranglar
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Urg'u ranglari
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Komponentlar
Tugmalar
@primaryButtonBackground |
@linkColor |
Shakllar
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Shakl holatlari va ogohlantirishlar
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap aralashmalari
Miksinlar haqida
Asosiy aralashmalar
Asosiy miksin asosan CSS parchasi uchun qo'shimcha yoki qisman hisoblanadi. Ular xuddi CSS klassi kabi yozilgan va ularni istalgan joyda chaqirish mumkin.
- . element {
- . aniq tuzatish ();
- }
Parametrik aralashmalar
Parametrik miksin xuddi asosiy miksinga o'xshaydi, lekin u ixtiyoriy standart qiymatlar bilan parametrlarni (shuning uchun nomi) ham qabul qiladi.
- . element {
- . chegara - radius ( 4px );
- }
O'zingiznikini osongina qo'shing
Bootstrap-ning deyarli barcha miksinlari mixins.less-da saqlanadi, bu ajoyib yordamchi .less fayli, bu sizga asboblar to'plamidagi har qanday .less faylida miksindan foydalanish imkonini beradi.
Shunday qilib, davom eting va mavjudlaridan foydalaning yoki kerak bo'lganda o'zingiznikini qo'shing.
O'z ichiga olgan aralashmalar
Utilitalar
| Mixin | Parametrlar | Foydalanish |
|---|---|---|
.clearfix() |
yo'q | Ichidagi floatlarni tozalash uchun istalgan ota-onaga qo'shing |
.tab-focus() |
yo'q | Webkit fokus uslubini qo'llang va Firefox konturini aylantiring |
.center-block() |
yo'q | Blok darajasidagi elementni avtomatik markazlashtirishmargin: auto |
.ie7-inline-block() |
yo'q | display: inline-blockIE7 qo'llab-quvvatlashini olish uchun odatdagidan tashqari foydalaning |
.size() |
@height: 5px, @width: 5px |
Bir qatorda balandlik va kenglikni tezda o'rnating |
.square() |
@size: 5px |
Kenglik .size()va balandlikni bir xil qiymat sifatida belgilash uchun quriladi |
.opacity() |
@opacity: 100 |
Butun sonlarda shaffoflik foizini belgilang (masalan, "50" yoki "75") |
Shakllar
| Mixin | Parametrlar | Foydalanish |
|---|---|---|
.placeholder() |
@color: @placeholderText |
placeholderKirishlar uchun matn rangini o'rnating |
Tipografiya
| Mixin | Parametrlar | Foydalanish |
|---|---|---|
#font > #family > .serif() |
yo'q | Elementni serif shrift to'plamidan foydalaning |
#font > #family > .sans-serif() |
yo'q | Elementni sans-serif shrift to'plamidan foydalaning |
#font > #family > .monospace() |
yo'q | Elementni monospace shrift to'plamidan foydalaning |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Shrift hajmini, vaznini va boshini osongina o'rnating |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Shriftlar oilasini serifga sozlang va hajmi, vazni va boshini boshqaring |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Shriftlar oilasini sans-serif ga sozlang va hajmi, vazni va boshini boshqaring |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Shriftlar oilasini monofazoga sozlang va hajmi, vazni va boshini boshqaring |
Grid tizimi
| Mixin | Parametrlar | Foydalanish |
|---|---|---|
.container-fixed() |
yo'q | Kontentingizni saqlash uchun qattiq kenglikdagi (o'rnatilgan @siteWidth) konteynerni taqdim eting |
.columns() |
@columns: 1 |
Istalgan sonli ustunlarni qamrab oluvchi panjara ustunini yarating (standart 1 ustunga) |
.offset() |
@columns: 1 |
Istalgan sonli ustunlarni o'z ichiga olgan chap chekka bilan panjara ustunini ofset qiling |
.gridColumn() |
yo'q | Elementni panjara ustuni kabi suzuvchi qilib qo'ying |
CSS3 xususiyatlari
| Mixin | Parametrlar | Foydalanish |
|---|---|---|
.border-radius() |
@radius: 5px |
Elementning burchaklarini yumaloqlang. Bitta qiymat yoki bo'sh joydan ajratilgan to'rtta qiymat bo'lishi mumkin |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Elementga soya qo'shing |
.transition() |
@transition |
CSS3 o'tish effektini qo'shing (masalan, all .2s linear) |
.rotate() |
@degrees |
Elementni n gradusga aylantiring |
.scale() |
@ratio |
Elementni asl hajmini n marta kattalashtiring |
.translate() |
@x: 0, @y: 0 |
Elementni x va y tekisliklarida siljitish |
.background-clip() |
@clip |
Element fonini kesish (foydali uchun border-radius) |
.background-size() |
@size |
CSS3 orqali fon rasmlari hajmini boshqaring |
.box-sizing() |
@boxmodel |
Element uchun quti modelini o'zgartiring (masalan, border-boxto'liq kenglik uchun input) |
.user-select() |
@select |
Sahifadagi matnni kursor tanlashni boshqarish |
.resizable() |
@direction: both |
Har qanday elementni o'ng va pastki qismida o'lchamini o'zgartiradigan qilib qo'ying |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Har qanday elementning mazmunini CSS3 ustunlaridan foydalaning |
Fon va gradientlar
| Mixin | Parametrlar | Foydalanish |
|---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Elementga shaffof fon rangini bering |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Elementga shaffof chegara rangini bering |
.#gradient > .vertical() |
@startColor, @endColor |
Brauzerlar orasidagi vertikal fon gradientini yarating |
.#gradient > .horizontal() |
@startColor, @endColor |
Brauzerlar orasidagi gorizontal fon gradientini yarating |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Brauzerlar o'rtasida yo'nalishli fon gradientini yarating |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Brauzerlarda uch rangli fon gradientini yarating |
.#gradient > .radial() |
@innerColor, @outerColor |
Brauzerlararo radial fon gradientini yarating |
.#gradient > .striped() |
@color, @angle |
Brauzerlar orasidagi chiziqli fon gradientini yarating |
.#gradientBar() |
@primaryColor, @secondaryColor |
Gradient va biroz quyuqroq chegara belgilash uchun tugmalar uchun ishlatiladi |
Bootstrapni LESS bilan kompilyatsiya qilish
Kompilyatsiya qilish uchun vositalar
makefile bilan tugun
LESS buyruq qatori kompilyatorini global miqyosda npm bilan quyidagi buyruqni ishga tushirish orqali o'rnating:
$ npm o'rnatish -g kamroq
O'rnatilgandan so'ng make, bootstrap katalogingizning ildizidan ishga tushiring va hamma narsa tayyor.
Bundan tashqari, agar sizda watchr o'rnatilgan bo'lsa make watch, bootstrap lib-da har safar faylni tahrirlaganingizda bootstrap avtomatik ravishda qayta tiklanadi (bu shart emas, faqat qulay usul).
Buyruqlar qatori
Node orqali LESS buyruq qatori vositasini o'rnating va quyidagi buyruqni bajaring:
$ lessc ./lib/bootstrap.less > bootstrap.css
--compressAgar ba'zi baytlarni saqlamoqchi bo'lsangiz, ushbu buyruqni qo'shishni unutmang !
Javascript
Eng so'nggi Less.js -ni yuklab oling va unga (va Bootstrap) yo'lni <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
.less fayllarni qayta kompilyatsiya qilish uchun ularni saqlang va sahifangizni qayta yuklang. Less.js ularni kompilyatsiya qiladi va mahalliy xotirada saqlaydi.
Norasmiy Mac ilovasi
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.
More Mac apps
Crunch
Crunch is a great looking LESS editor and compiler built on Adobe Air.
CodeKit
Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.
Simpless
Mac, Linux, and PC app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.