Стаття Створення Адаптивних Веб-Додатків з Використанням Bootstrap

LITVINOV · 23.01.24

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

1. Встановлення Bootstrap
Перш кроком є включення Bootstrap у ваш проект. Ви можете встановити його через CDN або завантажити локально. Додайте наступний код в розділ <head> вашого HTML-файлу:

HTML:

<link rel="stylesheet" href="[URL]https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css[/URL]">
<script src="[URL]https://code.jquery.com/jquery-3.2.1.slim.min.js[/URL]"></script>
<script src="[URL]https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js[/URL]"></script>

2. Основи сітки Bootstrap
Bootstrap надає потужну сітку, яка робить сторінки адаптивними. Використовуйте класи container, row та col для розміщення та розташування елементів.

HTML:

<div class="container">
 <div class="row">
   <div class="col-sm-6">
     <!-- Ваш контент тут -->
   </div>
   <div class="col-sm-6">
     <!-- Ваш контент тут -->
   </div>
 </div>
</div>

3. Адаптивні зображення
Bootstrap надає класи для адаптивних зображень, які підлаштовуються під розмір екрану.

HTML:

<img src="[URL='http://example.jpg']example.jpg[/URL]" class="img-fluid" alt="Адаптивне зображення">

4. Навігація Bootstrap
Створіть адаптивне меню навігації з використанням класу navbar.

HTML:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
 <a class="navbar-brand" href="#">Ваш логотип</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
   <span class="navbar-toggler-icon"></span>
 </button>
 <div class="collapse navbar-collapse" id="navbarNav">
   <ul class="navbar-nav">
     <li class="nav-item active">
       <a class="nav-link" href="#">Головна <span class="sr-only">(Поточна)</span></a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Про нас</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" href="#">Контакти</a>
     </li>
   </ul>
 </div>
</nav>

5. Використання Карток Bootstrap
Картки (cards) ідеально підходять для представлення контенту на різних пристроях.

HTML:

<div class="card" style="width: 18rem;">
<img src="[URL='http://card-image.jpg']card-image.jpg[/URL]" class="card-img-top" alt="Зображення картки">
 <div class="card-body">
   <h5 class="card-title">Назва картки</h5>
   <p class="card-text">Опис контенту картки.</p>
   <a href="#" class="btn btn-primary">Детальніше</a>
 </div>
</div>

6. Модальні вікна Bootstrap
Модальні вікна дозволяють створювати спливаючі вікна для додаткової інформації чи дій.

HTML:

<!-- Кнопка для виклику модального вікна -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
 Відкрити модальне вікно
</button>


<!-- Модальне вікно -->
<div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Заголовок модального вікна</h5>
       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <div class="modal-body">
       <!-- Вміст модального вікна -->
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрити</button>
       <button type="button" class="btn btn-primary">Зберегти зміни</button>
     </div>
   </div>
 </div>
</div>

7. Валідація форм Bootstrap
Використовуйте класи Bootstrap для створення красивих та ефективних форм з валідацією.

HTML:

<form>
 <div class="form-group">
   <label for="exampleInputEmail1">Email адреса</label>
   <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Введіть email">
   <small id="emailHelp" class="form-text text-muted">Ми ніколи не передамо вашу електронну адресу кому-небудь іншому.</small>
 </div>
 <div class="form-group">
   <label for="exampleInputPassword1">Пароль</label>
   <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Пароль">
 </div>
 <button type="submit" class="btn btn-primary">Відправити</button>
</form>

8. Кастомізація Bootstrap
Bootstrap дозволяє легко кастомізувати вигляд та стиль вашого веб-додатку. Використовуйте Bootstrap Theme Generator або налаштовуйте змінні у власному CSS файлі:

CSS:

/* Приклад зміни основного кольору */
:root {
 --primary-color: #3498db;
}


/* Застосування зміни до кнопок */
.btn-primary {
 background-color: var(--primary-color);
 border-color: var(--primary-color);
}

9. Використання Flexbox та Grid
Для більшої гнучкості та контролю над розміщенням елементів, використовуйте CSS Flexbox та Grid разом із Bootstrap. Наприклад:

HTML:

<div class="d-flex justify-content-between">
 <div>Елемент 1</div>
 <div>Елемент 2</div>
 <div>Елемент 3</div>
</div>

