Isticmaalka YAR oo leh Bootstrap

Ku beddel oo ku kordhi Bootstrap YAR , horudhac CSS, si aad uga faa'iidaysato doorsoomayaasha, isku darka, iyo inbadan oo loo isticmaalo in lagu dhiso Bootstrap's CSS.

Waa maxay sababta YAR?

Bootstrap waxaa lagu sameeyay LESS asalkeeda, luqad qaabaysan oo firfircoon oo uu abuuray saaxiibkeena wanaagsan, Alexis Sellier . Waxay ka dhigtaa horumarinta nidaamyada ku salaysan CSS mid dhakhso badan, fudud oo xiiso badan.

Maxaa ka mid ah?

Sida kordhinta CSS, YAR waxaa ku jira doorsoomayaal, iskudhafyada dib loo isticmaali karo qaybo kood ah, hawlgallada xisaabta fudud, buul, iyo xitaa shaqooyinka midabka.

Wax dheeri ah baro

Booqo degelka rasmiga ah ee http://lesscss.org/ si aad wax badan uga barato.

Kala duwanaansho

Maareynta midabada iyo qiimayaasha pixel ee CSS waxay noqon kartaa xoogaa xanuun ah, badanaa waxaa ka buuxa nuqul iyo dhejis. Ma aha mid YAR in kastoo — u qoondee midabada ama qiimayaasha pixel doorsoomayaasha oo hal mar beddel.

Isku qas

Saddexdaas bayaan-xuduudeed ee aad u baahan tahay inaad si joogto ah u samayso ol' CSS? Hadda waxay hoos ugu soo jeedaan hal sadar iyadoo la kaashanayo mixins, qaybo kood ah oo aad dib u isticmaali karto meel kasta.

Hawlgallada

Samee shabaqlahaaga, hogaamin, oo aad u dabacsan adoo samaynaya xisaabta duulista oo wata hawlo. Ku dhufo, qaybi, ku dar, oo ka jar jidkaaga fayoobida CSS.

Hyperlinks

`@linkColor`	#08c	Midabka qoraalka asalka ah
`@linkColorHover`	`darken(@linkColor, 15%)`	Isku xirka asalka ah ee qoraalka midabka

Nidaamka grid

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

Qoraalka qoraalka

`@baseFontSize`	13px
`@baseFontFamily`	`"Helvetica Neue", Helvetica, Arial, sans-serif`
`@baseLineHeight`	18px

Midabada cawl

`@black`	#000
`@grayDarker`	#222
`@grayDark`	#333
`@gray`	#555
`@grayLight`	#999
`@grayLighter`	#ee
`@white`	#ff

Midabada lahjadda

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

Qaybaha

Badhamada

`@primaryButtonBackground`	`@linkColor`

Foomamka

`@placeholderText`	`@grayLight`

Navbar

`@navbarHeight`	40px
`@navbarBackground`	`@grayDarker`
`@navbarBackgroundHighlight`	`@grayDark`
`@navbarText`	`@grayLight`
`@navbarLinkColor`	`@grayLight`
`@navbarLinkColorHover`	`@white`

Samee dawlado iyo digniino

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

Ku saabsan mixins

Isku darka aasaasiga ah

Isku darka aasaasiga ah ayaa asal ahaan ka mid ah ama qayb ka mid ah qayb ka mid ah CSS. Waxay u qoran yihiin sida fasalka CSS oo meel kasta waa loogu yeedhi karaa.

. element {
  . nadiifinta ();
}

Isku darka Parametric

Isku-darka parametric-ga waa sida isku-dhafka aasaasiga ah, laakiin sidoo kale waxay aqbashaa cabbirrada (markaa magaca) oo leh qiimeyaal aan ikhtiyaar ahayn.

. element {
  . xuduud - radius ( 4px );
}

Si fudud ugu dar kaaga

Ku dhawaad dhammaan isku-darka Bootstrap's waxaa lagu kaydiyaa mixins.less, fayl aan fiicneyn oo utility ah kaas oo awood kuu siinaya inaad isticmaasho isku-dhafka mid ka mid ah faylalka yar-yar ee xirmada qalabka.

Sidaa darteed, sii wad oo isticmaal kuwa jira ama waxaad xor u tahay inaad ku darto kaaga markaad u baahan tahay.

