Bootstrap - що це? Twitter bootstrap - дизайн і створення сайтів
Ті, хто хоч трохи працює зі сферою вебдизайну і знайомий з процесом створення сайтів і їх оформлення, знає, як далеко за останнім часом зробили крок можливості по візуалізації вашого контенту. Завдяки технологіям CSS, javascript і Flash, поєднаним воєдино, з будь-якого сайту можна зробити справжній шедевр, отаке твір сучасного мистецтва. І, звичайно ж, багато дизайнерів займаються цим, а велика кількість компаній щедро замовляє розробки порталів з неймовірною графікою. Причому, «вау-ефект» сторінки може бути досягнутий не тільки за рахунок набору різних ефектів, але і за допомогою простих, але красивих переходів, інфографіки, посилань і іншого.
Правда, кожен дизайнер і верстальник знає, що для економії часу при розробці будь-якого ресурсу потрібно мати певну базу, шаблон, на основі якого можна буде створити остаточний «шедевр». Саме для цього і була створена платформа Bootstrap: сьогодні вона допомагає заощадити час і спростити завдання тисячам веб-дизайнерів.
Bootstrap - що це?
Отже, почати опис продукту слід з його загальної характеристики. Тому наголошуємо, що Bootstrap - це платформа, виражена в наборі своєрідних шаблонів для сайту. Кожен з них включає графіку, розмітку CSS і, звичайно ж, HTML.
Весь цей набір йде в одному архіві, який можна безкоштовно завантажити з офіційної сторінки платформи. Таким чином, кожен, хто бажає розробити свій сайт, може скористатися цим набором, і йому не потрібно буде писати кожну сторінку з нуля, роблячи базові дії: размечая сайт, розбиваючи його на блоки, підбираючи графіку для базових іконок і так далі. При цьому, кожен набір Twitter Bootstrap досить індивідуальний. На відміну від звичних нам шаблонів, в ньому немає нічого зайвого, що потрібно буде прибирати або замінювати. Створювати своє дітище дизайнер зможе безпосередньо на базі Bootstrap.
Відео: Швидке створення bootstrap сітки
Як почати створення сайту?
Отже, з самої платформою ми вже познайомилися, тепер переходимо до того, як же почати розробку свого унікального сайту. Для початку, звичайно, потрібно завантажити архів з шаблоном Twitter Bootstrap. Займає він зовсім мало місця, а отримати його можна на сторінці GetBootstrap. Там же можна вибрати і розміщення блоків, яке вам потрібно для сайту. Наприклад, є сторінки в вигляді landing-page з однієї картинкою, тобто з слайдером, з кількома заголовками, з попередньо встановленими ефектами і так далі. Потрібно просто зробити вибір і завантажити той архів, який підійде для вашого сайту, створюваного на основі Bootstrap. Що це за набір, ви побачите відразу після скачування.
індивідуалізація теми
З себе кожна тема представляє, як і будь-який сайт, набір файлів HTML, CSS і графіки. Розробники платформи прагнули до того, щоб підвести норми дизайну під одні стандарти, при цьому по максимуму даючи можливості для індивідуалізації вашої теми. Тому для того, щоб зробити свій сайт неповторним, потрібно буде розбиратися в пристрої платформи, архітектурі сайту на ній і те, як прописується код кожного шаблону. Зробити це потрібно один раз, після чого створювати свої проекти буде легше, використовуючи Bootstrap. CSS і графіка однакові на всіх темах. В цьому і плюс такого підходу.
Все, що нас цікавить - це CSS-файл з назвою теми (він поміщений в папку «css», крім нього там ви знайдете ще два файли базових налаштувань платформи, їх можна не чіпати) - а також «index.html», що представляє з себе розмітку головної сторінки. Відштовхуватися слід від цього, а інші специфічні доповнення у вигляді слайдерів, якихось javascript-ефектів вже будуть визначатися вашим завданням створити той чи інший сайт. Наприклад, в стандартному шаблоні Bootstrap меню може бути розроблено в нудному сірому кольорі. Для свого сайту ви, звичайно ж, змініть його таким чином, щоб воно було виконано в потрібному кольорі і з усіма потрібними ефектами. Це і є та сама індивідуалізація, але при цьому, оскільки є Bootstrap, створювати меню з нуля немає необхідності, що економить час.
Відео: Bootstrap - 1 Урок. Знайомство і установка
Можливості для дизайнерів
Власне, тепер про можливості, які дає платформі Bootstrap. Що це за перспективи - працювати з такими архівами? Здавалося б, чим вони так примітні?
По суті, нічого такого в платформі для розробників від Twitter немає. Ідея дуже проста, як і її реалізація. Але тепер-то дизайнер не повинен створювати сторінку сайту з нуля, щоб потім надати їй потрібний вид. Ні, зараз фахівець може почати безпосередньо з оболонки, з дизайну сайту, не відволікаючись на такі базові речі, як основна розмітка. Чи це не приклад ефективного і раціонального використання часу?
Крім того, не було відзначено ще одна перевага Bootstrap - що це спосіб, що допомагає людям, які не володіють навичками створення розмітки CSS на високому рівні, створити свій професійний дизайн, адже всі інструменти, які можуть стати в нагоді верстальщику, вже є в шаблонах, про які йде мова. Людина, що знає про створення сайтів основи, здатний на набагато більше. А це вже дійсно вагомий плюс на користь Bootstrap.
Відео: Twitter Bootstrap - Верстка PSD Макета - Частина 1
Зараз проект знаходиться на стадії розвитку, незважаючи на те, що запущений він був ще в 2011 і з тих пір на ньому почали працювати тисячі людей. Будемо сподіватися, що розробники будуть і далі спрощувати роботу з веб-дизайном і допомагати людям створювати щось нове, індивідуальне і корисне світу.
