Основні компоненти Bootstrap

Bootstrap складається з низки ключових компонентів, які полегшують створення адаптивних та сучасних веб-інтерфейсів. Grid-система є фундаментальним елементом, що дозволяє розробникам створювати гнучкі та responsive макети за допомогою контейнерів, рядків та колонок. Вона підтримує 12-колоночну структуру та має чотири основні брейкпоїнти (xs, sm, md, lg), які забезпечують коректне відображення на різних типах пристроїв.

Не менш важливими є вбудовані компоненти інтерфейсу, серед яких навігаційні панелі (navbar), картки (cards), форми, модальні вікна, кнопки та компоненти для групування елементів. Кожен з цих компонентів має широкий спектр налаштувань та варіацій стилів, що дозволяє швидко створювати уніфіковані та естетичні інтерфейси. Додатково Bootstrap надає набір утилітарних класів для маніпуляції відступами, розмірами, кольорами та станами елементів.

Навігаційна панель (Navbar)

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</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="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

Карти (Cards)

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

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Форми (Forms)

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

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Основні класи Bootstrap

Класи сітки (Grid Classes)

Система сітки Bootstrap дозволяє створювати макети, які автоматично пристосовуються до різних розмірів екрану. Сітка складається з рядків (rows) та колонок (columns).

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Класи типографіки (Typography Classes)

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

<h1 class="display-1">Display 1</h1>
<p class="lead">This is a lead paragraph.</p>
<p class="text-muted">Muted text.</p>
<p class="text-primary">Primary text.</p>
<p class="text-center">Centered text.</p>

Класи утиліт (Utility Classes)

Утилітні класи Bootstrap дозволяють швидко застосовувати стилі, такі як відступи, вирівнювання, кольори фону та інші.

<div class="p-3 mb-2 bg-primary text-white">Primary background</div>
<div class="p-3 mb-2 bg-secondary text-white">Secondary background</div>
<div class="p-3 mb-2 bg-success text-white">Success background</div>

Підсумовуючи

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