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 .

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

Kamroq CSS

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.

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
@@dropdownDividerTop #e5e5e5
@@dropdownDividerBottom @white

Qahramon birligi

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

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.

  1. . element {
  2. . aniq tuzatish ();
  3. }

Parametrik aralashmalar

Parametrik miksin xuddi asosiy miksinga o'xshaydi, lekin u ixtiyoriy standart qiymatlar bilan parametrlarni (shuning uchun nomi) ham qabul qiladi.

  1. . element {
  2. . chegara - radius ( 4px );
  3. }

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 % enli olukli foizli 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
.hyphens() @mode: auto Siz xohlagan vaqtda CSS3 defis qo'ying (o'z ichiga oladi word-wrap: break-word)

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
Eslatma: Agar siz o'zgartirilgan CSS bilan GitHub-ga tortish so'rovini yuborayotgan bo'lsangiz , ushbu usullardan biri orqali CSS-ni qayta kompilyatsiya qilishingiz kerak .

Kompilyatsiya qilish uchun vositalar

makefile bilan tugun

LESS buyruq qatori kompilyatorini, JSHint, Recess va uglify-js ni global miqyosda npm bilan quyidagi buyruqni ishga tushirish orqali o'rnating:

$ npm o'rnatish -g kamroq jshint tanaffus 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 .