in English

Uvod

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

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Za rad mnogih naših komponenti potrebna je upotreba JavaScripta. Točnije, zahtijevaju jQuery , Popper i naše vlastite JavaScript dodatke. Koristimo tanku verziju jQueryja , ali podržana je i puna verzija.

Postavite jedno od sljedećih <script>s blizu kraja svojih stranica, neposredno prije završne </body>oznake, kako biste ih omogućili. jQuery mora biti prvi, zatim Popper, a zatim naši JavaScript dodaci.

Paket

Uključite svaki Bootstrap JavaScript dodatak 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 prozore, ali ne i jQuery . Prvo uključite jQuery, a zatim Bootstrap JavaScript paket. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Komponente

Zanima vas koje komponente izričito zahtijevaju jQuery, naš JavaScript i Popper? Kliknite vezu za prikaz komponenti u nastavku. Ako niste sigurni 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
Scrollspy za ponašanje pomicanja i ažuriranja navigacije
Opisi alata i skočni prozori za prikaz i pozicioniranje (također zahtijeva Popper )

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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

To je sve što trebate za ukupne zahtjeve stranice. Posjetite dokumente o izgledu ili naše službene primjere da 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, shrink-to-fit=no">

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

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 .
Razgovarajte s kolegama Bootstrapperima u IRC-u. Na irc.libera.chatserveru, u #bootstrapkanalu.
Pomoć za implementaciju može se pronaći na Stack Overflowu (označeno bootstrap-4).
Programeri bi trebali koristiti ključnu riječ bootstrapna paketima koji mijenjaju ili dodaju funkcionalnost Bootstrapa kada distribuiraju 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.

CSP-ovi i ugrađeni SVG-ovi

Nekoliko komponenti Bootstrapa uključuje ugrađene SVG-ove u naš CSS za dosljedan i jednostavan stil komponenti na svim preglednicima i uređajima. Za organizacije sa strožim konfiguracijama CSP -a , dokumentirali smo sve instance naših ugrađenih SVG-ova (svi se primjenjuju putem background-image) tako da možete temeljitije pregledati svoje mogućnosti.

Gumb za zatvaranje (koristi se u upozorenjima i modalima)
Prilagođeni potvrdni okviri i radio gumbi
Prekidači oblika
Ikone za provjeru valjanosti obrazaca
Prilagođeni odabir izbornika
Kontrole vrtuljka
Gumbi za prebacivanje na navigacijskoj traci

Na temelju razgovora zajednice , neke opcije za rješavanje ovoga u vašoj vlastitoj bazi kodova uključuju zamjenu URL-ova s lokalno hostiranim sredstvima, uklanjanje slika i korištenje ugrađenih slika (nije moguće u svim komponentama) i izmjenu vašeg CSP-a. Naša preporuka je da pažljivo pregledate vlastita sigurnosna pravila i odlučite koji je najbolji put naprijed, ako je potrebno.