Te whakamahi i te iti me te Bootstrap
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.
He mea hanga ki te iti
He aha te MAHI?
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.
He aha kei roto?
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.
Taurangi
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.
Whakaranu
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.
Nga Mahi
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.
Taurangi Bootstrap He iti ake nga taurangi, o ratou uara, me nga aratohu whakamahi
Honongaitua
@linkColor |
#08c | Tae kuputuhi hono taunoa | |
@linkColorHover |
darken(@linkColor, 15%) |
Tae whakaparo kuputuhi hono taunoa |
Pūnaha mātiti
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Kuputuhi
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Nga tae kirikiri
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Nga tae nako
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Waehanga
Patene
@primaryButtonBackground |
@linkColor |
Puka
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Puka āhua me matohi
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Whakaranu Bootstrap
Mo nga ranunga
Whakaranu taketake
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 ();
- }
Whakaranu parametric
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 );
- }
Kia ngawari te taapiri i a koe ake
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.
Nga ranunga whakauru
Nga taputapu
| 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-blockkia 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") |
Puka
| Mixin | Tawhā | Whakamahinga |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Tautuhi te placeholdertae kuputuhi mo nga whakaurunga |
Kuputuhi
| 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 |
Pūnaha mātiti
| Mixin | Tawhā | Whakamahinga |
|---|---|---|
.container-fixed() |
kahore | Waihangahia he ipu whakapae mo te pupuri i to ihirangi |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Hangaia he punaha matiti pika (ipu, haupae me nga pou) me nga n pou me te x pika te whanui awaawa |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Hangaia he punaha matiti o mua ake nei me nga n pou me te x % te whanui o te awaawa |
CSS3 āhuatanga
| 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-boxmo 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 |
Nga papamuri me nga rōnaki
| 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 |
Te whakahiato i te Bootstrap me te TITI
Nga taputapu mo te whakahiato
Node with makefile
Tāutahia te kaitoi raina whakahau LESS me te uglify-js puta noa i te ao me te npm ma te whakahaere i te whakahau e whai ake nei:
$ npm tāuta -g iti uglify-js
Kia oti te whakauru, rere noa makemai 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 watchki 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).
Raina whakahau
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 --compressi taua whakahau mena kei te ngana koe ki te penapena i etahi paita!
Javascript
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.
Taupānga Mac kore mana
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.
Ētahi atu taupānga Mac
Koruke
Ko Crunch he etita iti me te kaikohi i hangaia i runga i te Adobe Air.
CodeKit
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.
Maamaa
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 .