10. Робота із JavaScript компонентами
Bootstrap постачається з численними JavaScript компонентами, такими як модальні вікна, каруселі, та інші. Вони можуть бути легко використані та налаштовані. Наприклад:

HTML:

<!-- Активація каруселі -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
 <div class="carousel-inner">
   <div class="carousel-item active">
<img src="[URL='http://slide1.jpg']slide1.jpg[/URL]" class="d-block w-100" alt="Перший слайд">
   </div>
   <div class="carousel-item">
<img src="[URL='http://slide2.jpg']slide2.jpg[/URL]" class="d-block w-100" alt="Другий слайд">
   </div>
 </div>
 <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="sr-only">Previous</span>
 </a>
 <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="sr-only">Next</span>
 </a>
</div>

11. Використання Респонсивних Класів
Bootstrap надає ряд класів, які дозволяють приховувати або відображати елементи на певних розмірах екрану.

HTML:

<!-- Приховати елемент на малих та середніх екранах -->
<p class="d-none d-md-block">Цей текст видно лише на великих екранах.</p>


<!-- Відобразити елемент на екранах нижче середнього -->
<p class="d-block d-md-none">Цей текст видно на малих та середніх екранах.</p>

12. Робота із Розкладкою Flexbox
Bootstrap використовує Flexbox для створення гнучких розкладок. Використовуйте класи d-flex, flex-row, та flex-column для визначення напрямку розташування елементів.

HTML:

<div class="d-flex flex-row">
  <div class="p-2">Елемент 1</div>
  <div class="p-2">Елемент 2</div>
  <div class="p-2">Елемент 3</div>
</div>

13. Використання Картинок-Фонів
Додайте стиль до свого веб-сайту за допомогою картинок-фонів та класу bg-*.

HTML:

<div class="bg-image" style="background-image: url('[URL='http://background.jpg']background.jpg[/URL]');">
 <!-- Ваш контент тут -->
</div>

14. Робота з Навігаційними Сторінками
Bootstrap дозволяє легко створювати навігаційні сторінки за допомогою класу pagination.

HTML:

<ul class="pagination">
 <li class="page-item"><a class="page-link" href="#">Попередня</a></li>
 <li class="page-item"><a class="page-link" href="#">1</a></li>
 <li class="page-item"><a class="page-link" href="#">2</a></li>
 <li class="page-item"><a class="page-link" href="#">3</a></li>
 <li class="page-item"><a class="page-link" href="#">Наступна</a></li>
</ul>

15. Адаптація До Темного Режиму
За допомогою властивостей Bootstrap можна легко створити темний режим для вашого веб-додатку.

HTML:

<body class="bg-dark text-light">
 <!-- Ваш контент тут -->
</body>

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

rullan · 25.01.24

Та ну нах... той бутстрап - потім стогнуть: оптимізуйте швидкість, конфлікт скриптів....
Тільки нативна верстка і необхідні скріпти...
Скільки намучився з тими бібліотеками слайдерів у Бутстрапі...

А саме круте це звязка Вордпрес + Елементатор + Бутсрап... Не дай Боже комусь мати з цим справу...

LITVINOV · 25.01.24

rullan сказав(ла):
Та ну нах... той бутстрап - потім стогнуть: оптимізуйте швидкість, конфлікт скриптів....
Тільки нативна верстка і необхідні скріпти...
Скільки намучився з тими бібліотеками слайдерів у Бутстрапі...
А саме круте це звязка Вордпрес + Елементатор + Бутсрап... Не дай Боже комусь мати з цим справу...

А мені подобається бутстрап, але якщо проект невеличкий, і чистий php без всяких cms... Бо верстати тоді, танці з бубном ще ті, ну і конфлікти скриптів будуть

rullan · 25.01.24

Administrator сказав(ла):
А мені подобається бутстрап, але якщо проект невеличкий, і чистий php без всяких cms... Бо верстати тоді, танці з бубном ще ті, ну і конфлікти скриптів будуть

Бутсрап був крутим коли не було флексів та грід...
Єдине коли можна використовувати це якщо потрібно швидко зробити і шаблон....

WOX.IN.UA - форум web розробників

Стаття Створення Адаптивних Веб-Додатків з Використанням Bootstrap

Інше...

LITVINOV

VIP user

rullan

Новенький

LITVINOV

VIP user

rullan

Новенький

Останні додані теми

Популярні теми

Нові ресурси