Rozšířit · Twitter Bootstrap v češtině

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?

Jako rozšíření CSS obsahuje LESS 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

Uzel s makefile

Nainstalujte kompilátor příkazového řádku LESS, JSHint, Recess a uglify-js globálně pomocí npm spuštěním následujícího příkazu:

$ npm install -g less jshint recess uglify-js

Po instalaci stačí spustit makez kořenového adresáře vašeho bootstrap adresáře a je vše připraveno.

Navíc, pokud máte nainstalovaný watchr , můžete spustit make watch, aby se bootstrap automaticky přestavěl pokaždé, když upravíte soubor v bootstrap lib (toto není vyžadováno, pouze pohodlný způsob).

Příkazový řádek

Nainstalujte nástroj příkazového řádku LESS přes Node a spusťte následující příkaz:

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

--compressPokud se pokoušíte ušetřit nějaké bajty , nezapomeňte tento příkaz zahrnout !

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 is a great looking LESS editor and compiler built on Adobe Air.

CodeKit

Created by the same guy as the unofficial Mac app, CodeKit is a Mac app that compiles LESS, SASS, Stylus, and CoffeeScript.

Simpless

Mac, Linux, and Windows app for drag and drop compiling of LESS files. Plus, the source code is on GitHub.

Quickly start any web project by dropping in the compiled or minified CSS and JS. Layer on custom styles separately for easy upgrades and maintenance moving forward.

Setup file structure

Download the latest compiled Bootstrap and place into your project. For example, you might have something like this:

  app/
  ├── layouts/
  └── templates/
  public/
  ├── css/
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.min.js
  └── img/
      ├── glyphicons-halflings.png
      └── glyphicons-halflings-white.png

Utilize starter template

Copy the following base HTML to get started.

<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
  </body>
</html>

Layer on custom code

Work in your custom CSS, JS, and more as necessary to make Bootstrap your own with your own separate CSS and JS files.

<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="public/css/bootstrap.min.css" rel="stylesheet">
    <!-- Project -->
    <link href="public/css/application.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Bootstrap -->
    <script src="public/js/bootstrap.min.js"></script>
    <!-- Project -->
    <script src="public/js/application.js"></script>
  </body>
</html>

Rozšíření Bootstrap

Postaveno s MÉNĚ