Paggamit sa minus sa Bootstrap

I-customize ug i-extend ang Bootstrap gamit ang LESS , usa ka CSS preprocessor, aron mapahimuslan ang mga variables, mixins, ug daghan pa nga gigamit sa paghimo sa Bootstrap's CSS.

Ngano minus?

Ang Bootstrap gihimo uban ang KINABUHI sa kinauyokan niini, usa ka dinamikong stylesheet nga pinulongan nga gihimo sa among suod nga higala, si Alexis Sellier . Gihimo niini nga mas paspas, mas sayon, ug mas makalingaw ang pagpalambo sa CSS nga nakabase sa sistema.

Unsay naapil?

Isip usa ka extension sa CSS, ang LESS naglakip sa mga variables, mixins alang sa magamit pag-usab nga mga snippet sa code, mga operasyon alang sa yano nga math, nesting, ug bisan mga function sa kolor.

Pagkat-on pa

UBOS nga CSS

Bisitaha ang opisyal nga website sa http://lesscss.org/ para makat-on pa.

Mga variable

Ang pagdumala sa mga kolor ug mga kantidad sa pixel sa CSS mahimong usa ka gamay nga kasakit, kasagaran puno sa pagkopya ug pag-paste. Dili sa LESS bisan pa — itudlo ang mga kolor o mga kantidad sa pixel ingon mga variable ug usba kini kausa.

Mixins

Kanang tulo ka mga deklarasyon sa border-radius nga kinahanglan nimong buhaton sa regular nga CSS? Karon naa na sila sa usa ka linya sa tabang sa mga mixin, mga snippet sa code nga magamit nimo pag-usab bisan asa.

Mga operasyon

Himua ang imong grid, nanguna, ug labi ka labi ka flexible pinaagi sa paghimo sa matematika nga paspas nga adunay mga operasyon. I-multiply, bahina, idugang, ug kuhaan ang imong paagi sa CSS sanity.

Scaffolding ug mga link

@bodyBackground @white Kolor sa background sa panid
@textColor @grayDark Default nga kolor sa teksto para sa tibuok lawas, mga ulohan, ug uban pa
@linkColor #08c Default nga link nga kolor sa teksto
@linkColorHover darken(@linkColor, 15%) Default nga link nga text hover color

Sistema sa grid

@gridColumns 12
@gridColumnWidth 60px
@gridGutterWidth 20px
@fluidGridColumnWidth 6.382978723%
@fluidGridGutterWidth 2.127659574%

Tipograpiya

@sansFontFamily "Helvetica Neue", Helvetica, Arial, sans-serif
@serifFontFamily Georgia, "Times New Roman", Times, serif
@monoFontFamily Menlo, Monaco, "Bag-ong Courier", monospace
@baseFontSize 13px Kinahanglan nga mga pixel
@baseFontFamily @sansFontFamily
@baseLineHeight 18px Kinahanglan nga mga pixel
@altFontFamily @serifFontFamily
@headingsFontFamily inherit
@headingsFontWeight bold
@headingsColor inherit

Mga lamesa

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

Grayscale nga mga kolor

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

Mga kolor sa accent

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

Mga sangkap

Mga butones

@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

Mga porma

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

Porma nga mga estado ug mga alerto

@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

Mga dropdown

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

Hero unit

@heroUnitBackground @grayLighter
@heroUnitHeadingColor inherit
@heroUnitLeadColor inhereit

Mahitungod sa mixins

Basic mixins

Ang usa ka sukaranan nga mixin usa ka apil o usa ka partial alang sa usa ka snippet sa CSS. Gisulat kini sama sa usa ka klase sa CSS ug mahimong tawgon bisan asa.

  1. . elemento {
  2. . tin-aw nga pag-ayo ();
  3. }

Mga parametric mix

Ang usa ka parametric mixin sama ra sa usa ka batakang mixin, apan gidawat usab niini ang mga parameter (busa ang ngalan) nga adunay mga opsyonal nga default nga kantidad.

  1. . elemento {
  2. . utlanan - radius ( 4px );
  3. }

Dali idugang ang imong kaugalingon

Halos tanan nga mga mixin sa Bootstrap gitipigan sa mixins.less, usa ka talagsaon nga utility .less file nga makapahimo kanimo sa paggamit sa usa ka mixin sa bisan unsang .less nga mga file sa toolkit.

