Ke hoʻohana nei i ka LESS me Bootstrap
Hoʻopilikino a hoʻonui i ka Bootstrap me LESS , kahi CSS preprocessor, e hoʻohana pono i nā mea hoʻololi, hui pū, a me nā mea hou aʻe i hoʻohana ʻia e kūkulu i kā Bootstrap CSS.
Kūkulu ʻia me LESS
No ke aha i emi ai?
Hana ʻia ʻo Bootstrap me LESS ma kāna kumu, he ʻōlelo stylesheet ikaika i hana ʻia e kā mākou hoaaloha maikaʻi, ʻo Alexis Sellier . ʻOi aku ka wikiwiki, maʻalahi, a me ka leʻaleʻa o ka hoʻomohala ʻana i ka CSS e pili ana i nā ʻōnaehana.
He aha ka mea i komo?
Ma ke ʻano he hoʻonui ʻia o CSS, LESS nā mea hoʻololi, mixins no ka hoʻohana hou ʻana i nā snippets o ke code, nā hana no ka makemakika maʻalahi, nesting, a me nā hana kala.
Nā mea hoʻololi
ʻO ka mālama ʻana i nā waihoʻoluʻu a me nā waiwai pixel ma CSS hiki ke lilo i mea ʻeha, maʻamau piha i ke kope a paʻi. ʻAʻole me LESS akā naʻe-e hoʻokaʻawale i nā kala a i ʻole nā waiwai pixel e like me nā loli a hoʻololi iā lākou i hoʻokahi manawa.
Mea huikau
ʻO kēlā mau ʻōlelo hoʻolaha palena palena ʻekolu āu e pono ai e hana ma ka CSS maʻamau? I kēia manawa aia lākou i ka laina hoʻokahi me ke kōkua o mixins, snippets of code hiki iā ʻoe ke hoʻohana hou i nā wahi āpau.
Nā hana
Hana i kāu mākia, alakaʻi, a ʻoi aku ka maʻalahi ma ka hana ʻana i ka makemakika ma ka lele me nā hana. E hoʻonui, e puʻunaue, e hoʻohui, a e unuhi i kou ala i ka CSS sanity.
Nā mea hoʻololi Bootstrap Nā ʻano liʻiliʻi liʻiliʻi, ko lākou mau waiwai, a me nā alakaʻi hoʻohana
Scaffolding a me nā loulou
@bodyBackground |
@white |
Ka waihoʻoluʻu ʻaoʻao | |
@textColor |
@grayDark |
Ka waihoʻoluʻu kikokikona no ke kino holoʻokoʻa, nā poʻomanaʻo, a me nā mea hou aku | |
@linkColor |
#08c |
kala kikokikona loulou paʻamau | |
@linkColorHover |
darken(@linkColor, 15%) |
Ka waihoʻoluʻu hover kikokikona pili paʻamau |
Pūnaehana mānoanoa
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Palapala kiʻi
@sansFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Monaco, "Courier New", monospace | |
@baseFontSize |
13px | Pono nā pika |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px | Pono nā pika |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
Nā papaʻaina
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
Nā waihoʻoluʻu hina
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Nā waihoʻoluʻu leo
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Nā ʻāpana
Nā pihi
@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 |
Nā palapala
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
Form states a me nā makaʻala
@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 |
Nā hāʻule iho
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
@@dropdownDividerTop |
#e5e5e5 |
@@dropdownDividerBottom |
@white |
Hui Hero
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Nā hui pū ʻana o Bootstrap
E pili ana i nā mixins
Nā huila kumu
ʻO kahi mixin maʻamau he mea hoʻokomo a ʻāpana paha no kahi snippet o CSS. Ua kākau ʻia e like me ka papa CSS a hiki ke kāhea ʻia ma nā wahi āpau.
- .element {mea {
- . clearfix ();
- }
Nā huila parametric
ʻO ka mixin parametric e like me ka mixin maʻamau, akā ʻae pū ia i nā ʻāpana (no laila ka inoa) me nā waiwai paʻamau.
- .element {mea {
- . palena - radius ( 4px );
- }
Hoʻohui maʻalahi iā ʻoe iho
Ma kahi kokoke i nā hui hui ʻo Bootstrap e mālama ʻia i mixins.less, kahi faila .less maikaʻi loa e hiki ai iā ʻoe ke hoʻohana i kahi mixin i kekahi o nā faila .less i loko o ka pahu hana.
No laila, e hele a hoʻohana i nā mea i loaʻa a i ʻole e ʻoluʻolu e hoʻohui i kāu ponoʻī e like me kou makemake.
Hoʻohui pū ʻia
Nā pono hana
| Mixin | Nā ʻāpana | Hoʻohana |
|---|---|---|
.clearfix() |
ʻaʻohe | Hoʻohui i kekahi makua e hoʻomaʻemaʻe i nā lana i loko |
.tab-focus() |
ʻaʻohe | E hoʻopili i ke ʻano kikoʻī Webkit a puni i ka outline Firefox |
.center-block() |
ʻaʻohe | Hoʻokaʻawale ʻokoʻa i kahi mea pae poloka me ka hoʻohana ʻanamargin: auto |
.ie7-inline-block() |
ʻaʻohe | E hoʻohana i ka mea maʻamau display: inline-blocke kiʻi i ke kākoʻo IE7 |
.size() |
@height @width |
E hoʻonohonoho koke i ke kiʻekiʻe a me ka laulā ma ka laina hoʻokahi |
.square() |
@size |
Kūkulu .size()ʻia e hoʻonohonoho i ka laula a me ke kiʻekiʻe e like me ka waiwai like |
.opacity() |
@opacity |
E hoʻonoho, ma nā helu holoʻokoʻa, i ka pākēneka opacity (e laʻa, "50" a i ʻole "75") |
Nā palapala
| Mixin | Nā ʻāpana | Hoʻohana |
|---|---|---|
.placeholder() |
@color: @placeholderText |
E hoʻonoho i ke placeholderkala kikokikona no nā mea hoʻokomo |
Palapala kiʻi
| Mixin | Nā ʻāpana | Hoʻohana |
|---|---|---|
#font > #family > .serif() |
ʻaʻohe | E hana i kahi mea e hoʻohana i kahi pūʻulu font serif |
#font > #family > .sans-serif() |
ʻaʻohe | E hana i kahi mea e hoʻohana i kahi waihona font sans-serif |
#font > #family > .monospace() |
ʻaʻohe | E hana i kahi mea e hoʻohana i kahi waihona monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
E hoʻonohonoho maʻalahi i ka nui font, ke kaumaha, a me ke alakaʻi |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
E hoʻonoho i ka ʻohana font i serif, a e hoʻomalu i ka nui, ke kaumaha, a me ke alakaʻi |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
E hoʻonoho i ka ʻohana font i sans-serif, a e kāohi i ka nui, ke kaumaha, a me ke alakaʻi |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
E hoʻonohonoho i ka ʻohana font i ka monospace, a e hoʻomalu i ka nui, ke kaumaha, a me ke alakaʻi |
Pūnaehana mānoanoa
| Mixin | Nā ʻāpana | Hoʻohana |
|---|---|---|
.container-fixed() |
ʻaʻohe | E hoʻokumu i kahi pahu hoʻopaʻa ʻana i kāu ʻike |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Hoʻokumu i kahi ʻōnaehana mākia pika (paʻa, lālani, a me nā kolamu) me n kolamu a me x pika ākea auwai. |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
E hana i ka ʻōnaehana mākia pākēneka me n kolamu a me x % ākea ākea |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
E hoʻomohala i ka ʻōnaehana pixel grid no inputnā mea, e helu ana i ka padding a me nā palena |
.makeColumn |
@columns: 1, @offset: 0 |
E hoʻohuli i kekahi divi kolamu mānoanoa me ka ʻole o nā .span*papa |
CSS3 waiwai
| Mixin | Nā ʻāpana | Hoʻohana |
|---|---|---|
.border-radius() |
@radius |
Poai i na kihi o kekahi mea. Hiki ke lilo i waiwai hoʻokahi a i ʻole ʻehā mau waiwai i hoʻokaʻawale ʻia |
.box-shadow() |
@shadow |
E hoʻohui i kahi aka kulu i kahi mea |
.transition() |
@transition |
Hoʻohui i ka hopena hoʻololi CSS3 (e laʻa, all .2s linear) |
.rotate() |
@degrees |
E hoʻohuli i kahi ʻeleʻele n degere |
.scale() |
@ratio |
E hoʻonui i kekahi mea i n mau manawa o kona nui kumu |
.translate() |
@x, @y |
E hoʻoneʻe i kahi mea ma nā mokulele x a me y |
.background-clip() |
@clip |
ʻOki i ke kua o kekahi mea (pono no border-radius) |
.background-size() |
@size |
E kāohi i ka nui o nā kiʻi hope ma o CSS3 |
.box-sizing() |
@boxmodel |
E hoʻololi i ke kŘkohu pahu no kekahi mea (e laʻa, border-boxno ka laula piha input) |
.user-select() |
@select |
E hoʻomalu i ke koho ʻana i ka pihi kikokikona ma kahi ʻaoʻao |
.backface-visibility() |
@visibility: visible |
Kāohi i ka wiliwili ʻana o ka ʻike i ka wā e hoʻohana ai i nā hoʻololi CSS 3D |
.resizable() |
@direction: both |
E hoʻololi i kekahi mea ma ka ʻākau a me lalo |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
E hoʻohana i ka ʻike o kēlā me kēia mea i nā kolamu CSS3 |
.hyphens() |
@mode: auto |
CSS3 hyphenation inā makemake ʻoe (me word-wrap: break-word) |
Nā kāʻei kua a me nā gradients
| Mixin | Nā ʻāpana | Hoʻohana |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Hāʻawi i kahi ʻeleʻele i kahi kala translucent |
#translucent > .border() |
@color: @white, @alpha: 1 |
Hāʻawi i kahi ʻeleʻele i ke kala palena translucent |
#gradient > .vertical() |
@startColor, @endColor |
E hana i kahi ʻōlinolino keʻa o ka polokalamu kele pūnaewele |
#gradient > .horizontal() |
@startColor, @endColor |
E hana i kahi ʻōlinolino keʻa o ka polokalamu kele pūnaewele |
#gradient > .directional() |
@startColor, @endColor, @deg |
E hana i kahi ʻoniʻoni ʻaoʻao ʻaoʻao o ke kua |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
E hana i ka gradient kāʻei kua ʻekolu kala kea |
#gradient > .radial() |
@innerColor, @outerColor |
E hana i kahi gradient radial back-browser background |
#gradient > .striped() |
@color, @angle |
E hana i kahi kaha ʻōniʻoniʻo kāʻei keʻa-browser |
#gradientBar() |
@primaryColor, @secondaryColor |
Hoʻohana ʻia no nā pihi e hāʻawi i kahi palena gradient a ʻeleʻele iki |
Hoʻopili ʻana i ka Bootstrap me LESS
Nā mea hana no ka hōʻuluʻulu ʻana
Node me makefile
E hoʻouka i ka LESS command line compiler, JSHint, Recess, a uglify-js ma ka honua holoʻokoʻa me npm ma ka holo ʻana i kēia kauoha:
$ npm hoʻokomo -g liʻiliʻi jshint recess uglify-js
Ke hoʻokomo ʻia e holo wale makemai ke kumu o kāu papa kuhikuhi bootstrap a ua mākaukau ʻoe.
Eia hou, inā ua hoʻokomo ʻia ʻo watchr , hiki iā ʻoe ke holo make watche hana hou i ka bootstrap i kēlā me kēia manawa āu e hoʻoponopono ai i kahi faila ma ka bootstrap lib (ʻaʻole koi ʻia kēia, he ala maʻalahi wale nō).
Laina kauoha
E hoʻouka i ka mea hana laina kauoha LESS ma o Node a holo i kēia kauoha:
$ lessc ./less/bootstrap.less > bootstrap.css
E hoʻokomo --compressi loko o kēlā kauoha inā ʻoe e hoʻāʻo e mālama i kekahi mau bytes!
Javascript
Hoʻoiho i ka Less.js hou loa a hoʻokomo i ke ala i laila (a me Bootstrap) i ka <head>.
<link rel="stylesheet/less" href="/path/to/bootstrap.less"> rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src="/path/to/less.js"></script><script src = "/path/to/less.js" ></script>
No ka hōʻuluʻulu hou ʻana i nā faila .less, mālama wale iā lākou a hoʻouka hou i kāu ʻaoʻao. Hoʻopili ʻo Less.js iā lākou a mālama iā lākou i kahi waihona kūloko.
ʻO ka polokalamu Mac manaʻole
Nānā ka polokalamu Mac manaʻole i nā papa kuhikuhi o nā faila .less a hoʻohui i ke code i nā faila kūloko ma hope o kēlā me kēia mālama ʻana o kahi faila .less i nānā ʻia.
Inā makemake ʻoe, hiki iā ʻoe ke hoʻololi i nā koho i loko o ka app no ka hoʻohaʻahaʻa maʻalahi a me ka papa kuhikuhi i hoʻopau ʻia nā faila i hōʻuluʻulu ʻia.
Nā polokalamu Mac hou aku
Crunch
ʻO Crunch kahi mea hoʻoponopono LESS maikaʻi a me ka mea hoʻopili i kūkulu ʻia ma Adobe Air.
CodeKit
Hoʻokumu ʻia e ke kanaka like me ka polokalamu Mac kūʻokoʻa ʻole, CodeKit he polokalamu Mac e hōʻuluʻulu ana i LESS, SASS, Stylus, a me CoffeeScript.
maʻalahi
ʻO Mac, Linux, a me ka polokalamu PC no ka huki ʻana a me ka hoʻokuʻu ʻana i nā faila LESS. Eia kekahi, aia ke code kumu ma GitHub .