Prijeđi na glavni sadržaj Prijeđi na navigaciju dokumentima
Check
in English

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.

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 .


  1. 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>
    
  2. 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>
    
  3. 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 .

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

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.