Kohandage ja laiendage Bootstrapi CSS-i eelprotsessori LESS abil, et kasutada ära muutujaid, segusid ja palju muud, mida Bootstrapi CSS-i koostamiseks kasutatakse.
Bootstrap on tehtud dünaamilise stiilitabeli keelega LESS, mille on loonud meie hea sõber Alexis Sellier . See muudab süsteemipõhise CSS-i arendamise kiiremaks, lihtsamaks ja lõbusamaks.
CSS-i laiendusena sisaldab LESS muutujaid, korduvkasutatavate koodijuppide segusid, lihtsa matemaatika toiminguid, pesastamist ja isegi värvifunktsioone.
Värvide ja piksliväärtuste haldamine CSS-is võib olla veidi piin, tavaliselt täis kopeerimist ja kleepimist. Mitte aga VÄHEM – määrake muutujatena värvid või piksliväärtused ja muutke neid üks kord.
Need kolm piiriraadiuse deklaratsiooni, mida peate tavalises CSS-is tegema? Nüüd on need ühele reale tänu mixinidele, koodijuppidele, mida saate igal pool uuesti kasutada.
Muutke oma ruudustik, juhtimine ja ülipaindlikumaks, tehes matemaatikat käigu pealt tehtetega. Korrutage, jagage, lisage ja lahutage oma tee CSS-i mõistlikkuse saavutamiseks.
@linkColor |
#08c | Lingi teksti vaikevärv | |
@linkColorHover |
darken(@linkColor, 15%) |
Vaikelingi teksti hõljutusvärv |
@gridColumns |
12 |
@gridColumnWidth |
60 pikslit |
@gridGutterWidth |
20 pikslit |
@fluidGridColumnWidth |
6,382978723% |
@fluidGridGutterWidth |
2,127659574% |
@baseFontSize |
13 pikslit | |
@baseFontFamily |
"Helvetica Neue", Helvetica, Arial, sans-serif |
|
@baseLineHeight |
18 pikslit |
@black |
#000 | |
@grayDarker |
#222 | |
@grayDark |
#333 | |
@gray |
#555 | |
@grayLight |
#999 | |
@grayLighter |
#eee | |
@white |
#fff |
@blue |
#049cdb | |
@green |
#46a546 | |
@red |
#9d261d | |
@yellow |
#ffc40d | |
@orange |
#f89406 | |
@pink |
#c3325f | |
@purple |
#7a43b6 |
@primaryButtonBackground |
@linkColor |
@placeholderText |
@grayLight |
@navbarHeight |
40 pikslit | |
@navbarBackground |
@grayDarker |
|
@navbarBackgroundHighlight |
@grayDark |
|
@navbarText |
@grayLight |
|
@navbarLinkColor |
@grayLight |
|
@navbarLinkColorHover |
@white |
@warningText |
#f3edd2 | |
@warningBackground |
#c09853 | |
@errorText |
#b94a48 | |
@errorBackground |
#f2dede | |
@successText |
#468847 | |
@successBackground |
#dff0d8 | |
@infoText |
#3a87reklaam | |
@infoBackground |
#d9edf7 |
Põhimiksin on sisuliselt CSS-i lõigu kaasamine või osaline osa. Need on kirjutatud nagu CSS-i klass ja neid saab helistada kõikjal.
- . element {
- . clearfix ();
- }
Parameetriline miksin on täpselt nagu põhimiksjon, kuid see aktsepteerib ka parameetreid (seega ka nime) koos valikuliste vaikeväärtustega.
- . element {
- . ääris - raadius ( 4px );
- }
Peaaegu kõik Bootstrapi miksinid on salvestatud faili mixins.less, mis on suurepärane utiliit .less-fail, mis võimaldab kasutada mixinit mis tahes tööriistakomplekti .less-failides.
Seega kasutage olemasolevaid või lisage vajadusel oma.
Mixin | Parameetrid | Kasutamine |
---|---|---|
.clearfix() |
mitte ühtegi | Lisage ükskõik millisele vanemale, et sees hõljuda |
.tab-focus() |
mitte ühtegi | Rakendage Webkiti fookusstiili ja ümardage Firefoxi kontuur |
.center-block() |
mitte ühtegi | Automaatne tsentreerimine ploki tasemel elementi kasutadesmargin: auto |
.ie7-inline-block() |
mitte ühtegi | display: inline-block Kasutage IE7 toe saamiseks lisaks tavapärasele |
.size() |
@height: 5px, @width: 5px |
Määrake kõrgus ja laius kiiresti ühel real |
.square() |
@size: 5px |
Toetub .size() laiuse ja kõrguse samale väärtusele määramiseks |
.opacity() |
@opacity: 100 |
Määrake täisarvudes läbipaistmatuse protsent (nt "50" või "75") |
Mixin | Parameetrid | Kasutamine |
---|---|---|
.placeholder() |
@color: @placeholderText |
Määrake placeholder sisendite teksti värv |
Mixin | Parameetrid | Kasutamine |
---|---|---|
#font > #family > .serif() |
mitte ühtegi | Kasutage elemendis serif-fondivirna |
#font > #family > .sans-serif() |
mitte ühtegi | Pange element kasutama sans-serif fondivirna |
#font > #family > .monospace() |
mitte ühtegi | Kasutage elemendis monospace'i fondivirna |
#font > .shorthand() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Määrake hõlpsalt fondi suurus, kaal ja juht |
#font > .serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Määrake fondipere serifile ning kontrollige suurust, kaalu ja esinumbrit |
#font > .sans-serif() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Määrake fondiperekonnale sans-serif ning kontrollige suurust, kaalu ja esinumbrit |
#font > .monospace() |
@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight |
Määrake fondipere monotühikuks ning kontrollige suurust, kaalu ja algust |
Mixin | Parameetrid | Kasutamine |
---|---|---|
.container-fixed() |
mitte ühtegi | Varustage sisu hoidmiseks fikseeritud laiusega (komplektiga @siteWidth ) konteiner |
.columns() |
@columns: 1 |
Koostage ruudustiku veerg, mis katab suvalise arvu veerge (vaikimisi 1 veerg) |
.offset() |
@columns: 1 |
Nihutage ruudustiku veerg vasaku veerisega, mis hõlmab mis tahes arvu veerge |
.gridColumn() |
mitte ühtegi | Pange element hõljuma nagu ruudustiku veerg |
Mixin | Parameetrid | Kasutamine |
---|---|---|
.border-radius() |
@radius: 5px |
Ümardage elemendi nurgad. Võib olla üks väärtus või neli tühikuga eraldatud väärtust |
.box-shadow() |
@shadow: 0 1px 3px rgba(0,0,0,.25) |
Lisage elemendile varju |
.transition() |
@transition |
Lisage CSS3 üleminekuefekt (nt all .2s linear ) |
.rotate() |
@degrees |
Pöörake elementi n kraadi |
.scale() |
@ratio |
Skaleerige element n - kordseks algsuurusest |
.translate() |
@x: 0, @y: 0 |
Liigutage elementi x- ja y-tasandil |
.background-clip() |
@clip |
Kärbi elemendi tausta (kasulik border-radius ) |
.background-size() |
@size |
Juhtige taustapiltide suurust CSS3 kaudu |
.box-sizing() |
@boxmodel |
Muutke elemendi kasti mudelit (nt border-box täislaiuse jaoks input ) |
.user-select() |
@select |
Juhtige kursoriga teksti valikut lehel |
.resizable() |
@direction: both |
Muutke mis tahes elemendi suurust paremal ja all |
.content-columns() |
@columnCount, @columnGap: @gridColumnGutter |
Kasutage mis tahes elemendi sisus CSS3 veerge |
Mixin | Parameetrid | Kasutamine |
---|---|---|
.#translucent > .background() |
@color: @white, @alpha: 1 |
Andke elemendile poolläbipaistev taustavärv |
.#translucent > .border() |
@color: @white, @alpha: 1 |
Andke elemendile poolläbipaistev äärise värv |
.#gradient > .vertical() |
@startColor, @endColor |
Looge brauseriülene vertikaalne taustagradient |
.#gradient > .horizontal() |
@startColor, @endColor |
Looge brauseriülene horisontaalne taustagradient |
.#gradient > .directional() |
@startColor, @endColor, @deg |
Looge brauseriülene suunaline taustagradient |
.#gradient > .vertical-three-colors() |
@startColor, @midColor, @colorStop, @endColor |
Looge brauseriülene kolmevärviline taustagradient |
.#gradient > .radial() |
@innerColor, @outerColor |
Looge brauseriülene radiaalne taustagradient |
.#gradient > .striped() |
@color, @angle |
Looge brauseriülene triibuline taustagradient |
.#gradientBar() |
@primaryColor, @secondaryColor |
Kasutatakse nuppude jaoks gradiendi ja veidi tumedama äärise määramiseks |
Installige käsurea kompilaator LESS koos npm-iga, käivitades järgmise käsu:
$ npm installige vähem
Pärast installimist käivitage make
lihtsalt alglaadimiskataloogi juurtest ja oletegi valmis.
Lisaks, kui teil on installitud watchr , võite käivitada make watch
alglaadimisfaili automaatse ümberehitamise iga kord, kui redigeerite faili bootstrap lib-is (see pole vajalik, vaid mugavusmeetod).
Installige käsurea tööriist VÄHEM sõlme kaudu ja käivitage järgmine käsk:
$ lessc ./lib/bootstrap.less > bootstrap.css
Lisage kindlasti --compress
see käsk, kui proovite mõnda baiti salvestada!
Laadige alla uusim Less.js ja lisage selle (ja Bootstrapi) tee <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Failide .less uuesti kompileerimiseks lihtsalt salvestage need ja laadige oma leht uuesti. Less.js kompileerib need ja salvestab kohalikku salvestusruumi.
Mitteametlik Maci rakendus jälgib .less failide katalooge ja kompileerib koodi kohalikeks failideks pärast vaadatud .less faili iga salvestamist.
Soovi korral saate rakenduses automaatse minimeerimise eelistusi ja seda, millisesse kataloogi kompileeritud failid jõuavad.
Crunch on suurepärase välimusega LESS-redaktor ja kompilaator, mis on üles ehitatud Adobe Airile.
CodeKit on Maci mitteametliku rakendusega sama mehe loodud rakendus, mis kompileerib LESS, SASS, Stylus ja CoffeeScript.
Mac-, Linuxi- ja PC-rakendus VÄHEM failide pukseerimiseks. Lisaks on lähtekood GitHubis .