Uvod
Započnite s Bootstrapom, najpopularnijim svjetskim okvirom za pravljenje responzivnih web lokacija koje su usmjerene na mobilne uređaje, s jsDelivr-om i početnom stranom šablona.
Brzi početak
Želite brzo dodati Bootstrap svom projektu? Koristite jsDelivr, besplatni CDN otvorenog koda. Koristite menadžer paketa ili trebate preuzeti izvorne datoteke? Idite na stranicu za preuzimanje .
CSS
Kopirajte i zalijepite tablicu stilova <link>
u svoj <head>
prije svih ostalih stilova da učitate naš CSS.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
JS
Mnoge naše komponente zahtijevaju korištenje JavaScripta da bi funkcionirale. Konkretno, zahtijevaju naše vlastite JavaScript dodatke i Popper . Postavite jedan od sljedećih <script>
s blizu kraja vaših stranica, neposredno prije završne </body>
oznake, da ih omogućite.
Bundle
Uključite svaki Bootstrap JavaScript dodatak i zavisnost u jedan od naša dva paketa. I jedno bootstrap.bundle.js
i drugo bootstrap.bundle.min.js
uključuje i Popper za naše opise i iskačuće informacije. Za više informacija o tome šta je uključeno u Bootstrap, pogledajte naš odjeljak sa sadržajem .
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Odvojeni
Ako odlučite da koristite odvojeno rješenje za skripte, Popper mora biti prvi (ako koristite opise alata ili iskačuće stranice), a zatim naši JavaScript dodaci.
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
Moduli
Ako koristite <script type="module">
, pogledajte našu sekciju o korištenju Bootstrapa kao modula .
Komponente
Zanima vas koje komponente izričito zahtijevaju naš JavaScript i Popper? Kliknite na link za prikaz komponenti ispod. Ako uopće niste sigurni u opću strukturu stranice, nastavite čitati za primjer predloška stranice.
Prikaži komponente koje zahtijevaju JavaScript
- Upozorenja za odbacivanje
- Dugmad za prebacivanje stanja i checkbox/radio funkcionalnost
- Vrteški za sva ponašanja slajdova, kontrole i indikatore
- Sažmi za uključivanje/isključivanje vidljivosti sadržaja
- Padajući meni za prikaz i pozicioniranje (takođe je potreban Popper )
- Modali za prikazivanje, pozicioniranje i ponašanje pomicanja
- Navbar za proširenje našeg dodatka Collapse za implementaciju odzivnog ponašanja
- Vanplatna za prikazivanje, pozicioniranje i ponašanje pomicanja
- Zdravice za prikazivanje i odbacivanje
- Oznake alata i skočni prozori za prikaz i pozicioniranje (takođe zahtijeva Popper )
- Scrollspy za ponašanje pomicanja i ažuriranja navigacije
Početni šablon
Obavezno postavite svoje stranice prema najnovijim standardima dizajna i razvoja. To znači korištenje HTML5 doctype i uključivanje metaoznake viewport-a za pravilno reagiranje. Stavite sve zajedno i vaše stranice bi trebale izgledati ovako:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
Za sljedeće korake, posjetite Layout dokumente ili naše službene primjere da biste počeli postavljati sadržaj i komponente vaše web stranice.
Važni globali
Bootstrap koristi pregršt važnih globalnih stilova i postavki kojih ćete morati biti svjesni kada ga koristite, a svi su gotovo isključivo usmjereni na normalizaciju stilova među pretraživačima. Hajde da zaronimo.
HTML5 tip dokumenta
Bootstrap zahtijeva korištenje HTML5 doctype. Bez toga, vidjet ćete neki funky nekompletan stil, ali njegovo uključivanje ne bi trebalo uzrokovati značajne probleme.
<!doctype html>
<html lang="en">
...
</html>
Responzivna meta oznaka
Bootstrap je prvo razvijen za mobilne uređaje, strategija u kojoj prvo optimiziramo kod za mobilne uređaje, a zatim povećavamo komponente prema potrebi koristeći CSS medijske upite. Da biste osigurali pravilno renderiranje i zumiranje dodirom za sve uređaje, dodajte meta oznaku okvira za prikaz u svoj <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Možete vidjeti primjer ovoga u akciji u starter šablonu .
Veličina kutije
Za jednostavnije određivanje veličine u CSS-u, mijenjamo globalnu box-sizing
vrijednost sa content-box
na border-box
. Ovo osigurava padding
da neće utjecati na konačnu izračunatu širinu elementa, ali može uzrokovati probleme s nekim softverom treće strane kao što su Google Maps i Google Custom Search Engine.
U rijetkim prilikama kada ga trebate zamijeniti, koristite nešto poput sljedećeg:
.selector-for-some-widget {
box-sizing: content-box;
}
Uz gornji isječak, ugniježđeni elementi — uključujući generirani sadržaj putem ::before
i — ::after
svi će naslijediti specificirani box-sizing
za to .selector-for-some-widget
.
Saznajte više o modelu kutije i veličini na CSS Tricks .
Ponovo pokreni
Za poboljšano prikazivanje u različitim pretraživačima, koristimo Reboot da ispravimo nedosljednosti u svim pretraživačima i uređajima, dok pružamo malo više tvrdoglava resetiranja uobičajenih HTML elemenata.
Zajednica
Budite u toku sa razvojem Bootstrapa i obratite se zajednici pomoću ovih korisnih resursa.
- Pročitajte i pretplatite se na službeni Bootstrap blog .
- Razgovarajte s kolegama Bootstrapperima u IRC-u. Na
irc.libera.chat
serveru, u#bootstrap
kanalu. - Pomoć za implementaciju može se naći na Stack Overflow (označeno
bootstrap-5
). - Programeri bi trebali koristiti ključnu riječ
bootstrap
na paketima koji modificiraju ili dodaju funkcionalnost Bootstrapa prilikom distribucije putem npm- a ili sličnih mehanizama isporuke radi maksimalne vidljivosti.
Također možete pratiti @getbootstrap na Twitteru za najnovije tračeve i sjajne muzičke spotove.