Uvod

Započnite s Bootstrapom, najpopularnijim okvirom na svijetu za izradu responzivnih, mobilnih web stranica, s jsDelivrom i predloškom početne stranice.

Na ovoj stranici

Brzi početak

Želite li brzo dodati Bootstrap svom projektu? Koristite jsDelivr, besplatni CDN otvorenog koda. Koristite upravitelj paketa ili trebate preuzeti izvorne datoteke? Idite na stranicu za preuzimanja .

CSS

Kopirajte-zalijepite stilsku tablicu <link>u svoju <head>prije svih ostalih stilskih tablica da biste učitali naš CSS.

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

JS

Za rad mnogih naših komponenti potrebna je upotreba JavaScripta. Točnije, zahtijevaju naše vlastite JavaScript dodatke i Popper . Postavite jedno od sljedećih <script>s blizu kraja svojih stranica, neposredno prije završne </body>oznake, kako biste ih omogućili.

Paket

Uključite svaki Bootstrap JavaScript dodatak i ovisnost s jednim od naša dva paketa. Oba bootstrap.bundle.jsi bootstrap.bundle.min.jsuključuju Popper za naše opise alata i skočne prikaze. Za više informacija o tome što je uključeno u Bootstrap, pogledajte naš odjeljak sadržaja .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Odvojeni

Ako se odlučite za rješenje zasebnih skripti, Popper mora biti prvi (ako koristite opise alata ili skočne prikaze), a zatim naši JavaScript dodaci.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Moduli

Ako koristite <script type="module">, pogledajte naš odjeljak o korištenju Bootstrapa kao modula .

Komponente

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

Prikaži komponente za koje je potreban JavaScript

Upozorenja za odbacivanje
Gumbi za izmjenu stanja i potvrdni okvir/radio funkcionalnost
Vrtuljak za sva ponašanja klizača, kontrole i indikatore
Sažmi za promjenu vidljivosti sadržaja
Padajući izbori za prikaz i pozicioniranje (također zahtijeva Popper )
Modali za prikaz, pozicioniranje i ponašanje pomicanja
Navigacijska traka za proširenje našeg dodatka za sažimanje za implementaciju responzivnog ponašanja
Zdravice za izlaganje i odbacivanje
Opisi alata i skočni prozori za prikaz i pozicioniranje (također zahtijeva Popper )
Scrollspy za ponašanje pomicanja i ažuriranja navigacije

Početni predložak

Svakako postavite svoje stranice prema najnovijim standardima dizajna i razvoja. To znači korištenje HTML5 doctype i uključivanje metaoznake okvira za prikaz za odgovarajuće responzivno ponašanje. Spojite sve zajedno i vaše bi stranice 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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Za sljedeće korake posjetite dokumente o izgledu ili naše službene primjere kako biste započeli s postavljanjem sadržaja i komponenti svoje web-lokacije.

Važni globali

Bootstrap koristi pregršt važnih globalnih stilova i postavki kojih ćete morati biti svjesni kada ga koristite, a sve su gotovo isključivo usmjerene na normalizaciju stilova u različitim preglednicima. Zaronimo.

HTML5 doctype

Bootstrap zahtijeva upotrebu HTML5 doctype. Bez toga, vidjet ćete neki funky nedovršen stil, ali njegovo uključivanje ne bi trebalo uzrokovati značajne nedostatke.

<!doctype html>
<html lang="en">
  ...
</html>

Responzivna meta oznaka

Bootstrap je najprije razvijen za mobilne uređaje , strategija u kojoj prvo optimiziramo kod za mobilne uređaje, a zatim prema potrebi povećavamo komponente pomoću CSS medijskih upita. Kako biste osigurali ispravno prikazivanje i zumiranje dodirom za sve uređaje, dodajte meta oznaku responzivnog okvira za prikaz u svoj <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Možete vidjeti primjer ovoga na djelu u početnom predlošku .

Dimenzioniranje kutije

Za jednostavnije dimenzioniranje u CSS-u, mijenjamo globalnu box-sizingvrijednost s content-boxna border-box. Time se osigurava paddingda ne utječe na konačnu izračunatu širinu elementa, ali može uzrokovati probleme s nekim softverom trećih strana kao što su Google Maps i Google Custom Search Engine.

U rijetkim slučajevima kada ga morate nadjačati, upotrijebite nešto poput sljedećeg:

.selector-for-some-widget {
  box-sizing: content-box;
}

S gornjim isječkom, ugniježđeni elementi—uključujući generirani sadržaj putem ::beforei — ::aftersvi će naslijediti navedeno box-sizingza to.selector-for-some-widget .

Saznajte više o modelu okvira i veličini na CSS Tricks .

Ponovno podizanje sustava

Za poboljšano renderiranje u više preglednika, koristimo ponovno pokretanje za ispravljanje nedosljednosti u preglednicima i uređajima, dok pružamo malo odlučnija resetiranja uobičajenih HTML elemenata.

Zajednica

Budite u tijeku s 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 pronaći na Stack Overflow (taggedbootstrap-5 ).
Razvojni programeri trebali bi koristiti ključnu riječ bootstrapna paketima koji mijenjaju ili dodaju funkcionalnost Bootstrapa prilikom distribucije putem npm- a ili sličnih mehanizama isporuke za maksimalnu vidljivost.

Također možete pratiti @getbootstrap na Twitteru za najnovije tračeve i sjajne glazbene videe.