Rozšírte Bootstrap a využite výhody zahrnutých štýlov a komponentov, ako aj MENEJ premenných a mixov.
Bootstrap je vyrobený s LESS v jeho jadre, dynamickým štýlom jazyka, ktorý vytvoril náš dobrý priateľ Alexis Sellier . Vďaka tomu je vývoj systémov CSS rýchlejší, jednoduchší a zábavnejší.
Jeden z tvorcov Bootstrapu o tom napísal krátky blogový príspevok , zhrnutý tu:
Ako rozšírenie CSS obsahuje LESS premenné, mixiny pre opakovane použiteľné úryvky kódu, operácie pre jednoduchú matematiku, vnorenie a dokonca aj farebné funkcie.
Navštívte oficiálnu webovú stránku http://lesscss.org/ a dozviete sa viac.
Keďže náš CSS je napísaný pomocou Less a využíva premenné a mixíny, je potrebné ho skompilovať pre konečnú implementáciu do produkcie. Tu je návod.
Pri kompilácii cez príkazový riadok postupujte podľa pokynov v súbore readme projektu na GitHub.
Stiahnite si najnovší Less.js a zahrňte cestu k nemu (a Bootstrap) do súboru <head>
.
<link rel = "stylesheet/less" href = "/cesta/k/bootstrap.less" > <script src = "/cesta/k/menej.js" ></script>
Ak chcete prekompilovať súbory .less, stačí ich uložiť a znova načítať stránku. Less.js ich skompiluje a uloží do lokálneho úložiska.
Neoficiálna aplikácia pre Mac sleduje adresáre súborov .less a kompiluje kód do lokálnych súborov po každom uložení sledovaného súboru .less. Ak chcete, môžete v aplikácii prepínať predvoľby na automatické minifikovanie a v ktorom adresári skončia kompilované súbory.
Crunch je skvele vyzerajúci editor a kompilátor LESS postavený na Adobe Air.
CodeKit, ktorý vytvoril ten istý človek ako neoficiálnu aplikáciu pre Mac, je aplikácia pre Mac, ktorá kompiluje LESS, SASS, Stylus a CoffeeScript.
Aplikácia pre Mac, Linux a Windows na kompiláciu MENEJ súborov pomocou myši. Zdrojový kód je navyše na GitHub .
Rýchlo spustite akýkoľvek webový projekt vložením skompilovaného alebo zmenšeného CSS a JS. Navrstvite na vlastné štýly oddelene pre jednoduché upgrady a údržbu vpred.
Stiahnite si najnovší skompilovaný Bootstrap a vložte ho do svojho projektu. Môžete mať napríklad niečo takéto:
aplikácia/ rozloženia/ šablóny/ verejné/ css/ bootstrap.min.css js/ bootstrap.min.js img/ glyphicons-halflings.png glyphicons-halflings-white.png
Ak chcete začať, skopírujte nasledujúci základný kód HTML.
- <html>
- <head>
- <title> Šablóna Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- </head>
- <body>
- <h1> Ahoj, svet! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
Pracujte vo svojom vlastnom CSS, JS a ďalších podľa potreby, aby ste si Bootstrap prispôsobili pomocou vlastných samostatných súborov CSS a JS.
- <html>
- <head>
- <title> Šablóna Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- <!-- Projekt -->
- <link href = "public/css/application.css" rel = "stylesheet" >
- </head>
- <body>
- <h1> Ahoj, svet! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Projekt -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>