Razširite Bootstrap, da izkoristite vključene sloge in komponente ter LESS spremenljivke in mešanice.
Bootstrap je narejen z LESS v svojem jedru, dinamičnim jezikom slogov, ki ga je ustvaril naš dober prijatelj Alexis Sellier . Omogoča hitrejši, lažji in zabavnejši razvoj sistemskega CSS.
Eden od ustvarjalcev programa Bootstrap je o tem napisal kratko objavo v spletnem dnevniku , povzeto tukaj:
Kot razširitev CSS-ja LESS vključuje spremenljivke, mešanice za večkratno uporabne delčke kode, operacije za preprosto matematiko, gnezdenje in celo barvne funkcije.
Za več informacij obiščite uradno spletno stran http://lesscss.org/ .
Ker je naš CSS napisan z Less in uporablja spremenljivke in mešanice, ga je treba prevesti za končno produkcijsko izvedbo. Evo kako.
Sledite navodilom v readme projekta na GitHubu za prevajanje prek ukazne vrstice.
Prenesite najnovejši Less.js in vključite pot do njega (in Bootstrap) v <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
Če želite znova prevesti datoteke .less, jih preprosto shranite in znova naložite stran. Less.js jih prevede in shrani v lokalno shrambo.
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.
Crunch je odličen LESS urejevalnik in prevajalnik, zgrajen na Adobe Air.
CodeKit, ki ga je ustvaril isti človek kot neuradno aplikacijo za Mac, je aplikacija za Mac, ki prevaja LESS, SASS, Stylus in CoffeeScript.
Aplikacija za Mac, Linux in Windows za prevajanje povleci in spusti datotek LESS. Poleg tega je izvorna koda na GitHubu .
Hitro zaženite kateri koli spletni projekt tako, da vnesete preveden ali pomanjšan CSS in JS. Ločeno naložite sloge po meri za enostavno nadgradnjo in vzdrževanje.
Prenesite najnovejši prevedeni Bootstrap in ga postavite v svoj projekt. Na primer, morda imate nekaj takega:
aplikacija/ postavitve/ predloge/ javnost/ css/ bootstrap.min.css js/ bootstrap.min.js img/ glyphicons-polovice.png glyphicons-hallfings-white.png
Za začetek kopirajte naslednji osnovni HTML.
- <html>
- <glava>
- <title> Predloga Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- </head>
- <telo>
- <h1> Pozdravljen, svet! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
Delajte v svojem CSS-ju po meri, JS-ju in še več, če je potrebno, da naredite Bootstrap svojega z lastnimi ločenimi datotekami CSS in JS.
- <html>
- <glava>
- <title> Predloga Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- <!-- Projekt -->
- <link href = "public/css/application.css" rel = "stylesheet" >
- </head>
- <telo>
- <h1> Pozdravljen, svet! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Projekt -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>