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.
Bootstrap waxaa lagu sameeyay YAR oo udub dhexaad u ah, 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.
Sida kordhinta CSS, YAR waxaa ku jira doorsoomayaal, iskudhafyada dib loo isticmaali karo qaybo kood ah, hawlgallada xisaabta fudud, buul, iyo xitaa shaqooyinka midabka.
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.
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.
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.
@linkColor |
#08c | Midabka qoraalka asalka ah | |
@linkColorHover |
darken(@linkColor, 15%) |
Isku xirka asalka ah ee qoraalka midabka |
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
@baseFontSize |
13px | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18px |
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#ee | |
@white |
#ff |
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87aad | |
@infoBackground |
#d9edf7 |
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-ga waa sida isku-dhafka aasaasiga ah, laakiin sidoo kale wuxuu aqbalaa cabbirrada (markaa magaca) oo leh qiimeyaal aan ikhtiyaar ahayn.
- . element {
- . xuduud - radius ( 4px );
- }
Ku dhawaad dhammaan isku-darka Bootstrap waxaa lagu kaydiyaa mixins.less, fayl aan fiicneyn oo utility ah oo awood kuu siinaya inaad isticmaasho isku-dhafka mid ka mid ah faylalka yar-yar ee xirmada qalabka.
Markaa, sii wad oo isticmaal kuwa jira ama waxaad xor u tahay inaad adigu ku darto hadba sida aad u baahan tahay.
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 isticmaalayamargin: 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") |
Mixin | Halbeegyada | Isticmaalka |
---|---|---|
.placeholder() |
@color: @placeholderText |
U deji placeholder midabka qoraalka wax gelinta |
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 font, miisaanka, iyo hogaaminta |
#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 |
Mixin | Halbeegyada | Isticmaalka |
---|---|---|
.container-fixed() |
midna | Bixi weel ballac go'an oo @siteWidth lagu hayo macluumaadkaaga |
.columns() |
@columns: 1 |
Dhis tiir shabaq ah oo ka kooban tiro kasta oo tiirar ah (qalab 1 tiir) |
.offset() |
@columns: 1 |
Demi tiir shabaq ah oo leh margin bidix oo ka kooban tiro kasta oo tiirar ah |
.gridColumn() |
midna | Ka dhig curiye u sabbeeyo sida tiirarka xadhkaha |
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 jeer inta uu le'eg yahay asalka |
.translate() |
@x: 0, @y: 0 |
Dhaqaaq cunsur dushiisa x iyo diyaaradaha y |
.background-clip() |
@clip |
Dalagyada gadaasha 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 |
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 biraawsarkaaga |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Samee browser-ka-tallaalid xagal saddex-midab leh |
.#gradient > .radial() |
@innerColor, @outerColor |
Samee daalacashada dabaylaha-browser-ka |
.#gradient > .striped() |
@color, @angle |
Samee browser-ka-tallaalida xagal-xariifeedka dambe |
.#gradientBar() |
@primaryColor, @secondaryColor |
Loo isticmaalo badhamada si loogu meeleeyo soohdin gradient iyo xoogaa madow ah |
Ku rakib khadka taliska LESS oo wata npm adoo socodsiinaya amarka soo socda:
$ npm rakib yar
Marka la rakibo kaliya ka orod make
xididka buugga bootstrap-kaaga oo waad wada diyaarsan tahay.
Intaa waxaa dheer, haddii aad ku rakibtay ilaaliye , waxaa laga yaabaa inaad u ordo make watch
in bootstrap si toos ah dib loogu dhiso mar kasta oo aad wax ka beddesho faylka bootstrap lib (tani looma baahna, kaliya hab ku habboon).
Ku rakib qalabka khadka taliska LESS adoo adeegsanaya Node oo socodsii amarka soo socda:
$ lessc ./lib/bootstrap.less > bootstrap.css
Hubi inaad ku darto --compress
amarkaas haddii aad isku dayayso inaad kaydsato xoogaa bytes ah!
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.
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 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.
Crunch waa tifaftire YAR oo muuqaal ah oo lagu dhisay Adobe Air.
Waxaa sameeyay isla nin ka mid ah abka Mac ee aan rasmiga ahayn, CodeKit waa Mac App kaas oo uruuriya LESS, SASS, Stylus, iyo CoffeeScript.
Mac, Linux, iyo App-ka PC ee jiidida iyo tuurista ururinta faylasha YAR. Intaa waxaa dheer, koodhka isha ayaa ku yaal GitHub .