Whakaritea me te whakawhānui ake i a Bootstrap me te LESS , he kaiwhakatikatika CSS, hei whakamahi i nga taurangi, whakauru, me etahi atu mea e whakamahia ana hei hanga i te CSS Bootstrap.
Ko te Bootstrap he mea hanga me te MAHI i tona uho, he reo rauhua hihiri i hangaia e to maatau hoa pai, a Alexis Sellier . He tere ake, he ngawari ake, he ngahau hoki te whakawhanake i te CSS i runga i nga punaha.
Hei toronga mo te CSS, ko te LESS kei roto i nga taurangi, nga whakaurunga mo nga mahanga waehere ka taea te whakamahi, nga mahi mo te pangarau ngawari, te kohanga, tae noa ki nga mahi tae.
Ko te whakahaere i nga tae me nga uara pika i roto i te CSS ka tino mamae, ka ki tonu i te kape me te whakapiri. Ehara i te mea he iti ake—whakaritea nga tae me nga uara pika hei taurangi ka huri kotahi.
Ko enei whakapuakanga rohe-raupapa e toru me mahi koe i roto i te CSS? Inaianei kua heke ratou ki te rarangi kotahi me te awhina o nga whakauru, nga mahanga o te waehere ka taea e koe te whakamahi ano ki hea.
Hangaia to matiti, arataki, kia ngawari ake ma te mahi pangarau i runga i te rere me nga mahi. Whakareatia, whakawehea, taapiri, ka tango i to ara ki te maatatanga CSS.
@linkColor |
#08c | Tae kuputuhi hono taunoa | |
@linkColorHover |
darken(@linkColor, 15%) |
Tae whakaparo kuputuhi hono taunoa |
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Ko te ranunga taketake he whakauru, he waahanga ranei mo tetahi waahanga o CSS. He rite tonu te tuhi ki te akomanga CSS ka taea te karanga ki hea.
- . huānga {
- . whakatika marama ();
- }
He rite tonu te ranunga parametric ki te whakaranu taketake, engari ka whakaae ano ia ki nga tawhā (no reira te ingoa) me nga uara taunoa.
- . huānga {
- . taitapa - radius ( 4px );
- }
Tata ki te katoa o nga whakaurunga a Bootstrap kei te rongoa i roto i te mixins.less, he konae whaipainga .less ka taea e koe te whakamahi i te ranunga i roto i nga konae .less kei roto i te kete taputapu.
Na, haere ki mua me te whakamahi i nga mea o mua, me pai ranei ki te taapiri i a koe ake e hiahia ana koe.
Mixin | Tawhā | Whakamahinga |
---|---|---|
.clearfix() |
kahore | Taapirihia ki tetahi matua ki te whakakore i nga waka o roto |
.tab-focus() |
kahore | Hoatuhia te ahua arotahi Webkit me te whakahuahua Firefox huri noa |
.center-block() |
kahore | Whakakotahi aunoa i tetahi huānga taumata paraka ma te whakamahimargin: auto |
.ie7-inline-block() |
kahore | Whakamahia hei taapiri i nga wa katoa display: inline-block kia whiwhi tautoko IE7 |
.size() |
@height: 5px, @width: 5px |
Whakaritea tere te teitei me te whanui ki te raina kotahi |
.square() |
@size: 5px |
Ka hangaia .size() hei tautuhi i te whanui me te teitei kia rite ki te uara |
.opacity() |
@opacity: 100 |
Whakatakotoria, hei tau katoa, te ōrau opacity (hei tauira, "50" ranei "75") |
Mixin | Tawhā | Whakamahinga |
---|---|---|
.placeholder() |
@color: @placeholderText |
Tautuhi te placeholder tae kuputuhi mo nga whakaurunga |
Mixin | Tawhā | Whakamahinga |
---|---|---|
#font > #family > .serif() |
kahore | Hangaia he huānga ma te whakamahi i te puranga momotuhi serif |
#font > #family > .sans-serif() |
kahore | Hangaia he huānga ma te whakamahi i te tapae momotuhi sans-serif |
#font > #family > .monospace() |
kahore | Hangaia he huānga ma te whakamahi i te tapae momotuhi mokowāhiko |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Whakaritea te rahi momotuhi, te taumaha me te arahi |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Tautuhia te whanau momotuhi ki te serif, me te whakahaere i te rahi, te taumaha, me te arahi |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Tautuhi te whanau momotuhi ki te sans-serif, me te whakahaere i te rahi, te taumaha me te arahi |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Tautuhia te whanau momotuhi ki te mokowhiti kotahi, me te whakahaere i te rahi, te taumaha, me te arahi |
Mixin | Tawhā | Whakamahinga |
---|---|---|
.container-fixed() |
kahore | Whakaratohia he ipu whanui-whanui (whakatakotoria me te @siteWidth ) hei pupuri i to ihirangi |
.columns() |
@columns: 1 |
Hangaia he tīwae mātiti e hora ana ki te maha o ngā tīwae (taunoa ki te 1 tīwae) |
.offset() |
@columns: 1 |
Wāhikētia tētahi tīwae mātiti me te tawhē mauī e horahia ana ngā tīwae maha |
.gridColumn() |
kahore | Hangaia he huānga kia rewa ano he pou matiti |
Mixin | Tawhā | Whakamahinga |
---|---|---|
.border-radius() |
@radius: 5px |
Whakaawhiwhia nga kokonga o tetahi huānga. Ka taea te uara kotahi, e wha ranei nga uara wehe mokowā |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Tāpirihia he atarangi taka ki tētahi huānga |
.transition() |
@transition |
Tāpirihia te pānga whakawhiti CSS3 (hei tauira, all .2s linear ) |
.rotate() |
@degrees |
Hurihia he huānga n tohu |
.scale() |
@ratio |
Whakatauinehia te huānga ki te n wa o tona rahi taketake |
.translate() |
@x: 0, @y: 0 |
Nukuhia he huānga ki runga i nga rererangi x me y |
.background-clip() |
@clip |
Poroa te papamuri o tetahi huānga (he mea pai mo border-radius ) |
.background-size() |
@size |
Whakahaerehia te rahi o nga whakaahua papamuri ma te CSS3 |
.box-sizing() |
@boxmodel |
Hurihia te tauira pouaka mo tetahi huānga (hei tauira, border-box mo te whanui-katoa input ) |
.user-select() |
@select |
Whakahaerehia te kowhiringa pehu o te kuputuhi i runga i te wharangi |
.resizable() |
@direction: both |
Hangaia tetahi huānga ka taea te whakarereke i te taha matau me raro |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Hangaia nga ihirangi o tetahi huānga ma te whakamahi i nga pou CSS3 |
Mixin | Tawhā | Whakamahinga |
---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Hoatu he huānga he tae papamuri marama |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Hoatu ki tetahi huānga he tae taitapa marama |
.#gradient > .vertical() |
@startColor, @endColor |
Waihangatia he rōnaki papamuri poutū-whakatirotiro |
.#gradient > .horizontal() |
@startColor, @endColor |
Waihangatia he rōnaki papamuri whakapae-whakawhiti |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Waihangatia he rōnaki papamuri aronga-whakawhiti |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Waihangatia he rōnaki papamuri-toru-tae ki te tirotiro |
.#gradient > .radial() |
@innerColor, @outerColor |
Waihangatia he rōnaki papamuri whiti-kaitirotiro |
.#gradient > .striped() |
@color, @angle |
Waihangatia he rōnaki papamuri whiti-pūtirotiro purepure |
.#gradientBar() |
@primaryColor, @secondaryColor |
Ka whakamahia mo nga paatene hei tautapa i te taitapa rōnaki me te taitapa paku pouri |
Tāutahia te kaitoha raina whakahau LESS puta noa i te ao me te npm ma te whakahaere i te whakahau e whai ake nei:
$ npm tāuta -g iti
Kia oti te whakauru, rere noa make
mai i te putake o to whaiaronga bootstrap ka oti katoa koe.
I tua atu, ki te mea kua whakauruhia e koe te kaitirotiro , ka oma koe make watch
ki te hanga aunoa i te bootstrap i nga wa katoa ka whakatika koe i tetahi konae kei roto i te bootstrap lib (kaore tenei e hiahiatia, he tikanga ngawari noa).
Tāutahia te taputapu raina whakahau LESS ma te Node ka whakahaere i te whakahau e whai ake nei:
$ lessc ./lib/bootstrap.less > bootstrap.css
Me whakauru ki roto --compress
i taua whakahau mena kei te ngana koe ki te penapena i etahi paita!
Tikiake i te Less.js hou me te whakauru i te ara ki reira (me Bootstrap) i roto i te <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Hei whakahiato i nga konae .iti, tiakina ka utaina ano to wharangi. Ka whakahiato e Less.js ka penapena ki roto i te rokiroki o te rohe.
Ko te taupānga Mac kore mana e maataki i nga raarangi o nga konae .less me te whakahiato i te waehere ki nga konae aa-rohe i muri i nga penapena katoa o te konae .iti ka tirohia.
Ki te pai koe, ka taea e koe te takahuri i nga manakohanga i roto i te taupānga mo te whakaiti aunoa me te raarangi o nga konae whakahiato ka mutu.
Ko Crunch he etita iti me te kaikohi i hangaia i runga i te Adobe Air.
He mea hanga e te tangata kotahi ki te taupānga Mac kore mana, CodeKit he taupānga Mac e whakahiato ana i te LESS, SASS, Stylus, me CoffeeScript.
Mac, Linux, me te taupānga PC mo te toia me te whakataka te whakahiato i nga konae MAHI. Ano, ko te waehere puna kei runga i GitHub .