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
Amakhonkco
@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
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
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
@primaryButtonBackground |
@linkColor |
Iifom
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Iifom zelizwe kunye nezilumkiso
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
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: 5px, @width: 5px |
Setha ngokukhawuleza ubude kunye nobubanzi kumgca omnye |
.square() |
@size: 5px |
Yakha .size()ukuseta ububanzi kunye nobude njengexabiso elifanayo |
.opacity() |
@opacity: 100 |
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 | Nikezela ngobubanzi obusisigxina (esetwe nge @siteWidth) isikhongozeli sokubamba umxholo wakho |
.columns() |
@columns: 1 |
Yakha ikholamu yegridi enwenwela kulo naliphi na inani leentsika (okwenyani ukuya kumhlathi omnye) |
.offset() |
@columns: 1 |
Misela umhlathi wegridi ngomda wasekhohlo odlula naliphi na inani leekholamu |
.gridColumn() |
akukho nanye | Yenza into idada njengekholamu yegridi |
Iimpawu zeCSS3
| Mixin | Iiparamitha | Ukusetyenziswa |
|---|---|---|
.border-radius() |
@radius: 5px |
Jikelezisa iikona zesiqalelo. Inokuba lixabiso elinye okanye amaxabiso amane ahlukaniswe isithuba |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
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: 0, @y: 0 |
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 |
.resizable() |
@direction: both |
Yenza nasiphi na isiqalelo siphinde silingane ekunene nasezantsi |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Yenza umxholo wayo nayiphi na into usebenzise iikholamu zeCSS3 |
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 womyalelo we-LESS kwihlabathi jikelele nge-npm ngokusebenzisa lo myalelo ulandelayo:
$ npm faka -g ngaphantsi
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 ./lib/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 .