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.

Na ovoj stranici

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.jsi drugo bootstrap.bundle.min.jsuključ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-sizingvrijednost sa content-boxna border-box. Ovo osigurava paddingda 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 ::beforei — ::aftersvi će naslijediti specificirani box-sizingza 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.chatserveru, u #bootstrapkanalu.
Pomoć za implementaciju može se naći na Stack Overflow (označeno bootstrap-5).
Programeri bi trebali koristiti ključnu riječ bootstrapna 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.