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 .
-
Stvorite novu
index.html
datoteku 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-sizing
vrijednost s content-box
na border-box
. Time se osigurava padding
da 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 ::before
i — ::after
svi će naslijediti navedeno box-sizing
za 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.chat
serveru, u#bootstrap
kanalu. - Pomoć za implementaciju može se pronaći na Stack Overflow (tagged
bootstrap-5
). - Razvojni programeri trebali bi koristiti ključnu riječ
bootstrap
na 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.