Klasa

Klasy Bootstrapa są definiowane jako atrybuty HTML, które można dodać do elementów strony w celu dostosowania ich wyglądu i zachowania. Na przykład, jeśli chcesz dodać styl przycisku do elementu HTML <button>, możesz dodać klasę "btn" do tego elementu.

Przykłady klas w Bootstrapie:

Więcej znajdziesz tutaj: Bootstrap Docs

Przykład użycia klas Bootstrapa

								
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <h1>Nagłówek</h1>
      <p>Lorem ipsum dolor son justo malesuada bibendum.</p>
      <button type="button" class="btn btn-primary">Przycisk</button>
    </div>
    <div class="col-sm-6">
      <img src="rainbow.jpg" alt="Obraz" class="img-responsive">
    </div>
  </div>
</div>

Wyjaśnienie

Klasa "container" definiuje kontener, który ogranicza szerokość treści na stronie. Klasa "row" definiuje wiersz w kontenerze. Klasy "col-sm-6" definiują dwie kolumny o równej szerokości (50% szerokości wiersza) w wierszu dla widoku na małych i większych ekranach (dla ekranów o szerokości większej lub równej 576 pikseli). Element <h2> i <p> są zwykłymi elementami HTML. Klasa "btn btn-primary" definiuje przycisk z domyślnym stylem i kolorystyką przycisku głównego. Element <img> ma klasę "img-responsive", która sprawia, że obraz dostosowuje się do szerokości kontenera.

Notatka

Klasy Bootstrapa pozwalają na szybkie projektowanie responsywnych interfejsów użytkownika, ponieważ dostarczają one gotowe style i funkcjonalności, które można łatwo dostosować do własnych potrzeb.