Bootstrap – do tworzenia stron – mini tutorial

Data dodania: jakiś czas temu
reklama

bootstrap

Czasy się zmieniają i strony internetowe, które nie są responsywne (czyli takie, które dopasowują się wielkością do wielkości ekranu) zostają praktycznie w tyle. Patrząc na statystyki Konkretny.pl ruch mobilny stanowi praktycznie połowa odwiedzających. Istnieje jednak pewnien sposób, jak można ułatwić sobie życie.

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.

Kilka ważnych informacji

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.

Zaczynamy nasz mini kurs

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.

Słowo na koniec

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!


PS. jeśli masz konto na Facebooku, polub fanpage Konkretnego. Dzięki!




Tagi: , , , , , ,

Bądź miły! Uwielbiam wchodzić z Wami w dyskusję, proszę jednak, by krytyka była konstruktywna. Komentarz, który ma na celu obrażać mnie lub moich Czytelników może zostać usunięty. Tutaj każdy ma czuć się dobrze :)

Jestem także tutaj


YouTube - ostatni film z Filek.TV

YouTube - ostatni film z Konkretny.pl

Discord

Chcesz ze mną pograć?
Wbijaj na mój Discord

Partnerzy











O blogu

Konkretny.pl to blog technologiczny, którego tematyka porusza kilka specjalistycznych dziedzin. Jednymi z najważniejszych są zagadnienia dotyczące technologii i Internetu, ale nie brakuje tutaj również typowych tekstów dotyczących finansów, marketingu, programowania, a nawet gier komputerowych. Życzę przyjemnej lektury :)


Social Media

 



© 2011-2018 Marcin Romanowicz. Wszelkie prawa zastrzeżone.

Wszystkie posty piszę w dobrej wierze. Nie odpowiadam jednak za wszelkie szkody, treść komentarzy oraz autentyczność informacji na stronie. Informuję, że publikowane pliki zostały sprawdzone programem antywirusowym w aktualnej wersji. Nie biorę jednak odpowiedzialności, jeśli coś się stanie.

| O mnie |   | Polityka Prywatności |   | Kontakt |