Source

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? Upotrijebite jsDelivr, koji besplatno pružaju ljudi iz jsDelivr-a. 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

JS

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

Koristimo tanku verziju jQueryja , ali podržana je i puna verzija.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

Naš bootstrap.bundle.jsi bootstrap.bundle.min.jsuključuje Popper , ali ne i jQuery . Za više informacija o tome što je uključeno u Bootstrap, pogledajte naš odjeljak sadržaja .

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.js )
Modali za prikaz, pozicioniranje i ponašanje pomicanja
Navigacijska traka za proširenje našeg dodatka za sažimanje za implementaciju responzivnog ponašanja
Opisi i skočni prozori za prikaz i pozicioniranje (također zahtijeva Popper.js )
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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 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.

Slijedite @getbootstrap na Twitteru .
Pročitajte i pretplatite se na službeni Bootstrap blog .
Razgovarajte s kolegama Bootstrapperima u IRC-u. Na irc.freenode.netserveru, 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.