Bootstrap-ning CSS-ni yaratishda foydalaniladigan o'zgaruvchilar, miksinlar va boshqa imkoniyatlardan foydalanish uchun CSS protsessori LESS bilan Bootstrap-ni sozlang va kengaytiring .
Bootstrap asosiy do'stimiz Aleksis Sellier tomonidan yaratilgan dinamik uslublar jadvali tili bo'lgan LESS bilan yaratilgan . Bu tizimga asoslangan CSS-ni ishlab chiqishni tezroq, oson va qiziqarli qiladi.
CSS-ning 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.
Qo'shimcha ma'lumot olish uchun http://lesscss.org/ rasmiy veb-saytiga tashrif buyuring .
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.
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.
Matematikani amallar bilan bajarib, tarmoqni, yetakchi va yanada moslashuvchan qiling. CSS aql-idrokiga yo'lingizni ko'paytirish, bo'lish, qo'shish va ayirish.
@linkColor |
#08c | Standart havola matn rangi | |
@linkColorHover |
darken(@linkColor, 15%) |
Standart havola matni kursor rangi |
@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 |
#eee | |
@white |
#fff |
@blue |
#049cdb | |
@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 |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
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 miksin xuddi asosiy miksinga o'xshaydi, lekin u ixtiyoriy standart qiymatlar bilan parametrlarni (shuning uchun nomi) ham qabul qiladi.
- . element {
- . chegara - radius ( 4px );
- }
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.
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-block IE7 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") |
Mixin | Parametrlar | Foydalanish |
---|---|---|
.placeholder() |
@color: @placeholderText |
placeholder Kirishlar uchun matn rangini o'rnating |
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 |
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 |
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 hajmidan n marta kattalashtiring |
.translate() |
@x: 0, @y: 0 |
Elementni x va y tekisliklarida siljitish |
.background-clip() |
@clip |
Elementning fon rasmini qirqish (uchun foydali border-radius ) |
.background-size() |
@size |
CSS3 orqali fon rasmlari hajmini boshqaring |
.box-sizing() |
@boxmodel |
Element uchun quti modelini o'zgartiring (masalan, border-box to'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 |
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 |
Quyidagi buyruqni ishga tushirish orqali npm bilan LESS buyruq qatori kompilyatorini o'rnating:
$ npm kamroq o'rnatish
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).
Node orqali LESS buyruq qatori vositasini o'rnating va quyidagi buyruqni bajaring:
$ lessc ./lib/bootstrap.less > bootstrap.css
--compress
Agar ba'zi baytlarni saqlamoqchi bo'lsangiz, ushbu buyruqni qo'shishni unutmang !
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 .less fayllar kataloglarini kuzatadi va tomosha qilingan .less faylining har bir saqlanishidan keyin kodni mahalliy fayllarga kompilyatsiya qiladi.
Agar xohlasangiz, avtomatik ravishda kichiklashtirish va kompilyatsiya qilingan fayllar qaysi katalogga tushishi uchun ilovadagi afzalliklarni almashtirishingiz mumkin.
Crunch - bu Adobe Air-da yaratilgan LESS muharriri va kompilyatori.
Norasmiy Mac ilovasi bilan bir xil odam tomonidan yaratilgan CodeKit - LESS, SASS, Stylus va CoffeeScript-ni kompilyatsiya qiluvchi Mac ilovasi.
LESS fayllarni sudrab olib tashlash uchun Mac, Linux va kompyuter ilovasi. Bundan tashqari, manba kodi GitHub-da .