Započnite s Bootstrapom

Bootstrap je moćan set alata za sučelje prepun značajki. Napravite bilo što—od prototipa do proizvodnje—u nekoliko minuta.

Na ovoj stranici

Brzi početak

Započnite uključivanjem Bootstrapovog CSS-a i JavaScripta spremnog za proizvodnju putem CDN-a bez potrebe za bilo kakvim koracima izgradnje. Pogledajte to u praksi s ovom Bootstrap CodePen demonstracijom .

Stvorite novu index.htmldatoteku u korijenu vašeg projekta. Uključite i <meta name="viewport">oznaku za ispravno reagiranje na mobilnim uređajima.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Uključite Bootstrapov CSS i JS. Postavite <link>oznaku u <head>za naš CSS i <script>oznaku za naš JavaScript skup (uključujući Popper za pozicioniranje padajućih izbornika, iskačućih i alatnih opisa) prije zatvaranja </body>. Saznajte više o našim CDN vezama .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

Također možete zasebno uključiti Popper i naš JS. Ako ne planirate koristiti padajuće izbornike, skočne prozore ili opise alata, uštedite nekoliko kilobajta ne uključujući Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

Pozdrav svijete! Otvorite stranicu u pregledniku po izboru da vidite svoju Bootstrapped stranicu. Sada možete početi graditi s Bootstrapom stvaranjem vlastitog izgleda , dodavanjem desetaka komponenti i korištenjem naših službenih primjera .

CDN veze

Kao referenca, ovdje su naše primarne CDN veze.

Opis	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

Također možete koristiti CDN za preuzimanje bilo koje od naših dodatnih verzija navedenih na stranici Sadržaj .

Sljedeći koraci

Pročitajte nešto više o nekim važnim postavkama globalnog okruženja koje Bootstrap koristi.
Pročitajte što je uključeno u Bootstrap u našem odjeljku sadržaja i popisu komponenti koje zahtijevaju JavaScript u nastavku.
Trebate malo više snage? Razmotrite izgradnju s Bootstrapom uključivanjem izvornih datoteka putem upravitelja paketa .
Želite koristiti Bootstrap kao modul s <script type="module">? Pogledajte naš odjeljak o korištenju Bootstrapa kao modula .

JS 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ših dodataka Collapse i Offcanvas za implementaciju responzivnog ponašanja
Navigacije s dodatkom Tab za prebacivanje okna sadržaja
Offcanvases za prikazivanje, pozicioniranje i ponašanje pomicanja
Scrollspy za ponašanje pomicanja i ažuriranja navigacije
Zdravice za izlaganje i odbacivanje
Opisi alata i skočni prozori za prikaz i pozicioniranje (također zahtijeva Popper )

Važni globali

Bootstrap koristi pregršt važnih globalnih stilova i postavki, 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 otmjeni i nepotpuni stil.

<!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 toga na djelu u brzom početku .

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;
}

Uz gornji isječak, 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 istovremeno 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 .
Pitajte i istražite naše GitHub rasprave .
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.