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



26.05.2020

Cloud Native Universe

Jako patron medialny zapraszamy programistów wdrażających lub integrujących się z dowolną...
26.03.2020

Koniec certyfikatów...

MCSA, MCSD i MCSA
26.03.2020

Odświeżony OS

FortiOS 6.4
26.03.2020

Bezpieczeństwo w chmurze

Cisco SecureX
26.03.2020

Modernizacja IT

Nowości w VMware Tanzu
26.03.2020

Krytyczne zagrożenie dla...

Nowa groźna podatność
26.03.2020

Laptopy dla wymagających

Nowe ThinkPady T, X i L
26.03.2020

Serwerowe ARM-y

Ampere Altra
26.03.2020

Energooszczędny monitor

Philips 243B1

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"