Kushandisa LESS neBootstrap
Gadzirisa uye uwedzere Bootstrap neLESS , CSS preprocessor, kutora mukana wezvakasiyana, musanganiswa, uye zvimwe zvinoshandiswa kuvaka Bootstrap's CSS.
Yakavakwa neLESS
Sei ZVINODZIKA?
Bootstrap inogadzirwa neLESS pamusimboti wayo, mutauro wesheetti ine simba wakagadzirwa neshamwari yedu yakanaka, Alexis Sellier . Inoita kugadzira masisitimu-yakavakirwa CSS nekukurumidza, nyore, uye kunakidza.
Chii chinosanganisirwa?
Sewedzero yeCSS, LESS inosanganisira zvinoshanduka, musanganiswa wekudzoreredza snippets yekodhi, mashandiro emasvomhu akareruka, nesting, uye kunyange mavara mabasa.
Variables
Kugadzirisa mavara uye pixel kukosha muCSS kunogona kurwadza zvishoma, kazhinji kuzere nekopi nekuisa. Kwete neLESS kunyangwe-pa mavara kana pixel kukosha sezvichinjika uye wozvishandura kamwe chete.
Mixins
Iwo matatu matatu emuganho-radius kuzivisa iwe yaunofanirwa kuita mune yenguva dzose ol 'CSS? Ikozvino vadzika kumutsara mumwe nerubatsiro rwemisanganiswa, snippets yekodhi iwe yaunogona kushandisazve chero kupi.
Operations
Gadzira gridhi yako, inotungamira, uye yakanyanya kuchinjika nekuita masvomhu panhunzi nemashandiro. Wanza, patsanura, wedzera, uye bvisa nzira yako kune CSS hutsanana.
Bootstrap inosiyanisa LESS machinjiro, maitiro avo, uye nhungamiro yekushandisa
Scaffolding uye links
@bodyBackground |
@white |
Peji yekumashure ruvara | |
@textColor |
@grayDark |
Default mavara mavara emuviri wese, misoro, nezvimwe | |
@linkColor |
#08c |
Default link mavara mavara | |
@linkColorHover |
darken(@linkColor, 15%) |
Default link mavara hover ruvara |
Grid system
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Typography
@sansFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Monaco, "Courier New", monospace | |
@baseFontSize |
13px | Inofanira kuva pixels |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px | Inofanira kuva pixels |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
Matafura
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
Grayscale mavara
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Accent mavara
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Zvikamu
Mabhatani
@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 |
Mafomu
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
Fomu nyika uye zviziviso
@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 |
Dropdowns
@dropdownBackground |
@white |
@dropdownBorder |
rgba(0,0,0,.2) |
@dropdownLinkColor |
@grayDark |
@dropdownLinkColorHover |
@white |
@dropdownLinkBackgroundHover |
@linkColor |
@@dropdownDividerTop |
#e5e5e5 |
@@dropdownDividerBottom |
@white |
Hero chikwata
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Bootstrap misanganiswa
Pamusoro pemisanganiswa
Basic mixs
A basic mixin inonyanya kusanganisa kana chidimbu chechidimbu cheCSS. Izvo zvakanyorwa sekirasi yeCSS uye zvinogona kudanwa chero kupi.
- . chinhu {
- . clearfix ();
- }
Parametric musanganiswa
Iyo parametric musanganiswa yakangofanana neyekutanga musanganiswa, asi zvakare inogamuchira paramita (naizvozvo zita) ine sarudzo yekusarudzika tsika.
- . chinhu {
- . muganhu - radius ( 4px );
- }
Wedzera zvako zviri nyore
Zvinenge zvese zveBootstrap zvakasanganiswa zvakachengetwa mumixins.less, inoshamisa utility .less faira inoita kuti iwe ushandise mixin mune chero .less mafaira mutoolkit.
Saka, enda mberi uye shandisa zviripo kana kunzwa wakasununguka kuwedzera yako sezvaunoda.
Inosanganisirwa misanganiswa
Utilities
| Mixin | Parameters | Usage |
|---|---|---|
.clearfix() |
hapana | Wedzera kune chero mubereki kubvisa zvinoyangarara mukati |
.tab-focus() |
hapana | Isa iyo Webkit yekutarisa maitiro uye yakatenderedza Firefox chinyorwa |
.center-block() |
hapana | Auto pakati pe block-level element uchishandisamargin: auto |
.ie7-inline-block() |
hapana | Shandisa kuwedzera kune yenguva dzose display: inline-blockkuwana IE7 rutsigiro |
.size() |
@height @width |
Kurumidza kuisa urefu uye hupamhi pamutsara mumwe |
.square() |
@size |
Inovaka pamusoro .size()pekuisa hupamhi nehurefu sehukoshi hwakafanana |
.opacity() |
@opacity |
Seta, muhuwandu hwakazara, iyo opacity percentage (semuenzaniso, "50" kana "75") |
Mafomu
| Mixin | Parameters | Usage |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Seta placeholdermavara emavara ekuisa |
Typography
| Mixin | Parameters | Usage |
|---|---|---|
#font > #family > .serif() |
hapana | Gadzira chinhu shandisa serif font stack |
#font > #family > .sans-serif() |
hapana | Gadzira chinhu shandisa sans-serif font stack |
#font > #family > .monospace() |
hapana | Ita chinhu shandisa monospace font stack |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Seta saizi yefonti zviri nyore, uremu, uye kutungamira |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Seta font mhuri kune serif, uye kudzora saizi, uremu, uye kutungamira |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Seta font mhuri kune sans-serif, uye kudzora saizi, uremu, uye kutungamira |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Seta font mhuri kune monospace, uye kudzora saizi, uremu, uye kutungamira |
Grid system
| Mixin | Parameters | Usage |
|---|---|---|
.container-fixed() |
hapana | Gadzira chigadziko chakachinjika chekubata zvirimo |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Gadzira pixel grid system (mudziyo, mutsara, uye makoramu) ine n column uye x pixel yakafara gutter. |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Gadzira chikamu chegridi system ine n column uye x % gutter yakakura |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
Gadzira iyo pixel grid system inputyezvinhu, accounting yepadding uye miganhu |
.makeColumn |
@columns: 1, @offset: 0 |
Shandura chero divkuita gidhi column pasina .span*makirasi |
CSS3 zvivakwa
| Mixin | Parameters | Usage |
|---|---|---|
.border-radius() |
@radius |
Rongedza makona echinhu. Inogona kuva yakakosha kana mana nzvimbo-yakapatsanurwa kukosha |
.box-shadow() |
@shadow |
Wedzera mumvuri wekudonha kune chimwe chinhu |
.transition() |
@transition |
Wedzera CSS3 shanduko mhedzisiro (semuenzaniso, all .2s linear) |
.rotate() |
@degrees |
Tenderedza chinhu n madhigirii |
.scale() |
@ratio |
Cheresa chinhu kusvika n pekukura kwayo kwepakutanga |
.translate() |
@x, @y |
Fambisa chinhu pane x uye y ndege |
.background-clip() |
@clip |
Dhonza kumashure kwechinhu (chinobatsira border-radius) |
.background-size() |
@size |
Dzora saizi yemifananidzo yekumashure kuburikidza neCSS3 |
.box-sizing() |
@boxmodel |
Shandura modhi yebhokisi rechinhu (semuenzaniso, border-boxhupamhi hwakazara input) |
.user-select() |
@select |
Dzora kusarudzwa kwemavara pane peji |
.backface-visibility() |
@visibility: visible |
Dzivirira kupenya kwezvinhu kana uchishandisa CSS 3D inoshandura |
.resizable() |
@direction: both |
Ita kuti chero chinhu chiwedzere kukura kurudyi nepasi |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
Ita zviri mukati mechero chinhu shandisa CSS3 makoramu |
.hyphens() |
@mode: auto |
CSS3 hyphenation paunenge uchida (inosanganisira word-wrap: break-word) |
Backgrounds uye gradients
| Mixin | Parameters | Usage |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Ipa chinhu ruvara rwekumashure rwunopenya |
#translucent > .border() |
@color: @white, @alpha: 1 |
Ipa chinhu mupendero wakajeka |
#gradient > .vertical() |
@startColor, @endColor |
Gadzira kuchinjika-browser yakatwasuka kumashure gradient |
#gradient > .horizontal() |
@startColor, @endColor |
Gadzira muchinjika-browser yakatwasuka kumashure gradient |
#gradient > .directional() |
@startColor, @endColor, @deg |
Gadzira muchinjika-browser inotungamira kumashure gradient |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Gadzira muchinjika-browser matatu-mavara kumashure gradient |
#gradient > .radial() |
@innerColor, @outerColor |
Gadzira muchinjika-browser radial kumashure gradient |
#gradient > .striped() |
@color, @angle |
Gadzira muchinjika-browser mitsetse yekumashure gradient |
#gradientBar() |
@primaryColor, @secondaryColor |
Inoshandiswa kumabhatani kugovera gradient uye muganhu wakasviba zvishoma |
Kunyora Bootstrap neLESS
Zvishandiso zvekugadzira
Node ine makefile
Isa iyo LESS command line compiler, JSHint, Recess, uye uglip-js pasi rose ne npm nekumhanyisa unotevera kuraira:
$ npm install -g shoma jshint recess ugify-js
Kana yangoiswa ingomhanya makekubva pamudzi webhootstrap dhairekitori uye mese magadzirira.
Pamusoro pezvo, kana iwe uine watchr yakaiswa, unogona kumhanya make watchkuti bootstrap ivakwe otomatiki pese paunogadzirisa faira mubootstrap lib (izvi hazvidiwe, ingori nyore nzira).
Command line
Isa iyo LESS yekuraira mutsara chishandiso kuburikidza neNode uye mhanyisa unotevera kuraira:
$ lessc ./less/bootstrap.less > bootstrap.css
Iva nechokwadi chekuisa --compressmumurairo iwoyo kana uri kuedza kuchengetedza mamwe mabhaiti!
Javascript
Dhawunirodha yazvino Les.js uye sanganisira nzira yekuenda nayo (uye Bootstrap) mu <head>.
<link rel = "stylesheet/shoma" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Kuti uunganidze zvakare mafaira .less, ingoachengeta uye worodha peji rako zvakare. Less.js inozviunganidza uye nekuzvichengeta munzvimbo yekuchengetedza.
Unofficial Mac app
Iyo isina pamutemo Mac app inoona madhairekitori e.less mafaira uye inounganidza kodhi kumafaira emunharaunda mushure mesevha yega yega yakatariswa .less faira.
Kana iwe uchida, iwe unogona kushandura zvaunofarira muapp kuti uite miniifying uye iyo dhairekitori iyo akaunganidzwa mafaera anoguma mukati.
More Mac apps
Crunch
Crunch inotaridzika zvakanaka LESS mupepeti uye mugadziri akavakirwa paAdobe Air.
CodeKit
Yakagadzirwa nemukomana mumwechete seasina pamutemo Mac app, CodeKit iMac app inogadzira LESS, SASS, Stylus, uye CoffeeScript.
Zviri nyore
Mac, Linux, uye PC app yekukweva uye kudonhedza kuunganidza kwema LESS mafaera. Uyezve, iyo kodhi kodhi iri paGitHub .