Rozšíření Bootstrap

Rozšiřte Bootstrap, abyste využili výhod zahrnutých stylů a komponent, stejně jako MÉNĚ proměnných a mixinů.

MÉNĚ CSS

Bootstrap je vyroben s LESS v jádru, dynamickým stylem jazykem vytvořeným naším dobrým přítelem Alexisem Sellierem . Díky tomu je vývoj systémových CSS rychlejší, jednodušší a zábavnější.

Proč MÉNĚ?

Jeden z tvůrců Bootstrapu o tom napsal rychlý blogový příspěvek , shrnutý zde:

  • Bootstrap se kompiluje rychleji ~ 6x rychleji s Less ve srovnání se Sass
  • Méně je napsáno v JavaScriptu, takže je pro nás snazší se ponořit a opravovat ve srovnání s Ruby se Sass.
  • Méně je více; chceme mít pocit, že píšeme CSS a činíme Bootstrap přístupným všem.

Co je zahrnuto?

LESS jako rozšíření CSS zahrnuje proměnné, mixiny pro opakovaně použitelné úryvky kódu, operace pro jednoduchou matematiku, vnořování a dokonce i barevné funkce.

Zjistěte více

Navštivte oficiální webovou stránku http://lesscss.org/ a dozvíte se více.

Vzhledem k tomu, že naše CSS je napsáno pomocí Less a využívá proměnné a mixiny, je třeba je zkompilovat pro konečnou produkční implementaci. Zde je návod.

Poznámka: Pokud odesíláte požadavek na stažení na GitHub s upraveným CSS, musíte CSS překompilovat pomocí kterékoli z těchto metod.

Nástroje pro kompilaci

Příkazový řádek

Při kompilaci pomocí příkazového řádku postupujte podle pokynů v souboru readme projektu na GitHubu.

JavaScript

Stáhněte si nejnovější Less.js a zahrňte cestu k němu (a Bootstrap) do souboru <head>.

<link rel = "stylesheet/less" href = "/cesta/k/bootstrap.less" > <script src = "/cesta/k/méně.js" ></script>  
 

Chcete-li znovu zkompilovat soubory .less, stačí je uložit a znovu načíst stránku. Less.js je zkompiluje a uloží do místního úložiště.

Neoficiální aplikace pro Mac

Neoficiální aplikace pro Mac sleduje adresáře souborů .less a kompiluje kód do místních souborů po každém uložení sledovaného souboru .less. Pokud chcete, můžete v aplikaci přepínat předvolby pro automatickou minifikaci a ve kterém adresáři kompilované soubory skončí.

Další aplikace

Crunch

Crunch je skvěle vypadající LESS editor a kompilátor postavený na Adobe Air.

CodeKit

CodeKit, vytvořený stejným člověkem jako neoficiální aplikace pro Mac, je aplikace pro Mac, která kompiluje LESS, SASS, Stylus a CoffeeScript.

Jednoduché

Aplikace pro Mac, Linux a Windows pro kompilaci MÉNĚ souborů přetažením. Zdrojový kód je navíc na GitHubu .

Rychle spusťte jakýkoli webový projekt vložením zkompilovaného nebo minifikovaného CSS a JS. Vrstva na vlastní styly samostatně pro snadné upgrady a údržbu vpřed.

Struktura souboru nastavení

Stáhněte si nejnovější zkompilovaný Bootstrap a vložte jej do svého projektu. Můžete mít například něco takového:

  aplikace/
      rozložení/
      šablony/
  veřejnost/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Použijte startovací šablonu

Chcete-li začít, zkopírujte následující základní HTML.

  1. <html>
  2. <hlava>
  3. <title> Šablona Bootstrap 101 </title>
  4. <!-- Bootstrap -->
  5. <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
  6. </head>
  7. <body>
  8. <h1> Ahoj světe! </h1>
  9. <!-- Bootstrap -->
  10. <script src = "public/js/bootstrap.min.js" ></script>
  11. </body>
  12. </html>

Vrstva na vlastní kód

Podle potřeby pracujte se svými vlastními CSS, JS a dalšími, abyste si Bootstrap vytvořili podle svého s vlastními samostatnými soubory CSS a JS.

  1. <html>
  2. <hlava>
  3. <title> Šablona 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> Ahoj světe! </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>