webattack.pl - Bootstrap

Bootstrap

Wstęp

Bootstrap to biblioteka CSS, która bazuje na siatce składającej się z 12 kolumn.

Pierwsze kroki:

Ze strony:


https://getbootstrap.com/docs/versions/

wybieramy najnowszą wersję Bootstrap, w naszym przypadku jest to wersja 5.2
Kopiujemy następująca linijkę kodu:


link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"

i wklejamy ją do pliku HTML w sekcji <head></head>

Podstawowe klasy

klasa	opis
`class="container"`	kontener
`class="container-fluid"`	rozciągnięty kontener
`class="row"`	wiersz
`class="col"`	kolumna
`class="col border"`	kolumna z obramowaniem
`class="col-[prefix]-[szerokość_kolumny]"`	możliwe prefixy: sm, md, lg, xl, xxl szerokość kolumny to wartość od 1 do 12

Punkty przerwania w Bootstrap

punkt przerwania	symbol	wymiary
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Szerokości kolumn.

symbol	opis

col	kolumna o nieokreślonej szerokości
col-1	pojedyncza szerokość
col-2	podwójna szerokość
col-3	potrójna szerokość
col-4	poczwórna szerokość
col-5	pięciokrotna szerokość
col-6	sześciokrotna szerokość
col-7	siedmiokrotna szerokość
col-8	ośmiokrotna szerokość
col-9	dziewięciokrotna szerokość
col-10	dziesięciokrotna szerokość
col-11	jedenastokrotna szerokość
col-12	dwunastokrotna szerokość

Minimalna szerokość - Min-width

Zakres zapytań o punkty przerwania:


@include media-breakpoint-up(sm) { ... }

@include media-breakpoint-up(md) { ... }

@include media-breakpoint-up(lg) { ... }

@include media-breakpoint-up(xl) { ... }

@include media-breakpoint-up(xxl) { ... }

czyli:


@media (min-width: 576px) { ... }



@media (min-width: 768px) { ... }



@media (min-width: 992px) { ... }



@media (min-width: 1200px) { ... }



@media (min-width: 1400px) { ... }

Utowrzenie prostej siatki


<div class="container">

<div class="row">

	    <div class="col border">1</div>

	    <div class="col border">2</div>

</div>

<div class="row">

	    <div class="col border">3</div>

	    <div class="col border">4</div>

</div>

</div>

wyświetl przykład

Utowrzenie prostej siatki z obramowaniem


<div class="container-fluid">

<div class="row">

	    <div class="col border">1</div>

	    <div class="col border">2</div>

</div>

<div class="row">

	    <div class="col border">3</div>

	    <div class="col border">4</div>

</div>

</div>

wyświetl przykład

Brak ustalenia szerokości kolumn.


<div class="container">

<div class="row">

	    <div class="col">

		        <p>Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

	    </div>

	    <div class="col">

		        <p>Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. </p>

	    </div>

	    <div class="col">

		        <p>Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło.</p>

	    </div>

</div>

</div>

wyświetl przykład

Klasa col-12 ma szerokość 12 kolumn.


<div class="container">

<div class="row">

	    <div class="col-12">

		        <p>Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

	    </div>

	    <div class="col-12">

		        <p>Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. </p>

	    </div>

	    <div class="col-12">

		        <p>Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło.</p>

	    </div>

</div>

</div>

wyświetl przykład

Klasa col-6 ma szerokość 6 kolumn.


<div class="container">

<div class="row">

	    <div class="col-6">

		        <p>Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

	    </div>

	    <div class="col-6">

		        <p>Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. </p>

	    </div>

	    <div class="col-6">

		        <p>Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło.</p>

	    </div>

</div>

</div>

wyświetl przykład

Klasa col-4 ma szerokość 4 kolumn.


<div class="container">

<div class="row">

	    <div class="col-4">

		        <p>Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

	    </div>

	    <div class="col-4">

		        <p>Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. </p>

	    </div>

	    <div class="col-4">

		        <p>Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło.</p>

	    </div>

</div>

</div>

wyświetl przykład

Klasa col-2 ma szerokość 2 kolumn.


<div class="container">

<div class="row">

	    <div class="col-2">

		        <p>Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

	    </div>

	    <div class="col-2">

		        <p>Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. </p>

	    </div>

	    <div class="col-2">

		        <p>Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło.</p>

	    </div>

</div>

</div>

wyświetl przykład

Klasa col-1 ma szerokość 1 kolumny.


<div class="container">

<div class="row">

	    <div class="col-1">

		        <p>Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

	    </div>

	    <div class="col-1">

		        <p>Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. </p>

	    </div>

	    <div class="col-1">

		        <p>Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło.</p>

	    </div>

</div>

</div>

wyświetl przykład

Połączenie kilku klas np. col-6 col-4 col-2


<div class="container">

<div class="row">

	    <div class="col-6">

		        <p>Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

	    </div>

	    <div class="col-4">

		        <p>Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. </p>

	    </div>

	    <div class="col-2">

		        <p>Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło.</p>

	    </div>

</div>

</div>

wyświetl przykład

Ustalenie przełamania kolumn.

Ustalenie przełamania kolumn dla rozdzielczości 576px.


<div class="container">

<div class="row">

	    <div class="col-sm-4">

		        <p>Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

	    </div>

	    <div class="col-sm-4">

		        <p>Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. </p>

	    </div>

	    <div class="col-sm-4">

		        <p>Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło.</p>

	    </div>

</div>

</div>

wyświetl przykład

Ustalenie przełamania kolumn dla rozdzielczości 768px.


<div class="container">

<div class="row">

	    <div class="col-md-4">

		        <p>Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

	    </div>

	    <div class="col-md-4">

		        <p>Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. </p>

	    </div>

	    <div class="col-md-4">

		        <p>Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło.</p>

	    </div>

</div>

</div>

wyświetl przykład

Ustalenie przełamania kolumn dla rozdzielczości 992px.


<div class="container">

<div class="row">

	    <div class="col-lg-4">

		        <p>Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

	    </div>

	    <div class="col-lg-4">

		        <p>Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. </p>

	    </div>

	    <div class="col-lg-4">

		        <p>Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło.</p>

	    </div>

</div>

</div>

wyświetl przykład

Ustalenie przełamania kolumn dla rozdzielczości 1200px.


<div class="container">

<div class="row">

	    <div class="col-xl-4">

		        <p>Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

	    </div>

	    <div class="col-xl-4">

		        <p>Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. </p>

	    </div>

	    <div class="col-xl-4">

		        <p>Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło.</p>

	    </div>

</div>

</div>

wyświetl przykład

Ustalenie przełamania kolumn dla rozdzielczości 1400px.


<div class="container">

<div class="row">

	    <div class="col-xxl-4">

		        <p>Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. Koko dżambo i do przodu. </p>

	    </div>

	    <div class="col-xxl-4">

		        <p>Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. Koko Koko Euro spoko. </p>

	    </div>

	    <div class="col-xxl-4">

		        <p>Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło. Hej ho hej ho do pracy by się szło.</p>

	    </div>

</div>

</div>

wyświetl przykład