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 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.

Ako atu

He iti ake te CSS

Tirohia te paetukutuku mana i http://lesscss.org/ ki te ako atu.

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.

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

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.

  1. . huānga {
  2. . whakatika marama ();
  3. }

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.

  1. . huānga {
  2. . taitapa - radius ( 4px );
  3. }

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
Tuhipoka: Mena kei te tuku tono kume koe ki a GitHub me te CSS whakarereke, me whakahiato ano e koe te CSS ma tetahi o enei tikanga.

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 .