Bootstrap - Uvod


Početak rada sa Bootstrapom

U ovoj lekciji naučićete kako je lako stvoriti web stranicu pomoću Bootstrap-a. Ali prije početka, pobrinite se da imate uređivač koda i neko radno znanje HTML-a i CSS-a. Ako tek započinjete sa svijetom web razvoja, počnite učiti odavde » HTML5-CSS3. Pa, krenimo sa izradom naše prve web stranice koju pokreće Bootstrap.



Kreiranje prve web stranice pomoću Bootstrap-a

Sada ćemo stvoriti osnovni Bootstrap template tako što ćemo uključiti CSS i JS datoteke Bootstrap-a, kao i jQuery i Popper.js putem CDN-a. Preporučujemo dodavanje Bootstrapa u svoj projekt putem CDN-a (mreža za isporuku sadržaja), jer CDN nudi poboljšanje performansi smanjenjem vremena učitavanja, jer oni hostuju datoteke na više servera raširenih širom svijeta, tako da će kada korisnik zatraži datoteku, biti poslužena sa najbližeg servera. U našim primjerima koristimo i CDN veze. Prođimo kroz sljedeće korake. Na kraju ove lekcije izradićete jednostavnu web stranicu koju pokreće Bootstrap i koja prikazuje poruku "Hello world" u vašem web pretraživaču.


Korak 1: Stvaranje HTML fajla

Otvorite svoj omiljeni uređivač koda i kreirajte novi HTML fajl. Započnite s praznim prozorom i unesite sljedeći kod i spremite ga kao "basic.html" na radnu površinu.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Osnovi HTML fajl</title>
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

Korak 2: Izrada HTML fajla pomoću Bootstrap template-a

Da biste ovaj obični HTML fajl učinili Bootstrap template-om, samo uključite CSS i JS fajlove Bootstrap-a, kao i potrebne jQuery i Popper.js fajlove koristeći njihove CDN veze. Na dnu stranice, neposredno prije završne oznake </body>, trebali biste uključiti JavaScript fajlove kako biste poboljšali performanse svojih web stranica, kao što je prikazano u sljedećem primjeru:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Osnovni Bootstrap Template</title>
    <!-- Bootstrap CSS fajl -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
    <h1>Hello, world!</h1>
    <!-- JS fajlovi: jQuery prvo, onda Popper.js, pa tek onda Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

I sve smo spremni! Nakon dodavanja CSS i JS fajla Bootstrap-a i potrebne biblioteke jQuery i Popper.js, možemo početi razvijati bilo koju stranicu ili aplikaciju s Bootstrap framework-om. Atributi integrity i crossorigin dodani su CDN vezama kako bi se implementovao Subresource Integrity (SRI). To je sigurnosni sistem koja vam omogućava da umanjite rizik od napada koji potiču iz ugroženih CDN-ova, osiguravajući da su fajlovi koje vaša web lokacija preuzima (sa CDN-a ili bilo gdje drugo) isporučene bez neočekivanih ili zlonamjernih izmjena. Funkcioniše tako što vam omogućava da navedete kriptografsko hash koje se mora podudarati sa fajlom.


Korak 3: Spremanje i pregled fajla

Sada spremite fajl na radnu površinu kao "bootstrap-template.html". Da biste otvorili ovaj fajl u web pretraživaču, dođite do nje, a zatim kliknite desni klik na njega i odaberite svoj omiljeni web pretraživač. Možete i otvoriti pretraživač i povući ovaj fajl u njega kako biste vidjeli rezultat.



Preuzimanje Bootstrap datoteke

Alternativno, Bootstrap CSS i JS fajlove možete preuzeti i sa njihove službene web stranice i uključiti u svoj projekat. Postoje dvije verzije dostupne za preuzimanje, compiled Bootstrap i Bootstrap source fajla. Fajlove Bootstrap-a 4 možete preuzeti ovdje DOWNLOAD Bootstrap 4. Compiled Bootstrap sadrži kompiliranu i umanjenu verziju CSS i JavaScript fajlova za brži i lakši razvoj weba. Sastavljena verzija međutim ne uključuje opcionalne JavaScript fajlove kao što su jQuery i Popper.js. Dok izvorno preuzimanje sadrži izvorne fajlove za sve CSS i JavaScript fajlove, zajedno s lokalnom kopijom fajlova.

Preuzmite i raspakirajte kompajlirani Bootstrap. Ako pogledate unutar mapa, naći ćete da sadrže kompajlirane CSS i JS fajlove (bootstrap.*), Kao i kompilirane i umanjene CSS i JS (bootstrap.min.*). Koristite fajlove bootstrap.min.css i bootstrap.min.js. Korištenje minificirane verzije CSS i JS fajlova poboljšaće performanse vaše web stranice i štedi dragocjenu propusnost zbog manjeg HTTP zahtjeva i veličine preuzimanja.