Як використовувати Bootstrap?

39

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

В принципі, ви повинні знати, що у фреймворку Bootstrap дуже хороша документація. Практично, вам залишається тільки читати її і брати з неї потрібні фрагменти коду. На сайті getbootstrap.com документація представлена англійською мовою, якщо вам потрібна російською, то перейдіть в розділ Getting Started, спустіться вниз і знайдіть там російський переклад. Я говорив про це вже не раз, але вирішив ще раз згадати в цій статті, раптом ви не знали.

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

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

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

Star

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

Щоб вставити іконку на веб-сторінку, використовуйте тег 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 – найменший. Знову ж таки, всі ці приклади є в документації.

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

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

Виберіть посилання

Toggle Dropdown

  • Посилання 1
  • Посилання 2
  • Посилання 3

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

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

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

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

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

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

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

    .custom{
    background: #182E49;
    }
    .custom li a{
    color: #fff;
    font-weight: bold;
    }

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

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

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

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

    Кнопка

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

    .custom-btn{
    background: linear-gradient(to bottom, #30918B, #2B5882);
    color: #fff;
    }

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

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

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

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

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

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