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


25.10.2019

Skalowalna infrastruktura

Red Hat OpenStack Platform 15
25.10.2019

Cienki klient 2.0

Windows Virtual Desktop
25.10.2019

Nowy sprzęt Microsoftu

Rodzina Surface się powiększa
24.10.2019

Serwery ARM

Oracle stawia na Ampere Computing
24.10.2019

Wszechstronny i elegancki

Dell XPS 15
10.10.2019

CYBERSEC EXPO - największe w...

Bezpieczeństwo cyfrowe nie jest problemem dotyczącym jedynie działów IT. Obecnie stanowi...
30.09.2019

Nowości w wirtualizacji

VMware World 2019
30.09.2019

Bezpieczeństwo mobile-first

Android 10

Tworzenie stron WWW za pomocą Bootstrapa

Data publikacji: 26-09-2019 Autor: Grzegorz Kubera
Utworzony podstawowy szablon...

Bootstrap to platforma do budowania aplikacji WWW, która wyróżnia się dużymi możliwościami, funkcjonalnością, elastycznością w konfigurowaniu i powszechnością zastosowań. W pierwszej części minikursu Bootstrapa wyjaśniamy, czym jest ta platforma, i tworzymy podstawowy szablon strony.

 

Bootstrap to platforma opracowana przez programistów z Twittera, która pozwala na szybsze i wygodniejsze tworzenie stron i aplikacji webowych. W Boot­strapie szablony, typografia, formularze, paski nawigacji, przyciski, tabele i inne elementy zostały zdefiniowane za pomocą kodów HTML i CSS. Jeśli chcemy tworzyć dynamiczne strony WWW, to możemy dodatkowo korzystać ze skryptów JavaScript, z którymi Bootstrap bez przeszkód współpracuje. Ponadto platforma ma licencję na bibliotekę czcionek Glyphicons, a umieszczanie elementów graficznych na stronach jest banalnie proste.

> CO OFERUJE BOOTSTRAP?

Platformy do tworzenia stron WWW zapewniają podobne funkcje (patrz ramka Porównanie platform webowych) – zawierają style CSS i czasami skrypty JavaScript, a także oferują system siatek lub inne narzędzia do definiowania układów poszczególnych stron. Polecamy Bootstrapa nie tylko ze względu na popularność, ale też kilka innych istotnych aspektów. Po pierwsze, jest on na licencji MIT (otwarte oprogramowanie), współpracuje z technologiami Less, Sass i jQuery, a także ma narzędzia do budowania stron responsywnych oraz elastyczny system siatek.

Po drugie, platforma zapewnia kompatybilność ze starszymi przeglądarkami internetowymi, np. Internet Explorerem 8. Starsze przeglądarki często inaczej obsługują języki HTML5 i CSS3, przez co strony stworzone z wykorzystaniem niektórych platform nie wyświetlają się wtedy poprawnie na danym urządzeniu. Z Bootstrapem nie ma tego problemu.

I po trzecie – Bootstrap to platforma stworzona z myślą nie tylko o programistach, ale też o osobach, które zwyczajnie chcą tworzyć strony WWW i traktować tę umiejętność nie jako swoją główną specjalizację, lecz jedną z kilku. To oznacza, że Bootstrap ma wiele ułatwień, aby praca nad stroną czy aplikacją przebiegała szybciej i wygodniej. Dzięki temu mamy wbudowaną obsługę podstawowej typografii (nie trzeba zajmować się odstępami między wierszami czy wielkościami fontów), przycisków inter­aktywnych i ikon (w tym Glyphicons w ramach licencji), które nadają jednolity wygląd, a ponadto można liczyć na zaawansowane elementy HTML, takie jak tabele i formularze. Jest też mnóstwo szablonów, które możemy kupić i edytować – warto dodać, że pod względem wyglądu i funkcjonalności są one na ogół nowocześniejsze niż te znane z WordPressa.

Poza tym nie da się ukryć, że na korzyść Bootstrapa przemawia fakt, że jest to platforma powszechnie stosowana, i to na wiele sposobów. Możemy np. użyć kodów Sass lub Less czy wersji dopasowanej do technologii .Net lub pakietu WordPress Theme (są też strony wykorzystujące zarówno Bootstrapa, jak i WordPressa). Dzięki temu kiedy już opanujemy Bootstrapa, nie jesteśmy przesadnie ograniczani w zakresie wyboru innych narzędzi do współpracy.

W Bootstrapie możemy też liczyć na elastyczność i np. stworzyć taką wersję platformy, która zawiera tylko interesujące nas komponenty. Jest to także dobra platforma do tworzenia stron mobilnych (podejście mobile-first). Zyskujemy przez to pewność, że nasza witryna będzie się dostosowywać do większości ekranów bez konieczności jakiejkolwiek modyfikacji kodu.

> POBIERANIE I INSTALACJA BOOTSTRAPA

Wchodzimy na stronę getbootstrap.com i klikamy przycisk Download, aby pobrać najnowszą wersję Bootstrapa (w czasie powstawania artykułu była to wersja 4.3.1). Następnie klikamy przycisk Download w sekcji Compiled CSS and JS – pobierzemy w ten sposób paczkę .zip, którą trzeba rozpakować.

Teraz możemy się zająć tworzeniem pierwszej strony za pomocą podstawowego szablonu. Aby skorzystać z Bootstrapa, musimy w kodzie HTML strony dodać kilka wierszy. Poniżej zamieszczamy kod z HTML5, który nie stosuje Bootstrapa:

<!doctype html>
<html>
<head>
<meta charset=”UTF-8”>
<title>Strona WWW</title>
</head>
<body></body>
</html>

Aby skorzystać z Bootstrapa, w sekcji <head> trzeba dodać style CSS:

<link href=”css/bootstrap.min.css” rel=”stylesheet”>

Oczywiście Bootstrap oferuje więcej niż same style CSS, dlatego możemy wykorzystać również pozostałe elementy. W tym celu trzeba na końcu kodu strony umieścić odwołania do biblioteki jQuery i skryptów JavaScript. Na samym końcu, przed tagiem </body>, trzeba wpisać wiersze:

<script src=”https://ajax.googleapis.com/ajax/libs/
jquery/3.4.1/jquery.min.js”></script>
</script>
<script src=”js/bootstrap.min.js”></script>

Wszystkie te dodatkowe wiersze sprawią, że nasza strona zacznie wykorzystywać platformę Bootstrap. Od tej pory możemy stosować style i wtyczki, które poznamy w dalszych częściach minikursu. Jak widać, dodawanie Bootstrapa do dokumentu HTML to nic trudnego.

 

[...]

 

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. 

Artykuł pochodzi z miesięcznika: IT Professional

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"