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

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.

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

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.

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

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 gamit`margin: auto`
`.ie7-inline-block()`	wala	Paggamit dugang sa regular `display: inline-block`aron 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 `placeholder`kolor 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 `input`mga elemento, pag-asoy sa padding ug mga utlanan
`.makeColumn`	`@columns: 1, @offset: 0`	Himua ang bisan unsa `div`nga 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-box`alang 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.

Gitukod uban sa minus

Ngano minus?

Unsay naapil?

Pagkat-on pa

Mga variable

Mixins

Mga operasyon

Ang mga variable sa Bootstrap UBAY nga mga variable, ang ilang mga kantidad, ug mga panudlo sa paggamit

Scaffolding ug mga link

Sistema sa grid

Tipograpiya

Mga lamesa

Grayscale nga mga kolor

Mga kolor sa accent

Mga sangkap

Mga butones

Mga porma

Porma nga mga estado ug mga alerto

Navbar

Mga dropdown

Hero unit

Mga mix sa Bootstrap

Mahitungod sa mixins

Basic mixins

Mga parametric mix

Dali idugang ang imong kaugalingon

Naglakip sa mga mixin

Mga gamit

Mga porma

Tipograpiya

Sistema sa grid

CSS3 mga kabtangan

Mga background ug gradients

Pag-compile sa Bootstrap nga adunay KINABUHI

Mga himan alang sa pag-compile

Node nga adunay makefile

Linya sa sugo

Javascript

Dili opisyal nga Mac app

Dugang Mac apps

Crunch

CodeKit

Pagkayano