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 esalelami 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. Multiple, kabola, bakisa, mpe kolongola nzela na yo na CSS sanity.

Ba hyperliens

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

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

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

`@primaryButtonBackground`	`@linkColor`

Baformilɛrɛ

`@placeholderText`	`@grayLight`

Navbar

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

Formulaire ba états na ba alertes

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

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 mpe ba paramètres (yango wana kombo) na ba valeurs par défaut optionnelle.

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

Bakisa oyo ya yo moko 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.

Ba mixins ezali na kati

Ba utilités

Mixin oyo ezali	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: 5px, @width: 5px`	Tyá nokinoki bosanda mpe bonene na molɔngɔ moko
`.square()`	`@size: 5px`	Etongaka likolo `.size()`mpo na kotiya bonene mpe bosanda lokola motuya moko
`.opacity()`	`@opacity: 100`	Botia, na mituya mobimba, pourcentage ya opacité (ndakisa, "50" to "75") .

Baformilɛrɛ

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

Typographie

Mixin oyo ezali	Ba paramètres	Kosalela yango
`#font > #family > .serif()`	moko te	Sala élément 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 ezali	Ba paramètres	Kosalela yango
`.container-fixed()`	moko te	Pesá eloko oyo ezali na bonene oyo ebongwani te (ebongisami na `@siteWidth`) mpo na kokanga makambo na yo
`.columns()`	`@columns: 1`	Tongela colonne ya grille oyo ezo span nombre nionso ya ba colonnes (ezali par défaut na colonne 1) .
`.offset()`	`@columns: 1`	Offset colonne ya grille na marge gauche oyo ezo span nombre nionso ya ba colonnes
`.gridColumn()`	moko te	Sala que élément moko e flotter lokola colonne ya grille

Ba propriétés ya CSS3

Mixin oyo ezali	Ba paramètres	Kosalela yango
`.border-radius()`	`@radius: 5px`	Bosala rond na ba coins ya élément moko. Ekoki kozala motuya moko to motuya minei oyo ekabwani na esika
`.box-shadow()`	`@shadow: 0 1px 3px rgba(0,0,0,.25)`	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 fois na taille originale
`.translate()`	`@x: 0, @y: 0`	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`	Bokamba boponi ya curseur ya makomi na lokasa moko
`.resizable()`	`@direction: both`	Sala que élément nionso ekoki ko changer bonene na droite pe na se
`.content-columns()`	`@columnCount, @columnGap: @gridColumnGutter`	Sala que contenus ya élément nionso esalela ba colonnes CSS3

Ba fond mpe ba gradients

Mixin oyo ezali	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, esengeli osala lisusu CSS na nzela ya moko ya mayele oyo.

Bisaleli mpo na kosangisa biloko

Node na makefile

Botia compilateur ya ligne ya commande LESS na npm na kosala commande oyo elandi:

$ npm installer moke

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 ./lib/bobandi.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

Ba hyperliens

Système ya grille

Typographie

Ba couleurs ya gris

Ba couleurs ya accent

Ba composants

Ba boutons

Baformilɛrɛ

Navbar

Formulaire ba états na ba alertes

Ba mixins ya bootstrap

Na ntina na ba mixins

Ba mixins ya base

Ba mixins paramétriques

Bakisa oyo ya yo moko na pete

Ba mixins ezali na kati

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

Kozanga pete