Разширете Bootstrap, за да се възползвате от включените стилове и компоненти, както и от LESS променливи и mixins.
Bootstrap е направен с LESS в основата си, динамичен стилов език, създаден от нашия добър приятел, Алексис Селиер . Това прави разработването на базиран на системи CSS по-бързо, по-лесно и по-забавно.
Един от създателите на Bootstrap написа бърза публикация в блог за това , обобщена тук:
Като разширение на CSS, LESS включва променливи, миксини за повторно използвани фрагменти от код, операции за проста математика, влагане и дори цветни функции.
Посетете официалния уебсайт на http://lesscss.org/ , за да научите повече.
Тъй като нашият CSS е написан с Less и използва променливи и миксини, той трябва да бъде компилиран за окончателно производствено внедряване. Ето как.
Следвайте инструкциите в readme на проекта в GitHub за компилиране чрез командния ред.
Изтеглете най-новия Less.js и включете пътя до него (и Bootstrap) в <head>
.
<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>
За да компилирате отново .less файловете, просто ги запазете и презаредете страницата си. Less.js ги компилира и ги съхранява в локално хранилище.
Неофициалното приложение за Mac наблюдава директории с .less файлове и компилира кода в локални файлове след всяко запазване на наблюдаван .less файл. Ако желаете, можете да превключвате предпочитанията в приложението за автоматично минимизиране и в коя директория завършват компилираните файлове.
Crunch е страхотно изглеждащ LESS редактор и компилатор, изграден на Adobe Air.
Създаден от същия човек като неофициалното приложение за Mac, CodeKit е приложение за Mac, което компилира LESS, SASS, Stylus и CoffeeScript.
Приложение за Mac, Linux и Windows за компилиране с плъзгане и пускане на LESS файлове. Освен това изходният код е в GitHub .
Бързо стартирайте всеки уеб проект, като пуснете компилиран или минимизиран CSS и JS. Слой върху персонализирани стилове отделно за лесни надстройки и поддръжка напред.
Изтеглете най-новия компилиран Bootstrap и го поставете във вашия проект. Например, може да имате нещо подобно:
приложение/ оформления/ шаблони/ публичен/ css/ bootstrap.min.css js/ bootstrap.min.js img/ glyphicons-halflings.png glyphicons-halflings-white.png
Копирайте следния основен HTML, за да започнете.
- <html>
- <глава>
- <title> Шаблон Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- </head>
- <тяло>
- <h1> Здравей, свят! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- </body>
- </html>
Работете с вашия персонализиран CSS, JS и други, ако е необходимо, за да направите Bootstrap ваш собствен със собствени отделни CSS и JS файлове.
- <html>
- <глава>
- <title> Шаблон Bootstrap 101 </title>
- <!-- Bootstrap -->
- <link href = "public/css/bootstrap.min.css" rel = "stylesheet" >
- <!-- Проект -->
- <link href = "public/css/application.css" rel = "stylesheet" >
- </head>
- <тяло>
- <h1> Здравей, свят! </h1>
- <!-- Bootstrap -->
- <script src = "public/js/bootstrap.min.js" ></script>
- <!-- Проект -->
- <script src = "public/js/application.js" ></script>
- </body>
- </html>