Benotzt MANNER mat Bootstrap

Personnaliséiert a verlängert Bootstrap mat LESS , engem CSS Preprocessor, fir d'Variabelen, Mixins a méi ze profitéieren fir de Bootstrap's CSS ze bauen.

Firwat MANNER?

Bootstrap gëtt mat MESS am Kär gemaach, eng dynamesch Stylesheet Sprooch erstallt vun eisem gudde Frënd, Alexis Sellier . Et mécht d'Entwécklung vu Systembaséiert CSS méi séier, méi einfach a méi Spaass.

Wat ass mat abegraff?

Als Ausdehnung vu CSS enthält LESS Variablen, Mixins fir wiederverwendbare Snippets vum Code, Operatioune fir einfach Mathematik, Nesting, a souguer Faarffunktiounen.

Léier méi

MANNER CSS

Besicht déi offiziell Websäit http://lesscss.org/ fir méi ze léieren.

Variablen

D'Verwalte vu Faarwen a Pixelwäerter an CSS kann e bëssen schmerzhaft sinn, normalerweis voller Kopie a Paste. Net mat MANNER awer - gitt Faarwen oder Pixelwäerter als Variabelen a ännert se eemol.

Mixins

Déi dräi Grenzradius-Deklaratioune musst Dir am normale CSS maachen? Elo si se erof op eng Zeil mat der Hëllef vu Mixins, Snippets vu Code déi Dir iwwerall nei benotze kënnt.

Operatiounen

Maacht Äert Gitter, féierend a méi super flexibel andeems Dir Mathematik op der Flucht mat Operatiounen maacht. Multiplizéieren, deelen, addéieren an subtrahéieren Äre Wee op CSS Sanitéit.

Steieren a Linken

@bodyBackground @white Säit Hannergrondfaarf
@textColor @grayDark Standard Textfaarf fir de ganze Kierper, Rubriken a méi
@linkColor #08c Standard Link Text Faarf
@linkColorHover darken(@linkColor, 15%) Standard Link Text Hover Faarf

Gitter System

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20 px
@fluidGridColumnWidth 6,382978723%
@fluidGridGutterWidth 2,127659574%

Typographie

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Courier New", monospace
@baseFontSize 13 px Muss Pixel sinn
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Muss Pixel sinn
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Dëscher

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

Greyscale Faarwen

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

Akzent Faarwen

@blue #049cdb
@green #46a546
@red #9d261d
@yellow #ffc40d
@orange #f89406
@pink #c3325f
@purple #7a43b6

Komponenten

Knäppercher

@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

Formen

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

Form Staaten an Alarmer

@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

Held Eenheet

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Iwwer Mixins

Basis Mëschungen

E Basismixin ass am Wesentlechen en Inklusioun oder en Deel fir e Snippet vun CSS. Si gi just wéi eng CSS Klass geschriwwen a kënnen iwwerall genannt ginn.

  1. . element {
  2. . clearfix ();
  3. }

Parametresch Mëschungen

E parametresche Mixin ass grad wéi e Basismixin, awer et akzeptéiert och Parameteren (also den Numm) mat optionalen Standardwäerter.

  1. . element {
  2. . Grenz - Radius ( 4px );
  3. }

Füügt einfach Ären eegene bäi

Bal all Bootstrap's Mixins ginn an mixins.less gespäichert, eng wonnerbar Utility .less Datei, déi Iech erlaabt e Mixin an engem vun den .less Dateien am Toolkit ze benotzen.

Also, gitt vir a benotzt déi existent oder fillt Iech fräi fir Är eege derbäi ze addéieren wéi Dir braucht.

Inklusiv Mixins

Utilities

Mixin Parameteren Benotzung
.clearfix() keng Füügt un all Elterendeel fir d'Schwämm bannen ze läschen
.tab-focus() keng Fëllt de Webkit Fokusstil a ronn Firefox Kontur un
.center-block() keng Auto Zentrum engem Block-Niveau Element benotztmargin: auto
.ie7-inline-block() keng Benotzt zousätzlech zu regelméissegen display: inline-blockfir IE7 Ënnerstëtzung ze kréien
.size() @height @width Setzt séier d'Héicht an d'Breet op enger Linn
.square() @size Baut op .size()fir d'Breet an d'Héicht als selwechte Wäert ze setzen
.opacity() @opacity Setzt, a ganz Zuelen, den Opazitéitsprozent (zB "50" oder "75")

Formen

Mixin Parameteren Benotzung
.placeholder() @color: @placeholderText Setzt d' placeholderTextfaarf fir Inputen

Typographie

Mixin Parameteren Benotzung
#font > #family > .serif() keng Maachen en Element engem serif Schrëft Stack benotzen
#font > #family > .sans-serif() keng Maacht en Element mat engem sans-serif Schrëftstapel
#font > #family > .monospace() keng Maacht en Element mat engem Monospace Schrëftstapel
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Einfach Schrëftgréisst, Gewiicht a Féierung setzen
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Setzt Schrëftfamill op Serif, a kontrolléiert d'Gréisst, d'Gewiicht an d'Féierung
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Setzt Schrëftfamill op sans-serif, a kontrolléiert d'Gréisst, d'Gewiicht an d'Féierung
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Setzt Schrëftfamill op Monospace, a kontrolléiert d'Gréisst, d'Gewiicht an d'Féierung

Gitter System

