Twitter Bootstrap

Писати сайт з нуля дуже складно. Навіть досвідчені розробники, обізнані з такими мовами, як javascript, HTML і CSS, стикаються з різного роду проблемами під час робочого процесу. На щастя, розробники і дизайнери Twitter вирішили внести свій вклад до вирішення даної проблеми і запустили фреймворк під назвою Bootstrap, який призначений для спрощення життя дизайнерів і веб-розробників. 

У цій статті ми познайомимося з Bootstrap і спробуємо на практиці деякі компоненти, для того, щоб переконатися, що даний фреймворк дійсно спрощує роботу над
створенням сайту.

Знайомство з Bootstrap

Bootstrap - це дуже потужний фреймворк, оснащений великим арсеналом готових компонентів, які потрібні при розробці, практично, будь-якого сайту:

* CSS-сітка для побудови адаптивного веб-дизайну
* CSS-код оформлення тексту, кнопок, форм, таблиць і зображень
* Елементи користувацького інтерфейсу: навігація, відсоток завантаження, спливаючі вікна, посторінкове розбиття контенту, “хлібні крихти” і так далі. Всі дані елементи також гарно оформлені CSS правилами
* jQuery-плагіни для використання інтерактивних елементів сайту

Для подальшої роботи вам необхідно скачати Bootstrap і підключити файли бібліотеки:

<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.min.js" type="text/javascript"></script>

Тепер можна працювати!

CSS: Кнопки

У Bootstrap-пі закладені CSS-правила для стилізації HTML-елементів, включаючи 'button'. Даний елемент використовується дуже часто, тому в Bootstrap-пі для нього створили спеціальний клас btn:

<button type="button" class="btn">Default Button</button>

Результат відображення ви можете побачити нижче:

Також ми можемо скористатися і іншими класами для кнопок, аби позначити їх роль:

<button type="button" class="btn btn-success">Button</button>
<button type="button" class="btn btn-warning">Button</button>
<button type="button" class="btn btn-danger">Button</button>

Залежно від ролі кнопки, вона буде забарвлена в різні кольори:

Доречно зауважити, при розробці стилів Bootstrap використовували інструмент LESS. Якщо ви захочете якимось чином змінити стандартний вигляд кнопок, то враховуйте це.

Наприклад, якщо ми хочемо змінити колір кнопки з класом btn-success, то просто скоректуйте відповідну змінну, потім пропустіть код через LESS.

@btnSuccessBackground:              #bce895; //#62c462;
@btnSuccessBackgroundHighlight:     #a0cd78; //#51a351;

Такі елементи, як тінь, градієнт, автоматично конфігуруватимуться під нові умови:

Елементи користувацького інтерфейсу

Bootstrap також містить елементи користувацького інтерфейсу: навігація, відсоток завантаження, спливаючі вікна, посторінкове розбиття контенту, “хлібні крихти” і так далі. Додати ці елементи так само просто, як і оформити кнопку. Давайте візьмемо попередній приклад і помістимо всі кнопки в групу:

<div class="btn-group">
<button type="button" class="btn btn-success">Button</button>
<button type="button" class="btn btn-warning">Button</button>
<button type="button" class="btn btn-danger">Button</button>
</div>

Тепер наші кнопки обернуті в div з класом btn-group:

Також ми можемо скористатися і іншими класами для зміни позиціювання групи кнопок. Наприклад, виставимо їх вертикально. Для цього додамо клас btn-group-vertical:

<div class="btn-group btn-group-vertical">
<button type="button" class="btn btn-success">Button</button>
<button type="button" class="btn btn-warning">Button</button>
<button type="button" class="btn btn-danger">Button</button>
</div>

jQuery-плагіни

Ми до цих пір пам'ятаємо той час, коли наші сайти були статичними, і ми довго шукали якісь плагіни для додавання інтерактивних елементів. Тепер цього робити не треба, тому що в Bootstrap-пі є купа jQuery-плагінів для створення акордеонів, спливаючих підказок, модальних і спливаючих вікон, табів і іншого..

У наступному прикладі ми застосуємо плагін Tooltip:

<p id="container">Jujubes icing oat cake 
<a href="#" rel="tooltip" title="a Lolipop Tiramissu?">lollipop tiramisu</a>. 
Tiramisu sesame snaps croissant chupa chups chupa chups chocolate cake candy sugar plum 
jelly beans. Lollipop pudding jelly sweet jujubes cookie pudding. Oat cake topping gummi 
bears oat cake. Muffin jelly-o cake sesame snaps ice cream cotton candy.</p>

Просимо звернути увагу на те, що ми додали посиланню атрибут rel і title. Таким чином, підказка виникне, коли ми підведемо мишу до слова. Для активації плагіну, напишемо скрипт:

$('#container').tooltip({
    selector: "a[rel=tooltip]"
});

Даний скрипт перетворюватиме всі посилання, в яких атрибут rel рівний tooltip в елементі з id = container.

Ось так ось просто у наш час. :) Раніше підключення різних плагінів могло викликати помилки, конфлікти змінних. Тепер же, при використанні Bootstrap jQuery-плагінів, такого не станеться.

Налаштування під себе

Насправді Bootstrap - дійсно гігантська бібліотека, і можливо, для ваших потреб вона не потрібна в повному об'ємі. Саме тому творці надають спеціальну сторінку, де ми можемо вибрати лише ті компоненти, які нам потрібні.

Посилання на оригінал статті  http://goo.gl/qybw8r