Як використовувати bootstrap практичні приклади

На російськомовному сайті натисніть в головному меню на вкладку Компоненти. Відразу ж бачимо на ній опис доступних іконок, які можна використовувати.

Це більше 200 іконок, які ви можете використовувати абсолютно безкоштовно. Зараз ми якраз дізнаємося, як можна їх використовувати. Справа в документації нас чекає дуже зрозуміле меню, з підпунктами для кожного компонента:

У вкладці "Приклади" ви і можете взяти код, а також побачити результат. Давайте я прямо зараз візьму 1 приклад з документації і на його прикладі поясню вам, як все працює:

Це удвічі хороший приклад, тому що тут використовується не тільки іконка, а й кнопка. Отже, всередині кнопки поміщаємо іконку, ось такий результат вийшов:

Щоб вставити іконку на веб-сторінку, використовуйте тег span, йому потрібно задати 2 класу. Перший - це загальний стильовий клас glyphicon, який задає загальні стилі для всіх іконок. Другий клас - glyphicon-назва-іконки. Назва ви можете подивитися в документації.

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

По-перше, змінилося ім'я іконки. По-друге, колір кнопки. По-третє, її розмір, він став трохи менше. Зауважте, що замість btn-default я прописав в даному випадку клас btn-info, а замість btn-lg - btn-md. Ось така мила кнопка вийшла в підсумку:

Справа в тому, що в фреймворк спочатку закладені деякі кольори і розміри елементів. З іконками ми вже розглянули приклад, давайте розглянемо, як формуються кнопки. Ви можете за допомогою заздалегідь прописаних класів швидко змінити потрібні параметри.

Для формування кнопки, потрібен клас btn. Це загальний клас, як ви вже зрозуміли. Всі інші класи додаються за бажанням. Наприклад, btn-success фарбує кнопку в зелений колір, info - в блакитний, danger - в червоний. Давайте змінимо в коді назва класу на danger:

Тобто ось так це все працює. Відповідно, крім цих класів є інші, що відповідають за розмір кнопки. Це класи btn-lg -md -sm -xs. Ось так змінюються розміри кнопок в залежності від класу:

Природно, lg (large) це найбільший розмір, а xs - найменший. Знову ж таки, всі ці приклади є в документації.

Давайте розглянемо ще кілька прикладів. Наприклад, як зробити спливаюче меню. У документації все дуже добре описано. Перейдіть в пункт випадають меню - спливаюче. Знову ж таки, ви можете просто скопіювати код і змінити його під свої потреби:

Наприклад, я змінив його в такий спосіб:

Клас dropdown у головного контейнера для такого меню відповідає за те, в якому напрямку буде розкриватися меню - вгору або вниз. У прикладі з документації воно розкривається вгору, тому що там вказано клас dropup. Ми ж у нашому прикладі змінили всього декілька букв в назві класу і вже змінили напрямок розкриття.

Плюс використання фреймворка в тому, що він дозволяє вам дуже просто реалізувати ті речі, які з нуля довелося б робити набагато довше, особливо новачкові.

Ну і давайте розглянемо останній приклад, після чого я покажу вам, як змінювати зовнішній вигляд елементів. Наприклад, подивимося, як зробити хлібні крихти. Це зовсім просто. Знаходимо в документації відповідний пункт. До слова, він називається Навігаційні ланцюжки. Дивимося приклад коду, який пропонують нам розробники, копіюємо собі і переробляємо.

Як бачите, тут нічого складного. Всього лише нумерований список, з яким потрібно задати клас breadcumb. Далі просто перераховуємо наші пункти, активному потрібно задати додатковий клас active, щоб він відрізнявся по стильовому оформленню.

Як змінити зовнішній вигляд елементів?

Найпростіший спосіб - створити окремий css-файл, в якому ви будете писати все, що безпосередньо стосується зовнішнього вигляду ваших елементів. Наприклад, візьмемо ті ж самі хлібні крихти, які ми зробили. Припустимо, нам потрібно по дизайну змінити фоновий колір всього блоку, а також колір самого тексту.

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

Залишається додати клас custom нашим хлібним крихтам:

Ось вони, хлібні крихти, які стилізували ми, але створив нам Bootstrap, тому ми економимо чимало часу, так як css-код не потрібно писати повністю з нуля.

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

Я приведу вам ще один приклад, щоб ви вже напевно розуміли, як використовувати свої власні стилі для елементів bootstrap. Припустимо, вам потрібно зробити градієнтну кнопку. Природно, за замовчуванням bootstrap таку вам не намалює, вам самим потрібно прописати цей градієнт. Ми созданм кнопку штатними засобами bootstrap, прописуючи їй клас btn, ну також можна вказати розмір. При цьому дописуємо свій власний клас:

У цій разі наш клас - це custom-btn, такого в фреймворку просто немає, ми його опишемо самі з окремому файлі стилів:

Сподіваюся, алгоритм дій вам зрозумілий.

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

Ну а якщо ви хочете навчитися використовувати bootstrap для адаптивної верстки сайтів, то я пропоную вам пройти найкоротший і дуже ефективний шлях, який складається з двох етапів:

Пройти наш безкоштовний курс по фреймворку. в якому ми зверстати дуже простий, але все-таки реальний макет сайту. Це буде ваша перша практика.

Пройти знову ж наш курс, на цей раз платний. але в ньому ви зверстати вже більш складні макети, в тому числі професійний шаблон інтернет-магазину, а також ідеальний landing page. Природно, все це буде мати адаптивний дизайн.

Вибір за вами, ну а я буду прощатися і бажати вам якнайшвидшого вивчення цього фреймворку, щоб уже найближчим часом ви легко створювали власні професійні сайти з його допомогою.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі