Kosalela LESS na Bootstrap

Personnaliser mpe ko extend Bootstrap na LESS , préprocesseur ya CSS, mpo na ko profiter na ba variables, mixins, mpe mingi oyo esalelamaka mpo na kotonga CSS ya Bootstrap.

Mpo na nini LESS?

Bootstrap esalemi na LESS na moboko na yango, monoko ya stylesheet dynamique oyo esalemi na moninga na biso ya malamu, Alexis Sellier . Ezali kosala ete kosala CSS oyo esalemi na ba systèmes ezala mbangu, pete, mpe esengo.

Nini ezali na kati?

Lokola bobakisi ya CSS, LESS ezali na ba variables, ba mixins mpo na ba fragments ya code oyo ekoki kosalelama lisusu, ba opérations mpo na matematiki ya pete, nesting, mpe ata ba fonctions ya couleur.

Yekola makambo mosusu

Kota na site internet ya officiel na http://lesscss.org/ mpo na koyeba makambo mingi.

Ba variables oyo ezali

Kokamba balangi mpe motuya ya pixel na CSS ekoki kozala mwa mpasi, mbala mingi etondi na kopi mpe kokɔtisa. Na LESS te atako bongo —pesa balangi to motuya ya pixel lokola ba variables mpe bongola yango mbala moko.

Ba mixins

Ba déclarations misato wana ya frontière-radius esengeli osala na ol' CSS ya ordinaire? Sikoyo bakiti na ligne moko na aide ya ba mixins, ba fragments ya code oyo okoki ko réutiliser partout.

Misala ya kosala

Sala grille na yo, kokamba, mpe mingi super flexible na kosalaka mathématiques na vol na ba opérations. Multiplier, kabola, bakisa, mpe longola nzela na yo na CSS sanity.

Échafaudage na ba liens

`@bodyBackground`	`@white`	Color ya fond ya lokasa
`@textColor`	`@grayDark`	Langi ya makomi ya liboso mpo na nzoto mobimba, mitó ya makambo, mpe makambo mosusu
`@linkColor`	`#08c`	Color ya texte ya lien par défaut
`@linkColorHover`	`darken(@linkColor, 15%)`	Color ya hover texte ya lien par défaut

Système ya grille

`@gridColumns`	12
`@gridColumnWidth`	60px ezali
`@gridGutterWidth`	20px ezali
`@fluidGridColumnWidth`	6,382978723% Ezali ndenge nini?
`@fluidGridGutterWidth`	2,127659574% Ezali ndenge nini?

Typographie

`@sansFontFamily`	"Helvetica Neue", Helvetica, Arial, sans-serif
`@serifFontFamily`	`Georgia, "Times New Roman", Times, serif`
`@monoFontFamily`	Menlo, Monaco, "Courier Nouveau", monoespace
`@baseFontSize`	13px ezali	Esengeli kozala ba pixels
`@baseFontFamily`	`@sansFontFamily`
`@baseLineHeight`	18px ezali	Esengeli kozala ba pixels
`@altFontFamily`	`@serifFontFamily`
`@headingsFontFamily`	`inherit`
`@headingsFontWeight`	`bold`
`@headingsColor`	`inherit`

Bamesa

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

Ba couleurs ya gris

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

Ba couleurs ya accent

`@blue`	#049cdb ezali
`@green`	#46a546 oyo ezali
`@red`	#9d261d
`@yellow`	#ffc40d
`@orange`	#f89406 na kombo ya
`@pink`	#c3325f ezali bongo
`@purple`	#7a43b6

Ba composants

Ba boutons

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

Baformilɛrɛ

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

Formulaire ba états na ba alertes

`@warningText`	#c09853 na kombo ya
`@warningBackground`	#f3edd2
`@errorText`	#b94a48 na kombo ya
`@errorBackground`	#f2dede
`@successText`	#468847 na likambo yango
`@successBackground`	#dff0d8 oyo ezali
`@infoText`	#3a87mobateli ya bato
`@infoBackground`	#d9edf7

Navbar

`@navbarHeight`	40px ezali
`@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`

Ba dropdowns ya kokita

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

Unité ya elombe

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

Na ntina na ba mixins

Ba mixins ya base

Mixin ya base ezali essentiellement inclure to partiel pona fragment ya CSS. Bakomami kaka lokola kelasi ya CSS mpe bakoki kobenga yango bisika nyonso.

. eleman { .
  . bobongisi ya polele ();
} .

Ba mixins paramétriques

Mixin paramétrique ezali kaka lokola mixin ya base, kasi endimaka pe ba paramètres (yango wana kombo) na ba valeurs par défaut optionnelle.

. eleman { .
  . ndelo - rayon ( 4px );
} .

Bakisa oyo ya yo na pete

