Знайомство з bootstrap
Привіт, дорогі друзі! У сьогоднішній статті, я хочу розповісти Вам про сучасному CSS фреймворк - Bootstrap. Хто не в курсі, фреймворк - це каркас для роботи над проектом, набір готових функцій і рішень для швидкої та ефективної розробки.
Даний CSS Фреймворк володіє величезним списком css властивостей, для стилізації, положення, реалізації необхідних елементів на сторінці тим або іншим чином з мінімум зусиль. По суті, все що Вам буде потрібно - це поставити необхідні класи і атрибути елементів сторінки, які ви хочете видозмінити за допомогою даного інструменту Bootstrap. Але про це пізніше ..
Так само, в даний Фреймворк інтегрований Jquery UI (User Interface), який з легкістю допоможе в створенні різних візуальних ефектів: модальні вікна, спливаючі підказки, слайдери тощо. І все це на підставі властивостей і шаблонів Bootstrap.
Щоб підключити Фреймворк в Ваш проект, необхідно завантажити архів з таблицею стилів і Jquery бібліотекою Bootstrap.
завантажити Bootstrap
Разархівіруйте вміст завантаженого архіву в Ваш проект. Архів містить три папки js, css, img. Розподіліть їх вміст відповідно до структури Вашого проекту, виключно для зручності.
Папку img, так само, можете помістити в директорію styles /. У цій папці зберігаються спрайт іконок в білих і чорних кольорах. Дані іконки використовуються певними css властивостями для стилізації елементів форм, списків і т.д.
Від теорії до практики?
У повному обсязі інструмент Bootstrap має дуже великий і гнучкий набір властивостей для роботи з елементами на веб-сторінці. Розглянемо деякі приклади, щоб мати загальну картину його роботи.
Створення структури сайту
Візьмемо для прикладу контейнер (обгортку) сайту і всередині зробимо потрібну кількість плаваючих колонок.
Що ми бачимо? У нас вийшов двох стовпчик макет сайту, з плаваючою структурою фіксованої ширини. У чому логіка роботи? За замовчуванням макет ділитися на 12 колонок (span *) c шириною за замовчуванням 940px.
Для початку ми задаємо нашого блоку контейнера клас container - він говорить про те, що структура блоку буде плаваючою, але з фіксованою шириною в 940px. Далі, всередині контейнера, ми задаємо блок з класом row - він визначає вже батьківський блок-рядок для наших плаваючих колонок з фіксованою шириною. Тепер усередині цього батьківського елемента, під кожну колонку ми задаємо свій div з класом span *, де * - це кількість колонок макета (виходячи від 12), які буде займати цей блок.
У моєму прикладі, лівий блок займає 4 колонки, а правий 8, з таким співвідношенням і отримуємо стабільний двох-стовпчик макет.
НЕ забувайте про те, що кількість дочірніх колонок не повинно перевищувати значення батька. Тобто, в елемент з класом span4 не можна вкласти 5 блоків span1 або блок span5. Я думаю, логіку ви вловили.
Якщо Вам необхідно створити гумовий макет, то використовуйте разом класу .container клас .conteiner-fluid. і так само замість .row.row-fluid. Це дозволяє розраховувати ширину блоків щодо ширини батьківського елементу.
Щоб використовувати даний функціонал, необхідно підключити спеціальний meta-тег, а так само спеціальну таблицю стилів, яка так само входить до складу завантаженого Ваші архіву.
Таким чином, якщо потрібно відображати сайт на різних пристроях, з різним дозволом, то необхідно використовувати таблицю стилів bootstrap-responsive.css і гумову верстку (класи fluid).
Будь-які форми, таблиці - це просто
C допомогою bootstrap, Ви з легкістю можете створювати будь-які форми, таблиці на сайт, в потрібному Вам виді.
Ми створили звичайну таблицю із закругленими кутами, добре Новомосковскбельную, при наведенні рядки виділяються кольором.
Всього цього ми досягли, за рахунок додавання в тег