Kutumia LESS na Bootstrap

Geuza kukufaa na upanue Bootstrap ukitumia LESS , kichakataji awali cha CSS, ili kunufaika na viambajengo, michanganyiko, na zaidi kutumika kuunda CSS ya Bootstrap.

Kwa nini CHINI?

Bootstrap imeundwa na LESS msingi wake, lugha ya laha ya mtindo inayobadilika iliyoundwa na rafiki yetu wa karibu, Alexis Sellier . Inafanya kuendeleza CSS kulingana na mifumo haraka, rahisi na ya kufurahisha zaidi.

Je, ni pamoja na nini?

Kama kiendelezi cha CSS, LESS inajumuisha vigeu, michanganyiko ya vijisehemu vya msimbo vinavyoweza kutumika tena, shughuli za hesabu rahisi, kuweka kiota na hata vipengele vya rangi.

Jifunze zaidi

Tembelea tovuti rasmi katika http://lesscss.org/ ili kujifunza zaidi.

Vigezo

Kudhibiti rangi na thamani za pikseli katika CSS kunaweza kuwa na uchungu kidogo, kwa kawaida kunakili na kubandika. Sio kwa LESS ingawa-peana rangi au maadili ya saizi kama vigeuzo na ubadilishe mara moja.

Mchanganyiko

Hayo matamko matatu ya mpaka-radius unahitaji kufanya katika ol' CSS ya kawaida? Sasa ziko chini ya mstari mmoja kwa usaidizi wa mchanganyiko, vijisehemu vya msimbo unaweza kutumia tena popote.

Uendeshaji

Fanya gridi yako, iongoze, na iwe rahisi kubadilika zaidi kwa kufanya hesabu kwa kuruka na shughuli. Zidisha, gawanya, ongeza, na uondoe njia yako hadi kwa utimamu wa CSS.

Kiunzi na viungo

`@bodyBackground`	`@white`	Rangi ya mandharinyuma ya ukurasa
`@textColor`	`@grayDark`	Rangi chaguomsingi ya maandishi kwa mwili mzima, vichwa na zaidi
`@linkColor`	`#08c`	Rangi ya maandishi ya kiungo chaguomsingi
`@linkColorHover`	`darken(@linkColor, 15%)`	Rangi ya kiungo chaguo-msingi ya kielee juu cha maandishi

Mfumo wa gridi ya taifa

`@gridColumns`	12
`@gridColumnWidth`	60px
`@gridGutterWidth`	20px
`@fluidGridColumnWidth`	6.382978723%
`@fluidGridGutterWidth`	2.127659574%

Uchapaji

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier New", nafasi moja
`@baseFontSize`	13px	Lazima ziwe saizi
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px	Lazima ziwe saizi
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Majedwali

`@tableBackground`	`transparent`
`@tableBackgroundAccent`	`#f9f9f9`
`@tableBackgroundHover`	`#f5f5f5`
`@tableBorder`	`ddd`

Rangi za kijivu

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#eee
`@white`	#fff

Rangi za lafudhi

`@blue`	#049cdb
`@green`	#46a546
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406
`@pink`	#c3325f
`@purple`	#7a43b6

Vipengele

Vifungo

`@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`

Fomu

`@placeholderText`	`@grayLight`
`@inputBackground`	`@white`
`@inputBorder`	`#ccc`
`@inputBorderRadius`	`3px`
`@inputDisabledBackground`	`@grayLighter`
`@formActionsBackground`	`#f5f5f5`

Majimbo ya fomu na arifa

`@warningText`	#c09853
`@warningBackground`	#f3edd2
`@errorText`	#b94a48
`@errorBackground`	#f2dede
`@successText`	#468847
`@successBackground`	#dff0d8
`@infoText`	#3a87ad
`@infoBackground`	#d9edf7

Upau wa urambazaji

`@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`

Kunjuzi

`@dropdownBackground`	`@white`
`@dropdownBorder`	`rgba(0,0,0,.2)`
`@dropdownLinkColor`	`@grayDark`
`@dropdownLinkColorHover`	`@white`
`@dropdownLinkBackgroundHover`	`@linkColor`
`@@dropdownDividerTop`	`#e5e5e5`
`@@dropdownDividerBottom`	`@white`

Kitengo cha shujaa

`@heroUnitBackground`	`@grayLighter`
`@heroUnitHeadingColor`	`inherit`
`@heroUnitLeadColor`	`inhereit`

Kuhusu mchanganyiko

Mchanganyiko wa kimsingi

Mchanganyiko wa kimsingi kimsingi ni pamoja au sehemu ya kijisehemu cha CSS. Zimeandikwa kama darasa la CSS na zinaweza kuitwa popote.

. kipengele {
  . clearfix ();
}