Pene na ba mixins nionso ya Bootstrap ebombami na mixins.less, fichier .less ya utilitaire ya kokamwa oyo epesaka yo makoki ya kosalela mixin na moko ya ba fichiers .less oyo ezali na kati ya trousse ya bisaleli.

Na yango, kende liboso mpe salelá oyo ezali to yoká nsɔni te kobakisa oyo ya yo ndenge ozali na yango mposa.

Ezali na ba mixins

Ba utilités

Mixin oyo azali	Ba paramètres	Kosalela yango
`.clearfix()`	moko te	Bakisa na moboti nyonso mpo na kosilisa ba flotteurs na kati
`.tab-focus()`	moko te	Salelá lolenge ya kotya likebi ya Webkit mpe plan ya Firefox ya rond
`.center-block()`	moko te	Auto centre un élément ya niveau ya bloc kosalela`margin: auto`
`.ie7-inline-block()`	moko te	Salelá en plus ya régulier `display: inline-block`mpo na kozwa lisungi ya IE7
`.size()`	`@height @width`	Tyá nokinoki bosanda mpe bonene na molɔngɔ moko
`.square()`	`@size`	Etongaka likolo `.size()`mpo na kotiya bonene mpe bosanda lokola motuya moko
`.opacity()`	`@opacity`	Botia, na mituya mobimba, pourcentage ya opacité (ndakisa, "50" to "75") .

Baformilɛrɛ

Mixin oyo azali	Ba paramètres	Kosalela yango
`.placeholder()`	`@color: @placeholderText`	Bobongisa `placeholder`langi ya makomi mpo na makambo oyo bakokɔtisa

Typographie

Mixin oyo azali	Ba paramètres	Kosalela yango
`#font > #family > .serif()`	moko te	Sala élément moko esalela stack ya fonte serif
`#font > #family > .sans-serif()`	moko te	Sala élément moko esalela stack ya fonte sans-serif
`#font > #family > .monospace()`	moko te	Sala élément esalela stack ya fonte monospace
`#font > .shorthand()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Set facilement taille ya fonte, kilo, mpe liboso
`#font > .serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Botia libota ya makomi na serif, mpe botambwisa bonene, kilo, mpe liboso
`#font > .sans-serif()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Botia libota ya makomi na sans-serif, mpe botambwisa bonene, kilo, mpe liboso
`#font > .monospace()`	`@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight`	Botia libota ya makomi na monospace, mpe botambwisa bonene, kilo, mpe bokambi

Système ya grille

Mixin oyo azali	Ba paramètres	Kosalela yango
`.container-fixed()`	moko te	Salá eloko oyo ezali na katikati ya horizontal mpo na kokanga makambo na yo
`#grid > .core()`	`@gridColumnWidth, @gridGutterWidth`	Bosala système ya grille ya ba pixel (conteneur, molongo, na ba colonnes) na n colonne na gouttière ya largeur ya x pixel
`#grid > .fluid()`	`@fluidGridColumnWidth, @fluidGridGutterWidth`	Bosala système ya grille ya pourcentage na n colonne na x % gouttière ya largeur
`#grid > .input()`	`@gridColumnWidth, @gridGutterWidth`	Generer système ya grille ya pixel pona `input`ba éléments, comptabilité ya remplissage na ba frontières
`.makeColumn`	`@columns: 1, @offset: 0`	Bobongola nionso `div`na colonne ya grille sans ba `.span*`classes

Ba propriétés ya CSS3

Mixin oyo azali	Ba paramètres	Kosalela yango
`.border-radius()`	`@radius`	Bosala rond na ba coins ya élément moko. Ekoki kozala motuya moko to motuya minei oyo ekabwani na esika
`.box-shadow()`	`@shadow`	Bakisa elili ya kokita na élément moko
`.transition()`	`@transition`	Bakisa effet ya transition ya CSS3 (ndakisa, `all .2s linear`) .
`.rotate()`	`@degrees`	Bobalusa eleman moko na degrés n
`.scale()`	`@ratio`	Bosala échelle ya élément moko na n mbala ya taille na yango ya ebandeli
`.translate()`	`@x, @y`	Bokende na élément moko na ba plans x na y
`.background-clip()`	`@clip`	Bokata fond ya élément moko (ezali na tina pona `border-radius`) .
`.background-size()`	`@size`	Bokamba bonene ya bilili ya nsima na nzela ya CSS3
`.box-sizing()`	`@boxmodel`	Bobongola modèle ya boîte mpo na élément moko (ndakisa, `border-box`mpo na bonene mobimba `input`) .
`.user-select()`	`@select`	Contrôler pona curseur ya texte na page moko
`.backface-visibility()`	`@visibility: visible`	Kopekisa ko flickering ya contenus tango ozali kosalela ba transformations CSS 3D
`.resizable()`	`@direction: both`	Sala que élément nionso ekoki ko changer bonene na droite pe na se
`.content-columns()`	`@columnCount, @columnGap: @gridGutterWidth`	Sala que contenus ya élément nionso esalela ba colonnes CSS3
`.hyphens()`	`@mode: auto`	CSS3 hyphenation tango olingi yango (ezali na `word-wrap: break-word`) .

