Jak stworzyć wiele responsywnych kolumn za pomocą Bootstrap 3
Opublikowany: 2022-02-16
Chcesz poprawić responsywność swojej strony internetowej dzięki Bootstrap? Najważniejszym aspektem Bootstrap jest jego 12-kolumnowy mobilny system pierwszej siatki. To jest to, czego używasz do tworzenia responsywnego układu.
W tym samouczku wideo utworzysz podstawową witrynę internetową za pomocą Bootstrap i nauczysz się korzystać z systemu siatek Bootstrap, aby stworzyć responsywny układ z wieloma kolumnami.
Przed obejrzeniem samouczka
Zanim będziesz mógł skorzystać z poniższego samouczka wideo i nauczyć się tworzyć własne responsywne kolumny, będziesz potrzebować:
- Podstawowe zrozumienie, czym jest Bootstrap
- Podstawowe zrozumienie, czym jest system grid Bootstrap
- Pobierz Bootstrap na dysk twardy
- Utwórz podstawowy plik Bootstrap index.html, na którym będzie można budować
Co to jest Bootstrap?
- Bootstrap to framework dla programistów HTML, CSS i JavaScript pracujących nad responsywnością strony.
- Składa się z gotowych responsywnych stylów CSS dla kolumn, list, nawigacji, formularzy internetowych i wielu innych elementów internetowych.
Zrozumienie systemu Bootstrap Grid
- System siatki Bootstrap klasyfikuje rozmiary ekranu na cztery typy: bardzo mały, mały, średni i duży.
- Bardzo mały jest przeznaczony do telefonów komórkowych. Mały jest przeznaczony do tabletów, takich jak I-Pad. Medium jest przeznaczone do monitorów stacjonarnych. A Large jest przeznaczony tylko do większych monitorów biurkowych.
- Aby pomóc Ci dostroić responsywność tych czterech typów ekranów, Bootstrap dzieli szerokość urządzeń do przeglądania stron internetowych na 12-kolumnowy system siatki.
- Każdy z tych czterech typów Bootstrap Grid staje się responsywny tylko wtedy, gdy przypiszesz do niego własną wyznaczoną klasę CSS.
- Na przykład, aby div odpowiadał na bardzo małe urządzenia, musi on mieć własną klasę Bootstrap .col-xs-<number_of_columns_to_take>, taką jak <div class="col-xs-6">.
Pobieranie Bootstrapa
- Przejdź do getboostrap.com i kliknij przycisk „Pobierz Bootstrap”:
- Zobaczysz stronę „Wprowadzenie”. Kliknij przycisk „Pobierz Bootstrap”:
- Zapisz ten plik na dysku twardym swojego komputera, gdziekolwiek chcesz. Nie trzeba go zapisywać na serwerze WWW.
- Rozpakuj ten plik i zmień nazwę wyodrębnionego folderu na „bootstrap”.
Przygotowanie Twojej podstawowej strony Bootstrap index.html
Krok 1. Utwórz plik Bootstrap index.html
- Wróć do strony „Pierwsze kroki” (http://getbootstrap.com/getting-started/#download) i kliknij łącze „Szablon podstawowy” na prawym pasku bocznym:
- Zobaczysz kod „Szablon podstawowy”. Kliknij przycisk „Kopiuj”, aby skopiować kod:
- Wklej kod „Basic Template” do edytora tekstu i zapisz go jako index.html w tym samym folderze, w którym zapisałeś folder „bootstrap”. Teraz stanie się główną stroną Twojej witryny Bootstrap.
- Otwórz nowo utworzony index.html i spójrz na swoją podstawową witrynę Bootstrap:
- Otwórz plik index.html w edytorze tekstu i między otwierającymi znacznikami <body> i <h1> dodaj <div class="container"> (1). Zamknij ten nowy div po zamykającym tagu </h1> (2) i zapisz plik:
- Sprawdź front-end strony i zwróć uwagę, jak "Hello World!" nie przykleja się już do krawędzi strony i teraz przesunęła się nieco w prawo, aby wyglądała nieco schludniej. Klasa „kontenera” Bootstrapa, którą przypisałeś do tego div, dodała do tego tekstu pewien margines:
- Wróć do pliku index.html. Pomiędzy tagami <h1> i </h1> zastąp "Hello World!" do "Trustuba". Zapisz plik i sprawdź interfejs swojej witryny.
Krok 2. Dodaj trochę treści i pasek boczny
- Wróć do pliku index.html i pod kodem <h1>Trustub</h1> wklej następujący kod:
<div class="row"> <div> <h2>What Trusthub can do for you</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.</p> </div> <div> <h2>Our Team</h2> <p>Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus.</p> </div> </div>- Wróć do interfejsu witryny. Odśwież to. Powinieneś teraz zobaczyć swoją treść i pasek boczny „Nasz zespół”, bez kolumnowego układu responsywnego:
- Wróć na stronę getbootstrap.com i w górnym menu kliknij przycisk „CSS”:
- Na pasku bocznym kliknij przycisk „Grid System”:
- Przewiń stronę do sekcji „Opcje siatki” (1) i zwróć uwagę na 12-kolumnowy system Bootstrap z czterema typami rozmiarów ekranu, ich szerokością i wyznaczonymi prefiksami klas CSS (2):
- Nie martw się, jeśli opcje systemu siatki Bootstrap nie mają dla Ciebie jeszcze sensu. Wszystko to połączy się dla Ciebie w ciągu sekundy, gdy zaczniesz się nimi bawić na swojej stronie.
- Otwórz ponownie plik index.html i pod <div class="row"> dla istniejącego <div> wpisz class „col-md-9”. Twój nowy div powinien teraz wyglądać „div class="col-md-9">:
- Teraz przejdź do swojego div, znajdującego się tuż nad nagłówkiem <h2> „Out Team” i nadaj mu klasę CSS siatki Bootstrap „col-md-3”. Zapisz plik:
- Wróć do swojej witryny, aby zobaczyć, jak ta zmiana działa. Naciśnij klawisz F5 na klawiaturze, aby odświeżyć witrynę. Teraz zobaczysz, że obszar zawartości i pasek boczny znajdują się obok siebie.
- Twój div z zawartością zajmuje teraz 9 z 12 kolumn dostępnych w siatce Bootstrap (75% całej szerokości ekranu pulpitu). Twój pasek boczny zajmuje 3 z 12 kolumn siatki Bootstrap (25% całej szerokości ekranu pulpitu):
Znakomity! Jesteś teraz gotowy do zapoznania się z poniższym samouczkiem wideo. Zacznijmy.
Gratulacje! Właśnie nauczyłeś się tworzyć responsywny układ strony internetowej z wieloma kolumnami za pomocą Bootstrap. Chcesz dowiedzieć się więcej o Bootstrapie? Jeśli tak, odwiedź nasz kanał OSTraining na YouTube i obejrzyj „Samouczki dotyczące platformy Bootstrap”.