Busa, padayon ug gamita ang mga naa na o mobati nga gawasnon nga idugang ang imong kaugalingon kung kinahanglan nimo.

Naglakip sa mga mixin

Mga gamit

Mixin Parameter Paggamit
.clearfix() wala Idugang sa bisan kinsa nga ginikanan aron mahawan ang mga float sa sulod
.tab-focus() wala Ibutang ang estilo sa focus sa Webkit ug lingin ang outline sa Firefox
.center-block() wala Auto center ang usa ka block-level nga elemento gamitmargin: auto
.ie7-inline-block() wala Paggamit dugang sa regular display: inline-blockaron makakuha og suporta sa IE7
.size() @height @width Dali nga ibutang ang gitas-on ug gilapdon sa usa ka linya
.square() @size Nagtukod .size()aron itakda ang gilapdon ug gitas-on nga parehas nga kantidad
.opacity() @opacity Itakda, sa tibuok nga mga numero, ang opacity nga porsyento (pananglitan, "50" o "75")

Mga porma

Mixin Parameter Paggamit
.placeholder() @color: @placeholderText Ibutang ang placeholderkolor sa teksto alang sa mga input

Tipograpiya

Mixin Parameter Paggamit
#font > #family > .serif() wala Paghimo og elemento gamit ang serif font stack
#font > #family > .sans-serif() wala Paghimo og elemento gamit ang sans-serif font stack
#font > #family > .monospace() wala Paghimo og elemento gamit ang monospace font stack
#font > .shorthand() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Sayon nga itakda ang gidak-on sa font, gibug-aton, ug nanguna
#font > .serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ibutang ang pamilya sa font sa serif, ug kontrola ang gidak-on, gibug-aton, ug nanguna
#font > .sans-serif() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ibutang ang pamilya sa font sa sans-serif, ug kontrola ang gidak-on, gibug-aton, ug nanguna
#font > .monospace() @size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight Ibutang ang pamilya sa font sa monospace, ug kontrola ang gidak-on, gibug-aton, ug nanguna

Sistema sa grid

Mixin Parameter Paggamit
.container-fixed() wala Paghimo og usa ka horizontally centered nga sudlanan alang sa paghupot sa imong sulod
#grid > .core() @gridColumnWidth, @gridGutterWidth Paghimo ug pixel grid system (sudlanan, row, ug column) nga adunay n column ug x pixel ang gilapdon nga gutter
#grid > .fluid() @fluidGridColumnWidth, @fluidGridGutterWidth Paghimo ug porsyento nga sistema sa grid nga adunay n mga kolum ug x % ang gilapdon nga kanal
#grid > .input() @gridColumnWidth, @gridGutterWidth Paghimo sa sistema sa pixel grid alang sa inputmga elemento, pag-asoy sa padding ug mga utlanan
.makeColumn @columns: 1, @offset: 0 Himua ang bisan unsa divnga kolum sa grid nga wala ang mga .span*klase

CSS3 mga kabtangan

Mixin Parameter Paggamit
.border-radius() @radius Lingini ang mga kanto sa usa ka elemento. Mahimong usa ka kantidad o upat nga gibulag nga mga kantidad sa wanang
.box-shadow() @shadow Pagdugang usa ka drop shadow sa usa ka elemento
.transition() @transition Idugang ang CSS3 transition effect (eg, all .2s linear)
.rotate() @degrees I-rotate ang usa ka elemento n degrees
.scale() @ratio I-scale ang elemento ngadto sa n times sa orihinal nga gidak-on niini
.translate() @x, @y Ibalhin ang usa ka elemento sa x ug y nga mga eroplano
.background-clip() @clip I-crop ang background sa usa ka elemento (mapuslanon alang sa border-radius)
.background-size() @size Kontrolaha ang gidak-on sa mga hulagway sa background pinaagi sa CSS3
.box-sizing() @boxmodel Usba ang modelo sa kahon alang sa usa ka elemento (pananglitan, border-boxalang sa bug-os nga gilapdon input)
.user-select() @select Kontrola ang pagpili sa cursor sa teksto sa usa ka panid
.backface-visibility() @visibility: visible Likayi ang pagkidlap sa sulud kung gigamit ang mga pagbag-o sa CSS 3D
.resizable() @direction: both Himoa ang bisan unsang elemento nga mabag-o sa tuo ug ubos
.content-columns() @columnCount, @columnGap: @gridGutterWidth Himua ang sulud sa bisan unsang elemento gamit ang mga kolum nga CSS3
.hyphens() @mode: auto CSS3 hyphenation kung gusto nimo (naglakip word-wrap: break-word)

