C-Forum.pl :: Twoje Forum Webmasterskie
Bootstrap - nowoczesne strony - Wersja do druku

+- C-Forum.pl :: Twoje Forum Webmasterskie (http://c-forum.pl)
+-- Dział: Strefa Webmastera (/Forum-Strefa-Webmastera)
+--- Dział: Poradniki (/Forum-Poradniki)
+--- Wątek: Bootstrap - nowoczesne strony (/Thread-Bootstrap-nowoczesne-strony)



Bootstrap - nowoczesne strony - Kacej - 14-05-2015 16:39

Bootstrap jest najpopularniejszym frameworkiem HTML'a, CSS'a i JS. Jest on responsywny, dzięki czemu dostosowany do każdej wielkości ekranu.
Edytowanie stron jest banalnie proste, poniżej mały tutorial.
Na początku będziemy potrzebowali samego Bootstrapa, odwiedź więc oficjalną stronę projektu pod adresem http://getbootstrap.com i pobierz najnowszą wersję, oznaczo-
ną numerem 3.x.x. Otwórz archiwum i wypakuj z niego następujące foldery:

- /css
- /fonts
- /js

Utwórz roboczy folder na projekty i nadaj mu dowolną nazwę. Przenieś rozpakowane foldery do folderu roboczego.

Uruchom edytor HTML, utwórz plik o nazwie index.html i umieść w nim następujący kod:

Kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Moja pierwsza aplikacja w Bootstrapie</title>
</head>
<body>
</body>
</html>

Ta prosta struktura HTML będzie podstawą naszej pierwszej aplikacji w Bootstrapie.
Dołączmy teraz Bootstrapa do naszego dokumentu HTML. Najpierw powinniśmy zająć
się plikiem CSS. Otwórz folder /css i sprawdź, czy znajduje się w nim plik o nazwie boot-
strap.css. Jest to główny plik CSS Bootstrapa.

Połączmy wspomniany plik CSS z dokumentem index.html. Umieść następujący wiersz
kodu w znaczniku <head>, poniżej znacznika <title>:


Kod:
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

Bootstrap wymaga biblioteki jQuery do działania komponentów JavaScript. Odwiedź stronę jquery.com21 i pobierz jQuery w wersji 1.11.0 – kolejne nie obsługują już IE 8.0
Po pobraniu pliku jquery.js umieść go w folderze /js w katalogu z projektem. Potem wy-
starczy odwołać się do niego w dokumencie index.html przy użyciu następującego kodu:


Kod:
<script src="js/jquery.js"></script>

Zaleca się umieszczenie odwołania do jQuery w obrębie znacznika <body> zamiast w znaczni-
ku <head>. Chodzi o to, by biblioteka jQuery została załadowana po wczytaniu całej zawartości dokumentu HTML, bo w ten sposób skraca się czas potrzebny na wyświetlenie strony.

Dołączmy teraz plik JavaScript z kodem Bootstrapa:


Kod:
<script src="js/bootstrap.js"></script>

Dokument index.html powinien teraz wyglądać tak:

Kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<title>Moja pierwsza aplikacja w Bootstrapie</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

Aby zapewnić zgodność Bootstrapa ze wszystkimi rodzajami urządzeń, trzeba dodatkowo
umieścić w pliku kilka znaczników meta. Najpierw musimy poinformować przeglądarkę, że nasza strona internetowa zawiera znaki z zestawu Unicode, znacznie obszerniejszego niż zestaw znaków ASCII22. Można to zrobić przy użyciu następującego znacznika meta:


Kod:
<meta charset="utf-8">

Czasami Internet Explorer działa w trybie zgodności. Zastosowanie poniższego kodu wymusi na IE zastosowanie najnowszego silnika renderującego do wyświetlenia strony. W ten spo-
sób unikniemy błędów w wyświetlaniu, spowodowanych brakiem obsługi niektórych właściwości CSS w starszych silnikach.


Kod:
<meta http-equiv="X-UA-Compatible" content="IE=edge">

Teraz zadbajmy o to, by strona wypełniła całą przestrzeń dostępną w oknie przeglądarki, niezależnie od tego, czy mamy do czynienia z tabletem, smartfonem, czy ekranem komputera.

Poinformujemy przeglądarkę, by przeskalowała projektowaną stronę do rozmiarów okna:

Kod:
<meta name="viewport" content="width=device-width, initial-scale=1"

Wyrażenie initial-scale=1 oznacza skalowanie do 100% wielkości ekranu.
Teraz dokument index.html powinien wyglądać następująco:

Kod:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Moja pierwsza aplikacja w Bootstrapie</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<h1>Hello World!</h1>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

To wszystko, stworzyłeś swój pierwszy projekt w Bootstrapie. Podstawy są najważniejsze – na nich będą opierały się kolejne przykłady.

Przykładowy kod pochodzi z książki "Bootstrap. Tworzenie interfejsów stron WWW. Technologia na start!"
Syed Fazle Rahman

Niebawem kolejne poradniki