Bootstrap 5 to najnowsza wersja frameworka Bootstrap, która pozwala użytkownikom tworzyć responsywne strony z podejściem mobilnym. Bootstrap 5 ma wiele wyróżniających się funkcji, takich jak szybkie arkusze stylów i ulepszona reakcja. Podstawową koniecznością tych ram jest pojemnik do owinięcia elementów pojawiających się na stronie internetowej. Pojemnik to najbardziej fundamentalny układ bootstrap 5, który będziemy omawiać dogłębnie w tym artykule.

Zaczynajmy.

Co to są pojemniki

Jak już wspomniano, kontenery są uważane za najbardziej fundamentalny układ bootstrap 5. Te jednostki obejmują w nich elementy wraz z pewnym wyściółką i marginesem. Ponadto są one niezbędne do budowy układu siatki.

Istnieje w sumie trzy typy kontenerów w bootstrap 5, które zaciągnęliśmy poniżej.

1. Pojemniki o stałej szerokości
2. Pojemniki o pełnej szerokości
3. Pojemniki z responsywnymi punktami przerwania

Omówmy je szczegółowo.

Pojemniki o stałej szerokości

Możesz utworzyć responsywny pojemnik o stałej szerokości za pomocą .klasa kontenera. Ta szerokość zmieni się w zależności od rodzaju urządzenia i rozmiaru ekranu. Teraz zbadajmy ten typ pojemnika z przykładem.

Przykład

Tutaj owijamy niektóre treści za pomocą kontenera o stałej szerokości.

Html

Oto przede wszystkim Bootstrap 5, dodając CDN dla CSS i JavaScript w znaczniku naszego pliku HTML.

Html

Witaj świecie

Bootstrap 5 jest niesamowity.

Uczymy się rodzajów pojemników w Bootstrap 5.

Jest to demonstracja pojemnika o stałej szerokości, który używa .klasa kontenera.

Teraz tworzymy kontener Div i przypisujemy go pojemnik klasowy. Wtedy go zagnieżdżyliśmy

, i trzy

elementy w tym kontenerze Div.

Wyjście

Pokazamy wyjście przy losowych rozmiarach ekranu. Na przykład wyjście na 699px i powyżej pokazano poniżej.

Na 351px i mniej.

.pojemnik klasa została wdrożona pomyślnie.

Pojemniki o pełnej szerokości

W celu tworzenia pojemników o pełnej szerokości Użyj .Pojemnik-płyn klasa. Szerokość pojemnika wynosi 100% bez względu na rozmiar ekranu. Przedstawiony poniżej przykład pokazuje pojemnik na pełną szerokość.

Html

Witaj świecie

Bootstrap 5 jest niesamowity.

Uczymy się rodzajów pojemników w Bootstrap 5.

Jest to demonstracja użytego pojemnika o stałej szerokości .klasa kontenera.

Tutaj używamy .klasa pojemnika na kontenera, aby utworzyć element div i gniazdować nagłówek, a niektóre akapity wewnątrz tego Div.

Wyjście

Pokazamy wyjście przy losowych rozmiarach ekranu. Pierwsze wyjście dotyczy szerokości ekranu 700px i powyżej.

Na 355px i poniżej.

.Pojemnik-płyn klasa działa poprawnie.

Pojemniki z responsywnymi punktami przerwania

Możesz także utworzyć kontenery, które zachowają 100% szerokości, dopóki nie zostanie określony punkt przerwania. Oznacza to, że szerokość zacznie się zmieniać po tym konkretnym punkcie przerwania. Aby uzyskać lepsze zrozumienie, pokazaliśmy tutaj przykład.

Przykład

Tutaj pokazaliśmy wszystkie wyżej wymienione punkty przerwania.

Możesz także utworzyć kontenery, które zachowają 100% szerokości, dopóki nie zostanie określony punkt przerwania. Oznacza to, że szerokość zacznie się zmieniać po tym konkretnym punkcie przerwania. Aby uzyskać lepsze zrozumienie, pokazaliśmy tutaj przykład.
Przykład
Tutaj pokazaliśmy wszystkie wyżej wymienione punkty przerwania.
[cce_html szerokość = "100%" height = "100%" ECPAPED = "true" Theme = "Blackboard" newrap = "0"]
Mały
Średni
Duży
Bardzo duży
Dodatkowe duże

W powyższym kodzie utworzyliśmy pięć kontenerów Div i każdy z nich przypisano określoną klasę odpowiadającą określonemu punktowi przerwania.

Wyjście

Punkty przerwania zostały pomyślnie wdrożone.

Notatka: Odwiedź oficjalną stronę internetową Bootstrap 5, aby sprawdzić szerokości różnych kontenerów w Bootstrap 5 w niektórych punktach przerwania.

Wniosek

Pojemniki są uważane za najbardziej fundamentalny układ bootstrap 5, które są używane do owinięcia elementów w nich wraz z pewnym wyściółką i marginesem. Ponadto są one niezbędne do budowy układu siatki. Istnieje w sumie trzy typy kontenerów; pojemniki o stałej szerokości, pojemniki o pełnej szerokości i pojemnik z responsywnymi punktami przerwania. Istnieją pewne wbudowane klasy związane z tymi pojemnikami. Wszystkie te typy pojemników są wyjaśnione w artykule wraz z odpowiednimi przykładami.