Iji LESS na Bootstrap
Hazie na ịgbatị Bootstrap na LESS , onye na-ebu ụzọ CSS, ka ị nweta uru nke mgbanwe, mixins, na ihe ndị ọzọ ejiri wuo Bootstrap's CSS.
Ejiri obere obere wuo ya
Gịnị kpatara erughị ala?
A na-eme Bootstrap na LESS n'isi ya, asụsụ ụdịdị ike nke ezigbo enyi anyị, Alexis Sellier kere . Ọ na-eme mmepe CSS dabere na sistemu ngwa ngwa, dị mfe na ihe ọchị karịa.
Kedu ihe gụnyere?
Dị ka ndọtị nke CSS, obere na-agụnye mgbanwe, mixins maka reusable snippets nke koodu, arụmọrụ maka mfe mgbakọ na mwepụ, nesting, na ọbụna agba ọrụ.
Mgbanwe
Ijikwa agba na ụkpụrụ pikselụ na CSS nwere ike ịbụ ntakịrị ihe mgbu, na-ejupụtakarị na nnomi na mado. Ọ bụghị na obere n'agbanyeghị - kenye agba ma ọ bụ ụkpụrụ pikselụ dị ka mgbanwe wee gbanwee ha otu ugboro.
Ngwakọta
Nkwuwapụta oke-oke atọ ahụ ị ga-emerịrị na CSS? Ugbu a, ha na-agbada n'otu ahịrị site n'enyemaka nke mixins, snippets nke koodu ị nwere ike ijikwa ebe ọ bụla.
Ọrụ
Mee ka grid gị, na-edu, na nke ukwuu na-agbanwe agbanwe site na iji ọrụ na-eme mgbakọ na mwepụ na ofufe. Mụbaa, kewaa, gbakwunye, ma wepụ ụzọ gị gaa na ịdị ọcha CSS.
Ngbanwe bootstrap Ngbanwe dị obere, ụkpụrụ ha na ntuziaka ojiji
Ihe mkpuchi na njikọ
@bodyBackground |
@white |
Agba ndabere ibe | |
@textColor |
@grayDark |
Agba ederede ezighi ezi maka ahụ dum, isiokwu na ndị ọzọ | |
@linkColor |
#08c |
Agba ederede njikọ ezighi ezi | |
@linkColorHover |
darken(@linkColor, 15%) |
Agba mgbagharị ederede njikọ ezighi ezi |
Sistemụ grid
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Ederede
@sansFontFamily |
"Helvetica Neue", Helvetica, Arial, Sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Monaco, "Courier New", monospace | |
@baseFontSize |
13px | Kwesịrị ịbụ pikselụ |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px | Kwesịrị ịbụ pikselụ |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
Tebụl
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
Agba isi awọ
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eeee | |
@white |
#nff |
Agba ụda olu
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Ngwa
Bọtịnụ
@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 |
Ụdị
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
Depụta steeti na ọkwa
@warningText |
# c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3 ruo 87 | |
@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 |
Mbelata
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
Otu dike
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Ngwakọta bootstrap
Banyere mixins
Ngwakọta ndị bụ isi
Ngwakọta bụ isi bụ n'ezie gụnyere ma ọ bụ akụkụ maka snippet nke CSS. Edere ha dị ka klaasị CSS ma enwere ike ịkpọ ha ebe ọ bụla.
- . mmewere {
- . mkpochapụ ();
- }
Ngwakọta parametric
Ngwakọta parametric dị ka mixin bụ isi, mana ọ na-anabatakwa paramita (ya mere aha ahụ) yana ụkpụrụ ndabara nhọrọ.
- . mmewere {
- . oke - radius ( 4px );
- }
Dị mfe tinye nke gị
Ihe fọrọ nke nta ka ọ bụrụ mixins niile nke Bootstrap na-echekwa na mixins.less, ihe magburu onwe ya na-abaghị uru faịlụ na-enyere gị aka iji mixin na nke ọ bụla n'ime faịlụ . obere na ngwá ọrụ.
Yabụ, gaa n'ihu jiri ndị dị adị ma ọ bụ nweere onwe gị ịgbakwunye nke gị dịka ịchọrọ.
Ngwakọta gụnyere
Ngwa ọrụ
| Ngwakọta | Oke | Ojiji |
|---|---|---|
.clearfix() |
onweghi | Tinye na nne na nna ọ bụla iji kpochapụ ihe na-ese n'elu |
.tab-focus() |
onweghi | Tinye ụdị nlebara anya Webkit yana ihe ndepụta Firefox gburugburu |
.center-block() |
onweghi | Nchekwa onwe nke ihe mgbochi-larịị n'ijimargin: auto |
.ie7-inline-block() |
onweghi | Jiri na mgbakwunye na oge niile display: inline-blockiji nweta nkwado IE7 |
.size() |
@height @width |
Tọọ ngwa ngwa na ịdị elu na obosara n'otu ahịrị |
.square() |
@size |
Na-ewuli elu .size()ka ịtọ obosara na ịdị elu ka otu uru |
.opacity() |
@opacity |
Tọọ, n'ọnụọgụ dum, pasent nke oghere (dịka, "50" ma ọ bụ "75") |
Ụdị
| Ngwakọta | Oke | Ojiji |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Tọọ placeholderụcha ederede maka ntinye |
Ederede
| Ngwakọta | Oke | Ojiji |
|---|---|---|
#font > #family > .serif() |
onweghi | Mee mmewere jiri ndokọ mkpụrụedemede serif |
#font > #family > .sans-serif() |
onweghi | Mee mmewere jiri ndokọba mkpụrụedemede sans-serif |
#font > #family > .monospace() |
onweghi | Mepụta mmewere jiri nchịkọta mkpụrụedemede monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Hazie nha mkpụrụedemede, ịdị arọ na ụzọ n'ụzọ dị mfe |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Tọọ ezinụlọ font ka ọ bụrụ serif, ma jikwaa nha, ịdị arọ na ụzọ |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Tọọ ezinụlọ font na sans-serif, ma jikwaa nha, ịdị arọ na ụzọ |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Tọọ ezinụlọ font ka ọ bụrụ monospace, ma jikwaa nha, ịdị arọ na ụzọ |
Sistemụ grid
| Ngwakọta | Oke | Ojiji |
|---|---|---|
.container-fixed() |
onweghi | Mepụta akpa kwụ n'ahịrị maka ijide ọdịnaya gị |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Mepụta sistemu grid pixel (akpa, ahiri na kọlụm) nwere n kọlụm na x pikselụ obosara gutter |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Mepụta sistemu grid nke nwere n'ogidi na x % obosara |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
Mepụta usoro grid pixel maka inputihe, na-aza ajụjụ maka padding na oke |
.makeColumn |
@columns: 1, @offset: 0 |
Tụgharịa nke ọ bụla ka ọ divbụrụ kọlụm grid na-enweghị .span*klaasị |
Njirimara CSS3
| Ngwakọta | Oke | Ojiji |
|---|---|---|
.border-radius() |
@radius |
Gburugburu akụkụ nke mmewere. Nwere ike ịbụ otu uru ma ọ bụ ụkpụrụ anọ kewara oghere |
.box-shadow() |
@shadow |
Tinye onyinyo dobe na mmewere |
.transition() |
@transition |
Tinye mmetụta mgbanwe CSS3 (dịka ọmụmaatụ, all .2s linear) |
.rotate() |
@degrees |
Tụgharịa ihe mmewere n degrees |
.scale() |
@ratio |
Gbanwee mmewere ka n jiri nha mbụ ya |
.translate() |
@x, @y |
Bugharịa otu mmewere na ụgbọ elu x na y |
.background-clip() |
@clip |
Kpochapụ ihe ndabere nke mmewere (bara uru maka border-radius) |
.background-size() |
@size |
Jikwaa nha onyonyo ndabere site na CSS3 |
.box-sizing() |
@boxmodel |
Gbanwee ụdị igbe maka mmewere (dịka, border-boxmaka obosara zuru oke input) |
.user-select() |
@select |
Jikwaa nhọrọ ederede cursor na ibe |
.backface-visibility() |
@visibility: visible |
Gbochie ịsagharị ọdịnaya mgbe ị na-eji mgbanwe CSS 3D |
.resizable() |
@direction: both |
Mee ka ihe ọ bụla gbanwee n'aka nri na ala |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
Mee ọdịnaya nke ihe ọ bụla jiri kọlụm CSS3 |
Ndabere na gradients
| Ngwakọta | Oke | Ojiji |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Nye ihe mmewere ka ọ bụrụ ụcha ndabere translucent |
#translucent > .border() |
@color: @white, @alpha: 1 |
Nye ihe mmewere agba oke oke translucent |
#gradient > .vertical() |
@startColor, @endColor |
Mepụta gradient ndabere kwụ ọtọ n'ofe ihe nchọgharị |
#gradient > .horizontal() |
@startColor, @endColor |
Mepụta gradient n'okirikiri ihe nchọgharị gafere |
#gradient > .directional() |
@startColor, @endColor, @deg |
Mepụta gradient ndabere ntụzịaka ihe nchọgharị |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Mepụta ihe nchọgharị n'okirikiri agba atọ |
#gradient > .radial() |
@innerColor, @outerColor |
Mepụta gradient ndabere radial cross-browser |
#gradient > .striped() |
@color, @angle |
Mepụta gradient okirikiri nwere akara ihe nchọgharị obe |
#gradientBar() |
@primaryColor, @secondaryColor |
Ejiri ya maka bọtịnụ iji kenye oke gradient na ntakịrị ọchịchịrị |
Na-achịkọta Bootstrap na obere obere
Ngwa maka ịchịkọta
Ọnụ nwere makefile
Wụnye nchịkọta iwu LESS na uglify-js zuru ụwa ọnụ na npm site na iji iwu a:
$ npm install -g obere uglify-js
Ozugbo etinyere ya, gba ọsọ makesite na mgbọrọgwụ nke ndekọ ndekọ bootstrap gị ma edobela gị niile.
Na mgbakwunye, ọ bụrụ na etinyere onye nche , ị nwere ike ịgba ọsọ make watchka eweghachi bootstrap na-akpaghị aka oge ọ bụla ị dezie faịlụ na bootstrap lib (nke a anaghị achọ, naanị usoro dị mma).
Ahịrị iwu
Wụnye ngwa ahịrị ahịrị LESS site na Node wee mee iwu a:
$ lessc ./less/bootstrap.less > bootstrap.css
Jide n'aka na itinye --compressn'iwu ahụ ma ọ bụrụ na ị na-agbalị ichekwa ụfọdụ bytes!
Javascript
Budata Less.js kacha ọhụrụ wee tinye ụzọ ya (na Bootstrap) na faịlụ <head>.
<njikọ rel = "stylesheet/less" href = "/ụzọ/to/bootstrap.less" > <script src = "/ụzọ/to/less.js" ></script>
Iji chịkọta faịlụ ndị na-erughị obere, naanị chekwaa ha wee bugharịa ibe gị. Less.js na-achịkọta ha ma na-echekwa ha na nchekwa mpaghara.
Ngwa Mac na-akwadoghị
Ngwa Mac na-akwadoghị na- elele akwụkwọ ndekọ aha nke faịlụ ndị na-enweghị obere ma na-achịkọta koodu ahụ na faịlụ mpaghara mgbe nchekwa ọ bụla nke faịlụ na-enweghị .
Ọ bụrụ na-amasị gị, ị nwere ike ịgbanwe mmasị na ngwa ahụ maka iwetulata akpaaka yana akwụkwọ ndekọ aha faịlụ ekpokọtara na-ejedebe.
Ngwa Mac ndị ọzọ
Crunch
Crunch bụ ezigbo onye na-edezi ihe na-agụkọta ihe na-enweghị atụ nke e wuru na Adobe Air.
CodeKit
Otu nwoke mebere ya dị ka ngwa Mac na-akwadoghị, CodeKit bụ ngwa Mac na-achịkọta LESS, SASS, Stylus na CoffeeScript.
Dị mfe
Mac, Linux, na ngwa PC maka ịdọrọ na dobe nchịkọta faịlụ ndị dị obere. Ọzọkwa, koodu isi mmalite dị na GitHub .