Mchanganyiko wa parametric

Mchanganyiko wa parametric ni kama mchanganyiko wa kimsingi, lakini pia inakubali vigezo (kwa hivyo jina) na maadili chaguo-msingi ya hiari.

. kipengele {
  . mpaka - radius ( 4px );
}

Ongeza yako mwenyewe kwa urahisi

Takriban michanganyiko yote ya Bootstrap imehifadhiwa katika mixins.less, faili ya matumizi ya ajabu .less ambayo hukuwezesha kutumia mchanganyiko katika faili zozote .chini kabisa kwenye kisanduku cha zana.

Kwa hivyo, endelea na utumie zilizopo au jisikie huru kuongeza yako unavyohitaji.

Imejumuisha mchanganyiko

Huduma

Mchanganyiko	Vigezo	Matumizi
`.clearfix()`	hakuna	Ongeza kwa mzazi yeyote ili kufuta vilivyoelea ndani
`.tab-focus()`	hakuna	Tumia mtindo wa kuzingatia wa Webkit na muhtasari wa pande zote wa Firefox
`.center-block()`	hakuna	Weka kiotomatiki kipengee cha kiwango cha kuzuia ukitumia`margin: auto`
`.ie7-inline-block()`	hakuna	Tumia pamoja na ya kawaida `display: inline-block`kupata usaidizi wa IE7
`.size()`	`@height @width`	Haraka kuweka urefu na upana kwenye mstari mmoja
`.square()`	`@size`	Hujenga `.size()`ili kuweka upana na urefu kama thamani sawa
`.opacity()`	`@opacity`	Weka, kwa nambari nzima, asilimia ya uwazi (kwa mfano, "50" au "75").

Fomu

Mchanganyiko	Vigezo	Matumizi
`.placeholder()`	`@color: @placeholderText`	Weka `placeholder`rangi ya maandishi kwa ingizo

Uchapaji

Mchanganyiko	Vigezo	Matumizi
`#font > #family > .serif()`	hakuna	Tengeneza kipengee kutumia safu ya fonti ya serif
`#font > #family > .sans-serif()`	hakuna	Tengeneza kipengee kutumia safu ya fonti ya sans-serif
`#font > #family > .monospace()`	hakuna	Tengeneza kipengee kutumia safu ya fonti ya nafasi moja
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Weka kwa urahisi saizi ya fonti, uzito na inayoongoza
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Weka familia ya fonti iwe serif, na udhibiti ukubwa, uzito na uongozi
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Weka familia ya fonti iwe sans-serif, na udhibiti ukubwa, uzito na uongozi
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Weka familia ya fonti iwe nafasi moja, na udhibiti ukubwa, uzito na uongozi

Mfumo wa gridi ya taifa

Mchanganyiko	Vigezo	Matumizi
`.container-fixed()`	hakuna	Unda kontena iliyo katikati ya mlalo kwa ajili ya kushikilia maudhui yako
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Tengeneza mfumo wa gridi ya pikseli (chombo, safu mlalo na safu wima) na safu wima n na gutter pana ya x pixel
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Tengeneza asilimia ya mfumo wa gridi yenye safuwima n na x % ya gutter pana
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Tengeneza mfumo wa gridi ya pikseli kwa `input`vipengele, uhasibu kwa pedi na mipaka
`.makeColumn`	`@columns: 1, @offset: 0`	Badilisha yoyote `div`kuwa safu wima ya gridi bila `.span*`madarasa

Tabia za CSS3

Mchanganyiko	Vigezo	Matumizi
`.border-radius()`	`@radius`	Zungusha pembe za kipengele. Inaweza kuwa thamani moja au thamani nne zilizotenganishwa na nafasi
`.box-shadow()`	`@shadow`	Ongeza kivuli cha kushuka kwenye kipengele
`.transition()`	`@transition`	Ongeza athari ya mpito ya CSS3 (kwa mfano, `all .2s linear`)
`.rotate()`	`@degrees`	Zungusha kipengele n digrii
`.scale()`	`@ratio`	Weka kipengele kwa n mara ya ukubwa wake asili
`.translate()`	`@x, @y`	Sogeza kipengele kwenye ndege za x na y
`.background-clip()`	`@clip`	Punguza usuli wa kipengele (muhimu kwa `border-radius`)
`.background-size()`	`@size`	Dhibiti saizi ya picha za mandharinyuma kupitia CSS3
`.box-sizing()`	`@boxmodel`	Badilisha muundo wa kisanduku cha kipengee (kwa mfano, `border-box`kwa upana kamili `input`)
`.user-select()`	`@select`	Dhibiti uteuzi wa kishale wa maandishi kwenye ukurasa
`.backface-visibility()`	`@visibility: visible`	Zuia kupepesa kwa maudhui unapotumia mabadiliko ya CSS 3D
`.resizable()`	`@direction: both`	Fanya kipengele chochote kiweze kuongezwa ukubwa upande wa kulia na chini
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Fanya maudhui ya kipengele chochote kutumia safuwima za CSS3
`.hyphens()`	`@mode: auto`	Upatanisho wa CSS3 unapoutaka (pamoja na `word-wrap: break-word`)

