Ag baint úsáide as LESS le Bootstrap
Saincheap agus leathnaigh Bootstrap le LESS , réamhphróiseálaí CSS, chun leas a bhaint as na hathróga, na meascáin agus níos mó a úsáidtear chun CSS Bootstrap a thógáil.
Tógtha le LÚIDE
Cén fáth NÍOS LÚ?
Déantar Bootstrap le LESS ina chroílár, teanga stílbhileog dhinimiciúil cruthaithe ag ár gcara maith, Alexis Sellier . Déanann sé CSS atá bunaithe ar chórais a fhorbairt níos tapúla, níos éasca agus níos spraoi.
Cad atá san áireamh?
Mar shíneadh ar CSS, folaíonn LESS athróga, meascáin le haghaidh gearrthóga cód ath-inúsáidte, oibríochtaí le haghaidh mata simplí, neadú, agus fiú feidhmeanna datha.
Foghlaim níos mó
Tabhair cuairt ar an láithreán gréasáin oifigiúil ag http://lesscss.org/ chun tuilleadh a fhoghlaim.
Athróga
Is féidir le dathanna agus luachanna picteilín a bhainistiú i CSS a bheith beagán de phian, de ghnáth lán cóipe agus greamaigh. Ach ní lú ná sin - sann dathanna nó luachanna picteilín mar athróga agus athraigh iad uair amháin.
Meascáin
Na trí dhearbhú ga teorann sin a chaithfidh tú a dhéanamh i CSS rialta? Anois tá siad síos go dtí líne amháin le cabhair ó mheascáin, gearrthóga de chód is féidir leat a athúsáid áit ar bith.
Oibríochtaí
Déan do ghreille, ceannródaíoch, agus níos mó solúbtha super ag déanamh an mata ar an eitilt le hoibríochtaí. Méadaigh, roinn, cuir leis agus dealaigh do bhealach chuig sanity CSS.
Athróga Bootstrap NÍOS LÚ athróg, a luachanna, agus treoirlínte úsáide
Hipearnasc
@linkColor |
#08c | Dath an téacs naisc réamhshocraithe | |
@linkColorHover |
darken(@linkColor, 15%) |
Dath hover téacs nasc réamhshocraithe |
Córas greille
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2. 127659574 % |
Clóghrafaíocht
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Dathanna liathscála
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Dathanna accent
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Comhpháirteanna
Cnaipí
@primaryButtonBackground |
@linkColor |
Foirmeacha
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
stáit fhoirm agus foláirimh
@warningText |
#c09853 | |
@warningBackground |
#f3edd2 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#df0d8 | |
@infoText |
#3a87ad | |
@infoBackground |
#d9edf7 |
Meascáin bootstrap
Maidir le meascáin
Meascáin bhunúsacha
Go bunúsach is éard atá i meascán bunúsach ná áireamh nó cuid do phíosa CSS. Tá siad scríofa díreach cosúil le rang CSS agus is féidir glaoch orthu áit ar bith.
- . eilimint {
- . soiléirfix ();
- }
Meascáin paraiméadracha
Tá mixin paraiméadrach díreach cosúil le mixin bunúsach, ach glacann sé freisin paraiméadair (mar sin an t-ainm) le luachanna réamhshocraithe roghnach.
- . eilimint {
- . teorainn - ga ( 4px );
- }
Cuir do chuid féin go héasca
Stóráiltear beagnach gach ceann de mheascáin Bootstrap i mixins.less, comhad fóntais iontach .less a chuireann ar do chumas mixin a úsáid in aon cheann de na comhaid .less san fhoireann uirlisí.
Mar sin, téigh ar aghaidh agus bain úsáid as na cinn atá ann cheana féin nó bíodh leisce ort do chuid féin a chur leis mar is gá duit.
meascáin san áireamh
Fóntais
| Meascán | Paraiméadair | Úsáid |
|---|---|---|
.clearfix() |
aon cheann | Cuir le tuismitheoir ar bith chun snámháin a ghlanadh laistigh |
.tab-focus() |
aon cheann | Cuir stíl fhócas Webkit i bhfeidhm agus imlíne bhabhta Firefox |
.center-block() |
aon cheann | Uathlár eilimint bloc-leibhéal ag baint úsáide asmargin: auto |
.ie7-inline-block() |
aon cheann | Bain úsáid as chomh maith le rialta display: inline-blockchun tacaíocht IE7 a fháil |
.size() |
@height: 5px, @width: 5px |
Socraigh go tapa an airde agus an leithead ar líne amháin |
.square() |
@size: 5px |
Tógann sé ar .size()an leithead agus an airde a shocrú mar an luach céanna |
.opacity() |
@opacity: 100 |
Socraigh, i slánuimhreacha, an céatadán teimhneachta (m.sh., "50" nó "75") |
Foirmeacha
| Meascán | Paraiméadair | Úsáid |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Socraigh placeholderdath an téacs le haghaidh ionchuir |
Clóghrafaíocht
| Meascán | Paraiméadair | Úsáid |
|---|---|---|
#font > #family > .serif() |
aon cheann | Déan eilimint agus úsáid á baint as cruachta cló serif |
#font > #family > .sans-serif() |
aon cheann | Déan eilimint agus bain úsáid as cruachta cló sans-serif |
#font > #family > .monospace() |
aon cheann | Déan eilimint agus úsáid á baint as cruachta cló monaspáis |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Socraigh go héasca clómhéid, meáchan, agus tosaigh |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Socraigh teaghlach cló go serif, agus rialaigh méid, meáchan agus tosaigh |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Socraigh teaghlach cló go sans-serif, agus rialaigh méid, meáchan agus tosaigh |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Socraigh teaghlach cló go monaspás, agus rialú méid, meáchan, agus tosaigh |
Córas greille
| Meascán | Paraiméadair | Úsáid |
|---|---|---|
.container-fixed() |
aon cheann | Cruthaigh coimeádán cothrománach lárnach chun d'inneachar a choinneáil |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Gin córas greille picteilín (coimeádán, ró, agus colúin) le n colún agus x gáitéir ar leithead picteilín |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Gin córas greille precent le n colún agus x % gáitéir ar leithead |
Airíonna CSS3
| Meascán | Paraiméadair | Úsáid |
|---|---|---|
.border-radius() |
@radius: 5px |
Timpeall coirnéil eilimint. Is féidir a bheith ina luach singil nó ceithre luachanna spás-scartha |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Cuir scáth titim le eilimint |
.transition() |
@transition |
Cuir éifeacht trasdula CSS3 leis (m.sh., all .2s linear) |
.rotate() |
@degrees |
Rothlaigh eilimint n céim |
.scale() |
@ratio |
Scála eilimint go n uair a méid bunaidh |
.translate() |
@x: 0, @y: 0 |
Bog dúil ar na plánaí x agus y |
.background-clip() |
@clip |
Bearr cúlra dúil (úsáideach le haghaidh border-radius) |
.background-size() |
@size |
Rialú ar mhéid na n-íomhánna cúlra trí CSS3 |
.box-sizing() |
@boxmodel |
Athraigh samhail an bhosca le haghaidh eiliminte (m.sh., border-boxle haghaidh leithead iomlán input) |
.user-select() |
@select |
Rialú ar an rogha cúrsóra téacs ar leathanach |
.resizable() |
@direction: both |
Déan aon eilimint a athmhéadú ar thaobh na láimhe deise agus bun |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Úsáid colúin CSS3 as ábhar aon eilimint |
Cúlra agus grádáin
| Meascán | Paraiméadair | Úsáid |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Tabhair dath cúlra tréshoilseach d’eilimint |
#translucent > .border() |
@color: @white, @alpha: 1 |
Tabhair dath teorann tréshoilseach d’eilimint |
#gradient > .vertical() |
@startColor, @endColor |
Cruthaigh grádán cúlra ingearach tras-bhrabhsálaí |
#gradient > .horizontal() |
@startColor, @endColor |
Cruthaigh grádán cúlra cothrománach tras-bhrabhsálaí |
#gradient > .directional() |
@startColor, @endColor, @deg |
Cruthaigh grádán cúlra treo trasbhrabhsálaí |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Cruthaigh grádán cúlra trí dhath tras-bhrabhsálaí |
#gradient > .radial() |
@innerColor, @outerColor |
Cruthaigh grádán cúlra gathacha tras-bhrabhsálaí |
#gradient > .striped() |
@color, @angle |
Cruthaigh grádán cúlra stríocach trasbhrabhsálaí |
#gradientBar() |
@primaryColor, @secondaryColor |
Úsáidtear é le haghaidh cnaipí chun grádán agus teorainn beagán níos dorcha a shannadh |
Bootstrap a thiomsú le NÍOS LÚ
Uirlisí le haghaidh tiomsú
Nód le makefile
Suiteáil an tiomsaitheoir líne ordaithe LESS agus uglify-js ar fud an domhain le npm tríd an ordú seo a leanas a rith:
$npm suiteáil -g níos lú uglify-js
Nuair a bheidh tú suiteáilte, rith makeó fhréamh do eolaire bootstrap agus tá tú réidh.
Ina theannta sin, má tá faireoir suiteáilte agat, is féidir go n-athróidh tú make watchbootstrap go huathoibríoch gach uair a chuireann tú comhad in eagar sa lib bootstrap (níl sé seo ag teastáil, níl de dhíth ach modh áise).
Líne ordaithe
Suiteáil an uirlis líne ordaithe LESS trí Nód agus rith an t-ordú seo a leanas:
$ lessc ./lib/bootstrap.less > bootstrap.css
Bí cinnte a chur --compresssan ordú sin má tá tú ag iarraidh roinnt beart a shábháil!
Javascript
Íoslódáil na Less.js is déanaí agus cuir an cosán chuige (agus Bootstrap) san áireamh sa <head>.
<link rel = "stílbhileog/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Chun na comhaid .less a ath-thiomsú, níl le déanamh ach iad a shábháil agus do leathanach a athlódáil. Déanann Less.js iad a thiomsú agus a stóráil i stóráil áitiúil.
Aip neamhoifigiúil Mac
Féachann an aip neamhoifigiúil Mac ar eolairí de chomhaid .less agus tiomsaíonn sé an cód chuig comhaid áitiúla tar éis gach sábháil ar chomhad .less faire.
Más mian leat, is féidir leat sainroghanna a scoránaigh san aip le haghaidh mionú uathoibríoch agus cén t-eolaire a chríochnaíonn na comhaid tiomsaithe.
Tuilleadh apps Mac
Géarchor
Is eagarthóir agus tiomsaitheoir NÍOS chosúil é Crunch a tógadh ar Adobe Air.
CodeKit
Cruthaithe ag an bhfear céanna leis an aip neamhoifigiúil Mac, is app Mac é CodeKit a thiomsaíonn LESS, SASS, Stylus, agus CoffeeScript.
Simplí
Aip Mac, Linux, agus PC chun comhaid NÍOS LÚ a thiomsú agus a tharraingt. Ina theannta sin, tá an cód foinse ar GitHub .