Isku darka ku jira

Utility

Mixin	Halbeegyada	Isticmaalka
`.clearfix()`	midna	Ku dar waalid kasta si aad u nadiifiso sabbeeyaha gudaha
`.tab-focus()`	midna	Codso qaabka diirada Webkit iyo wareega dulsaarka Firefox
`.center-block()`	midna	Si otomaatig ah u dhexeeya curiyaha heerka xannibaadda adoo isticmaalaya`margin: auto`
`.ie7-inline-block()`	midna	Isticmaal marka lagu daro kuwa caadiga ah `display: inline-block`si aad u hesho taageerada IE7
`.size()`	`@height: 5px, @width: 5px`	Si degdeg ah u dhig dhererka iyo ballaca hal xariiq
`.square()`	`@size: 5px`	Waxay ku dhistaa `.size()`si uu ballaca iyo dhererka u dejiyo qiime isku mid ah
`.opacity()`	`@opacity: 100`	Deji, tirooyinka oo dhan, boqolleyda mugdiga (tusaale, "50" ama "75")

Foomamka

Mixin	Halbeegyada	Isticmaalka
`.placeholder()`	`@color: @placeholderText`	U deji `placeholder`midabka qoraalka wax gelinta

Qoraalka qoraalka

Mixin	Halbeegyada	Isticmaalka
`#font > #family > .serif()`	midna	Samee curiye isticmaal xarfo xarfo oo serif ah
`#font > #family > .sans-serif()`	midna	Samee curiye isticmaal xarfo xarfo sans-serif ah
`#font > #family > .monospace()`	midna	Samee curiye isticmaal xarfo xarfo monospace ah
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Si fudud u deji cabbirka qoraalka, miisaanka, iyo hoggaaminta
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	U deji farta qoyska serif, oo xakameey cabbirka, miisaanka, iyo hoggaaminta
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	U deji farta qoyska sans-serif, oo xakameey cabbirka, miisaanka, iyo hoggaaminta
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	U deji font qoyska monospace, oo xakamee cabbirka, miisaanka, iyo hogaaminta

Nidaamka grid

Mixin	Halbeegyada	Isticmaalka
`.container-fixed()`	midna	U samee weel toosan oo xuddun u ah haynta macluumaadkaaga
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Samee nidaamka grid pixel (konteenada, safka, iyo tiirarka) oo leh tiirar n iyo x pixel xuubka ballaaran
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Samee nadaamka shabaqlaha hore oo leh tiirar n iyo x % maroodigo ballaaran

CSS3 guryaha

Mixin	Halbeegyada	Isticmaalka
`.border-radius()`	`@radius: 5px`	Ku wareeg geesaha curiyaha. Wuxuu noqon karaa hal qiime ama afar qiime oo meel bannaan
`.box-shadow()`	`@shadow: 0 1px 3px rgba(0,0,0,.25)`	Ku dar hooska hoos u dhaca curiye
`.transition()`	`@transition`	Ku dar saamaynta kala guurka ee CSS3 (tusaale, `all .2s linear`)
`.rotate()`	`@degrees`	Isku rog curiyaha n darajooyinka
`.scale()`	`@ratio`	Cabbir curiye ilaa n laabta cabbirkiisa asalka ah
`.translate()`	`@x: 0, @y: 0`	Dhaqaaq cunsur dushiisa x iyo diyaaradaha y
`.background-clip()`	`@clip`	Dalag asalka curiyaha (waxtar u leh `border-radius`)
`.background-size()`	`@size`	Ku xakamee cabbirka sawirada dambe ee CSS3
`.box-sizing()`	`@boxmodel`	U beddel qaabka sanduuqa curiye (tusaale, `border-box`ballac buuxa `input`)
`.user-select()`	`@select`	Xakamee xulashada cursorka qoraalka bogga
`.resizable()`	`@direction: both`	Samee shay kasta oo lagu cabbiri karo midig iyo hoose
`.content-columns()`	`@columnCount, @columnGap: @gridColumnGutter`	Ka dhig waxa ku jira shay kasta isticmaal tiirarka CSS3

Asalkii hore iyo gradients

