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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Mnoge naše komponente zahtijevaju korištenje JavaScripta da bi funkcionirale. Konkretno, zahtijevaju jQuery , Popper i naše vlastite JavaScript dodatke. Koristimo jQuery slim build , ali je podržana i puna verzija.

Postavite jedan od sljedećih <script>s blizu kraja vaših stranica, neposredno prije završne </body>oznake, da ih omogućite. jQuery mora biti prvi, zatim Popper, a zatim naši JavaScript dodaci.

Bundle

Uključite svaki Bootstrap JavaScript dodatak u jedan od naša dva paketa. I jedno bootstrap.bundle.jsi drugo bootstrap.bundle.min.jsuključuje i Popper za naše opise alata i iskačuće poruke, ali ne i jQuery . Prvo uključite jQuery, a zatim Bootstrap JavaScript paket. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Komponente

Zanima vas koje komponente izričito zahtijevaju jQuery, naš JavaScript i Popper? Kliknite na link za prikaz komponenti ispod. Ako niste sigurni 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
Vrtuljak za sva ponašanja slajdova, kontrole i indikatore
Sažmi za uključivanje/isključivanje vidljivosti sadržaja
Padajući meni za prikazivanje i pozicioniranje (takođe zahtijeva Popper )
Modali za prikazivanje, pozicioniranje i ponašanje pomicanja
Navbar za proširenje našeg dodatka Collapse za implementaciju odzivnog ponašanja
Scrollspy za ponašanje pomicanja i ažuriranja navigacije
Oznake alata i skočni prozori za prikaz i pozicioniranje (takođe zahtijeva Popper )

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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

To je sve što vam treba za ukupne zahtjeve stranice. Posjetite dokumente o rasporedu ili naše službene primjere da biste započeli s postavljanjem sadržaja i komponenti vaše 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, shrink-to-fit=no">

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-4).
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.

CSP-ovi i ugrađeni SVG-ovi

Nekoliko Bootstrap komponenti uključuje ugrađene SVG-ove u naš CSS za dosljedno i lako stiliziranje komponenti u svim pretraživačima i uređajima. Za organizacije sa strožijim CSP konfiguracijama , dokumentirali smo sve instance naših ugrađenih SVG-ova (svi se primjenjuju putem background-image) tako da možete detaljnije pregledati svoje opcije.

Dugme za zatvaranje (koristi se u upozorenjima i modalitetima)
Prilagođeni potvrdni okviri i radio dugmad
Prekidači oblika
Ikone za validaciju obrasca
Prilagođeni izborni meniji
Kontrole vrteške
Dugmad za prebacivanje na Navbaru

Na osnovu razgovora u zajednici , neke opcije za rješavanje ovoga u vašoj vlastitoj bazi koda uključuju zamjenu URL-ova sa lokalno hostiranim sredstvima, uklanjanje slika i korištenje inline slika (nije moguće u svim komponentama) i modificiranje vašeg CSP-a. Naša preporuka je da pažljivo pregledate vlastite sigurnosne politike i odlučite o najboljem putu naprijed, ako je potrebno.