Основні компоненти 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)

Карти в Bootstrap є гнучкими контейнерами, які можуть містити різні типи контенту, такі як текст, зображення, відео, посилання тощо.

<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 забезпечує безліч класів для стилізації форм, що робить їх вигляд більш привабливим та професійним.

<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, щоб створювати сучасні та зручні веб-додатки.