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-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.
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
Iskala va havolalar
@bodyBackground |
@white |
Sahifa fon rangi | |
@textColor |
@grayDark |
Butun tana, sarlavhalar va boshqalar uchun standart matn rangi | |
@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
@sansFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Monako, "Courier New", monospace | |
@baseFontSize |
13px | Piksel bo'lishi kerak |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px | Piksel bo'lishi kerak |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
Jadvallar
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
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
@btnBackground |
@white |
|
@btnBackgroundHighlight |
darken(@white, 10%) |
|
@btnBorder |
darken(@white, 20%) |
|
@btnPrimaryBackground |
@linkColor |
|
@btnPrimaryBackgroundHighlight |
spin(@btnPrimaryBackground, 15%) |
|
@btnInfoBackground |
#5bc0de |
|
@btnInfoBackgroundHighlight |
#2f96b4 |
|
@btnSuccessBackground |
#62c462 |
|
@btnSuccessBackgroundHighlight |
51a351 |
|
@btnWarningBackground |
lighten(@orange, 15%) |
|
@btnWarningBackgroundHighlight |
@orange |
|
@btnDangerBackground |
#ee5f5b |
|
@btnDangerBackgroundHighlight |
#bd362f |
|
@btnInverseBackground |
@gray |
|
@btnInverseBackgroundHighlight |
@grayDarker |
Shakllar
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
Shakl holatlari va ogohlantirishlar
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
|
@navbarLinkColorActive |
@navbarLinkColorHover |
|
@navbarLinkBackgroundHover |
transparent |
|
@navbarLinkBackgroundActive |
@navbarBackground |
|
@navbarSearchBackground |
lighten(@navbarBackground, 25%) |
|
@navbarSearchBackgroundFocus |
@white |
|
@navbarSearchBorder |
darken(@navbarSearchBackground, 30%) |
|
@navbarSearchPlaceholderColor |
#ccc |
|
@navbarBrandColor |
@navbarLinkColor |
Ochiladigan menyular
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
Qahramon birligi
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
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
Deyarli barcha Bootstrap 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 @width |
Bir qatorda balandlik va kenglikni tezda o'rnating |
.square() |
@size |
Kenglik .size()va balandlikni bir xil qiymat sifatida belgilash uchun quriladi |
.opacity() |
@opacity |
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 |
Shrift turkumini serifga o'rnating 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 gorizontal markazlashtirilgan konteyner yarating |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
n ta ustun va x pikselli kenglikdagi olukli pikselli tarmoq tizimini (konteyner, qator va ustunlar) yarating |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
n ta ustunli va x % kenglikdagi trubadan iborat asosiy tarmoq tizimini yarating |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
Elementlar uchun pikselli panjara tizimini yarating, inputto'ldirish va chegaralarni hisobga oling |
.makeColumn |
@columns: 1, @offset: 0 |
Har qandayni sinflarsiz divpanjara ustuniga aylantiring.span* |
CSS3 xususiyatlari
| Mixin | Parametrlar | Foydalanish |
|---|---|---|
.border-radius() |
@radius |
Elementning burchaklarini yumaloqlang. Bitta qiymat yoki bo'sh joydan ajratilgan to'rtta qiymat bo'lishi mumkin |
.box-shadow() |
@shadow |
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, @y |
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 |
.backface-visibility() |
@visibility: visible |
CSS 3D transformlaridan foydalanganda kontentning miltillashini oldini oling |
.resizable() |
@direction: both |
Har qanday elementni o'ng va pastki qismida o'lchamini o'zgartiradigan qilib qo'ying |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
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 va uglify-js ni global miqyosda npm bilan quyidagi buyruqni bajarish orqali o'rnating:
$ npm o'rnatish -g kamroq uglify-js
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 ./less/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
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.
Boshqa Mac ilovalari
Crunch
Crunch - bu Adobe Air-da yaratilgan LESS muharriri va kompilyatori.
CodeKit
Norasmiy Mac ilovasi bilan bir xil odam tomonidan yaratilgan CodeKit - LESS, SASS, Stylus va CoffeeScript-ni kompilyatsiya qiluvchi Mac ilovasi.
Oddiy
LESS fayllarni sudrab olib tashlash uchun Mac, Linux va kompyuter ilovasi. Bundan tashqari, manba kodi GitHub-da .