Inżynierowie Twittera stworzyli całkowicie darmowy framework do projektowania stron WWW o nazwie Boostrap. Nie trzeba uczyć się wszystkich jego opcji, by szybko stworzyć całkowicie responsywną stronę internetową. Dziś pokażę Wam, jak można to wykorzystać. Zapraszam do mini kursu z Bbootstrapa.
Zanim przejdziemy do tutoriala z Boostrapa należy wspomnieć, że dzieli on stronę na 12 części. Tworząc każdy nowy element w danej linii na stronie, określamy, ile części strony zajmować będzie dany element. Jeśli 12, to całą szerokość strony (a dokładniej kontenera), jeśli 6, to połowę itd.
Boostrap zawiera także wiele gotowych ostylowanych elementów, jak tabele, przyciski czy komunikaty błędów, dlatego nie trzeba tego stylować ręcznie.
Boostrapa można osadzić na stronie w formie jednej linijki kodu w sekcji HEAD lub można pobrać całą paczkę z oficjalnej strony TUTAJ i osadzić ją na swoim serwerze. Ja jednak skupię się na tym, by rozpocząć jak najszybciej, dlatego osadzimy boostrapa za pomocą jednej linijki.
Stwórzmy sobie prostą stronę internetową, niech to będzie taki oto kod:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
witaj świecie
</body>
</html>
Teraz podłączmy do niego Bootstrapa, w tym celu dodajemy taki oto kod w sekcji HEAD:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
Możemy też podłączyć jeszcze opcjonalnie skrypty Boostrapa, jeśli będziemy chcieli korzystać z bardziej zaawansowanych funkcji, dodając jeszcze taki kod w sekcji HEAD
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Nasz kod prezentuje się teraz tak:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> witaj świecie </body> </html>
Jeśli odświeżycie stronę, możecie zauważyć, że wygląd niektórych elementów jak np. czcionka się zmieniły. Boostrap już działa i można przystąpić do budowania pierwszych responsywnych elementów. Dodajmy teraz w body taki oto kod („witaj świecie” możemy usunąć):
<div class="container"> <div class="row"> <div class="col-md-6" style="border:1px solid black;"> linia 1 kolumna 1 </div> <div class="col-md-6" style="border:1px solid black;"> linia 1 kolumna 2 </div> </div> <div class="row"> <div class="col-md-6" style="border:1px solid black;"> linia 2 kolumna 1 </div> <div class="col-md-6" style="border:1px solid black;"> linia 2 kolumna 2 </div> </div> </div>
Przyjrzyjmy mu się:
Całość zaczyna się DIVem z klasą o nazwie container. Jest to klasa boostrapowa, która zwyczajnie odpowiada za to, by całość strony była wyśrodkowana, a nie leciała całkiem od lewej strony ekranu.
Następnie mamy DIVa z klasą row, która odpowiada za linię. W tym DIVie mamy 2 następne DIVy z klasami o nazwach col-md-6. To są właśnie kolumny w tej linii. Każda zajmuje po 6 jednostek, a więc połowę strony. Spróbujcie zmienić liczbę 6 w klasie col-md-6 i zobaczcie co będzie się działo 🙂
Styl o nazwie border:1px solid black; dałem od siebie by było widać obramowanie, tak by dokładniej zobrazować to co dzieje się na ekranie.
To samo powtarza się w następnej linii. Czy jest to widoczne? Mam nadzieję, że tak, na wszelki wypadek wklejam cały kod:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6" style="border:1px solid black;"> linia 1 kolumna 1 </div> <div class="col-md-6" style="border:1px solid black;"> linia 1 kolumna 2 </div> </div> <div class="row"> <div class="col-md-6" style="border:1px solid black;"> linia 2 kolumna 1 </div> <div class="col-md-6" style="border:1px solid black;"> linia 2 kolumna 2 </div> </div> </div> </body> </html>
Spróbujcie zmniejszać teraz okno przeglądarki. Bloki te ładnie się skalują i automatycznie wskakują jeden pod drugi. Brawo, właśnie zbudowaliście swoją responsywną stronę na Boostrapie.
Dodajmy teraz jeszcze jakiś komunikat, wykorzystując boostrapową klasę:
<div class="alert alert-success" role="alert">Przykładowy komunikat</div>
Zobaczycie ładny zielony komunikat z wpisaną treścią, bez ręcznego stylowania.
A teraz garść przydanych informacji. Więcej bajerów z Boostrapa znajdziecie na oficjalnej stronie, dokładnie w tym miejscu: KLIK.
Poniżej na tej samej stronie znajdziecie też przykładowe gotowe szablony postawione na Bootstrapie. Ja korzystam często Z TEGO, ponieważ zawiera przykładowe gotowe elementy, więc wystarczy skopiować sobie fragment kodu lub podejrzeć nazwę klasy. To tyle, dobrej zabawy!