Ba fond mpe ba gradients

Mixin oyo azali	Ba paramètres	Kosalela yango
`#translucent > .background()`	`@color: @white, @alpha: 1`	Pesa élément moko couleur ya fond translucide
`#translucent > .border()`	`@color: @white, @alpha: 1`	Pesa élément moko couleur ya frontière translucide
`#gradient > .vertical()`	`@startColor, @endColor`	Bosala gradient ya fond vertical ya navigateur croisé
`#gradient > .horizontal()`	`@startColor, @endColor`	Bosala gradient ya fond horizontal ya navigateur croisé
`#gradient > .directional()`	`@startColor, @endColor, @deg`	Bosala gradient ya fond directionnel ya navigateur croisé
`#gradient > .vertical-three-colors()`	`@startColor, @midColor, @colorStop, @endColor`	Bosala gradient ya fond ya couleur misato ya croix-navigateur
`#gradient > .radial()`	`@innerColor, @outerColor`	Bosala gradient ya fond radial ya navigateur croisé
`#gradient > .striped()`	`@color, @angle`	Bosala gradient ya fond oyo ezali na ba rayures ya croix-navigateur
`#gradientBar()`	`@primaryColor, @secondaryColor`	Esalemi mpo na ba boutons mpo na kopesa gradient mpe ndelo ya mwa molili

Liyebisi: Soki ozali kotinda bosengi ya kobenda na GitHub na CSS oyo ebongisami, osengeli kozongisa CSS na nzela ya moko ya mayele oyo.

Bisaleli mpo na kosangisa biloko

Node na makefile

Botia compilateur ya ligne ya commande LESS, JSHint, Recess, na uglify-js na mokili mobimba na npm na kosala commande oyo elandi:

$ npm installer -g moke jshint esika ya kofanda uglify-js

Une fois installé kaka tambola makedepuis root ya répertoire bootstrap na yo pe oza nionso set.

En plus, soki oza na watchr installé, okoki ko kima make watchpo bootstrap etongama lisusu automatiquement chaque fois o éditer fichier na bootstrap lib (oyo esengeli te, kaka méthode ya convenance).

Molongo ya komande

Botia esaleli ya ligne ya commande LESS na nzela ya Node mpe bosala commande oyo elandi:

$ lessc ./moke/bobebisi.moke > bobandi.css

Sala makasi otia --compressna commande wana soki ozali koluka kobomba mua ba octets!

Javascript ezali

Télécharger Less.js ya sika mpe kotia nzela ya kokende na yango (mpe Bootstrap) na <head>.

<link rel = "lokasa ya lolenge/moke" href = "/nzela/na/bootstrap.moke" > <script src = "/nzela/na/moke.js" ></script>

Pona ko recompiler ba fichiers .less, bomba kaka yango pe recharger page na yo. Less.js e compiler yango mpe ebombaka yango na stockage local.

Application Mac oyo ezali officiel te

Application Mac oyo ezali officielle te etalaka ba répertoires ya ba fichiers .less mpe e compiler code na ba fichiers locales après chaque sauvegarde ya fichier .less oyo etali.

Soki olingi, okoki kobongola makambo oyo olingaka na programɛ yango mpo na kosala minifying automatique mpe répertoire nini ba fichiers compilés esukaka na yango.

Etongami na LESS

Mpo na nini LESS?

Nini ezali na kati?

Yekola makambo mosusu

Ba variables oyo ezali

Ba mixins

Misala ya kosala

Ba variables ya bootstrap ba variables LESS, ba valeurs na yango, na ba guidelines ya usage

Échafaudage na ba liens

Système ya grille

Typographie

Bamesa

Ba couleurs ya gris

Ba couleurs ya accent

Ba composants

Ba boutons

Baformilɛrɛ

Formulaire ba états na ba alertes

Navbar

Ba dropdowns ya kokita

Unité ya elombe

Ba mixins ya bootstrap

Na ntina na ba mixins

Ba mixins ya base

Ba mixins paramétriques

Bakisa oyo ya yo na pete

Ezali na ba mixins

Ba utilités

Baformilɛrɛ

Typographie

Système ya grille

Ba propriétés ya CSS3

Ba fond mpe ba gradients

Kosangisa Bootstrap na LESS

Bisaleli mpo na kosangisa biloko

Node na makefile

Molongo ya komande

Javascript ezali

Application Mac oyo ezali officiel te

Ba apps ya Mac mingi

Crunch ya kosala

CodeKit ya mibeko

Ezali pɛtɛɛ te