Rozszerz · 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

Wiersz poleceń

Postępuj zgodnie z instrukcjami w pliku readme projektu na GitHub, aby kompilować za pomocą wiersza polecenia.

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:

  aplikacja/
      układy/
      szablony/
  publiczny/
      css/
          bootstrap.min.css
      js/
          bootstrap.min.js
      zdjęcie/
          glyphicons-halflings.png
          glyphicons-halflings-white.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