Mixin Parameteren Benotzung
.container-fixed() keng Erstellt en horizontal zentréierte Container fir Ären Inhalt ze halen
#grid > .core() @gridColumnWidth, @gridGutterWidth Generéiere e Pixel Gitter System (Container, Zeil, a Kolonnen) mat n Kolonnen an x ​​Pixel breet Renn
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Generéiere engem Prozentsaz Gitter System mat n Sailen an x % breet Rennen
#grid > .input() @gridColumnWidth, @gridGutterWidth Generéiere de Pixel Gitter System fir inputElementer, Rechnung fir Padding a Grenzen
.makeColumn @columns: 1, @offset: 0 Maacht iergendeng divan eng Gitterkolonn ouni d' .span*Klassen

CSS3 Eegeschaften

Mixin Parameteren Benotzung
.border-radius() @radius Ronn d'Ecker vun engem Element. Kann een eenzege Wäert oder véier Raum getrennt Wäerter sinn
.box-shadow() @shadow Füügt e Schatt un en Element
.transition() @transition Füügt CSS3 Iwwergangseffekt (z.B. all .2s linear)
.rotate() @degrees Rotéiert en Element n Grad
.scale() @ratio Skala en Element op n mol seng ursprénglech Gréisst
.translate() @x, @y Beweegt en Element op den x an y Fligeren
.background-clip() @clip Crop den Hannergrond vun engem Element (nëtzlech fir border-radius)
.background-size() @size Kontrolléiert d'Gréisst vun den Hannergrondbiller iwwer CSS3
.box-sizing() @boxmodel Ännert de Këschtmodell fir en Element (zB border-boxfir eng voll Breet input)
.user-select() @select Kontroll Cursor Auswiel vun Text op enger Säit
.backface-visibility() @visibility: visible Verhënnert d'Flameren vum Inhalt wann Dir CSS 3D Transformatiounen benotzt
.resizable() @direction: both Maachen all Element resizable op der rietser an ënnen
.content-columns() @columnCount, @columnGap: @gridGutterWidth Maacht den Inhalt vun all Element benotzt CSS3 Kolonnen
.hyphens() @mode: auto CSS3 Bindestéck wann Dir et wëllt (enthält word-wrap: break-word)

Hannergrënn a Gradienten

Mixin Parameteren Benotzung
#translucent > .background() @color: @white, @alpha: 1 Gitt engem Element eng transluzent Hannergrondfaarf
#translucent > .border() @color: @white, @alpha: 1 Gitt engem Element eng transluzent Grenzfaarf
#gradient > .vertical() @startColor, @endColor Erstellt e Cross-Browser vertikalen Hannergrondgradient
#gradient > .horizontal() @startColor, @endColor Erstellt e Cross-Browser horizontalen Hannergrondgradient
#gradient > .directional() @startColor, @endColor, @deg Erstellt e Cross-Browser Directional Hannergrondgradient
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Erstellt e Cross-Browser dräifaarweg Hannergrondgradient
#gradient > .radial() @innerColor, @outerColor Erstellt e Cross-Browser radialen Hannergrondgradient
#gradient > .striped() @color, @angle Erstellt e Cross-Browser gesträifte Hannergrondgradient
#gradientBar() @primaryColor, @secondaryColor Benotzt fir Knäppercher fir e Gradient a liicht däischter Grenz ze ginn
Notiz: Wann Dir eng Pull-Ufro op GitHub mat modifizéierten CSS ofgitt, musst Dir den CSS iwwer eng vun dëse Methoden nei kompiléieren.

Tools fir ze kompiléieren

Node mat Makefile

Installéiert de LESS Kommandozeil Compiler, JSHint, Recess, an uglify-js weltwäit mat npm andeems Dir de folgende Kommando ausféiert:

$ npm installéieren -g manner jshint recess uglify-js

Eemol installéiert, lafen einfach makevun der Root vun Ärem Bootstrap Verzeichnis an Dir sidd alles ageriicht.

Zousätzlech, wann Dir Watchr installéiert hutt, kënnt Dir lafen make watchfir Bootstrap automatesch opzebauen all Kéier wann Dir eng Datei am Bootstrap lib ännert (dëst ass net erfuerderlech, just eng Komfortmethod).

Kommando Linn

Installéiert de LESS Kommandozeil Tool iwwer Node a lafen de folgende Kommando:

$ lessc ./less/bootstrap.less > bootstrap.css

Gitt sécher datt Dir --compressan deem Kommando enthält wann Dir probéiert e puer Bytes ze späicheren!

Javascript

Luet déi lescht Less.js erof an enthält de Wee dohinner (a Bootstrap) an der <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>  
 

Fir d'.less Dateien nei ze kompiléieren, späichert se einfach a lued Är Säit nei. Less.js kompiléiert se a späichert se an der lokaler Späichere.

Inoffiziell Mac App

Déi inoffiziell Mac App kuckt Verzeechnes vun .less Dateien a kompiléiert de Code op lokal Dateien no all Späichere vun enger iwwerwaachter .less Datei.

Wann Dir wëllt, kënnt Dir Virléiften an der App wiesselen fir automatesch Minifizéierung a wéi engem Verzeichnis déi kompiléiert Dateien ophalen.

Méi Mac Apps

Crunch

Crunch ass e super ausgesinn LESS Editor a Compiler op Adobe Air gebaut.

CodeKit

Erstellt vum selwechte Guy wéi déi inoffiziell Mac App, CodeKit ass eng Mac App déi LESS, SASS, Stylus a CoffeeScript kompiléiert.

Einfach

Mac, Linux, a PC App fir Drag and Drop Zesummesetzung vu MANNER Dateien. Plus, de Quellcode ass op GitHub .