Bootstrap bilen LESS ulanmak
Bootstrap-yň CSS-ni gurmak üçin ulanylýan üýtgeýänlerden, garyndylardan we has köp peýdalanmak üçin Bootstrap-y CSS deslapky prosessor LESS bilen düzüň we giňeldiň.
LESS bilen gurlan
Näme üçin az?
“Bootstrap” öz dostumyz Aleksis Sellier tarapyndan döredilen dinamiki stil sahypasy bolan LESS bilen ýasalýar . Ulgam esasly CSS-ni ösdürmegi has çalt, aňsat we has gyzykly edýär.
Näme girýär?
CSS-iň giňelmesi hökmünde LESS üýtgeýjileri, gaýtadan ulanylýan kod bölekleri üçin garyndylary, ýönekeý matematika amallary, höwürtge we hatda reňk funksiýalaryny öz içine alýar.
Üýtgeýjiler
CSS-de reňkleri we piksel bahalaryny dolandyrmak birneme agyry bolup biler, adatça göçürmek we goýmak bilen doly. LESS bilen däl-de, reňkleri ýa-da piksel bahalaryny üýtgeýjiler hökmünde belläň we bir gezek üýtgediň.
Mixins
Şol üç serhet radiusynyň deklarasiýasyny yzygiderli “CSS” -de etmeli? Indi olar islendik ýerde gaýtadan ulanyp boljak garyndylaryň, kod bölekleriniň kömegi bilen bir setire düşýärler.
Amallar
Amallar bilen uçuşda matematikany ýerine ýetirip, gözenegiňizi öňdebaryjy we has çeýe ediň. CSS saglygyna ýoluňyzy köpeldiň, bölüň, goşuň we aýyryň.
Bootstrap üýtgeýjileri LESS üýtgeýjiler, olaryň bahalary we ulanyş görkezmeleri
Gipersalgylar
@linkColor |
# 08c | Bellenen baglanyşyk tekstiniň reňki | |
@linkColorHover |
darken(@linkColor, 15%) |
Bellenen baglanyşyk tekstiniň reňki |
Grid ulgamy
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6.382978723% |
@fluidGridGutterWidth |
2.127659574% |
Tipografiýa
@baseFontSize |
13px |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
@baseLineHeight |
18px |
Çal reňkli reňkler
@black |
# 000 | |
@grayDarker |
# 222 | |
@grayDark |
# 333 | |
@gray |
# 555 | |
@grayLight |
# 999 | |
@grayLighter |
#eee | |
@white |
#fff |
Çalt reňkler
@blue |
# 049cdb | |
@green |
# 46a546 | |
@red |
# 9d261d | |
@yellow |
# ffc40d | |
@orange |
# f89406 | |
@pink |
# c3325f | |
@purple |
# 7a43b6 |
Komponentler
Düwmeler
@primaryButtonBackground |
@linkColor |
Formalar
@placeholderText |
@grayLight |
Navbar
@navbarHeight |
40px | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
Döwletler we duýduryşlar
@warningText |
# c09853 | |
@warningBackground |
# f3edd2 | |
@errorText |
# b94a48 | |
@errorBackground |
# f2dede | |
@successText |
# 468847 | |
@successBackground |
# dff0d8 | |
@infoText |
# 3a87ad | |
@infoBackground |
# d9edf7 |
Bootstrap garyndylary
Garyndylar hakda
Esasy garyndylar
Esasy garyndy, esasan, CSS-iň bir bölegi üçin bir bölegi ýa-da bölekleýin. Olar edil CSS synpy ýaly ýazylandyr we islendik ýere jaň edip bolýar.
- . element {
- . Clearfix ();
- }
Parametrik garyndylar
Parametrik garyndy, edil esasy garyndy ýalydyr, ýöne goşmaça başlangyç bahalary bilen parametrleri (şonuň üçin ady) kabul edýär.
- . element {
- . araçäk - radius ( 4px );
- }
Özüňizi aňsatlyk bilen goşuň
“Bootstrap” -yň garyndylarynyň hemmesi diýen ýaly “mixins.less” -de saklanýar, gurallar toplumyndaky .less faýllaryň islendik birinde garyndyny ulanmaga mümkinçilik berýän ajaýyp peýdaly .less faýly.
Şeýlelik bilen, dowam ediň we bar bolanlaryny ulanyň ýa-da zerur bolanda özüňizi goşup bilersiňiz.
Goşulan garyndylar
Kärhanalar
| Mixin | Parametrler | Ulanylyşy |
|---|---|---|
.clearfix() |
hiç | Içindäki ýüzüşleri arassalamak üçin islendik ene-ata goşuň |
.tab-focus() |
hiç | Webkit fokus stilini we Firefox tegelek görnüşini ulanyň |
.center-block() |
hiç | Ulanylýan blok derejeli elementi awtomatik merkezleşdiriňmargin: auto |
.ie7-inline-block() |
hiç | display: inline-blockIE7 goldawyny almak üçin yzygiderli ulanyň |
.size() |
@height: 5px, @width: 5px |
Boýy we ini bir setirde çalt düzüň |
.square() |
@size: 5px |
Inini .size()we beýikligini şol bir baha bilen kesgitlemek üçin gurulýar |
.opacity() |
@opacity: 100 |
Umuman, açyklyk göterimini düzüň (mysal üçin, "50" ýa-da "75") |
Formalar
| Mixin | Parametrler | Ulanylyşy |
|---|---|---|
.placeholder() |
@color: @placeholderText |
placeholderGirişler üçin tekst reňkini düzüň |
Tipografiýa
| Mixin | Parametrler | Ulanylyşy |
|---|---|---|
#font > #family > .serif() |
hiç | Bir elementi serif şrift stakasyny ulanyň |
#font > #family > .sans-serif() |
hiç | Bir elementi sans-serif şrift toplumyny ulanyň |
#font > #family > .monospace() |
hiç | Bir elementi monospace şrift toplumyny ulanyň |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Şriftiň ululygyny, agramyny we öňdebaryjylygyny aňsatlyk bilen düzüň |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Şrift maşgalasyny serif edip düzüň, ululygyny, agramyny we öňdebaryjylygyny dolandyryň |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Şrift maşgalasyny sans-serif-e düzüň we ululygyny, agramyny we öňdebaryjylygyny dolandyryň |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Şrift maşgalasyny monospace düzüň we ululygyny, agramyny we öňdebaryjylygyny dolandyryň |
Grid ulgamy
| Mixin | Parametrler | Ulanylyşy |
|---|---|---|
.container-fixed() |
hiç | Mazmunyňyzy saklamak üçin keseligine merkezleşdirilen konteýner dörediň |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
N sütünleri we x piksel giňligi bilen piksel gözenek ulgamyny (konteýner, hatar we sütünler) dörediň |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
N sütünleri we x % giňligi bilen örtülen gözenek ulgamyny dörediň |
CSS3 häsiýetleri
| Mixin | Parametrler | Ulanylyşy |
|---|---|---|
.border-radius() |
@radius: 5px |
Bir elementiň burçlaryny tegelekläň. Singleeke-täk baha ýa-da boşluk bilen bölünen dört baha bolup biler |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Bir elemente damja kölegesini goşuň |
.transition() |
@transition |
CSS3 geçiş effektini goşuň (mysal üçin all .2s linear) |
.rotate() |
@degrees |
Bir elementi n dereje öwrüň |
.scale() |
@ratio |
Bir elementi asyl ululygyndan n esse ulaldyň |
.translate() |
@x: 0, @y: 0 |
Bir elementi x we y uçarlarynda süýşüriň |
.background-clip() |
@clip |
Bir elementiň fonuny kesiň (peýdaly border-radius) |
.background-size() |
@size |
CSS3 arkaly fon suratlarynyň ululygyna gözegçilik ediň |
.box-sizing() |
@boxmodel |
Bir element üçin guty modelini üýtgediň (mysal border-boxüçin, doly ini üçin input) |
.user-select() |
@select |
Sahypadaky tekstiň kursor saýlamasyna gözegçilik |
.resizable() |
@direction: both |
Islendik elementi sag we aşaky görnüşde üýtgedip bilersiňiz |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Islendik elementiň mazmunyny CSS3 sütünlerini ulanyň |
Düşündirişler we gradiýentler
| Mixin | Parametrler | Ulanylyşy |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Bir elemente aç-açan fon reňk beriň |
#translucent > .border() |
@color: @white, @alpha: 1 |
Bir elemente aç-açan araçäk reňk beriň |
#gradient > .vertical() |
@startColor, @endColor |
Kesgitli brauzeriň dik fon gradiýentini dörediň |
#gradient > .horizontal() |
@startColor, @endColor |
Kesgitli brauzer keseligine fon gradientini dörediň |
#gradient > .directional() |
@startColor, @endColor, @deg |
Kesgitli brauzer ugrukdyryjy fon gradientini dörediň |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Create a cross-browser three-color background gradient |
#gradient > .radial() |
@innerColor, @outerColor |
Create a cross-browser radial background gradient |
#gradient > .striped() |
@color, @angle |
Create a cross-browser striped background gradient |
#gradientBar() |
@primaryColor, @secondaryColor |
Used for buttons to assign a gradient and slightly darker border |
Compiling Bootstrap with LESS
Tools for compiling
Node with makefile
Install the LESS command line compiler and uglify-js globally with npm by running the following command:
$ npm install -g less uglify-js
Once installed just run make from the root of your bootstrap directory and you're all set.
Additionally, if you have watchr installed, you may run make watch to have bootstrap automatically rebuilt every time you edit a file in the bootstrap lib (this isn't required, just a convenience method).
Command line
Install the LESS command line tool via Node and run the following command:
$ lessc ./lib/bootstrap.less > bootstrap.css
Be sure to include --compress in that command if you're trying to save some bytes!
Javascript
Download the latest Less.js and include the path to it (and Bootstrap) in the <head>.
<link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script>
To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.
Unofficial Mac app
The unofficial Mac app watches directories of .less files and compiles the code to local files after every save of a watched .less file.
If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.
More Mac apps
Crunch
Crunch is a great looking LESS editor and compiler built on Adobe Air.
CodeKit
Resmi däl Mac programmasy bilen bir adam tarapyndan döredilen CodeKit, LESS, SASS, Stylus we CoffeeScript-i düzýän Mac programmasydyr.
Pleönekeý
LESS faýllaryny süýräp çekmek üçin Mac, Linux we PC programmasy. Mundan başga-da, deslapky kod GitHub-da .