Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum and eros.
A Bootstrap a Twitter egy eszközkészlete, amely webalkalmazások és webhelyek fejlesztésének elindítására szolgál.
Tartalmazza az alap CSS-t és HTML-t a tipográfiához, űrlapokhoz, gombokhoz, táblázatokhoz, rácsokhoz, navigációhoz stb.
Nerd-figyelmeztetés: A Bootstrap a Less-szel épült, és úgy lett kialakítva, hogy a modern böngészőket szem előtt tartva a kapun kívül is működjön.
A leggyorsabb és legegyszerűbb kezdéshez egyszerűen másolja be ezt a részletet a weboldalára.
A Kevesebb használat rajongója? Nem probléma, csak klónozza a repót, és adja hozzá a következő sorokat:
Töltse le, forgassa, húzza ki, fájlolja a problémákat és sok mást a Githubon található hivatalos Bootstrap repo segítségével.
Jelenleg v1.3.0
A Twitter mérnökei a múltban szinte minden ismert könyvtárat használtak a front-end követelmények teljesítésére. A Bootstrap válaszként indult a felmerülő kihívásokra. Sok nagyszerű ember segítségével a Bootstrap jelentősen megnőtt.
További információ a dev.twitter.com oldalon ›
A Bootstrap tesztelve van és támogatja a főbb modern böngészőkben, mint például a Chrome, a Safari, az Internet Explorer és a Firefox.
A Bootstrap lefordított CSS-sel, lefordítatlan és példasablonokkal érkezik.
A Bootstrap részeként biztosított alapértelmezett rácsrendszer egy 940 képpont széles, 16 oszlopos rács. Ez a népszerű 960-as rácsrendszer egy íze, de a bal és a jobb oldalon lévő további margó/párnázás nélkül.
Amint az itt látható, egy alapvető elrendezés két „oszlopból” is létrehozható, amelyek mindegyike a rácsrendszerünk részeként meghatározott 16 alaposzlop közül többen átfogható. További változatokért tekintse meg az alábbi példákat.
<div class="row"> <div class="span6"> ... </div> <div class="span10"> ... </div> </div>
Ha szükséges, helyezze be a tartalmat .row
egy meglévő oszlopon belüli létrehozásával.
<div class="row"> <div class="span12"> Az oszlop 1. szintje <div class="row"> <div class="span6"> 2. szint </div> <div class="span6"> 2. szint </div> </div> </div> </div>
A Bootstrapbe beépített néhány változó található az alapértelmezett 940 képpontos rácsrendszer testreszabásához. Egy kis testreszabással módosíthatja az oszlopok méretét, ereszcsatornáit és a tárolót, amelyben vannak.
A rácsrendszer módosításához szükséges változók jelenleg mind a -ben találhatók variables.less
.
Változó | Alapértelmezett érték | Leírás |
---|---|---|
@gridColumns |
16 | A rácson belüli oszlopok száma |
@gridColumnWidth |
40 képpont | Az egyes oszlopok szélessége a rácson belül |
@gridGutterWidth |
20 képpont | Az egyes oszlopok közötti negatív térköz |
@siteWidth |
Az összes oszlop és ereszcsatorna kiszámított összege | Alapvető egyezést használunk az oszlopok és ereszcsatornák számának megszámlálására és a .fixed-container() mixin szélességének beállítására. |
A rács módosítása a három @grid-*
változó megváltoztatását és a Less fájlok újrafordítását jelenti.
A Bootstrap egy legfeljebb 24 oszlopból álló rácsrendszer kezelésére van felszerelve; az alapértelmezett érték csak 16. Így néznek ki a rácsváltozók egy 24 oszlopos rácsra szabva.
@rácsColumns: 24; @rácsColumnWidth: 20px; @gridGutterWidth: 20px;
Az újrafordítás után készen állsz!
Az alapértelmezett és egyszerű, 940 képpont széles, középre igazított elrendezés szinte minden webhelyhez vagy oldalhoz, amelyet egyetlen <div.container>
.
<test> <div class="container"> ... </div> </body>
Alternatív, rugalmas, gördülékeny oldalstruktúra minimális és maximális szélességekkel és bal oldali oldalsávval. Nagyszerű alkalmazásokhoz és dokumentumokhoz.
<test> <div class="container-fluid"> <div class="sidebar"> ... </div> <div class="content"> ... </div> </div> </body>
Szabványos tipográfiai hierarchia a weboldalak strukturálásához.
A teljes tipográfiai rács két Less változón alapul a változók.less fájlunkban: @basefont
és @baseline
. Az első az egész használt alap betűméret, a második pedig az alapvonal magassága.
Ezeket a változókat és némi matematikát használunk a margók, kitöltések és vonalmagasságok létrehozásához minden típusunkhoz és még sok máshoz.
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.
Hangsúlyok, címek és rövidítések használata
<strong>
<em>
<address>
<abbr>
A kiemelő címkéket ( <strong>
és <em>
) kell használni egy szó vagy kifejezés további fontosságának vagy hangsúlyozásának jelzésére a környező példányhoz képest. Használja <strong>
fontosságra és <em>
stressz hangsúlyozására .
Fusce dapibus , tellus ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
Megjegyzés: Továbbra is rendben van a <b>
és <i>
címkék használata a HTML5-ben, és nem kell félkövérre, illetve dőltre szedni őket (bár ha van szemantikusabb elem, használja azt). <b>
célja, hogy szavakat vagy kifejezéseket emeljen ki anélkül, hogy további jelentőséget tulajdonítana, míg <i>
többnyire hang, szakkifejezések stb.
Az <address>
elemet a legközelebbi ősének vagy a munka egészének elérhetőségi adataihoz használják. Íme két példa a használatára:
Megjegyzés: A tartalom megfelelő felépítése érdekében minden <address>
sornak sortöréssel ( ) kell végződnie, <br />
vagy blokkszintű címkébe kell csomagolnia (pl. ).<p>
A rövidítésekhez és mozaikszavakhoz használja a ( HTML5 -ben elavult ) <abbr>
címkét . Helyezze a gyorsított űrlapot a címkébe, és adjon meg egy címet a teljes névhez.<acronym>
<blockquote>
<p>
<small>
Idézet beillesztéséhez csavarja <blockquote>
körbe <p>
és <small>
címkézze. Használja az <small>
elemet a forrás hivatkozására, és előtte egy em kötőjelet kap —
.
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>
Két egyszerű címkével stílusosan módosíthatja a kódot. A javascript használatával még több fantasztikusat szeretne elérni, ha bedobja a Google kód szépítő könyvtárát, és már kész is.
A kód, blokkok vagy csak szövegrészletek stílusosan jeleníthetők meg, pusztán a megfelelő címkébe csomagolva. Több sort átívelő kódblokkok esetén használja az <pre>
elemet. Inline kódhoz használja az <code>
elemet.
Elem | Eredmény |
---|---|
<code> |
Egy ilyen szövegsorban a becsomagolt kód úgy fog kinézni, mint ez az <html> elem. |
<pre> |
<div> <h1>Címsor</h1> <p>Itt van valami...</p> </div> Megjegyzés: Ügyeljen arra, hogy a kód a |
<pre class="prettyprint"> |
A google-code-prettify könyvtár használatával a kódblokkok kissé elt��rő vizuális stílust és automatikus szintaxiskiemelést kapnak. <div> <h1>Címsor</h1> <p>Itt van valami...</p> </div> Töltse le a google-code-prettify programot, és tekintse meg a readme-t a használatához. |
<span class="label">
Hívja fel a figyelmet vagy jelölje meg bármely kifejezést a törzsszövegében.
Valaha szüksége volt egy ilyen divatos Új! vagy Fontos zászlók kód írásakor? Nos, most megvannak. A következőket tartalmazza alapértelmezés szerint:
Címke | Eredmény |
---|---|
<span class="label">Default</span> |
Alapértelmezett |
<span class="label success">New</span> |
Új |
<span class="label warning">Warning</span> |
Figyelem |
<span class="label important">Important</span> |
Fontos |
<span class="label notice">Notice</span> |
Értesítés |
Különböző méretű bélyegképek megjelenítése alacsony HTML-használattal és minimális stílusokkal rendelkező oldalakon.
A bélyegképek .media-grid
bármilyen méretűek lehetnek, de akkor működnek a legjobban, ha közvetlenül a beépített Bootstrap rácsrendszerre vannak leképezve. A 90-es, 210-es és 330-as képszélességek néhány pixeles kitöltéssel kombinálva megegyeznek a .span2
, .span4
, és .span6
oszlopméretekkel.
A médiarácsok könnyen használhatók, és meglehetősen egyszerűek a jelölési oldalon. A méretük kizárólag a mellékelt képek méretén alapul.
<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>
Az asztalok nagyszerűek – sok mindenre. A nagyszerű tábláknak azonban egy kis jelölési szeretetre van szükségük ahhoz, hogy hasznosak, méretezhetők és olvashatóak legyenek (kódszinten). Íme néhány tipp a segítségedre.
Az oszlopfejléceket mindig <thead>
úgy csomagolja be, hogy a hierarchia <thead>
> <tr>
> legyen <th>
.
Az oszlopfejlécekhez hasonlóan a táblázat összes törzstartalmát a-ba kell csomagolni, <tbody>
így a hierarchia <tbody>
> <tr>
> <td>
.
Az olvashatóság és a szerkezet fenntartása érdekében minden táblázat automatikusan stílusossá válik, csak a lényeges szegélyekkel. Nincs szükség extra osztályok vagy attribútumok hozzáadására.
# | Keresztnév | Vezetéknév | Nyelv |
---|---|---|---|
1 | Néhány | Egy | angol |
2 | Joe | Hatos csomag | angol |
3 | Stu | Horpadás | Kód |
<tábla> ... </table>
A szűkebb helyeken több adatot igénylő táblázatok esetében használja a sűrített ízt, amely felére csökkenti a párnázást. Szegélyekkel és zebracsíkokkal együtt is használható, csakúgy, mint az alapértelmezett táblázatstílusok.
# | Keresztnév | Vezetéknév | Nyelv |
---|---|---|---|
1 | Néhány | Egy | angol |
2 | Joe | Hatos csomag | angol |
3 | Stu | Horpadás | Kód |
Tedd asztalaid egy picit elegánsabbá a sarkok lekerekítésével, és minden oldalukon szegélyekkel.
# | Keresztnév | Vezetéknév | Nyelv |
---|---|---|---|
1 | Néhány | Egy | angol |
2 | Joe | Hatos csomag | angol |
3 | Stu | Horpadás | Kód |
<table class="bordered-table"> ... </table>
Tegye egy kicsit divatosabbá az asztalait zebracsíkok hozzáadásával – csak adja hozzá az .zebra-striped
osztályt.
# | Keresztnév | Vezetéknév | Nyelv |
---|---|---|---|
1 | Néhány | Egy | angol |
2 | Joe | Hatos csomag | angol |
3 | Stu | Horpadás | Kód |
4 oszlopra terjed ki | |||
2 oszlopra terjed ki | 2 oszlopra terjed ki |
Megjegyzés: A zebracsíkozás egy progresszív továbbfejlesztés, amely nem érhető el régebbi böngészőkhöz, például IE8-hoz és régebbiekhez.
<table class="zebra-striped"> ... </table>
Az előző példát figyelembe véve javítjuk táblázataink hasznosságát azáltal, hogy rendezési funkciót biztosítunk a jQuery és a Tablesorter bővítmény segítségével. Kattintson bármelyik oszlop fejlécére a rendezés módosításához.
# | Keresztnév | Vezetéknév | Nyelv |
---|---|---|---|
1 | A te | Egy | angol |
2 | Joe | Hatos csomag | angol |
3 | Stu | Horpadás | Kód |
<script src="js/jquery/jquery.tablesorter.min.js"></script> <script> $(function() { $("table#sortTableExample").tablesorter({ sortList: [[1,0]] }); }); </script> <table class="zebra-striped"> ... </table>
Minden űrlap alapértelmezett stílust kapott, hogy olvasható és méretezhető módon jelenítse meg őket. Stílusok állnak rendelkezésre a szövegbevitelhez, a kiválasztási listákhoz, a szövegterületekhez, a rádiógombokhoz és a jelölőnégyzetekhez, valamint a gombokhoz.
Adja .form-stacked
hozzá az űrlap HTML-kódjához, és a címkék a mezők tetején jelennek meg, nem pedig a bal oldalon. Ez nagyszerűen működik, ha az űrlapok rövidek, vagy ha két oszlopot tartalmaz a nehezebb űrlapokhoz.
input
Bármilyen formát , select
, vagy szélességet testreszabhat textarea
úgy, hogy csak néhány osztályt ad hozzá a jelöléshez.
A v1.3.0-tól kezdve hozzáadtuk a rács alapú méretosztályokat az űrlapelemekhez. Kérjük, használja ezeket a meglévő .mini
, .small
stb osztályokhoz.
Konvencióként a gombokat műveletekhez, míg a hivatkozásokat objektumokhoz használják. Például a „Letöltés” lehet egy gomb, a „legutóbbi tevékenység” pedig egy hivatkozás.
Alapértelmezés szerint minden gomb világosszürke stílus, de számos funkcionális osztály alkalmazható a különböző színstílusokhoz. Ezek az osztályok egy kék .primary
osztályt, egy világoskék .info
osztályt, egy zöld .success
osztályt és egy piros .danger
osztályt tartalmaznak.
A gombstílusok bármire alkalmazhatók az .btn
alkalmazottal. Ezeket általában csak <a>
a , <button>
és a kiválasztott <input>
elemekre szeretné alkalmazni. Így néz ki:
Nagyobb vagy kisebb gombokat szeretne? Fogadd el!
Azoknál a gomboknál, amelyek nem aktívak, vagy amelyeket az alkalmazás valamilyen okból letilt, használja a letiltott állapotot. Ez .disabled
a linkekre és :disabled
az <button>
elemekre vonatkozik.
.alert-message
Egysoros üzenetek egy művelet kudarcának, lehetséges kudarcának vagy sikerének kiemelésére. Formáknál különösen hasznos.
<div class="alert-message warning"> <a class="close" href="#">×</a> <p><strong>Szent guacamole!</strong> A legjobb, ha ellenőrizze magát, nem néz ki túl jól.</p> </div>
.alert-message.block-message
A kis magyarázatot igénylő üzenetekhez bekezdésstílus-figyelmeztetéseink vannak. Ezek tökéletesek arra, hogy hosszabb hibaüzeneteket bugyborékoljanak, figyelmeztessék a felhasználót egy függőben lévő műveletre, vagy egyszerűen csak információkat mutassanak be, hogy nagyobb hangsúlyt kapjanak az oldalon.
<div class="alert-message block-message warning"> <a class="close" href="#">×</a> <p><strong>Szent guacamole! Ez egy figyelmeztetés!</strong> A legjobb, ha ellenőrizze magát, nem néz ki túl jól. 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="#">Végezze el ezt a műveletet</a> <a class="btn small" href="#">Vagy tegye ezt</a> </div> </div>
A modálok – párbeszédpanelek vagy átvilágítódobozok – kiválóan alkalmasak a kontextuális műveletekhez olyan helyzetekben, ahol fontos a háttér kontextusának megőrzése.
Egy szép test…
A Twipsiek rendkívül hasznosak abban, hogy segítsenek a zavarodott felhasználónak, és a helyes irányba tereljék őket.
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 accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque verquautemsi unde sunt sed volquauttems volquauttemmas
Használjon felugró ablakokat, hogy szöveg alatti információkat biztosítson az oldalnak az elrendezés befolyásolása nélkül.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum and eros.
A javascript integrálása a Bootstrap könyvtárba rendkívül egyszerű. Az alábbiakban áttekintjük az alapokat, és néhány fantasztikus bővítményt kínálunk a kezdéshez!
Keltsd életre a Bootstrap néhány elsődleges összetevőjét új egyéni bővítményekkel, amelyek együttműködnek a jQuery -vel és az Ender -rel . Javasoljuk, hogy bővítse és módosítsa azokat, hogy megfeleljenek saját fejlesztési igényeinek.
Fájl | Leírás |
---|---|
bootstrap-modal.js | A Modal bővítményünk a hagyományos modális js beépülő modul szuper karcsú változata! Különös gondot fordítottunk arra, hogy csak azokat a puszta funkciókat tartalmazza, amelyekre a Twitternél szükségünk van. |
bootstrap-alerts.js | A riasztási beépülő modul egy rendkívül apró osztály a figyelmeztetésekhez való szoros funkciók hozzáadásához. |
bootstrap-dropdown.js | Ez a beépülő modul legördülő interakciók hozzáadására szolgál a rendszerindító felső sávjához vagy a füles navigációhoz. |
bootstrap-scrollspy.js | A ScrollSpy beépülő modul a görgetési pozíció alapján automatikusan frissítő navigáció hozzáadására szolgál a rendszerindító felső sávhoz. |
bootstrap-buttons.js | A ScrollSpy beépülő modul a görgetési pozíció alapján automatikusan frissítő navigáció hozzáadására szolgál a rendszerindító felső sávhoz. |
bootstrap-tabs.js | Ez a beépülő modul gyors, dinamikus lap és tabletta funkciót ad a helyi tartalom közötti kerékpározáshoz. |
bootstrap-twipsy.js | A Jason Frame által írt kiváló jQuery.tipsy plugin alapján; A twipsy egy frissített verzió, amely nem támaszkodik képekre, css3-at használ az animációkhoz, és adatattribútumokat a helyi címtároláshoz! |
bootstrap-popover.js | A popover beépülő modul egyszerű felületet biztosít felugró ablakok hozzáadásához az alkalmazáshoz. Kibővíti a boostrap-twipsy.js beépülő modult, ezért ügyeljen arra, hogy ezt a fájlt is megragadja, amikor felbukkan a projektje! |
Dehogy! A Bootstrap mindenekelőtt CSS-könyvtárnak készült. Ez a javascript egy alapvető interaktív réteget biztosít a benne foglalt stílusok tetején.
Mindazonáltal azoknak, akiknek szükségük van javascriptre, a fenti beépülő modulokat biztosítjuk, hogy megértsék, hogyan lehet integrálni a Bootstrap-ot javascript-tel, és azonnali, egyszerű lehetőséget kínálunk az alapvető funkciókhoz.
További információért és néhány élő demó megtekintéséhez tekintse meg a bővítmény dokumentációs oldalát .
A Bootstrap a Prebootból épült fel , amely egy nyílt forráskódú mixin- és változócsomag, amelyet a Less -sel , egy CSS-előfeldolgozóval együtt használnak a gyorsabb és egyszerűbb webfejlesztés érdekében.
Nézze meg, hogyan használtuk a Prebootot a Bootstrapban, és hogyan használhatja azt, ha a Less alkalmazást választja a következő projektben.
Használja ezt a lehetőséget, hogy teljes mértékben kihasználja a Bootstrap Less változóit, mixinjeit és a CSS-be ágyazást JavaScripten keresztül a böngészőjében.
<link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> <script src="js/less-1.1.3.min.js"></script>
Nem érzi a .js megoldást? Próbálja ki a Less Mac alkalmazást , vagy használja a Node.js -t a fordításhoz, amikor telepíti a kódot.
Íme néhány kiemelés abból, amit a Twitter Bootstrap a Bootstrap részeként tartalmaz. Látogasson el a Bootstrap webhelyére vagy a Github projekt oldalára a letöltéshez és további információkért.
A Less változók tökéletesek a CSS fejfájásmentes karbantartásához és frissítéséhez. Ha módosítani szeretne egy színértéket vagy egy gyakran használt értéket, frissítse azt egy helyen, és már kész is.
// Linkek @linkColor: #8b59c2; @linkColorHover: darken(@linkColor, 10); // Szürkék @fekete: #000; @szürkeSötét: világosít(@fekete, 25%); @szürke: világosít(@fekete, 50%); @grayLight: világosít(@fekete, 70%); @szürkeVilágosabb: világosít(@fekete, 90%); @fehér: #fff; // Kiemelt színek @kék: #08b5fb; @zöld: #46a546; @piros: #9d261d; @sárga: #ffc40d; @narancs: #f89406; @rózsaszín: #c3325f; @lila: #7a43b6; // Alapvonali rács @basefont: 13px; @alapvonal: 18px;
/* ... */
A Less a CSS normál szintaxisa mellett egy másik megjegyzési stílust is biztosít .
// Ez egy megjegyzés /* Ez is egy megjegyzés */
A mixinek alapvetően tartalmazzák vagy részlegesek a CSS-hez, lehetővé téve egy kódblokk egyesítését. Kiválóan alkalmasak a szállítói előtaggal ellátott tulajdonságokhoz, például a box-shadow
, a böngészők közötti színátmenetekhez, a betűkészletekhez és egyebekhez. Az alábbiakban egy minta látható a Bootstraphez mellékelt mixinekből.
#font { .shorthand(@súly: normál, @méret: 14 képpont, @vonalmagasság: 20 képpont) { font-size: @size; font-weight: @weight; line-height: @lineHeight; } .sans-serif(@súly: normál, @méret: 14px, @vonalmagasság: 20px) { font-család: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: @size; font-weight: @weight; line-height: @lineHeight; } ... }
#gradiens { ... .vertical (@startColor: #555, @endColor: #333) { háttérszín: @endColor; háttér-ismétlés: ismétlés-x; background-image: -khtml-gradient(lineáris, bal felső, bal alsó, from(@startColor), to(@endColor)); // Konqueror background-image: -moz-linear-gradient(@startColor, @endColor); FF 3.6+ background-image: -ms-linear-gradient(@startColor, @endColor); // IE10 background-image: -webkit-gradient(lineáris, bal felső, bal alsó, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ background-image: -webkit-linear-gradient(@startColor, @endColor); // Safari 5.1+, Chrome 10+ background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10 background-image: linear-gradient(@startColor, @endColor); // A szabvány } ... }
Tedd jól magad, és végezd el a matematikát az alábbihoz hasonló rugalmas és erőteljes mixek létrehozásához.
// Griditude @rácsColumns: 16; @rácsColumnWidth: 40px; @gridGutterWidth: 20px; @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); // Készítsen néhány oszlopot .columns(@columnSpan: 1) { szélesség: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); }
Miután módosította a .less
/lib/ fájlokat, újra kell fordítania őket a bootstrap-*.*.*.css és a bootstrap-*.*.*.min.css fájlok újragenerálásához. Ha lekérési kérelmet nyújt be a GitHubnak, mindig újra kell fordítania.
Módszer | Lépések |
---|---|
Csomópont makefile-val | Telepítse a less parancssori fordítót az npm-mel a következő parancs futtatásával: $ npm install lessc A telepítés után futtassa Ezenkívül, ha telepítve van a watchr , akkor futhat |
Javascript | Töltse le a legújabb Less.js fájlt , és adja meg az elérési utat (és a Bootstrap-et) a <link rel="stylesheet/less" href="/path/to/bootstrap.less"> <script src="/path/to/less.js"></script> A .less fájlok újrafordításához csak mentse el őket, és töltse be újra az oldalt. A Less.js lefordítja és a helyi tárhelyen tárolja. |
Parancs sor | Ha már telepítve van a kevesebb parancssori eszköz, egyszerűen futtassa a következő parancsot: $ lessc ./lib/bootstrap.less > bootstrap.css
|
Kevesebb Mac alkalmazás | A nem hivatalos Mac-alkalmazás figyeli a .less fájlok könyvtárait, és a megtekintett .less fájl minden mentése után lefordítja a kódot helyi fájlokra. Ha szeretné, az alkalmazásban beállíthatja az automatikus kicsinyítés beállításait, és azt, hogy a lefordított fájlok melyik könyvtárba kerülnek. |