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
Tauira me nga hononga
@bodyBackground |
@white |
Tae papamuri whārangi | |
@textColor |
@grayDark |
Tae kuputuhi taunoa mo te tinana katoa, nga pane, me etahi atu | |
@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
@sansFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Monaco, "Courier New", monospace | |
@baseFontSize |
13px | Me pika |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px | Me pika |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
Ripanga
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
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
@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 |
Puka
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
Puka āhua me matohi
@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 |
Whakataka
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
@@dropdownDividerTop |
#e5e5e5 |
@@dropdownDividerBottom |
@white |
Waehe toa
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
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 @width |
Whakaritea tere te teitei me te whanui ki te raina kotahi |
.square() |
@size |
Ka hangaia .size()hei tautuhi i te whanui me te teitei kia rite ki te uara |
.opacity() |
@opacity |
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 pūnaha mātiti ōrau he n tīwae me te x % te whanui o te awaawa |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
Hangaia te punaha matiti pika mo inputnga huānga, te kaute mo te papa me nga taitapa |
.makeColumn |
@columns: 1, @offset: 0 |
Hurihia divhei tīwae mātiti karekau he .span*karaehe |
CSS3 āhuatanga
| Mixin | Tawhā | Whakamahinga |
|---|---|---|
.border-radius() |
@radius |
Whakaawhiwhia nga kokonga o tetahi huānga. Ka taea te uara kotahi, e wha ranei nga uara wehe mokowā |
.box-shadow() |
@shadow |
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, @y |
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 |
.backface-visibility() |
@visibility: visible |
Aukati i te korikori o te ihirangi ina whakamahi ana i nga huringa CSS 3D |
.resizable() |
@direction: both |
Hangaia tetahi huānga ka taea te whakarereke i te taha matau me raro |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
Hangaia nga ihirangi o tetahi huānga ma te whakamahi i nga pou CSS3 |
.hyphens() |
@mode: auto |
Tohuhono CSS3 ina hiahia koe (kei roto word-wrap: break-word) |
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, JSHint, Recess, me 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 jshint recess 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 ./less/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 .