Bi Bootstrap re LESS bikar tînin
Bootstrap-ê bi LESS -ê, pêş-processorek CSS-ê, xweş bikin û dirêj bikin, da ku ji guhêrbar, mixîn û yên din ên ku ji bo avakirina CSS-ya Bootstrap têne bikar anîn sûd werbigirin.
Bi LESS ve hatî çêkirin
Çima KÊM?
Bootstrap di bingehê xwe de bi LESS ve hatî çêkirin, zimanek şêwazek dînamîkî ku ji hêla hevalê me yê baş, Alexis Sellier ve hatî afirandin . Ew pêşveçûna pergalên-based CSS zûtir, hêsantir û bêtir kêfxweş dike.
Çi tê de heye?
Wekî dirêjkirina CSS-ê, LESS guhêrbar, mixînên ji bo perçeyên kodê yên ji nû ve bi kar anîn, operasyonên ji bo matematîkî yên hêsan, hêlîn, û hetta fonksiyonên rengîn vedihewîne.
Variables
Birêvebirina reng û nirxên pixelê di CSS-ê de dibe ku piçek êş be, bi gelemperî tijî kopî û paste. Lêbelê ne bi KÊMÊ - rengan an nirxên pixelê wekî guhêrbar destnîşan bikin û wan carekê biguhezînin.
Mixins
Ew sê daxuyaniyên radyoya sînor ku hûn hewce ne ku di CSS-ya birêkûpêk de bikin? Naha ew bi arîkariya mixins, perçeyên kodê ku hûn dikarin li her deverê ji nû ve bikar bînin daketin yek rêzê.
Operasyonên
Bi kirina matematîkê bi operasyonan re tevna xwe, pêşeng û super maqûltir bikin. Riya xwe ya berbi aqilmendiya CSS-ê zêde bikin, dabeş bikin, lê zêde bikin û kêm bikin.
Guherbarên Bootstrap guhêrbarên KÊM, nirxên wan, û rêwerzên bikaranînê
Hyperlinks
@linkColor |
#08c | Rengê nivîsa lînka xwerû | |
@linkColorHover |
darken(@linkColor, 15%) |
Rengê hêlînê nivîsa lînka xwerû |
sîstema Grid
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Tîpografi
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Rengên gewr
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Rengên devkî
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Components
Buttons
@primaryButtonBackground |
@linkColor |
Forms
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Dewlet û hişyariyan çêbikin
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Bootstrap mixins
Der barê mixins
Miksên bingehîn
Miksek bingehîn bi bingehîn ji bo perçeyek CSS-ê tevlêbûnek an parçeyek e. Ew mîna çînek CSS-ê têne nivîsandin û dikarin li her deverê bêne gazî kirin.
- . element {
- . zelalfix ();
- }
Mîksên Parametrîk
Mîksek parametrîkî mîna mîksînek bingehîn e, lê ew di heman demê de pîvanan (ji ber vê yekê nav) bi nirxên xwerû yên vebijarkî jî qebûl dike.
- . element {
- . sînor - radius ( 4px );
- }
Bi hêsanî ya xwe lê zêde bike
Hema hema hemî mîksên Bootstrap di mixins.less de têne hilanîn, pelek .less ya hêja ku dihêle hûn di pelên .kêm ên amûrê de mixin bikar bînin.
Ji ber vê yekê, pêşde biçin û yên heyî bikar bînin an jî xwe azad bikin ku hûn hewceyê xwe zêde bikin.
Miksên tê de hene
Utilities
| Mixin | Parametreyên | Bikaranîna |
|---|---|---|
.clearfix() |
netû | Li her dêûbav zêde bikin da ku floatên di hundurê de paqij bikin |
.tab-focus() |
netû | Şêweya fokusê ya Webkit-ê û nexşeya Firefox-ê li dora xwe bicîh bînin |
.center-block() |
netû | Otomotîk hêmanek asta blokê bikar tîne navendmargin: auto |
.ie7-inline-block() |
netû | Ji bilî birêkûpêk bikar bînin display: inline-blockda ku piştgiriya IE7 bistînin |
.size() |
@height: 5px, @width: 5px |
Bi lez bilindahî û firehiyê li ser yek rêzê bicîh bikin |
.square() |
@size: 5px |
Li ser .size()ava dike ku firehî û bilindahî wekî heman nirxê destnîşan bike |
.opacity() |
@opacity: 100 |
Bi tevahî hejmaran, rêjeya nezelaliyê destnîşan bikin (mînak, "50" an "75") |
Forms
| Mixin | Parametreyên | Bikaranîna |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Ji bo placeholdertêketinê rengê nivîsê saz bikin |
Tîpografi
| Mixin | Parametreyên | Bikaranîna |
|---|---|---|
#font > #family > .serif() |
netû | Hêmanek çêbikin stek tîpên serif bikar bînin |
#font > #family > .sans-serif() |
netû | Hêmanek çêbikin stek tîpên sans-serif bikar bînin |
#font > #family > .monospace() |
netû | Hêmanek çêbikin ku stûnek tîpên monospace bikar bîne |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Mezinahiya fontê, giranî û sereke bi hêsanî saz bikin |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Malbata tîpan li ser serif saz bikin, û mezinahî, giranî û sereke kontrol bikin |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Malbata tîpan li ser sans-serif bicîh bikin, û mezinahî, giranî û sereke kontrol bikin |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Malbata tîpan li monospace bicîh bikin, û mezinahî, giranî û pêşengiyê kontrol bikin |
sîstema Grid
| Mixin | Parametreyên | Bikaranîna |
|---|---|---|
.container-fixed() |
netû | Ji bo ku hûn naveroka xwe bigirin konteynirek navendek horizontî biafirînin |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Bi n stûnan û x pixel gemarê fireh pergalek tora pixel (konteyner, rêz û stûn) biafirînin. |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Bi n stûnan û x % gemarê fireh pergalek torê ya pêşîn biafirînin |
Taybetmendiyên CSS3
| Mixin | Parametreyên | Bikaranîna |
|---|---|---|
.border-radius() |
@radius: 5px |
Kuçên hêmanekê dor bikin. Dikare nirxek yek an çar nirxên cihê-veqetandî be |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Siya dilopekê li hêmanekê zêde bikin |
.transition() |
@transition |
Bandora veguherîna CSS3 zêde bike (mînak, all .2s linear) |
.rotate() |
@degrees |
Elementek n dereceyan bizivirîne |
.scale() |
@ratio |
Pîvanek hêmanek bi n -ê mezinahiya wê ya orjînal bikin |
.translate() |
@x: 0, @y: 0 |
Li ser x û y-yê hêmanekê bigerînin |
.background-clip() |
@clip |
Paşîna hêmanek bibire (bikêr e border-radius) |
.background-size() |
@size |
Mezinahiya wêneyên paşîn bi CSS3 ve kontrol bikin |
.box-sizing() |
@boxmodel |
Modela qutikê ji bo hêmanek biguhezîne (mînak, border-boxji bo firehiyek tevahî input) |
.user-select() |
@select |
Hilbijartina cursorê ya nivîsê li ser rûpelê kontrol bikin |
.resizable() |
@direction: both |
Li rast û binî her hêmanek ji nû ve mezinbûnê çêbikin |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Naveroka her hêmanek stûnên CSS3 bikar bînin |
Paşnav û gradient
| Mixin | Parametreyên | Bikaranîna |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Rengek paşnavê ya şefaf bide elementek |
#translucent > .border() |
@color: @white, @alpha: 1 |
Ji hêmanekê re rengê sînorê şefaf bidin |
#gradient > .vertical() |
@startColor, @endColor |
Gerokek paşîn a vertîkal a cross-browser biafirînin |
#gradient > .horizontal() |
@startColor, @endColor |
Gerokek paşîn a horizontî ya cross-browser biafirînin |
#gradient > .directional() |
@startColor, @endColor, @deg |
Gerokek paşîn a rênîşander a cross-browser biafirînin |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Gerokek paşîn a sê-rengî ya xaça gerokê biafirînin |
#gradient > .radial() |
@innerColor, @outerColor |
Gerokek paşîn a radîkal a cross-browser biafirînin |
#gradient > .striped() |
@color, @angle |
Gerokek paşîn a xaç-gerokê biafirînin |
#gradientBar() |
@primaryColor, @secondaryColor |
Ji bo bişkokan tê bikar anîn da ku qonaxek hûrgelek û hinekî tarîtir destnîşan bike |
Berhevkirina Bootstrap bi LESS
Amûrên berhevkirinê
Node bi makefile
Berhevkarê rêza fermanê LESS-ê saz bikin û uglyfy-js-ê li seranserê cîhanê bi npm-ê bi xebitandina fermana jêrîn saz bikin:
$ npm saz bike -g kêm ugly-js
Piştî ku hatî saz kirin tenê ji makekoka pelrêça bootstrap-a xwe bimeşîne û hûn hemî amade ne.
Wekî din, heke we watchr saz kiriye, dibe ku hûn make watchher carê ku hûn pelek di lib bootstrap-ê de biguherînin (ev ne hewce ye, tenê rêbazek hêsan e) bi rê ve bibin ku bootstrap bixweber ji nû ve were çêkirin.
Rêza fermanê
Amûra rêza fermanê LESS bi navgîniya Node saz bikin û emrê jêrîn bimeşînin:
$lessc ./lib/bootstrap.less > bootstrap.css
--compressGer hûn hewl didin ku hin bytes hilînin, pê ewle bin ku hûn di wê fermanê de bicîh bikin!
Javascript
Less.js-a herî dawî dakêşin û rêça wê (û Bootstrap) di nav <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" </script>
Ji bo ku pelên .less ji nû ve berhev bikin, tenê wan hilînin û rûpela xwe ji nû ve bar bikin. Less.js wan berhev dike û di hilanîna herêmî de hilîne.
Serlêdana nefermî ya Mac
Serlêdana nefermî ya Mac- ê li pelrêçên pelên .kêm temaşe dike û piştî her tomarkirina pelek .kêm hatî temaşekirin kodê li pelên herêmî berhev dike.
Heke hûn bixwazin, hûn dikarin tercihên di sepanê de ji bo kêmkirina otomatîkî biguhezînin û pelên berhevkirî di kîjan pelrêça de diqedin.
Zêdetir sepanên Mac
Crunch
Crunch edîtor û berhevkarek Kêmtir e ku li ser Adobe Air hatî çêkirin e.
CodeKit
CodeKit ji hêla heman zilamê ve wekî sepana Mac-ê ya nefermî ve hatî afirandin, serîlêdanek Mac-ê ye ku LESS, SASS, Stylus û CoffeeScript berhev dike.
Simpless
Serlêdana Mac, Linux, û PC-ê ji bo berhevkirina pelên KÊM bikişîne û davêje. Zêdeyî, koda çavkaniyê li ser GitHub e .