Mga background ug gradients

Mixin Parameter Paggamit
#translucent > .background() @color: @white, @alpha: 1 Hatagi ang usa ka elemento og translucent nga kolor sa background
#translucent > .border() @color: @white, @alpha: 1 Hatagi ang usa ka elemento og translucent nga kolor sa utlanan
#gradient > .vertical() @startColor, @endColor Paghimo og cross-browser vertical nga background gradient
#gradient > .horizontal() @startColor, @endColor Paghimo og cross-browser nga horizontal gradient sa background
#gradient > .directional() @startColor, @endColor, @deg Paghimo usa ka cross-browser nga direksyon sa background gradient
#gradient > .vertical-three-colors() @startColor, @midColor, @colorStop, @endColor Paghimo og cross-browser nga tulo ka kolor nga background gradient
#gradient > .radial() @innerColor, @outerColor Paghimo usa ka cross-browser radial background gradient
#gradient > .striped() @color, @angle Paghimo usa ka cross-browser nga adunay gilis nga gradient sa background
#gradientBar() @primaryColor, @secondaryColor Gigamit alang sa mga butones aron magbutang usa ka gradient ug gamay nga ngitngit nga utlanan
Mubo nga sulat: Kung nagsumite ka usa ka hangyo sa pagbitad sa GitHub nga adunay giusab nga CSS, kinahanglan nimo nga i-compile pag-usab ang CSS pinaagi sa bisan unsang mga pamaagi.

Mga himan alang sa pag-compile

Node nga adunay makefile

I-install ang LESS command line compiler, JSHint, Recess, ug uglify-js sa tibuok kalibutan gamit ang npm pinaagi sa pagpadagan sa mosunod nga sugo:

$ npm install -g dili kaayo jshint recess uglify-js

Sa higayon nga ma-install modagan lang makegikan sa gamut sa imong bootstrap nga direktoryo ug andam ka na.

Dugang pa, kung na-install nimo ang watchr , mahimo kang modagan make watcharon awtomatik nga matukod pag-usab ang bootstrap sa matag higayon nga mag-edit ka sa usa ka file sa bootstrap lib (dili kini gikinahanglan, usa lamang ka sayon ​​​​nga paagi).

Linya sa sugo

I-install ang LESS command line tool pinaagi sa Node ug padagana ang mosunod nga command:

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

Siguroha nga iapil --compresskana nga sugo kung ikaw naningkamot sa pagluwas sa pipila ka mga byte!

Javascript

I-download ang pinakabag-o nga Less.js ug ilakip ang dalan niini (ug Bootstrap) sa <head>.

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

Aron ma-compile pag-usab ang mga .minus nga mga file, i-save lang kini ug i-reload ang imong panid. Ang Less.js nag-compile niini ug nagtipig niini sa lokal nga storage.

Dili opisyal nga Mac app

Ang dili opisyal nga Mac app nagtan-aw sa mga direktoryo sa .less nga mga file ug nag-compile sa code ngadto sa lokal nga mga file human sa matag pagluwas sa usa ka gitan-aw nga .less nga file.

Kung gusto nimo, mahimo nimong i-toggle ang mga kagustuhan sa app alang sa awtomatikong pagminus ug kung unsang direktoryo ang naipon nga mga file.

Dugang Mac apps

Crunch

Ang Crunch usa ka nindot tan-awon nga LESS editor ug compiler nga gitukod sa Adobe Air.

CodeKit

Gihimo sa parehas nga lalaki nga dili opisyal nga Mac app, ang CodeKit usa ka Mac app nga nag-compile sa LESS, SASS, Stylus, ug CoffeeScript.

Pagkayano

Mac, Linux, ug PC app para sa pag-drag ug pag-drop sa pag-compile sa minus nga mga file. Dugang pa, ang source code anaa sa GitHub .