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, koji besplatno pružaju ljudi na jsDelivru. 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-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

JS

Mnoge naše komponente zahtijevaju korištenje JavaScripta da bi funkcionirale. Konkretno, zahtijevaju jQuery , Popper.js i naše vlastite JavaScript dodatke. Postavite sljedeće <script>s pri kraju vaših stranica, neposredno prije završne </body>oznake, da biste ih omogućili. Prvo mora biti jQuery, zatim Popper.js, a zatim naši JavaScript dodaci.

Koristimo jQuery slim build , ali je podržana i puna verzija.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Zanima vas koje komponente izričito zahtijevaju jQuery, naš JS i Popper.js? Kliknite na link za prikaz komponenti ispod. Ako uopće niste sigurni u opću strukturu stranice, nastavite čitati za primjer predloška stranice.

Naš bootstrap.bundle.jsi bootstrap.bundle.min.jsuključuje Popper , ali ne jQuery . Za više informacija o tome šta je uključeno u Bootstrap, pogledajte naš odjeljak sa sadržajem .

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 prikaz i pozicioniranje (takođe zahtijeva Popper.js )
Modali za prikazivanje, pozicioniranje i ponašanje pomicanja
Navbar za proširenje našeg dodatka Collapse za implementaciju odzivnog ponašanja
Objašnjenje alata i skočni prozori za prikaz i pozicioniranje (takođe zahtijeva Popper.js )
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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 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.

Pratite @getbootstrap na Twitteru .
Pročitajte i pretplatite se na službeni Bootstrap blog .
Razgovarajte s kolegama Bootstrapperima u IRC-u. Na irc.freenode.netserveru, 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.