Разширете · Bootstrap на български

Bootstrap е направен с LESS в основата си, динамичен стилов език, създаден от нашия добър приятел, Алексис Селиер . Това прави разработването на базиран на системи CSS по-бързо, по-лесно и по-забавно.

Защо ПО-МАЛКО?

Един от създателите на Bootstrap написа бърза публикация в блог за това , обобщена тук:

Bootstrap компилира по-бързо ~6 пъти по-бързо с Less в сравнение със Sass
По-малко се пише в JavaScript, което ни улеснява да се гмурнем и да коригираме в сравнение с Ruby със Sass.
По-малко е повече; искаме да се чувстваме сякаш пишем CSS и правим Bootstrap достъпен за всички.

Какво е включено?

Като разширение на CSS, LESS включва променливи, миксини за многократно използвани фрагменти от код, операции за проста математика, влагане и дори цветни функции.

Научете повече

Посетете официалния уебсайт на http://lesscss.org/ , за да научите повече.

Тъй като нашият CSS е написан с Less и използва променливи и миксини, той трябва да бъде компилиран за окончателно производствено внедряване. Ето как.

Забележка: Ако изпращате заявка за изтегляне до GitHub с модифициран CSS, трябва да прекомпилирате CSS чрез някой от тези методи.

Инструменти за компилиране

Възел с makefile

Инсталирайте LESS компилатора на командния ред, JSHint, Recess и uglify-js глобално с npm, като изпълните следната команда:

$ npm install -g less jshint recess uglify-js

Веднъж инсталиран, просто стартирайте makeот корена на вашата директория за стартиране и сте готови.

Освен това, ако сте инсталирали watchr , можете да стартирате, make watchза да имате автоматично повторно изграждане на bootstrap всеки път, когато редактирате файл в библиотеката на bootstrap (това не е задължително, просто метод за удобство).

Командна линия

Инсталирайте инструмента за команден ред LESS чрез Node и изпълнете следната команда:

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

Не забравяйте да включите --compressв тази команда, ако се опитвате да спестите някои байтове!

JavaScript

Изтеглете най-новия Less.js и включете пътя до него (и Bootstrap) в <head>.

<link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script>

За да компилирате отново .less файловете, просто ги запазете и презаредете страницата си. Less.js ги компилира и ги съхранява в локално хранилище.

Неофициално приложение за Mac

Неофициалното приложение за Mac наблюдава директории с .less файлове и компилира кода в локални файлове след всяко запазване на наблюдаван .less файл. Ако желаете, можете да превключвате предпочитанията в приложението за автоматично минимизиране и в коя директория завършват компилираните файлове.

Още приложения

хрускам

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>

Разширяване на Bootstrap

Построен с ПО-МАЛКО