Mixin	Halbeegyada	Isticmaalka
`#translucent > .background()`	`@color: @white, @alpha: 1`	Sii shay midab asal oo hufan
`#translucent > .border()`	`@color: @white, @alpha: 1`	Sii cunsur midab xudduud hufan
`#gradient > .vertical()`	`@startColor, @endColor`	Samee browser-ka-tallaalida jaan-goynta dambe ee toosan
`#gradient > .horizontal()`	`@startColor, @endColor`	Samee biraawsarre isdhaafsi toosan oo gadaal ah
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Abuur jaangooyooyin xaga dambe ee browser-ka-dhaafka ah
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Samee browser-ka-tallaabo-sadex midab leh
`#gradient > .radial()`	`@innerColor, @outerColor`	Samee daalacashada dabaasha-browser-ka
`#gradient > .striped()`	`@color, @angle`	Samee browser-ka-tallaalida xagal-xariifeedka dambe
`#gradientBar()`	`@primaryColor, @secondaryColor`	Waxa loo isticmaalaa badhamada si loogu asteeyo xuduud gradient iyo in yar ka madow

Fiiro gaar ah: Haddii aad u gudbinayso codsiga jiidista GitHub oo wata CSS wax laga beddelay, waa inaad dib u soo ururisaa CSS iyada oo loo marayo mid ka mid ah hababkan.

Qalabka lagu ururiyo

Node leh makefile

Ku rakib khadka taliska LESS iyo ugify-js si caalami ah oo leh npm adoo socodsiinaya amarka soo socda:

$ npm rakib -g ka yar ugify-js

Marka la rakibo kaliya ka orod makexididka buugga bootstrap-kaaga oo waad wada diyaarsan tahay.

Intaa waxaa dheer, haddii aad ku rakibtay ilaaliye , waxaa laga yaabaa inaad u ordo make watchin bootstrap si toos ah dib loogu dhiso mar kasta oo aad wax ka beddesho faylka bootstrap lib (tani looma baahna, kaliya hab ku habboon).

Khadka taliska

Ku rakib qalabka khadka taliska LESS adoo adeegsanaya Node oo socodsii amarka soo socda:

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

U hubso inaad ku darto --compressamarkaas haddii aad isku dayayso inaad kaydiso xoogaa bytes ah!

Javascript

Soo deji Less.js kii ugu dambeeyay oo ku dar dariiqa loo marayo (iyo Bootstrap) gudaha <head>.

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

Si aad dib ugu soo ururiso faylasha .kayar, kaliya kaydi oo dib u soo geli boggaaga. Less.js ayaa ururisa oo ku kaydisa kaydinta deegaanka.

Mac App-ka aan rasmiga ahayn

App-ka aan rasmiga ahayn ee Mac waxa uu daawadaa tusaha faylalka .less oo waxa uu ku ururiyaa koodka faylalka maxaliga ah ka dib kayd kasta oo faylka .yar ee la daawado.

Haddii aad rabto, waxaad bedeli kartaa dookhyada abka si si toos ah loo yareeyo iyo tusaha faylalka la soo ururiyey ay ku dambeeyaan.

Lagu dhisay YAR

Waa maxay sababta YAR?

Maxaa ka mid ah?

Wax dheeri ah baro

Kala duwanaansho

Isku qas

Hawlgallada

Doorsoomayaasha bootstrap doorsoomayaal YAR, qiyamkooda, iyo tilmaamaha isticmaalka

Hyperlinks

Nidaamka grid

Qoraalka qoraalka

Midabada cawl

Midabada lahjadda

Qaybaha

Badhamada

Foomamka

Navbar

Samee dawlado iyo digniino

Isku darka bootstrap

Ku saabsan mixins

Isku darka aasaasiga ah

Isku darka Parametric

Si fudud ugu dar kaaga

Isku darka ku jira

Utility

Foomamka

Qoraalka qoraalka

Nidaamka grid

CSS3 guryaha

Asalkii hore iyo gradients

Uruurinta Bootstrap oo leh YAR

Qalabka lagu ururiyo

Node leh makefile

Khadka taliska

Javascript

Mac App-ka aan rasmiga ahayn

Barnaamijyo badan oo Mac ah

Burburid

CodeKit

Fudud