Manipulacja stylami CSS

Bootstrap 5 jest biblioteką stylów CSS, która zapewnia wiele gotowych stylów i komponentów, które możesz wykorzystać na swojej stronie internetowej. Jednak czasami będziesz chciał dostosować styl elementu do swoich potrzeb. W tym celu możesz użyć różnych technik manipulacji stylami CSS w Bootstrap 5.

Nadpisanie stylów CSS Bootstrapa

Jeśli chcesz zmienić styl elementu, który jest już stylizowany przez Bootstrapa, możesz nadpisać styl Bootstrapa, używając własnych stylów CSS. Aby to zrobić, dodaj nową klasę CSS do elementu i nadpisz odpowiednie właściwości CSS. Na przykład, jeśli chcesz zmienić kolor przycisku Bootstrapa, możesz użyć poniższego kodu CSS:

							
/* CSS */
.btn-custom {
  background-color: red;
  color: white;
}

							
<!-- HTML -->
<button class="btn btn-primary btn-custom">Custom Button</button>

Wykorzystanie zmiennych CSS Bootstrapa

Bootstrap 5 wprowadza zmienną CSS, która umożliwia łatwe dostosowanie stylów do potrzeb projektu. Aby skorzystać z tych zmiennych, musisz użyć właściwości var() w swoim stylu CSS i przypisać im wartości zmiennych Bootstrapa. Na przykład, jeśli chcesz dostosować kolor tła całej strony internetowej, możesz użyć poniższego kodu CSS:

							
body {
background-color: var(--bs-primary);
}

Dodawanie stylów CSS do konkretnych komponentów Bootstrapa

W Bootstrapie 5 każdy komponent ma swoją klasę CSS. Możesz dodać swoje własne style do konkretnego komponentu, dodając je po prostu do klasy komponentu. Na przykład, jeśli chcesz dodać dodatkowy margines do elementu typu card Bootstrapa, możesz użyć poniższego kodu CSS:

							
/* CSS */
.card {
  margin-bottom: 20px;
}

							
<!-- HTML -->
<div class="card">
<div class="card-body">
  <h5 class="card-title">Card Title</h5>
  <p class="card-text">Some quick example text to build on the of the content.</p>
  <a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

Używanie pseudo-selektorów CSS

Bootstrap 5 wykorzystuje wiele pseudo-selektorów CSS, które pozwalają na dostosowanie stylów w zależności od stanu elementu. Na przykład, jeśli chcesz zmienić kolor tekstu przycisku, gdy jest najechany, możesz użyć poniższego kodu CSS:

							
/* CSS */
.btn:hover {
  color: pink;
}

							
<!-- HTML -->
<button class="btn btn-primary">Button</button>

Ważne

Zmienne CSS są zdefiniowane w pliku bootstrap.scss i można do nich odwoływać się w innych plikach CSS.

Notatka

Bootstrap 5 daje dużą swobodę w manipulacji stylami CSS, co umożliwia dostosowanie wyglądu stron internetowych do indywidualnych potrzeb i preferencji.