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

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

Чому МЕНШЕ?

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

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

Що включено?

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

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

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

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

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

Інструменти для компіляції

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

Дотримуйтесь інструкцій у файлі readme проекту на GitHub для компіляції за допомогою командного рядка.

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

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