Bootstrap bɛrɛbɛrɛ ani k’a janya ni LESS ye, n’o ye CSS preprocessor ye, walasa ka nafa sɔrɔ fɛn caman na, mixins ani fɛn wɛrɛw minnu bɛ kɛ ka Bootstrap ka CSS jɔ.
Bootstrap dilannen don ni LESS ye a kɔnɔ, a ye kan ye min bɛ se ka kɛ cogo la min bɛ se ka wuli ka bɔ a nɔ na, min dabɔra an teri ɲuman fɛ, Alexis Sellier . A bɛ CSS min sinsinnen bɛ sistɛmuw kan, o yiriwali teliya, ka nɔgɔya, ani ka diya.
I n’a fɔ CSS ka farankan, LESS bɛ fɛn caman sɛmɛntiya, mixins minnu bɛ se ka baara kɛ kokura ni kodew ye, baarakɛcogo minnu bɛ kɛ jatebɔ nɔgɔmanw kama, nesting, ani hali kulɛri baarakɛcogo.
Aw ye taa siti ofisiyali la http://lesscss.org/ walasa ka kunnafoni wɛrɛw sɔrɔ.
Kulɛriw ni pixel nafaw ɲɛnabɔli CSS kɔnɔ bɛ se ka kɛ dimi ye dɔɔnin, a ka c’a la, a falen bɛ kopi ni nɔrɔ la. A tɛ kɛ ni LESS ye hali ni o ye a sɔrɔ—aw bɛ kulɛriw walima pixel nafaw di i n’a fɔ fɛn caman bɛrɛbɛrɛ ani k’u Changer siɲɛ kelen.
O dankan-radius declarations saba i ka kan ka kɛ regular ol' CSS kɔnɔ? Sisan u bɛ jigin ka se zana kelen ma ni mixins dɛmɛ ye, kode snippets i bɛ se ka baara kɛ ni minnu ye kokura yɔrɔ o yɔrɔ.
Aw ye aw ka grid, leading, ani super flexible kɛ ka jatebɔ kɛ on the fly ni operations ye. I ka sira caya, ka tila, ka fara a kan, ani ka bɔ a la ka taa CSS hakili la.
@linkColor |
#08c ye | Default link sɛbɛnni kulɛri | |
@linkColorHover |
darken(@linkColor, 15%) |
Default link sɛbɛnni hover kulɛri |
@gridColumns |
12 ye |
@gridColumnWidth |
60px ye |
@gridGutterWidth |
20px ye |
@fluidGridColumnWidth |
6,382978723% ye . |
@fluidGridGutterWidth |
2,127659574% ye . |
@baseFontSize |
13px ye | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px ye |
@black |
#000 ye | |
@grayDarker |
#222 | |
@grayDark |
#333 ye | |
@gray |
#555 ye | |
@grayLight |
#999 ye | |
@grayLighter |
#eee ye | |
@white |
#fff ye |
@blue |
#049cdb ye | |
@green |
#46a546 ye | |
@red |
#9d261d ye | |
@yellow |
#ffc40d ye | |
@orange |
#f89406 ye | |
@pink |
#c3325f ye | |
@purple |
#7a43b6 ye |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
40px ye | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#f3edd2 ye | |
@warningBackground |
#c09853 ye | |
@errorText |
#b94a48 ye | |
@errorBackground |
#f2dede ye | |
@successText |
#468847 ye | |
@successBackground |
#dff0d8 ye | |
@infoText |
#3a87ad ye | |
@infoBackground |
#d9edf7 ye |
Mixin basigilen ye a jɔyɔrɔba ye include walima partial ye CSS snippet dɔ kama. U sɛbɛnnen bɛ i n’a fɔ CSS kalansen ani u bɛ se ka wele yɔrɔ o yɔrɔ.
- . eleman { ye .
- . ɲɛfɔli jɛlen ();
- } ye .
Paramɛtiri mixin bɛ i n’a fɔ mixin basigilen dɔrɔn, nka a bɛ sɔn paramɛtiriw fana ma (o de y’a to a tɔgɔ in) ni nafa dafalenw ye minnu bɛ se ka sugandi.
- . eleman { ye .
- . dankan - radiyali ( 4px );
- } ye .
Bootstrap ka mixinw bɛɛ bɛ Se ka Lakodɔn mixins.less kɔnɔ, o ye .less file nafamaba ye min b’a To i bɛ se ka mixin dɔ Kɛ .less filew dɔ la kelen na baarakɛminɛnw kɔnɔ.
O la, taa ɲɛ ka baara kɛ ni minnu bɛ yen walima aw kana siga ka aw yɛrɛ ta fara a kan i mago bɛ cogo min na.
Mixin (Mixin) ye | Paramɛtɛrɛw | Baarakɛcogo |
---|---|---|
.clearfix() |
foɲisi | Aw bɛ fara bangebaga o bangebaga kan walasa ka flotw jɛya a kɔnɔ |
.tab-focus() |
foɲisi | Webkit focus style ani Firefox outline lamininenw waleya |
.center-block() |
foɲisi | Auto center a bloki-nivo element baaramargin: auto |
.ie7-inline-block() |
foɲisi | Baara kɛ ka fara a kan tuma bɛɛ display: inline-block walasa ka IE7 dɛmɛ sɔrɔ |
.size() |
@height: 5px, @width: 5px |
Aw bɛ teliya ka a janya ni a bonya sigi tigɛli kelen kan |
.square() |
@size: 5px |
A bɛ jɔ .size() ka bonya ni janya sigi i n’a fɔ nafa kelen |
.opacity() |
@opacity: 100 |
Aw bɛ, jateden dafalenw na, opacity kɛmɛsarada la (misali la, "50" walima "75") sigi. |
Mixin (Mixin) ye | Paramɛtɛrɛw | Baarakɛcogo |
---|---|---|
.placeholder() |
@color: @placeholderText |
Sɛbɛnni kulɛri sigi sen placeholder kan dontaw kama |
Mixin (Mixin) ye | Paramɛtɛrɛw | Baarakɛcogo |
---|---|---|
#font > #family > .serif() |
foɲisi | Aw bɛ element dɔ kɛ ni serif font stack ye |
#font > #family > .sans-serif() |
foɲisi | A’ ye element dɔ Kɛ ni sans-serif font stack ye |
#font > #family > .monospace() |
foɲisi | Aw bɛ fɛn dɔ Kɛ ni monospace font stack ye |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Aw bɛ sɛbɛnnibolo hakɛ, a girinya ani a ɲɛminɛcogo sigi nɔgɔya la |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Sɛbɛnni denbaya sigi serif la, ani ka bonya, girinya ani ɲɛminɛni kɔlɔsi |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Sɛbɛnni denbaya sigi sans-serif la, ani ka bonya, girinya ani ɲɛmɔgɔya kɔlɔsi |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Sɛbɛnni denbaya sigi yɔrɔ kelen na, ani ka bonya, girinya ani ɲɛmɔgɔya kɔlɔsi |
Mixin (Mixin) ye | Paramɛtɛrɛw | Baarakɛcogo |
---|---|---|
.container-fixed() |
foɲisi | Aw bɛ minɛn dɔ di min bonya jɔlen don (a sigilen bɛ ni @siteWidth ) ye walasa ka aw ka kɔnɔkow minɛ |
.columns() |
@columns: 1 |
Aw bɛ jatebɔlan dɔ jɔ min bɛ kulu hakɛ o hakɛ la (a bɛ daminɛ ka kɛ kulu 1 ye) . |
.offset() |
@columns: 1 |
Offset grid kulu dɔ ni kininbolo fan min bɛ kulu hakɛ o hakɛ cɛ |
.gridColumn() |
foɲisi | Aw bɛ element dɔ kɛ ka pan i n’a fɔ grid column |
Mixin (Mixin) ye | Paramɛtɛrɛw | Baarakɛcogo |
---|---|---|
.border-radius() |
@radius: 5px |
Aw bɛ fɛn dɔ nɔngɔnw lamini. A bɛ se ka kɛ nafa kelen ye walima nafa naani minnu bɛ danfara la yɔrɔ la |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Aw bɛ drop shadow dɔ fara element dɔ kan |
.transition() |
@transition |
CSS3 wulicogo nɔ fara a kan (misali la, all .2s linear ) . |
.rotate() |
@degrees |
Aw bɛ fɛn dɔ wuli ni degere n ye |
.scale() |
@ratio |
Aw bɛ fɛn dɔ sɛgɛsɛgɛ ka se a hakɛ fɔlɔ ma siɲɛ n |
.translate() |
@x: 0, @y: 0 |
Aw bɛ fɛn dɔ lamaga x ni y planw kan |
.background-clip() |
@clip |
Crop the backgroud of an element (nafa bɛ min na border-radius ) . |
.background-size() |
@size |
Ja minnu bɛ kɔfɛ, olu bonya kɔlɔsi CSS3 fɛ |
.box-sizing() |
@boxmodel |
Aw bɛ kɛsu modɛli Changer ka ɲɛsin element dɔ ma (misali la, border-box ka ɲɛsin full-width input ma ) . |
.user-select() |
@select |
Sɛbɛnni minnu bɛ ɲɛ dɔ kan, olu sugandili ni cursor ye |
.resizable() |
@direction: both |
Aw bɛ fɛn o fɛn kɛ a bonya bɛ se ka wuli kinin fɛ ani duguma |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Aw bɛ fɛn o fɛn kɔnɔkow kɛ ka baara kɛ ni CSS3 kuluw ye |
Mixin (Mixin) ye | Paramɛtɛrɛw | Baarakɛcogo |
---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Aw bɛ fɛn dɔ di ni kɔkanna kulɛri ye min bɛ yeelen bɔ |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Aw bɛ danyɔrɔ kulɛri translucide di element dɔ ma |
.#gradient > .vertical() |
@startColor, @endColor |
A’ ye cross-browser vertical background gradient dɔ dabɔ |
.#gradient > .horizontal() |
@startColor, @endColor |
A’ ye cross-browser horizontal background gradient dɔ dabɔ |
.#gradient > .directional() |
@startColor, @endColor, @deg |
A’ ye cross-browser ɲɛminɛcogo kɔkanna sɛgɛsɛgɛli dɔ da |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Aw bɛ cross-browser dɔ dabɔ min ɲɛ saba ye kɔkanna gradient ye |
.#gradient > .radial() |
@innerColor, @outerColor |
Aw bɛ cross-browser radial kɔkanna gradient dɔ da |
.#gradient > .striped() |
@color, @angle |
A’ ye cross-browser striped background gradient dɔ dabɔ |
.#gradientBar() |
@primaryColor, @secondaryColor |
A bɛ baara kɛ ni butɔni ye walasa ka dancɛ dɔ di min bɛ se ka wuli ka bɔ a nɔ na ani min ka di dɔɔnin |
LESS cikan-sɛbɛnni-sɛbɛnni-minɛn sigi ni npm ye ni nin cikan in kɛli ye:
$ npm installer ka dɔgɔ
Ni a sigilen don dɔrɔn i bɛ boli make
ka bɔ i ka bootstrap directory ju la ani i bɛɛ bɛ labɛn.
O tɛmɛnen 'kɔ, n'i ye watchr Sìgi sen kan, i bɛ Se ka boli make watch
ka bootstrap jɔ kokura a yɛrɛma tuma o tuma n'i ye dosiye dɔ Labɛn bootstrap lib kɔnɔ (o tɛ wajibi ye, nɔgɔya fɛɛrɛ dɔrɔn de ye).
LESS cikan-sɛbɛnni baarakɛminɛn in sigi Node fɛ ani ka nin cikan in kɛ:
$ lessc ./lib/bootstrap.less > kafoɲɔgɔnya.css
Aw ye aw jija ka don --compress
o cikan kɔnɔ ni aw b’a ɲini ka bayt dɔw mara!
Less.js labanw telesarse ani ka sira don a la (ani Bootstrap) <head>
.
<link rel = "stylesheet/less" href = "/sira/ka taa/bootstrap.less" > <script src = "/sira/ka taa/ka dɔgɔ.js" </script>
Walasa ka .less filew lajɛ kokura, i k’u mara dɔrɔn k’i ka ɲɛ in doni kokura. Less.js b’u Lajɛ k’u Lakodɔn sigida marayɔrɔ la.
Mac app min tɛ ofisi ye, o bɛ .less filew ka ɲɛbilasɛbɛnw lajɛ ani ka kode lajɛ ka kɛ sigida filew ye .less file kɔlɔsilen maralen kɔfɛ.
N’i b’a fɛ, i bɛ se ka fɛn minnu fɛ, i bɛ se ka fɛn minnu sugandi, i bɛ se ka fɛn dɔw sɛmɛntiya porogaramu kɔnɔ walasa ka fɛnw dɔgɔya otomatiki la ani file minnu lajɛlen don, olu bɛ laban ka taa ɲɛ min kɔnɔ.
Crunch ye LESS editor ani compiler ye min ɲɛ ka ɲi kosɛbɛ min jɔlen bɛ Adobe Air kan.
A dabɔra cɛ kelen fɛ ni Mac app min tɛ ofisi ye, CodeKit ye Mac app ye min bɛ LESS, SASS, Stylus, ani CoffeeScript lajɛ.
Mac, Linux ani PC app min bɛ kɛ ka LESS filew lajɛ ani ka u fili. Ka fara o kan, source code bɛ GitHub kan .