Asili na gradients

Mchanganyiko	Vigezo	Matumizi
`#translucent > .background()`	`@color: @white, @alpha: 1`	Kipe kipengele rangi ya mandharinyuma inayong'aa
`#translucent > .border()`	`@color: @white, @alpha: 1`	Kipe kipengele rangi ya mpaka inayong'aa
`#gradient > .vertical()`	`@startColor, @endColor`	Unda upinde rangi wa usuli wa wima wa kivinjari
`#gradient > .horizontal()`	`@startColor, @endColor`	Unda upinde rangi wa mandharinyuma ya kivinjari mlalo
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Unda upinde rangi wa usuli wa mwelekeo wa kivinjari
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Unda upinde rangi wa usuli wa kivinjari chenye rangi tatu
`#gradient > .radial()`	`@innerColor, @outerColor`	Unda upinde rangi wa mandharinyuma ya kivinjari
`#gradient > .striped()`	`@color, @angle`	Unda upinde rangi wa mandharinyuma yenye milia ya kivinjari
`#gradientBar()`	`@primaryColor, @secondaryColor`	Hutumika kwa ajili ya vitufe kupangia gradient na mpaka mweusi kidogo

Kumbuka: Ikiwa unatuma ombi la kuvuta kwa GitHub na CSS iliyorekebishwa, lazima urudishe CSS kupitia mojawapo ya njia hizi.

Zana za kuandaa

Nodi iliyo na makefile

Sakinisha mkusanyaji wa laini ya amri LESS, JSHint, Recess, na uglify-js kimataifa na npm kwa kutekeleza amri ifuatayo:

$ npm install -g less jshint recess ugify-js

Mara tu ikiwa imesakinishwa kimbia tu makekutoka kwa mzizi wa saraka yako ya bootstrap na uko tayari.

Kwa kuongeza, ikiwa umesakinisha watchr , unaweza kukimbia make watchili bootstrap ijengwe upya kiotomatiki kila wakati unapohariri faili kwenye bootstrap lib (hii haihitajiki, njia rahisi tu).

Mstari wa amri

Sakinisha zana ya mstari wa amri ya LESS kupitia Node na uendesha amri ifuatayo:

$ lessc ./less/bootstrap.less > bootstrap.css

Hakikisha kujumuisha --compresskatika amri hiyo ikiwa unajaribu kuhifadhi baiti kadhaa!

Javascript

Pakua Less.js za hivi punde na ujumuishe njia yake (na Bootstrap) kwenye <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

Ili kukusanya tena faili .less, zihifadhi tu na upakie upya ukurasa wako. Less.js inazikusanya na kuzihifadhi katika hifadhi ya ndani.

Programu isiyo rasmi ya Mac

Programu isiyo rasmi ya Mac hutazama saraka za faili .less na kukusanya msimbo kwa faili za ndani baada ya kila uhifadhi wa faili iliyotazamwa.

Ukipenda, unaweza kugeuza mapendeleo katika programu kwa uboreshaji wa kiotomatiki na ni saraka gani ambayo faili zilizokusanywa huishia.

Imejengwa kwa LESS

Kwa nini CHINI?

Je, ni pamoja na nini?

Jifunze zaidi

Vigezo

Mchanganyiko

Uendeshaji

Vigeu vya Bootstrap vigeu vidogo, thamani zake, na miongozo ya matumizi

Kiunzi na viungo

Mfumo wa gridi ya taifa

Uchapaji

Majedwali

Rangi za kijivu

Rangi za lafudhi

Vipengele

Vifungo

Fomu

Majimbo ya fomu na arifa

Upau wa urambazaji

Kunjuzi

Kitengo cha shujaa

Mchanganyiko wa Bootstrap

Kuhusu mchanganyiko

Mchanganyiko wa kimsingi

Mchanganyiko wa parametric

Ongeza yako mwenyewe kwa urahisi

Imejumuisha mchanganyiko

Huduma

Fomu

Uchapaji

Mfumo wa gridi ya taifa

Tabia za CSS3

Asili na gradients

Kukusanya Bootstrap na LESS

Zana za kuandaa

Nodi iliyo na makefile

Mstari wa amri

Javascript

Programu isiyo rasmi ya Mac

Programu zaidi za Mac

Kuponda

CodeKit

Rahisi