Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką Plików Cookies.



26.10.2020

Nowa wersja nVision

Można już pobierać nową wersję nVision
26.10.2020

Monitorowanie infrastruktury

Vertiv Environet Alert
23.10.2020

Telefonia w chmurze

NFON Cloudya
23.10.2020

Nowości w EDR

Bitdefender GravityZone
23.10.2020

Wykrywanie anomalii

Flowmon ADS11
23.10.2020

Mobilny monitor

AOC 16T2
22.10.2020

HP Pavilion

HP zaprezentowało nowe laptopy z linii Pavilion.
22.10.2020

Inteligentny monitoring

WD Purple SC QD101
22.10.2020

Przełącznik 2,5GbE

QNAP QSW-1105-5T

Tworzenie stron WWW za pomocą Bootstrapa

Data publikacji: 25-11-2019 Autor: Grzegorz Kubera
Rys. 1. Strona główna wp.pl z...

W trzeciej części cyklu zajmujemy się siatkami, czyli niezbędnymi elementami projektowania stron internetowych. Siatki pozwalają zdefiniować układ wyświetlania poszczególnych treści na stronie.

 

Jeśli chcemy projektować strony WWW przy użyciu Bootstrapa, kolejną rzeczą, jaką powinniśmy poznać, są siatki. Siatka (grid) to struktura złożona z przecinających się poziomych i pionowych linii, wykorzystywana do rozkładania treści na stronie. Na rys. 1 możemy zobaczyć stronę z wyświetlaną siatką, która opiera się na 12 kolumnach.

Siatka to podstawa projektu strony WWW, ponieważ określa ona jej strukturę. Strony tworzone bez użycia siatek nie będą wyglądać zbyt dobrze, zwłaszcza na urządzeniach innych niż to, z którego korzystał ich projektant. Najlepsze są siatki elastyczne, które dopasowują się do szerokości okna przeglądarki zarówno na małych ekranach smartfonów, jak i na dużych 32-calowych (i większych) monitorach. Jak tworzyć siatki w Bootstrapie? Wyjaśniamy krok po kroku.

> SIATKI W BOOTSTRAPIE

Aby stworzyć siatkę w Bootstrapie, trzeba umieścić odpowiednie klasy CSS w kodzie HTML strony. W tym celu wpisujemy po prostu odpowiedni fragment kodu. Tworzenie siatki zaczynamy od kontenera, do którego trafią jej elementy. Są dwa rodzaje kontenerów: o stałej szerokości oraz o zmiennej szerokości. Oba rodzaje są responsywne.

Chcąc utworzyć responsywny układ strony o stałej szerokości, używamy klasy .container. Poniżej prezentujemy element <div> pełniący funkcję kontenera:

<div class="container">
<!-- Tutaj miejsce na wiersze siatki --> </div>

Klasa .container-fluid tworzy zaś układ o zmiennej szerokości, takiej samej jak szerokość ekranu, na którym wyświetlana jest strona. Kod wygląda tak:

<div class="container-fluid">
<!-- Tutaj miejsce na wiersze siatki -->
</div>

Co ważne, klasy siatki możemy stosować we wszystkich elementach blokowych HTML, a najlepiej używać ich w elementach wykorzystywanych najczęściej jako kontenery, np. <div>, <article>, <section>, <aside> czy <nav> w języku HTML5.

Gdy już wybierzemy dany kontener, który będzie zawierał siatkę, następnym krokiem jest zdefiniowanie wierszy tworzących grupę kolumn w poziomie. Poniżej prezentujemy, jak tworzyć klasy .row (wiersze):

<div class="container">
<div class="row">
<!-- Tutaj miejsce na zawartość wierszy -->
</div>
</div>

Idąc dalej, kolejną rzeczą jest zdefiniowanie kolumn zawierających treść. Chcąc zdefiniować różne kolumny dla różnych urządzeń, możemy skorzystać z klas przedstawionych w tabeli (patrz ramka Opcje siatki – platforma Bootstrap).

> TWORZENIE UKŁADU STRONY Z TRZEMA KOLUMNAMI

Teraz stworzymy układ strony, który będzie się składał z dwóch wierszy. Pierwszy będzie zawierał trzy kolumny o tej samej, a drugi o różnej szerokości. Do szablonu strony dodajemy następujący kod:

<div class="container">
<section class="row">
<aside class="col-md-4"><h2>Kolumna 1</h2></aside>
<article class="col-md-4"><h2>Kolumna 2</h2></article>
<aside class="col-md-4"><h2>Kolumna 3</h3></aside>
</section>
<section class="row">
<aside class="col-md-2"><h2>Kolumna 1</h2></aside>
<article class="col-md-6"><h2>Kolumna 2</h2></article>
<aside class="col-md-4"><h2>Kolumna 3</h3></aside>
</section>
</div>

Pełny szablon (kod HTML) znajduje się w ramce Kod szablonu z kolumnami. Warto zauważyć, że nie trzeba zajmować się odstępami między kolumnami lub marginesami, bo Bootstrap definiuje je domyślnie.

 

Powyższy przykład to oczywiście prosty układ (rys. 2) i nie napotkamy większych problemów z wyświetlaniem go na urządzeniach. Przy projektowaniu trzeba jednak pamiętać, że mogą się zdarzyć trudności z punktami granicznymi. Chodzi o niewłaściwe rozłożenie kolumn, co ma miejsce zwłaszcza wtedy, gdy jedna kolumna jest wyższa niż inne. Aby rozwiązać ten problem, używamy klasy .clearfix i pomocniczych klas responsywnych. Dostępnych jest 16 klas i zmieniają one sposób wyświetlania zawartości kolumn w zależności od wielkości ekranu. Wszystkie klasy znajdziemy w tabeli Klasy responsywne.

 

[...]

 

Założyciel firmy doradczo-technologicznej, pełnił funkcję redaktora naczelnego w magazynach i serwisach informacyjnych z branży ICT. Dziennikarz z ponad 13-letnim doświadczeniem i autor książek nt. start-upów i przedsiębiorczości. 

Pełna treść artykułu jest dostępna w papierowym wydaniu pisma.

.

Transmisje online zapewnia: StreamOnline

All rights reserved © 2019 Presscom / Miesięcznik "IT Professional"