Siatka Bootstrap — duże urządzenia

Przykład siatki Bootstrap: duże urządzenia

W poprzednim rozdziale przedstawiliśmy przykład siatki z klasami dla małych i średnich urządzeń. Użyliśmy dwóch divów (kolumn) i daliśmy im podział 25%/75% na małych urządzeniach i 50%/50% na średnich urządzeniach:

Ale na dużych urządzeniach projekt może być lepszy jako podział 33%/66%.

Wskazówka: duże urządzenia to urządzenia o szerokości ekranu od 1200 pikseli lub większej .

W przypadku dużych urządzeń skorzystamy z .col-lg-*zajęć.

Teraz dodamy szerokości kolumn dla dużych urządzeń:

Teraz Bootstrap powie „przy małym rozmiarze spójrz na klasy z -sm- i użyj ich. Przy średnim rozmiarze spójrz na klasy z -md- i użyj ich. Przy dużym rozmiarze spójrz na klas ze słowem -lg- i ich używaj".

Poniższy przykład spowoduje podział 25%/75% na małych urządzeniach, 50%/50% na średnich urządzeniach i 33%/66% na dużych urządzeniach:

Korzystanie tylko z dużych

W poniższym przykładzie określamy tylko .col-lg-6klasę (bez .col-md-*i/lub .col-sm-*). Oznacza to, że duże urządzenia podzielą 50%/50%. Jednak w przypadku średnich ORAZ małych urządzeń będzie się układać pionowo (100% szerokości):