Nggunakake LESS karo Bootstrap
Ngatur lan ngluwihi Bootstrap nganggo LESS , preprocessor CSS, kanggo njupuk kauntungan saka variabel, mixin, lan liyane digunakake kanggo mbangun CSS Bootstrap.
Dibangun karo LESS
Kenapa KURANG?
Bootstrap digawe nganggo LESS ing inti, basa stylesheet dinamis sing digawe dening kanca apik kita, Alexis Sellier . Iku nggawe CSS basis sistem ngembangaken luwih cepet, luwih gampang, lan luwih nyenengake.
Apa sing kalebu?
Minangka extension saka CSS, LESS kalebu variabel, mixins kanggo reusable snippet kode, operasi kanggo matematika prasaja, nesting, lan malah fungsi werna.
Sinau luwih lengkap
Bukak situs web resmi ing http://lesscss.org/ kanggo mangerteni sing luwih lengkap.
Variabel
Ngatur warna lan nilai piksel ing CSS bisa uga rada nyeri, biasane kebak salinan lan tempel. Ora nganggo KURANG - nemtokake warna utawa nilai piksel minangka variabel lan ganti sapisan.
Campuran
Telu pranyatan radius wewatesan sampeyan kudu nggawe ing CSS biasa? Saiki wis dadi siji baris kanthi bantuan mixin, potongan kode sing bisa digunakake maneh ing ngendi wae.
Operasi
Gawe kothak, pimpinan, lan luwih fleksibel kanthi nindakake matematika kanthi cepet kanthi operasi. Multiply, dibagi, nambah, lan nyuda cara kanggo CSS sanity.
Variabel Bootstrap Variabel KURANG, nilai, lan pedoman panggunaan
Scaffolding lan pranala
@bodyBackground |
@white |
Werna latar mburi kaca | |
@textColor |
@grayDark |
Werna teks standar kanggo kabeh awak, judhul, lan liya-liyane | |
@linkColor |
#08c |
Warna teks pranala standar | |
@linkColorHover |
darken(@linkColor, 15%) |
Warna hover teks pranala standar |
Sistem grid
@gridColumns |
12 |
@gridColumnWidth |
60px |
@gridGutterWidth |
20px |
@fluidGridColumnWidth |
6,382978723% |
@fluidGridGutterWidth |
2.127659574% |
Tipografi
@sansFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif | |
@serifFontFamily |
Georgia, "Times New Roman", Times, serif |
|
@monoFontFamily |
Menlo, Monaco, "Courier New", monospace | |
@baseFontSize |
13px | Mesthi piksel |
@baseFontFamily |
@sansFontFamily |
|
@baseLineHeight |
18px | Mesthi piksel |
@altFontFamily |
@serifFontFamily |
|
@headingsFontFamily |
inherit |
|
@headingsFontWeight |
bold |
|
@headingsColor |
inherit |
|
Tabel
@tableBackground |
transparent |
@tableBackgroundAccent |
#f9f9f9 |
@tableBackgroundHover |
#f5f5f5 |
@tableBorder |
ddd |
Werna werna abu-abu
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
Warna aksen
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
Komponen
Tombol
@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 |
Formulir
@placeholderText |
@grayLight |
@inputBackground |
@white |
@inputBorder |
#ccc |
@inputBorderRadius |
3px |
@inputDisabledBackground |
@grayLighter |
@formActionsBackground |
#f5f5f5 |
Wangun negara lan tandha
@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 |
Unit pahlawan
@heroUnitBackground |
@grayLighter |
|
@heroUnitHeadingColor |
inherit |
|
@heroUnitLeadColor |
inhereit |
Campuran Bootstrap
About mixins
Campuran dhasar
A mixin dhasar ateges kalebu utawa sebagean kanggo snippet saka CSS. Iki ditulis kaya kelas CSS lan bisa diarani ing ngendi wae.
- . unsur {
- . clearfix ();
- }
Campuran parametrik
Campuran parametrik kaya mixin dhasar, nanging uga nampa paramèter (mula jenenge) kanthi nilai standar opsional.
- . unsur {
- . wates - radius ( 4px );
- }
Gampang nambah dhewe
Saklawasé kabeh mixin Bootstrap disimpen ing mixins.less, sarana apik .less file sing ngijini sampeyan kanggo nggunakake mixin ing samubarang file .less ing toolkit.
Dadi, go ahead lan nggunakake sing wis ana utawa aran gratis kanggo nambah dhewe minangka sampeyan perlu.
Klebu campuran
Utilitas
| Mixin | Paramèter | Panggunaan |
|---|---|---|
.clearfix() |
ora ana | Tambah menyang sembarang wong tuwa kanggo mbusak floats ing |
.tab-focus() |
ora ana | Gunakake gaya fokus Webkit lan bunder Firefox outline |
.center-block() |
ora ana | Pusat otomatis unsur pamblokiran-tingkat nggunakakemargin: auto |
.ie7-inline-block() |
ora ana | Gunakake saliyane biasa display: inline-blockkanggo njaluk dhukungan IE7 |
.size() |
@height @width |
Cepet nyetel dhuwur lan jembaré ing siji baris |
.square() |
@size |
Dibangun .size()kanggo nyetel jembar lan dhuwur minangka nilai sing padha |
.opacity() |
@opacity |
Setel, ing nomer wutuh, persentase opacity (contone, "50" utawa "75") |
Formulir
| Mixin | Paramèter | Panggunaan |
|---|---|---|
.placeholder() |
@color: @placeholderText |
Setel placeholderwarna teks kanggo input |
Tipografi
| Mixin | Paramèter | Panggunaan |
|---|---|---|
#font > #family > .serif() |
ora ana | Nggawe unsur nggunakake tumpukan font serif |
#font > #family > .sans-serif() |
ora ana | Nggawe unsur nggunakake tumpukan font sans-serif |
#font > #family > .monospace() |
ora ana | Nggawe unsur nggunakake tumpukan font monospace |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Gampang nyetel ukuran font, bobot, lan anjog |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Setel kulawarga font kanggo serif, lan ukuran kontrol, bobot, lan anjog |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Setel kulawarga font kanggo sans-serif, lan ukuran kontrol, bobot, lan anjog |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Setel kulawarga font menyang monospace, lan kontrol ukuran, bobot, lan anjog |
Sistem grid
| Mixin | Paramèter | Panggunaan |
|---|---|---|
.container-fixed() |
ora ana | Nggawe wadhah horisontal tengah kanggo nahan konten sampeyan |
#grid > .core() |
@gridColumnWidth, @gridGutterWidth |
Nggawe sistem kothak piksel (wadhah, baris, lan kolom) kanthi n kolom lan x piksel amba talang |
#grid > .fluid() |
@fluidGridColumnWidth, @fluidGridGutterWidth |
Ngasilake sistem kothak precent karo n kolom lan x % amba talang |
#grid > .input() |
@gridColumnWidth, @gridGutterWidth |
Gawe sistem kothak piksel kanggo inputunsur, ngitung padding lan wates |
.makeColumn |
@columns: 1, @offset: 0 |
Ngowahi sembarang divmenyang kolom kothak tanpa .span*kelas |
sifat CSS3
| Mixin | Paramèter | Panggunaan |
|---|---|---|
.border-radius() |
@radius |
Babak sudhut unsur. Bisa dadi nilai siji utawa papat nilai sing dipisahake spasi |
.box-shadow() |
@shadow |
Tambah bayangan gulung menyang unsur |
.transition() |
@transition |
Tambah efek transisi CSS3 (contone, all .2s linear) |
.rotate() |
@degrees |
Puter unsur n derajat |
.scale() |
@ratio |
Skala unsur nganti n kaping ukuran asline |
.translate() |
@x, @y |
Pindhah unsur ing bidang x lan y |
.background-clip() |
@clip |
Potong latar mburi unsur (migunani kanggo border-radius) |
.background-size() |
@size |
Ngontrol ukuran gambar latar mburi liwat CSS3 |
.box-sizing() |
@boxmodel |
Ngganti model kothak kanggo unsur (contone, border-boxkanggo jembar lengkap input) |
.user-select() |
@select |
Ngontrol pilihan kursor teks ing kaca |
.backface-visibility() |
@visibility: visible |
Nyegah kedhip konten nalika nggunakake transformasi CSS 3D |
.resizable() |
@direction: both |
Nggawe unsur apa wae sing bisa diowahi ukurane ing sisih tengen lan ngisor |
.content-columns() |
@columnCount, @columnGap: @gridGutterWidth |
Nggawe isi unsur apa wae nggunakake kolom CSS3 |
Latar mburi lan gradients
| Mixin | Paramèter | Panggunaan |
|---|---|---|
#translucent > .background() |
@color: @white, @alpha: 1 |
Menehi unsur warna latar mburi tembus |
#translucent > .border() |
@color: @white, @alpha: 1 |
Menehi unsur werna wates translucent |
#gradient > .vertical() |
@startColor, @endColor |
Nggawe gradien latar mburi vertikal lintas-browser |
#gradient > .horizontal() |
@startColor, @endColor |
Nggawe gradien latar mburi horisontal lintas-browser |
#gradient > .directional() |
@startColor, @endColor, @deg |
Gawe gradien latar mburi arah lintas-browser |
#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Gawe gradien latar mburi telu warna lintas-browser |
#gradient > .radial() |
@innerColor, @outerColor |
Gawe gradien latar mburi radial lintas-browser |
#gradient > .striped() |
@color, @angle |
Gawe gradien latar mburi belang lintas-browser |
#gradientBar() |
@primaryColor, @secondaryColor |
Digunakake kanggo tombol kanggo nemtokake wates gradien lan rada peteng |
Nglumpukake Bootstrap karo LESS
Piranti kanggo kompilasi
Node karo makefile
Instal kompiler baris perintah LESS lan uglify-js sacara global nganggo npm kanthi nglakokake printah ing ngisor iki:
$ npm nginstal -g kurang uglify-js
Sawise diinstal mung mbukak makesaka root direktori bootstrap lan sampeyan wis siap.
Kajaba iku, yen sampeyan wis nginstal watchr , sampeyan bisa mbukak make watchbootstrap kanthi otomatis dibangun maneh saben sampeyan ngowahi file ing lib bootstrap (iki ora dibutuhake, mung cara sing gampang).
baris printah
Instal alat baris perintah LESS liwat Node lan jalanake printah ing ngisor iki:
$ lessc ./less/bootstrap.less > bootstrap.css
Priksa manawa sampeyan kalebu --compressing printah kasebut yen sampeyan nyoba nyimpen sawetara bita!
Javascript
Download Less.js paling anyar lan lebokake path menyang (lan Bootstrap) ing <head>.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Kanggo ngumpulake maneh file .kurang, mung simpen lan muat ulang kaca sampeyan. Less.js nglumpukake lan nyimpen ing panyimpenan lokal.
Aplikasi Mac ora resmi
Aplikasi Mac ora resmi nonton direktori file .less lan nglumpukake kode menyang file lokal sawise saben nyimpen file .less sing ditonton.
Yen sampeyan seneng, sampeyan bisa milih pilihan ing app kanggo minifying otomatis lan ing direktori file sing dikompilasi.
Aplikasi Mac liyane
Crunch
Crunch minangka editor lan kompiler KURANG sing apik sing dibangun ing Adobe Air.
KodeKit
Digawe dening wong sing padha karo aplikasi Mac sing ora resmi, CodeKit minangka aplikasi Mac sing nyusun LESS, SASS, Stylus, lan CoffeeScript.
prasaja
Aplikasi Mac, Linux, lan PC kanggo nyeret lan nyelehake file sing KURANG. Kajaba iku, kode sumber ana ing GitHub .