Etiam porta sem malesuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum in eros.
Bootstrap je komplet orodij iz Twitterja, ki je namenjen zagonu razvoja spletnih aplikacij in spletnih mest.
Vključuje osnovni CSS in HTML za tipografijo, obrazce, gumbe, tabele, mreže, navigacijo in drugo.
Opozorilo za piflarje: Bootstrap je zgrajen z Less in je bil zasnovan tako, da deluje takoj z mislijo na sodobne brskalnike.
Za najhitrejši in najpreprostejši začetek preprosto kopirajte ta delček na svojo spletno stran.
Ste ljubitelj uporabe Less? Ni problema, samo klonirajte repo in dodajte te vrstice:
Težave s prenosom, razcepom, vlečenjem, datotekami in še več z uradnim repo Bootstrap na Githubu.
Trenutno v1.3.0
Inženirji pri Twitterju so v zgodovini uporabljali skoraj vsako knjižnico, ki so jo poznali, da bi izpolnili zahteve za front-end. Bootstrap se je začel kot odgovor na predstavljene izzive. S pomočjo številnih izjemnih ljudi je Bootstrap močno zrasel.
Preberite več na dev.twitter.com ›
Bootstrap je preizkušen in podprt v večjih sodobnih brskalnikih, kot so Chrome, Safari, Internet Explorer in Firefox.
Bootstrap je opremljen s prevedenimi CSS, neprevedenimi in vzorčnimi predlogami.
Privzeti mrežni sistem, ki je na voljo kot del Bootstrapa, je 940 slikovnih pik široka mreža s 16 stolpci. Je okus priljubljenega sistema mreže 960, vendar brez dodatnega roba/oblazinjenja na levi in desni strani.
Kot je prikazano tukaj, je mogoče ustvariti osnovno postavitev z dvema "stolpcema", od katerih vsak zajema več od 16 temeljnih stolpcev, ki smo jih definirali kot del našega mrežnega sistema. Oglejte si spodnje primere za več različic.
- <div class = "row" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
Če morate, ugnezdite svojo vsebino tako, da ustvarite .row
znotraj obstoječega stolpca.
- <div class = "row" >
- <div class = "span12" >
- 1. raven stolpca
- <div class = "row" >
- <div class = "span6" >
- 2. stopnja
- </div>
- <div class = "span6" >
- 2. stopnja
- </div>
- </div>
- </div>
- </div>
V Bootstrap je vgrajena peščica spremenljivk za prilagajanje privzetega sistema mreže 940 slikovnih pik. Z malo prilagajanja lahko spremenite velikost stebrov, njihovih žlebov in vsebnika, v katerem se nahajajo.
Spremenljivke, potrebne za spreminjanje omrežnega sistema, se trenutno nahajajo v variables.less
.
Spremenljivka | Privzeta vrednost | Opis |
---|---|---|
@gridColumns |
16 | Število stolpcev v mreži |
@gridColumnWidth |
40 slikovnih pik | Širina vsakega stolpca znotraj mreže |
@gridGutterWidth |
20 slikovnih pik | Negativni presledek med posameznimi stolpci |
@siteWidth |
Izračunana vsota vseh stolpcev in žlebov | Uporabimo osnovno ujemanje za štetje števila stolpcev in žlebov ter nastavitev širine .fixed-container() mešanice. |
Spreminjanje mreže pomeni spreminjanje treh @grid-*
spremenljivk in ponovno prevajanje datotek Less.
Bootstrap je opremljen za upravljanje mrežnega sistema z do 24 stolpci; privzeta vrednost je samo 16. Tukaj je opisano, kako bi bile vaše mrežne spremenljivke videti prilagojene mreži s 24 stolpci.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Ko boste znova prevedeni, boste pripravljeni!
Privzeta in preprosta 940 slikovnih pik široka, sredinska postavitev za skoraj vsako spletno mesto ali stran, ki jo ponuja en <div.container>
.
- <telo>
- <div class = "container" >
- ...
- </div>
- </body>
Alternativna, prilagodljiva tekoča struktura strani z najmanjšo in največjo širino ter levo stransko vrstico. Odlično za aplikacije in dokumente.
- <telo>
- <div class = "container-fluid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
Standardna tipografska hierarhija za strukturiranje vaših spletnih strani.
Celotna tipografska mreža temelji na dveh spremenljivkah Less v naši datoteki variables.less: @basefont
in @baseline
. Prva je osnovna velikost pisave, ki se uporablja povsod, druga pa je osnovna višina vrstice.
Te spremenljivke in nekaj matematike uporabljamo za ustvarjanje robov, oblazinjenja in višin vrstic vseh naših vrst in še več.
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
Uporaba poudarkov, naslovov in okrajšav
<strong>
<em>
<address>
<abbr>
Poudarjene oznake ( <strong>
in <em>
) je treba uporabiti za označevanje dodatnega pomena ali poudarka besede ali besedne zveze glede na njeno okoliško kopijo. Uporabite <strong>
za pomembnost in <em>
za poudarjanje poudarka.
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus. Mecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Opomba:<b>
uporaba oznak in v HTML5 je še vedno v redu <i>
in ni jim treba oblikovati krepko oziroma ležeče (čeprav obstaja bolj semantičen element, ga uporabite). <b>
je namenjeno poudarjanju besed ali besednih zvez brez izražanja dodatnega pomena, medtem ko <i>
je večinoma za glas, tehnične izraze itd.
Element <address>
se uporablja za kontaktne informacije njegovega najbližjega prednika ali celotnega dela. Tukaj sta dva primera, kako bi ga lahko uporabili:
Opomba: vsaka vrstica v se <address>
mora končati s prelomom vrstice ( <br />
) ali biti zavita v oznako na ravni bloka (npr. <p>
), da pravilno strukturirate vsebino.
Za okrajšave in akronime uporabite <abbr>
oznako ( <acronym>
je zastarelo v HTML5 ). Skrajšan obrazec postavite znotraj oznake in nastavite naslov za celotno ime.
<blockquote>
<p>
<small>
Če želite vključiti navedbo bloka, zavijte <blockquote>
okoli <p>
in <small>
oznake. Uporabite <small>
element za navajanje vira in pred njim boste dobili pomišljaj —
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
Dr. Julius Hibbert
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Dr. Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
Pipirajte svojo kodo v stilu z dvema preprostima oznakama. Za še več osupljivosti prek javascripta spustite Googlovo knjižnico kode prettyify in pripravljeni ste.
Kodo, bloke ali samo delčke v vrstici je mogoče prikazati s slogom samo z zavijanjem v pravo oznako. Za bloke kode, ki obsegajo več vrstic, uporabite <pre>
element. Za vgrajeno kodo uporabite <code>
element.
Element | Rezultat |
---|---|
<code> |
V vrstici besedila, kot je ta, bo vaša ovita koda videti kot ta <html> element. |
<pre> |
<div> <h1>Naslov</h1> <p>Tukaj je nekaj ...</p> </div> Opomba: poskrbite, da bo koda znotraj |
<pre class="prettyprint"> |
Z uporabo knjižnice google-code-prettify dobijo vaši bloki kode nekoliko drugačen vizualni slog in samodejno označevanje sintakse. <div> <h1> Naslov </h1> <p> Tukaj je nekaj ... </p> </div> Prenesite google-code-prettify in si oglejte readme za uporabo. |
<span class="label">
Pritegnite pozornost ali označite kateri koli stavek v svojem telesu besedila.
Ste kdaj potrebovali enega od teh modnih New! ali Pomembne zastavice pri pisanju kode? No, zdaj jih imate. Tukaj je privzeto vključeno:
Oznaka | Rezultat |
---|---|
<span class="label">Default</span> |
Privzeto |
<span class="label success">New</span> |
Novo |
<span class="label warning">Warning</span> |
Opozorilo |
<span class="label important">Important</span> |
Pomembno |
<span class="label notice">Notice</span> |
Opaziti |
Prikažite sličice različnih velikosti na straneh z nizkim odtisom HTML in minimalnimi slogi.
Sličice so .media-grid
lahko poljubne velikosti, vendar najbolje delujejo, če so preslikane neposredno v vgrajeni mrežni sistem Bootstrap. Širine slik, kot so 90, 210 in 330, se kombinirajo z nekaj slikovnimi pikami oblazinjenja, da so enake velikostim .span2
, .span4
, in .span6
stolpcev.
Medijske mreže so enostavne za uporabo in precej preproste na strani označevanja. Njihove dimenzije temeljijo izključno na velikosti vključenih slik.
- <ul class = "media-grid" >
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
Mize so odlične - za veliko stvari. Odlične tabele pa potrebujejo malo ljubezni do označevanja, da so uporabne, razširljive in berljive (na ravni kode). Tukaj je nekaj nasvetov za pomoč.
Glave stolpcev vedno ovijte <thead>
tako, da je hierarhija <thead>
> <tr>
> <th>
.
Podobno kot pri naslovih stolpcev mora biti vsa vsebina telesa vaše tabele ovita v a <tbody>
, tako da je vaša hierarhija <tbody>
> <tr>
> <td>
.
Vse tabele bodo samodejno oblikovane samo z bistvenimi robovi, da se zagotovi berljivost in ohrani struktura. Ni treba dodajati dodatnih razredov ali atributov.
# | Ime | Priimek | Jezik |
---|---|---|---|
1 | nekaj | ena | angleščina |
2 | Joe | Sixpack | angleščina |
3 | Stu | Dent | Koda |
- <tabela>
- ...
- </table>
Za tabele, ki zahtevajo več podatkov v manjšem prostoru, uporabite zgoščeni okus, ki prepolovi oblazinjenje. Uporablja se lahko tudi v povezavi z obrobami in zebrastimi črtami, tako kot privzeti slogi tabel.
# | Ime | Priimek | Jezik |
---|---|---|---|
1 | nekaj | ena | angleščina |
2 | Joe | Sixpack | angleščina |
3 | Stu | Dent | Koda |
Naj bodo vaše mize videti nekoliko bolj elegantne, tako da zaokrožite njihove vogale in dodate obrobe na vseh straneh.
# | Ime | Priimek | Jezik |
---|---|---|---|
1 | nekaj | ena | angleščina |
2 | Joe | Sixpack | angleščina |
3 | Stu | Dent | Koda |
- <table class = "bordered-table" >
- ...
- </table>
Bodite malce navdušeni nad svojimi mizami, tako da dodate zebraste črte – samo dodajte .zebra-striped
razred.
# | Ime | Priimek | Jezik |
---|---|---|---|
1 | nekaj | ena | angleščina |
2 | Joe | Sixpack | angleščina |
3 | Stu | Dent | Koda |
obsega 4 stolpce | |||
obsega 2 stolpca | obsega 2 stolpca |
Opomba: Zebra-striping je progresivna izboljšava, ki ni na voljo za starejše brskalnike, kot je IE8 in nižji.
- <table class = "zebra-striped" >
- ...
- </table>
Če vzamemo prejšnji primer, izboljšamo uporabnost naših tabel z zagotavljanjem funkcije razvrščanja prek jQuery in vtičnika Tablesorter . Kliknite glavo katerega koli stolpca, da spremenite razvrščanje.
# | Ime | Priimek | Jezik |
---|---|---|---|
2 | Joe | Sixpack | angleščina |
3 | Stu | Dent | Koda |
1 | Vaš | ena | angleščina |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( funkcija () {
- $ ( "table#sortTableExample" ). razvrščevalnik tabel ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "zebra-striped" >
- ...
- </table>
Vsi obrazci imajo privzete sloge, da so predstavljeni na berljiv in razširljiv način. Slogi so na voljo za vnose besedila, izbirne sezname, besedilna polja, izbirne gumbe in potrditvena polja ter gumbe.
Dodajte .form-stacked
v HTML svojega obrazca in imeli boste oznake na vrhu njihovih polj namesto na njihovi levi. To deluje odlično, če so vaši obrazci kratki ali imate dva stolpca vnosov za težje obrazce.
Prilagodite poljubno obliko input
, select
, ali textarea
širino tako, da svojemu označevanju dodate le nekaj razredov.
Od različice 1.3.0 smo dodali razrede velikosti na podlagi mreže za elemente obrazca. Uporabite te namesto obstoječih razredov .mini
, .small
itd.
Po dogovoru se gumbi uporabljajo za dejanja, medtem ko se povezave uporabljajo za predmete. Na primer, »Prenos« je lahko gumb, »nedavna dejavnost« pa povezava.
Vsi gumbi so privzeto nastavljeni na svetlo siv slog, vendar je mogoče uporabiti številne funkcionalne razrede za različne barvne sloge. Ti razredi vključujejo modri .primary
razred, svetlo modri .info
razred, zeleni .success
razred in rdeči .danger
razred.
Sloge gumbov je mogoče uporabiti za vse, kar je .btn
uporabljeno. Običajno jih boste želeli uporabiti samo <a>
za , <button>
in izbrane <input>
elemente. Tako je videti:
Ste všeč večji ali manjši gumbi? Imej to!
Za gumbe, ki niso aktivni ali jih je aplikacija zaradi enega ali drugega razloga onemogočila, uporabite onemogočeno stanje. To velja za .disabled
povezave in elemente.:disabled
<button>
.alert-message
Enovrstična sporočila za poudarjanje neuspeha, možnega neuspeha ali uspeha dejanja. Še posebej uporabno za obrazce.
- <div class = "opozorilo o opozorilnem sporočilu" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Sveti guacamole! </strong> Najbolje, da preverite sami, niste videti preveč dobro. </p>
- </div>
.alert-message.block-message
Za sporočila, ki zahtevajo malo razlage, imamo opozorila o slogu odstavkov. Te so kot nalašč za prikazovanje daljših sporočil o napakah, opozarjanje uporabnika na čakajoče dejanje ali samo za predstavitev informacij za večji poudarek na strani.
- <div class = "alert-message block-message warning" >
- <a class = "close" href = "#" > × </a>
- <p><strong> Sveti guacamole! To je opozorilo! </strong> Najbolje, da preverite sami, niste videti preveč dobro. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div class = "alert-actions" >
- <a class = "btn small" href = "#" > Izvedite to dejanje </a> <a class = "btn small" href = "#" > Ali naredite to </a>
- </div>
- </div>
Modali – pogovorna okna ali svetlobne škatle – so odlični za kontekstualna dejanja v situacijah, ko je pomembno, da se ohrani kontekst ozadja.
Eno lepo telo…
Twipsies so super uporabni za pomoč zmedenemu uporabniku in ga usmerijo v pravo smer.
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit Accuantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae Accusantium fugit voluptas nemo voluptas voluptatem rem quae aut verquaitatis.
Uporabite pojavne elemente, da strani zagotovite podbesedilne informacije, ne da bi to vplivalo na postavitev.
Etiam porta sem malesuada magna mollis euismod. Mecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum in eros.
Integracija javascripta s knjižnico Bootstrap je zelo enostavna. V nadaljevanju vam bomo predstavili osnove in vam ponudili nekaj odličnih vtičnikov za lažji začetek!
Oživite nekatere glavne komponente Bootstrapa z novimi vtičniki po meri, ki delujejo z jQuery in Ender . Spodbujamo vas, da jih razširite in spremenite tako, da ustrezajo vašim posebnim razvojnim potrebam.
mapa | Opis |
---|---|
bootstrap-modal.js | Naš vtičnik Modal je super tanka različica tradicionalnega vtičnika modal js! Posebej smo pazili, da smo vključili le golo funkcionalnost, ki jo potrebujemo na twitterju. |
bootstrap-alerts.js | Vtičnik za opozorila je zelo majhen razred za dodajanje tesne funkcionalnosti opozorilom. |
bootstrap-dropdown.js | Ta vtičnik je namenjen dodajanju spustne interakcije v zgornjo vrstico zagonske vrstice ali navigacije z zavihki. |
bootstrap-scrollspy.js | Vtičnik ScrollSpy je namenjen dodajanju navigacije za samodejno posodabljanje na podlagi položaja drsenja v zgornjo vrstico zagonske vrstice. |
bootstrap-buttons.js | Vtičnik ScrollSpy je namenjen dodajanju navigacije za samodejno posodabljanje na podlagi položaja drsenja v zgornjo vrstico zagonske vrstice. |
bootstrap-tabs.js | Ta vtičnik dodaja hitro, dinamično funkcijo zavihkov in tablet za kroženje po lokalni vsebini. |
bootstrap-twipsy.js | Temelji na odličnem vtičniku jQuery.tipsy, ki ga je napisal Jason Frame; twipsy je posodobljena različica, ki se ne zanaša na slike, uporablja css3 za animacije in podatkovne atribute za lokalno shranjevanje naslovov! |
bootstrap-popover.js | Vtičnik popover ponuja preprost vmesnik za dodajanje pojavnih oken vaši aplikaciji. Razširja vtičnik boostrap-twipsy.js , zato se prepričajte, da zgrabite tudi to datoteko, ko v svoj projekt vključite popoverje! |
Ne! Bootstrap je zasnovan predvsem kot knjižnica CSS. Ta javascript nudi osnovno interaktivno plast poleg vključenih slogov.
Vendar smo za tiste, ki potrebujejo javascript, ponudili zgornje vtičnike, ki vam pomagajo razumeti, kako integrirati Bootstrap z javascriptom, in vam takoj ponudijo hitro in lahko možnost za osnovno funkcionalnost.
Za več informacij in ogled nekaterih predstavitev v živo si oglejte našo stran z dokumentacijo vtičnikov .
Bootstrap je bil zgrajen iz Preboot , odprtokodnega paketa miksinov in spremenljivk, ki se uporabljajo v povezavi z Less , predprocesorjem CSS za hitrejši in lažji spletni razvoj.
Preverite, kako smo uporabili predzagon v programu Bootstrap in kako ga lahko uporabite, če se pri naslednjem projektu odločite zagnati Less.
Uporabite to možnost, če želite v celoti izkoristiti Bootstrapove spremenljivke Less, mešanice in gnezdenje v CSS prek javascripta v vašem brskalniku.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
Ne čutite rešitve .js? Preizkusite aplikacijo Less Mac ali uporabite Node.js za prevajanje, ko uvedete kodo.
Tukaj je nekaj poudarkov tega, kar je vključeno v Twitter Bootstrap kot del Bootstrapa. Pojdite na spletno mesto Bootstrap ali stran projekta Github, da prenesete in izveste več.
Spremenljivke v Less so popolne za vzdrževanje in posodabljanje vašega CSS brez glavobola. Ko želite spremeniti vrednost barve ali pogosto uporabljeno vrednost, jo posodobite na enem mestu in pripravljeni ste.
- // Povezave
- @povezavaColor : #8b59c2;
- @linkColorHover : potemni ( @linkColor , 10 );
- // Sivi
- @Črna : #000;
- @greyDark : posvetli ( @black , 25 %);
- @siva : posvetli ( @črna , 50 %);
- @grayLight : posvetli ( @black , 70 %);
- @grayLighter : osvetli ( @black , 90 %);
- @bela : #fff;
- // Poudarjene barve
- @modra : #08b5fb;
- @zelena : #46a546;
- @rdeča : #9d261d
- @rumena : #ffc40d;
- @oranžna : #f89406
- @pink : #c3325f;
- @vijolična : #7a43b6 ;
- // Osnovna mreža
- @basefont : 13px ;
- @osnovna črta : 18px ;
Less poleg običajne /* ... */
sintakse CSS ponuja še en slog komentiranja.
- // To je komentar
- /* To je tudi komentar */
Miksini so v bistvu vključeni ali delni za CSS, ki vam omogočajo združevanje bloka kode v enega. Odlične so za lastnosti s predpono prodajalca, kot jebox-shadow
so , prelivi med brskalniki, skladi pisav in več. Spodaj je vzorec miksinov, ki so vključeni v Bootstrap.
- #font {
- . skrajšano ( @weight : normalno , @size : 14px , @lineHeight : 20px ) {
- velikost pisave : @velikost ; _
- teža pisave : @ teža ;
- višina vrstice : @lineHeight ; _
- }
- . sans - serif ( @weight : normalno , @size : 14px , @lineHeight : 20px ) {
- družina pisav : " Helvetica Neue" , Helvetica , Arial , sans - serif ;
- velikost pisave : @velikost ; _
- teža pisave : @ teža ;
- višina vrstice : @lineHeight ; _
- }
- ...
- }
- #gradient {
- ...
- . navpično ( @startColor : #555, @endColor: #333) {
- barva ozadja : @endColor ; _
- ozadje - ponovitev : ponovitev - x ;
- ozadje - slika : - khtml - gradient ( linearno , levo zgoraj , levo spodaj , od ( @startColor ), do ( @endColor )); // Konqueror
- ozadje - slika : - moz - linearno - gradient ( @startColor , @endColor ); // FF 3.6+
- ozadje - slika : - ms - linearno - gradient ( @startColor , @endColor ); // IE10
- ozadje - slika : - webkit - preliv ( linearno , levo zgoraj , levo spodaj , barvno - stop ( 0 %, @startColor ), barvno - stop ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- ozadje - slika : - webkit - linearno - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- ozadje - slika : - o - linearno - gradient ( @startColor , @endColor ); // Opera 11.10
- ozadje - slika : linearno - preliv ( @startColor , @endColor ); // Standard
- }
- ...
- }
Bodite modni in izvedite nekaj matematike, da ustvarite prilagodljive in zmogljive miksine, kot je spodnji.
- // Griditude
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Ustvari nekaj stolpcev
- . stolpci ( @columnSpan : 1 ) {
- širina : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Ko spremenite .less
datoteke v /lib/, jih boste morali znova prevesti, da boste ponovno ustvarili datoteki bootstrap-*.*.*.css in bootstrap-*.*.*.min.css. Če GitHubu pošiljate zahtevo za vlečenje, morate vedno znova prevesti.
Metoda | Koraki |
---|---|
Vozlišče z makefile | Namestite prevajalnik ukazne vrstice less z npm tako, da zaženete naslednji ukaz: $ npm namestite manjsc Po namestitvi preprosto zaženite Poleg tega, če imate nameščen watchr , lahko zaženete |
Javascript | Prenesite najnovejši Less.js in vključite pot do njega (in Bootstrap) v
Če želite znova prevesti datoteke .less, jih preprosto shranite in znova naložite stran. Less.js jih prevede in shrani v lokalno shrambo. |
Ukazna vrstica | Če že imate nameščeno orodje za manjšo ukazno vrstico, preprosto zaženite naslednji ukaz: $lessc ./lib/bootstrap.less > bootstrap.css Ne pozabite vključiti |
Manj aplikacije za Mac | Neuradna aplikacija za Mac spremlja imenike datotek .less in prevaja kodo v lokalne datoteke po vsakem shranjevanju opazovane datoteke .less. Če želite, lahko v aplikaciji preklapljate med nastavitvami za samodejno pomanjševanje in v kateri imenik končajo prevedene datoteke. |