Rozszerz · Twitter Bootstrap po polsku

Bootstrap jest zbudowany w oparciu o LESS, dynamiczny język arkuszy stylów stworzony przez naszego dobrego przyjaciela, Alexisa Selliera . Sprawia, że tworzenie CSS opartego na systemach jest szybsze, łatwiejsze i przyjemniejsze.

Dlaczego MNIEJ?

Jeden z twórców Bootstrapa napisał na ten temat krótki wpis na blogu , podsumowany tutaj:

Bootstrap kompiluje się szybciej ~6x szybciej z Less w porównaniu do Sass
Less jest napisane w JavaScript, co ułatwia nam nurkowanie i łatanie w porównaniu z Ruby with Sass.
Mniej znaczy więcej; chcemy czuć się tak, jakbyśmy pisali CSS i sprawiali, że Bootstrap jest dostępny dla wszystkich.

Co jest zawarte?

Jako rozszerzenie CSS, LESS zawiera zmienne, domieszki dla fragmentów kodu wielokrotnego użytku, operacje dla prostych funkcji matematycznych, zagnieżdżania, a nawet funkcji kolorów.

Ucz się więcej

Odwiedź oficjalną stronę internetową http://lesscss.org/ , aby dowiedzieć się więcej.

Ponieważ nasz CSS jest napisany za pomocą Less i wykorzystuje zmienne i domieszki, musi zostać skompilowany do ostatecznego wdrożenia produkcyjnego. Oto jak.

Uwaga: jeśli przesyłasz żądanie ściągnięcia do GitHub ze zmodyfikowanym CSS, musisz ponownie skompilować CSS za pomocą dowolnej z tych metod.

Narzędzia do kompilacji

Węzeł z makefile

Zainstaluj kompilator wiersza poleceń LESS, JSHint, Recess i uglify-js globalnie za pomocą npm, uruchamiając następujące polecenie:

$ npm install -g mniej jshint wnęka uglify-js

Po zainstalowaniu wystarczy uruchomić makez katalogu głównego swojego katalogu startowego i gotowe.

Dodatkowo, jeśli masz zainstalowany watchr , możesz uruchomić, make watchaby bootstrap był automatycznie przebudowywany za każdym razem, gdy edytujesz plik w bibliotece bootstrap (nie jest to wymagane, tylko wygodna metoda).

Wiersz poleceń

Zainstaluj narzędzie wiersza poleceń LESS za pośrednictwem Node i uruchom następujące polecenie:

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

Pamiętaj, aby uwzględnić --compressw tym poleceniu, jeśli próbujesz zaoszczędzić trochę bajtów!

JavaScript

Pobierz najnowszy plik Less.js i dołącz ścieżkę do niego (i Bootstrap) w pliku <head>.

<link rel = "stylesheet/less" href = "/ścieżka/do/bootstrap.less" > <script src = "/ścieżka/do/less.js" ></script>

Aby ponownie skompilować pliki .less, po prostu je zapisz i ponownie załaduj swoją stronę. Less.js kompiluje je i przechowuje w pamięci lokalnej.

Nieoficjalna aplikacja na Maca

Nieoficjalna aplikacja na Maca obserwuje katalogi plików .less i kompiluje kod do plików lokalnych po każdym zapisaniu obserwowanego pliku .less. Jeśli chcesz, możesz zmienić preferencje w aplikacji, aby automatycznie minifikować i do którego katalogu trafiają skompilowane pliki.

Więcej aplikacji

Schrupać

Crunch to świetnie wyglądający edytor i kompilator LESS zbudowany na Adobe Air.

CodeKit

Stworzony przez tego samego faceta, co nieoficjalna aplikacja na Maca, CodeKit to aplikacja na Maca, która kompiluje LESS, SASS, Stylus i CoffeeScript.

Prostota

Aplikacja na systemy Mac, Linux i Windows do kompilowania plików LESS metodą „przeciągnij i upuść”. Dodatkowo kod źródłowy znajduje się na GitHub .

Szybko rozpocznij dowolny projekt internetowy, upuszczając skompilowany lub zminimalizowany CSS i JS. Nakładaj osobne style na niestandardowe, aby ułatwić uaktualnianie i konserwację.

Konfiguracja struktury pliku

Pobierz najnowszy skompilowany Bootstrap i umieść go w swoim projekcie. Na przykład możesz mieć coś takiego:

  app / layouts / templates / public / css / │ bootstrap . _ _ _ _ min . css
   ├── js / │ bootstrap . _ min . js
   └── img / ├── glify - halflingi . png
       └── glify - niziołki - białe . png

Wykorzystaj szablon startowy

Aby rozpocząć, skopiuj następujący podstawowy kod HTML.

<html>
  <głowa>
    <title> Szablon Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
  </head>
  <ciało>
    <h1> Witaj świecie! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
  </body>
</html>

Warstwa na niestandardowym kodzie

Pracuj w niestandardowym CSS, JS i nie tylko, aby dostosować Bootstrap do własnych osobnych plików CSS i JS.

<html>
  <głowa>
    <title> Szablon Bootstrap 101 </title>
    <!-- Bootstrap -->
    <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >  
    <!-- Projekt -->
    <link href = "public/css/application.css" rel = "stylesheet" >  
  </head>
  <ciało>
    <h1> Witaj świecie! </h1>
    <!-- Bootstrap -->
    <script src = "public/js/bootstrap.min.js" ></script> 
    <!-- Projekt -->
    <script src = "public/js/application.js" ></script> 
  </body>
</html>

Rozszerzający Bootstrap

Zbudowany z MNIEJ