Rozšírenie bootstrapu

Rozšírte Bootstrap a využite výhody zahrnutých štýlov a komponentov, ako aj MENEJ premenných a mixov.

MENEJ CSS

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ší.

Prečo MENEJ?

Jeden z tvorcov Bootstrapu o tom napísal krátky blogový príspevok , zhrnutý tu:

  • Bootstrap sa kompiluje rýchlejšie ~ 6x rýchlejšie s Less v porovnaní so Sass
  • Menej je napísané v JavaScripte, čo nám uľahčuje ponorenie a opravu v porovnaní s Ruby so Sass.
  • Menej je viac; chceme mať pocit, že píšeme CSS a robíme Bootstrap prístupným pre všetkých.

Čo je zahrnuté?

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.

Uč sa viac

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ť na konečnú implementáciu do produkcie. Tu je návod.

Poznámka: Ak odosielate požiadavku na stiahnutie na GitHub s upraveným CSS, musíte CSS prekompilovať pomocou ktorejkoľvek z týchto metód.

Nástroje na zostavovanie

Uzol s makefile

Nainštalujte kompilátor príkazového riadka LESS, JSHint, Recess a uglify-js globálne pomocou npm spustením nasledujúceho príkazu:

$ npm install -g less jshint reccess uglify-js

Po inštalácii stačí spustiť makez koreňového adresára bootstrap adresára a všetko je nastavené.

Okrem toho, ak máte nainštalovaný watchr , môžete spustiť make watch, aby sa bootstrap automaticky prestavil vždy, keď upravíte súbor v bootstrap lib (nie je to povinné, len pohodlný spôsob).

Príkazový riadok

Nainštalujte nástroj príkazového riadka LESS cez Node a spustite nasledujúci príkaz:

$ lessc ./less/bootstrap.less > bootstrap.css

--compressAk sa pokúšate ušetriť nejaké bajty , nezabudnite to zahrnúť do tohto príkazu!

JavaScript

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

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.

Ďalšie aplikácie

Crunch

Crunch je skvele vyzerajúci editor a kompilátor LESS postavený na Adobe Air.

CodeKit

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.

Jednoduchosť

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.

Štruktúra súboru nastavenia

Stiahnite si najnovší skompilovaný Bootstrap a vložte ho do svojho projektu. Môžete mať napríklad niečo takéto:

  aplikácia/
      rozloženie/
      šablóny/
  verejné/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Použite štartovaciu šablónu

Ak chcete začať, skopírujte nasledujúci základný kód HTML.

    1. <html>
    2. <head>
    3. <title> Šablóna Bootstrap 101 </title>
    4. <!-- Bootstrap -->
    5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
    6. </head>
    7. <body>
    8. <h1> Dobrý deň, svet! </h1>
    9. <!-- Bootstrap -->
    10. <script src = "public/js/bootstrap.min.js" ></script>
    11. </body>
    12. </html>

Vrstva na vlastnom kóde

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.

    1. <html>
    2. <head>
    3. <title> Šablóna Bootstrap 101 </title>
    4. <!-- Bootstrap -->
    5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
    6. <!-- Projekt -->
    7. <link href = "public/css/application.css" rel = "stylesheet" >
    8. </head>
    9. <body>
    10. <h1> Dobrý deň, svet! </h1>
    11. <!-- Bootstrap -->
    12. <script src = "public/js/bootstrap.min.js" ></script>
    13. <!-- Projekt -->
    14. <script src = "public/js/application.js" ></script>
    15. </body>
    16. </html>