Ukusebenzisa i-LESS ngeBootstrap
Yenza ngokwezifiso kwaye wandise i-Bootstrap nge - LESS , i-preprocessor ye-CSS, ukuthatha ithuba lokuguquguquka, imixube, kunye nezinye ezisetyenziselwa ukwakha i-Bootstrap's CSS.
Yakhiwe nge-LESS
Kutheni KUPHANTSI?
I-Bootstrap yenziwe nge-LESS kumbindi wayo, ulwimi oluguquguqukayo lweshiti lephepha elenziwe ngumhlobo wethu olungileyo, u- Alexis Sellier . Yenza ukuphuhlisa iinkqubo-based CSS ngokukhawuleza, lula, kwaye kumnandi ngakumbi.
Yintoni ebandakanyiweyo?
Njengolwandiso lwe-CSS, i-LESS ibandakanya izinto eziguquguqukayo, imixube yeekhowudi eziphinda zisetyenziswe, imisebenzi yezibalo ezilula, ukuzalanisa, kunye nemisebenzi yombala.
Izinto eziguquguqukayo
Ukulawula imibala kunye namaxabiso e-pixel kwi-CSS kunokuba yintlungu encinci, ihlala igcwele ikopi kunye nokuncamathisela. Hayi nge-LESS nangona-nika imibala okanye ixabiso le-pixel njengezinto eziguquguqukayo kwaye uzitshintshe kube kanye.
Imixube
Ezo zibhengezo zomda werediyasi ezintathu ekufuneka uyenzile kwi-CSS eqhelekileyo? Ngoku baphantsi kumgca omnye ngoncedo lwemixube, iziqwengana zekhowudi onokuphinda uzisebenzisele naphi na.
Imisebenzi
Yenza igridi yakho, ikhokele, kwaye ibe bhetyebhetye ngakumbi ngokwenza imathematika kubhabho ngemisebenzi. Phindaphinda, yahlule, yongeza, kwaye uthabathe indlela yakho eya kwi-CSS yengqondo.
Iinguqu ze-Bootstrap eziguquguqukayo eziphantsi, amaxabiso azo, kunye nezikhokelo zokusetyenziswa
I-scaffolding kunye namakhonkco
@bodyBackground |
@white |
Umbala wephepha ongasemva | |
@textColor |
@grayDark |
Umbala wokubhaliweyo omiselweyo womzimba uphela, izihloko, nokunye | |
@linkColor |
#08c |
Umbala wombhalo wekhonkco omiselweyo | |
@linkColorHover |
darken(@linkColor, 15%) |
Ikhonkco elimiselweyo lombala wehove yesicatshulwa |
Inkqubo yegridi
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Ukuchwetheza
@sansFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Monaco, "Courier New", monospace | |
@baseFontSize |
13px | Kufuneka ibe pixels |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px | Kufuneka ibe pixels |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
Iitafile
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
Imibala engwevu
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Imibala ye-accent
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Amacandelo
Amaqhosha
@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 |
Iifom
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
Iifom zelizwe kunye nezilumkiso
@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 |
Ukwehla
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
@@dropdownDividerTop |
#e5e5e5 |
@@dropdownDividerBottom |
@white |
Iyunithi yeqhawe
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Imixube yeBootstrap
Malunga nemixube
Imixube esisiseko
Umxube osisiseko kukubandakanya okanye inxenye yesnippet yeCSS. Zibhalwe njengeklasi yeCSS kwaye zinokubizwa naphi na.
- . into {
- . clearfix ();
- }
Imixube yeParametric
I-parametric mixin ifana nje nomxube osisiseko, kodwa iyayamkela iparameters (kungoko igama) ngamaxabiso angagqibekanga.
- . into {
- . umda - irediyasi ( 4px );
- }
Yongeza eyakho ngokulula
Phantse yonke imixube ye-Bootstrap igcinwe kwi-mixins.less, into emangalisayo eluncedo .ifayile encinci eyenza ukuba usebenzise i-mixin kuyo nayiphi na ifayile engaphantsi kwi-toolkit.
Ke, qhubeka usebenzise esele ukho okanye uzive ukhululekile ukongeza ezakho njengoko ufuna.
Ibandakanyiwe imixube
Izinto eziluncedo
| Mixin | Iiparamitha | Ukusetyenziswa |
|---|---|---|
.clearfix() |
akukho nanye | Yongeza nakuwuphi na umzali ukususa izinto ezidadayo ngaphakathi |
.tab-focus() |
akukho nanye | Faka isimbo sokugxila kwiWebkit kunye nolwandlalo olungqukuva lweFirefox |
.center-block() |
akukho nanye | Auto iziko ibhloko-level element usebenzisamargin: auto |
.ie7-inline-block() |
akukho nanye | Sebenzisa ukongeza rhoqo display: inline-blockukufumana inkxaso ye-IE7 |
.size() |
@height @width |
Setha ngokukhawuleza ubude kunye nobubanzi kumgca omnye |
.square() |
@size |
Yakha .size()ukuseta ububanzi kunye nobude njengexabiso elifanayo |
.opacity() |
@opacity |
Seta, ngamanani apheleleyo, ipesenti yokungafihli (umz., "50" okanye "75") |
Iifom
| Mixin | Iiparamitha | Ukusetyenziswa |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Seta placeholderumbala wokubhaliweyo wamagalelo |
Ukuchwetheza
| Mixin | Iiparamitha | Ukusetyenziswa |
|---|---|---|
#font > #family > .serif() |
akukho nanye | Yenza isiqalelo sebenzisa isitakhi sefonti yeserif |
#font > #family > .sans-serif() |
akukho nanye | Yenza isiqalelo sebenzisa isitakhi sefonti sans-serif |
#font > #family > .monospace() |
akukho nanye | Yenza isiqalelo sebenzisa isitakhi sefonti ye-monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Seta ngokulula ubungakanani befonti, ubunzima, kunye nokukhokela |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Seta usapho lwefonti kwi-serif, kwaye ulawule ubungakanani, ubunzima, kunye nokukhokela |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Seta usapho lwefonti kwi-sans-serif, kwaye ulawule ubungakanani, ubunzima, kunye nokukhokela |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Seta usapho lwefonti kwi-monospace, kunye nokulawula ubungakanani, ubunzima, kunye nokukhokela |
Inkqubo yegridi
| Mixin | Iiparamitha | Ukusetyenziswa |
|---|---|---|
.container-fixed() |
akukho nanye | Yenza isikhongozeli esithe tye ukuze ubambe umxholo wakho |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Yenza i-pixel yegridi yesixokelelwano (isikhongozeli, umqolo, kunye nekholamu) enekholamu ze- n kunye ne- pixel ebanzi yegutter |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Yenza ipesenti yesixokelelwano segridi ngeekholamu ze- n kunye ne- x % igutter ebanzi |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
Yenza inkqubo yegridi ye-pixel inputyezinto, ukubalwa kwe-padding kunye nemida |
.makeColumn |
@columns: 1, @offset: 0 |
Jika nayiphi na divikholomu yegridi ngaphandle .span*kweeklasi |
Iimpawu zeCSS3
| Mixin | Iiparamitha | Ukusetyenziswa |
|---|---|---|
.border-radius() |
@radius |
Jikelezisa iikona zesiqalelo. Inokuba lixabiso elinye okanye amaxabiso amane ahlukaniswe isithuba |
.box-shadow() |
@shadow |
Yongeza isithunzi sokulahla into |
.transition() |
@transition |
Yongeza isiphumo senguqu ye-CSS3 (umzekelo, all .2s linear) |
.rotate() |
@degrees |
Jikelezisa isiqalelo n izidanga |
.scale() |
@ratio |
Linganisa into ukuya ku- n ngokuphindaphinda ubukhulu bayo boqobo |
.translate() |
@x, @y |
Hambisa isiqalelo kwi-x kunye ne-y iinqwelomoya |
.background-clip() |
@clip |
Nciphisa imvelaphi yesiqalelo (iluncedo border-radius) |
.background-size() |
@size |
Lawula ubungakanani bemifanekiso yangasemva ngeCSS3 |
.box-sizing() |
@boxmodel |
Guqula imodeli yebhokisi yento (umzekelo, border-boxkububanzi obugcweleyo input) |
.user-select() |
@select |
Lawula isalathisi sokukhetha okubhaliweyo kwiphepha |
.backface-visibility() |
@visibility: visible |
Thintela ukuqhwanyaza komxholo xa usebenzisa iinguqu zeCSS 3D |
.resizable() |
@direction: both |
Yenza nasiphi na isiqalelo siphinde silingane ekunene nasezantsi |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
Yenza umxholo wayo nayiphi na into usebenzise iikholamu zeCSS3 |
.hyphens() |
@mode: auto |
CSS3 hyphenation xa uyifuna (ibandakanya word-wrap: break-word) |
Imvelaphi kunye neegradient
| Mixin | Iiparamitha | Ukusetyenziswa |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Nika isiqalelo umbala ongasemva ogqamileyo |
#translucent > .border() |
@color: @white, @alpha: 1 |
Nika isiqalelo umbala ogqamileyo womda |
#gradient > .vertical() |
@startColor, @endColor |
Yenza ibhrawuza enqamlezileyo ngokuthe nkqo ukuthambeka okungasemva |
#gradient > .horizontal() |
@startColor, @endColor |
Yenza ibhrawuza enqamlezayo ethe tyaba ngasemva ngokuthambeka |
#gradient > .directional() |
@startColor, @endColor, @deg |
Yenza i-gradient yemvelaphi yebrowser enqamlezayo |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Yenza ibhrawuza yemibala emithathu yegradient yangasemva |
#gradient > .radial() |
@innerColor, @outerColor |
Yenza ibhrawuza enqamlezileyo yokuthambeka yangasemva |
#gradient > .striped() |
@color, @angle |
Yenza ibhrawuza enemigca engasemva yegradient |
#gradientBar() |
@primaryColor, @secondaryColor |
Isetyenziselwa amaqhosha ukunika umda kunye nomda obumnyama kancinane |
Ukuqulunqa i-Bootstrap nge-LESS
Izixhobo zokuqulunqa
Indawo enemakefile
Faka umqokeleli welayini yomyalelo OMNCANE, JSHnt, Recess, kunye ne-uglip-js kwihlabathi jikelele nge-npm ngokwenza lo myalelo ulandelayo:
$ npm faka -g ngaphantsi kwe-jshint recess uglip-js
Nje ukuba ifakelwe vele ubaleke makeukusuka kwingcambu yolawulo lwakho lwe-bootstrap kwaye ulungele.
Ukongeza, ukuba ufake umlindi , ungabalekamake watch ukuba ne-bootstrap yakhiwe ngokuzenzekelayo ngalo lonke ixesha uhlela ifayile kwi-bootstrap lib (oku akufuneki, indlela nje elula).
Umgca womyalelo
Faka i-LESS isixhobo somgca womyalelo ngeNode kwaye usebenzise lo myalelo ulandelayo:
$ lessc ./less/bootstrap.less > bootstrap.css
Qinisekisa ukubandakanya --compresskulo myalelo ukuba uzama ukugcina ii-bytes ezithile!
Javascript
Khuphela iLess.js yamva nje kwaye uquke indlela eya kuyo (kunye neBootstrap) kwifayile ye <head>.
<ikhonkco rel = "icwecwe lesimbo/ngaphantsi" href = "/indlela/to/bootstrap.less" > <script src = "/indlela/to/less.js" ></script>
Ukuqokelela kwakhona iifayile ezingaphantsi, zigcine kwaye ulayishe kwakhona iphepha lakho. I-Less.js iyaziqokelela kwaye izigcine kwindawo yokugcina indawo.
Usetyenziso olungekho semthethweni lweMac
I-app engekho semthethweni ye-Mac ijonga abalawuli beefayile ezingaphantsi. kwaye iqulunqa ikhowudi kwiifayile zendawo emva kokugcinwa kwefayile ebukeleyo.
Ukuba uyathanda, ungaguqula okukhethiweyo kwi-app ukuze uzenzele ngokuzenzekelayo kwaye loluphi uvimba weefayili eziqokelelweyo eziphelela kuwo.
Usetyenziso olungakumbi lweMac
Qhuba
I-Crunch ngumhleli obukekayo KANYE kunye nomqokeleli owakhiwe kwi-Adobe Air.
CodeKit
Yenziwe ngumfana ofanayo nosetyenziso olungekho semthethweni lwe-Mac, iCodeKit yi-app ye-Mac ehlanganisa i-LESS, i-SASS, i-Stylus, kunye ne-CoffeeScript.
Lula
IMac, iLinux, kunye nePC app yokutsala nokulahla ukuqulunqa iifayile eziphantsi. Ngaphezu koko, ikhowudi yomthombo ikwiGitHub .