Kiterjesztés · Bootstrap magyarul

A Bootstrap középpontjában a LESS áll, egy dinamikus stíluslapnyelv, amelyet jó barátunk, Alexis Sellier hozott létre . Gyorsabbá, egyszerűbbé és szórakoztatóbbá teszi a rendszeralapú CSS fejlesztését.

Miért KEVESEBB?

A Bootstrap egyik alkotója írt egy gyors blogbejegyzést erről , itt összefoglalva:

A Bootstrap ~6x gyorsabban fordít kevesebbet a Sasshoz képest
A JavaScriptben kevesebb van írva, ami megkönnyíti számunkra a belemerülést és a javítást, mint a Ruby with Sass.
A kevesebb több; azt akarjuk érezni, hogy CSS-t írunk, és mindenki számára elérhetővé tesszük a Bootstrapet.

Mit tartalmaz?

A CSS kiterjesztéseként a LESS változókat, mixineket az újrafelhasználható kódrészletekhez, egyszerű matematikai műveleteket, egymásba ágyazást és még színfüggvényeket is tartalmaz.

Tudj meg többet

További információért látogasson el a hivatalos weboldalra a http://lesscss.org/ címen .

Mivel a CSS-ünk Less-szel íródott, és változókat és mixineket használ, a végső éles megvalósításhoz le kell fordítani. Itt van, hogyan.

Megjegyzés: Ha lekérési kérelmet küld a GitHubnak módosított CSS-sel, újra kell fordítania a CSS-t ezen módszerek bármelyikével.

Eszközök az összeállításhoz

Parancs sor

Kövesse a projekt readme utasításait a GitHubon a parancssoron keresztüli fordításhoz.

JavaScript

Töltse le a legújabb Less.js fájlt , és adja meg az elérési utat (és a Bootstrap-et) a <head>.

<link rel = "stylesheet/less" href = "/útvonal/bootstrap.less" > <script src = " /elérési út/a/kevésbé.js-hez" ></script>

A .less fájlok újrafordításához csak mentse el őket, és töltse be újra az oldalt. A Less.js lefordítja és a helyi tárhelyen tárolja.

Nem hivatalos Mac alkalmazás

A nem hivatalos Mac-alkalmazás figyeli a .less fájlok könyvtárait, és a megtekintett .less fájl minden mentése után lefordítja a kódot helyi fájlokra. Ha szeretné, az alkalmazásban beállíthatja az automatikus kicsinyítés beállításait, és azt, hogy a lefordított fájlok melyik könyvtárba kerülnek.

További alkalmazások

Ropogtat

A Crunch egy nagyszerű megjelenésű LESS szerkesztő és fordító, amely Adobe Airre épül.

CodeKit

Ugyanaz a srác hozta létre, mint a nem hivatalos Mac-alkalmazás, a CodeKit egy olyan Mac-alkalmazás, amely LESS, SASS, Stylus és CoffeeScript fordításokat végez.

Egyszerű

Mac-, Linux- és Windows-alkalmazás KEVESEBB fájlok drag and drop fordításához. Ráadásul a forráskód a GitHubon található .

Gyorsan elindíthat bármilyen webes projektet a lefordított vagy minimálisra csökkentett CSS és JS használatával. Az egyéni stílusokra külön rétegezve az egyszerű frissítés és karbantartás érdekében.

Fájlszerkezet beállítása

Töltse le a legfrissebb összeállított Bootstrap-et, és helyezze be a projektbe. Például valami ehhez hasonló lehet:

  app/
      elrendezések/
      sablonok/
  nyilvános/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      img/
          glyphicons-halflings.png
          glyphicons-halflings-white.png

Használja az indító sablont

A kezdéshez másolja a következő alap HTML-kódot.

<html>
  <fej>
    <title> Bootstrap 101 sablon </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stíluslap" >  
  </head>
  <test>
    <h1> Helló világ! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

Réteg az egyéni kódon

Ha szükséges, dolgozzon az egyéni CSS-ben, JS-ben és még sok másban, hogy a Bootstrap a sajátja legyen saját különálló CSS- és JS-fájljaival.

<html>
  <fej>
    <title> Bootstrap 101 sablon </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stíluslap" >  
    <!-- Projekt -->
    <link href = "public/css/application.css" rel = "stíluslap" >  
  </head>
  <test>
    <h1> Helló világ! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Projekt -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Bootstrap kiterjesztése

LESS-ből épült