1. Dom
  2. Pytanie i odpowiedź
  3. Bootstrap 3.0 Grid Objaśnienie

Bootstrap 3.0 Grid Objaśnienie

2013-08-06 14 views
11

Czy ktoś może wyjaśnić system siatki Bootstrap 3.0. Używałem siatki Bootstrap v2, która miała proste span1 do span12 dla kolumn. Teraz Bootstrap 3.0 ma różne typy wielkości kolumn, takie jak .col- .col-sm- .col-lg-Bootstrap 3.0 Grid Objaśnienie

Znalazłem ten przykład: http://examples.getbootstrap.com/grid/index.html, ale ma wiele różnych sposobów, takich jak Nie mogłem zrozumieć "Mieszane: sieć mobilna i desktopowa, gdzie .col-12 .col-lg-8 są razem.

Mam nadzieję przenieść moją stronę Bootstrap v2 do Bootstrap v3, ale znalezienie tych zmian za dużo.

Proszę wyjaśnić.

EDIT: (. Ten artykuł był po poprosiłem moje pytanie tutaj Nadzieja pomaga przyszłych czytelników) także dostał ten miły artykuł wyjaśniający Bootstrap 3 Grid: http://blog.jetstrap.com/2013/08/bootstrap-3-grids-explained/

Źródło

2013-08-06 Pawan Pillai

+2

Punkt startowy: http://getbootstrap.com/css/#grid –

+1

Tak, czytałem to, ale nie jest brak dobrego wyjaśnienia dla różnych klas col i brak dobrej ścieżki migracji z wersji bootstrap 2 do wersji 3. –

+1

Nie uważam, że migracja z 2 do 3 jest celem z Bootstrap. Celem Bootstrapa jest stworzenie podstawy do własnego projektu. Nie można po prostu usunąć Bootstrap 2 i podłączyć wersji 3. Jeśli chcesz użyć Bootstrap 3, musisz rozważyć to przeprojektowanie i stworzyć wszystko od zera. – RoToRa

Odpowiedz

7

Podstawowym Istotą jest to, że różne iteracje klasa .col umożliwia określenie zachowania siatki dla różnych urządzeń (telefonów, tabletów, komputerów stacjonarnych). Tak więc w tym przykładzie pytasz o numer .col-lg-8, który określa, że ​​element div powinien zajmować 8 kolumn na pulpicie, podczas gdy .col-12 określa, że ​​element div powinien zająć 12 kolumn (cały wiersz) na urządzeniu mobilnym. Ten poziom swoistości zapewnia precyzyjną kontrolę nad sposobem, w jaki treść będzie układana na różnych rozmiarach ekranu w sposób, który nie był tak prosty w przypadku Bootstrap 2.

Ogólnie znalazłem najlepszy sposób na zrozumienie, co to znaczy w praktyce należy wyświetlić przykładowe strony na różnych typach urządzeń lub zmienić rozmiar okna przeglądarki i po prostu porównać wyniki.

Ponadto, jak stwierdzono w komentarzach do twojego pytania, idea migracji z Bootstrap 2 na 3 niekoniecznie jest celem. Możesz to zrobić, aktualizując istniejące klasy .span* do nowych klas .col-*, ale istnieją inne kwestie, np. Czy istniejący projekt ma stałą szerokość lub płyn, który może powodować problemy z tym. Istnieje wiele innych zmian między dwiema wersjami poza układem siatki, które również mogą przysporzyć problemów.

Źródło

2013-08-06 17:30:43 Dhaulagiri

Powiązane problemy

 Powiązane problemy