Započnite s Bootstrapom

Bootstrap je moćan frontend alat pun funkcija. Napravite bilo šta – od prototipa do proizvodnje – za nekoliko minuta.

Na ovoj stranici

Brzi početak

Započnite tako što ćete uključiti Bootstrap-ov CSS i JavaScript spreman za proizvodnju putem CDN-a bez potrebe za bilo kakvim koracima izrade. Pogledajte to u praksi uz ovaj Bootstrap CodePen demo .

Kreirajte novu index.htmldatoteku u korijenu vašeg projekta. Uključite i <meta name="viewport">oznaku za pravilno odzivno ponašanje 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 Bootstrap-ov CSS i JS. Postavite <link>oznaku u <head>naš CSS i <script>oznaku za naš JavaScript paket (uključujući Popper za pozicioniranje padajućih menija, ikona i opisa alata) 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 posebno uključiti Popper i naš JS. Ako ne planirate da koristite padajuće menije, skočne menije ili opise alata, uštedite nekoliko kilobajta ne uključujući Poppera.

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

Zdravo svijete! Otvorite stranicu u pretraživaču po izboru da vidite svoju Bootstrapped stranicu. Sada možete početi graditi s Bootstrapom kreiranjem vlastitog izgleda , dodavanjem desetina komponenti i korištenjem naših službenih primjera .

CDN linkovi

Kao referenca, evo naših primarnih CDN veza.

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 da preuzmete bilo koju od naših dodatnih verzija navedenih na stranici Sadržaj .

Sljedeći koraci

Pročitajte nešto više o nekim važnim globalnim postavkama okruženja koje Bootstrap koristi.
Pročitajte o tome šta je uključeno u Bootstrap u našem odjeljku sadržaja i na listi komponenti koje zahtijevaju JavaScript u nastavku.
Trebate malo više snage? Razmislite o izgradnji sa Bootstrapom tako što ćete uključiti izvorne datoteke putem menadžera paketa .
Želite koristiti Bootstrap kao modul sa <script type="module">? Molimo pogledajte našu sekciju o korištenju Bootstrapa kao modula .

JS 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ših dodataka Collapse i Offcanvas za implementaciju odzivnog ponašanja
Navs sa dodatkom Tab za prebacivanje okna sadržaja
Vanplatna za prikazivanje, pozicioniranje i ponašanje pomicanja
Scrollspy za ponašanje pomicanja i ažuriranja navigacije
Zdravice za prikazivanje i odbacivanje
Oznake alata i skočni prozori za prikaz i pozicioniranje (takođe zahtijeva Popper )

Važni globali

Bootstrap koristi pregršt važnih globalnih stilova i postavki, od kojih su svi 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 i nekompletan stajling.

<!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 na djelu u brzom startu .

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 .
Pitajte i istražite naše GitHub diskusije .
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.