Rozšiřte Bootstrap, abyste využili výhod zahrnutých stylů a komponent, stejně jako MÉNĚ proměnných a mixinů.
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ší.
Jeden z tvůrců Bootstrapu o tom napsal rychlý blogový příspěvek , shrnutý zde:
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.
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.
Při kompilaci pomocí příkazového řádku postupujte podle pokynů v souboru readme projektu na GitHubu.
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 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čí.
Crunch je skvěle vypadající LESS editor a kompilátor postavený na Adobe Air.
CodeKit, vytvořený stejným člověkem jako neoficiální aplikace pro Mac, je aplikace pro Mac, která kompiluje LESS, SASS, Stylus a CoffeeScript.
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.
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
Chcete-li začít, zkopírujte následující základní HTML.
- <html>
- <hlava>
- <title> Šablona Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- </head>
- <body>
- <h1> Ahoj světe! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
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.
- <html>
- <hlava>
- <title> Šablona 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 světe! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Projekt -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>