Основи програмування

Bootstrap - це відкритий і безкоштовний HTML, CSS і JS фреймворк, який використовується веб-розробниками для швидкої верстки адаптивних дизайнів сайтів та веб-додатків.

Фреймворк Bootstrap використовується по всьому світу не тільки незалежними розробниками, але іноді й цілими компаніями. На Bootstrap створено дуже багато різних сайтів, подивитися на них можна на сторінці Bootstrap Expo.

Основна область його застосування - це розробка фронтенду сайтів та інтерфейсів адмінок. Серед аналогічних систем (Foundation, UIkit, Semantic UI, InK і ін.) Фреймворк Bootstrap є найпопулярнішим.

Чому Bootstrap такий популярний? Це пов'язано з тим, що він дозволяє верстати сайти в кілька разів швидше, ніж це можна виконати на «чистому» CSS і JavaScript. А в нашому світі час - це найдорожчий ресурс. Також його популярність пов'язана з доступністю. Вона полягає в тому, що на ньому навіть розробник-початківець  може верстати досить якісні макети, які важко було б виконати без глибоких знань веб-технологій і достатньої практики.

Фреймворк Bootstrap являє собою набір CSS і JavaScript файлів. Щоб його використовувати ці файли необхідно просто підключити до сторінки. Після підключення вам стануть доступні інструменти даного фреймворка: стовпчикова система (сітка Bootstrap), класи і компоненти.

Як це працює? Наприклад, щоб створити кнопку на сторінці за допомогою Bootstrap, досить до посилання або елементу button додати лише кілька класів.

Створення кнопки в Bootstrap 4:

<! - Щоб зробити посилання у вигляді кнопки додамо до неї 2 класу: btn і btn-success ->

<a href="#" class="btn btn-success"> Посилання, оформлене у вигляді кнопки </a>

А якщо, наприклад, потрібно створити вкладки, то для цього потрібно буде лише скопіювати готовий HTML фрагмент, і відредагувати його так, щоб в ньому була потрібна кількість вкладок:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <!-- атрибут href повинен вказувати на елемент, який необхідно показати -->
    <a class="nav-link active" data-toggle="tab" href="#section-1" role="tab" aria-controls="section-1" aria-selected="true">Секція 1</a>
  </li>
  <li class="nav-item">
    <!-- атрибут href повинен вказувати на елемент, який необхідно показати -->   
    <a class="nav-link" data-toggle="tab" href="#section-2" role="tab" aria-controls="section-2"
      aria-selected="false">Секція 2</a>
  </li>
  <li class="nav-item">
    <!-- атрибут href повинен вказувати на елемент, який необхідно показати -->    
    <a class="nav-link" data-toggle="tab" href="#section-3" role="tab" aria-controls="section-3"
      aria-selected="false">Секція 3</a>
  </li>
</ul>
<div class="tab-content">
  <!-- атрибут id визначає вкладку, яка буде його показувати -->     
  <div class="tab-pane fade show active" id="section-1" role="tabpanel" aria-labelledby="home-tab">...</div>
  <!-- атрибут id визначає вкладку, яка буде його показувати -->   
  <div class="tab-pane fade" id="section-2" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <!-- атрибут id визначає вкладку, яка буде його показувати --> 
  <div class="tab-pane fade" id="section-3" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Bootstrap складається з:

• сітки;
• класів для стилізації тексту, зображень, таблиць та іншого контенту;
• компонентів призначених для створення кнопок, різних форм на сторінці, горизонтальних і вертикальних навігаційних меню, слайдерів, випадаючих списків, акордеонів, модальних вікон, спливаючих підказок та інших елементів інтерфейсу;
• класів для вирішення допоміжних завдань найбільш часто виникають перед веб-розробниками (вирівнювання тексту, приховування або відображення елемента, завдання кольору і фону елементу, завдання margin і padding відступів, і ін.).

Перше, що потрібно зробити - це завантажити Bootstrap і підключити його до сторінки.

Наступне - навчитися працювати з сіткою. У Bootstrap вона використовується як для створення основного каркасу сторінки, так і для розмітки всього іншого. Як з нею працювати можна почитати в статті «Сітка в Bootstrap 3» або «Сітка в Bootstrap 4» в залежності від того скільки разів для розробки ви збираєтеся використовувати.

Далі - вивчити компоненти і класи Bootstrap.

Після вивчення цих базових речей вже можна буде переходити до верстки сайту або веб-додатків.

Переваги, які дає фреймворк Bootstrap при розробці на його основі frontend частини сайтів та інтерфейсів адмінок:

• висока швидкість створення якісної адаптивної верстки навіть початківцями веб-розробниками (досягається це завдяки використанню готових компонентів, створених професіоналами);
• кросбраузерність і кросплатформеність (коректне відображення та робота сайту у всіх підтримуваних цим фреймворком браузерах і операційних системах);
• наявність великої кількості готових добре продуманих компонентів, протестованих величезним співтовариством веб-розробників на різних пристроях;
• можливість налаштування під свій проект, досягається це за допомогою зміни SCSS змінних і використання Bootstrap Міксини (можна змінити кількість колонок, кольору, радіуса заокруглень кутів елементів, відступи між колонками і багато іншого);
• низький поріг входження; для роботи з фреймворком не обов'язково мати глибокі знання з HTML, CSS, JavaScript і jQuery (досить знати тільки основи перерахованих вище технологій);
• наявність добре продуманого дизайну компонентів і узгодженості (в Bootstrap всі компоненти виконані в єдиному стилі);
• наявність величезної спільноти, великої кількості статей, рецептів і відеоматеріалів; все це при бажанні допоможе не тільки добре розібратися в фреймворку, але і знайти відповіді практично на будь-які питання.

На Bootstrap, звичайно, верстають далеко не всі. Його не використовують, наприклад, для:

• створення фронтенду проектів з унікальним дизайном;
• розробки проектів, в яких замовник готовий платити за проект на «чистому» CSS і JavaScript (в більшості випадків така розробка здійснюється в команді, в якій кожен її учасник виконує якийсь свій певний набір функцій);
• верстки особистих проектів, якщо у вас є достатня кількість часу і ваш рівень знання технологій HTML, CSS і JavaScript достатній, щоб це здійснити.

Bootstrap, так і більшість подібних фреймворків, має недоліки. Серед них:

• більш великий розмір кінцевих CSS і JavaScript файлів, ніж якщо їх написати конкретно під цей проект на чистому CSS і JavaScript (це пов'язано з тим стилі і код JavaScript містять багато всього і на більшості сайтах потрібна тільки та чи інша частина з цього);
• використання Bootstrap для верстки сайтів, в яких знадобиться чимало переписування його CSS і JavaScript коду (простими налаштуваннями Bootstrap змінних тут не обійтися).

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