Siatka Bootstrap - średnie urządzenia

Przykład siatki Bootstrap: średnie urządzenia

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

Ale na średnich urządzeniach projekt może być lepszy jako podział 50%/50%.

Wskazówka: urządzenia średnie są definiowane jako urządzenia o szerokości ekranu od 992 do 1199 pikseli .

Dla średnich urządzeń skorzystamy z .col-md-*klas.

Teraz dodamy szerokości kolumn dla średnich 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”.

Poniższy przykład spowoduje podział 25%/75% na małych urządzeniach i 50%/50% na średnich (i dużych) urządzeniach. Na bardzo małych urządzeniach automatycznie układa się w stos (100%):

Używanie tylko średniego

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

Następny rozdział pokazuje, jak dodać inny procent podziału dla dużych urządzeń.