Розширення · Bootstrap українською мовою

В основі Bootstrap лежить LESS, динамічна мова таблиць стилів, створена нашим хорошим другом Алексісом Селлієром . Це робить розробку системних CSS швидшою, легшою та веселішою.

Чому МЕНШЕ?

Один із розробників Bootstrap написав коротку публікацію в блозі про це , яку коротко викладено тут:

Bootstrap компілюється швидше ~у 6 разів швидше з Less порівняно з Sass
На JavaScript написано менше, тому нам легше занурюватися та вносити виправлення порівняно з Ruby із Sass.
Менше значить більше; ми хочемо відчувати, що ми пишемо CSS і робимо Bootstrap доступним для всіх.

Що включено?

Як розширення CSS, LESS включає змінні, міксини для повторно використовуваних фрагментів коду, операції для простої математики, вкладення та навіть функції кольору.

Вивчайте більше

Відвідайте офіційний веб-сайт http://lesscss.org/ , щоб дізнатися більше.

Оскільки наш CSS написаний за допомогою Less і використовує змінні та міксини, його потрібно скомпілювати для остаточної реалізації. Ось як.

Примітка. Якщо ви надсилаєте запит на отримання в GitHub зі зміненим CSS, вам потрібно перекомпілювати CSS будь-яким із цих методів.

Інструменти для складання

Вузол із make-файлом

Встановіть компілятор командного рядка LESS, JSHint, Recess і uglify-js глобально за допомогою npm, виконавши таку команду:

$ npm install -g less jshint recess uglify-js

Після встановлення просто запустіть makeіз кореневого каталогу початкового каталогу, і все готово.

Крім того, якщо у вас встановлено watchr , ви можете запустити make watchавтоматичне перебудування початкового завантаження кожного разу, коли ви редагуєте файл у бібліотеці початкового завантаження (це не обов’язково, лише зручний спосіб).

Командний рядок

Встановіть інструмент командного рядка 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 — чудовий редактор і компілятор LESS, створений на основі Adobe Air.

CodeKit

Створений тим же хлопцем, що й неофіційний додаток для 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-hallfings-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>

Розширення Bootstrap

Побудовано з МЕНШИМ