Začnite s Bootstrap
Bootstrap je výkonný frontendový nástroj nabitý funkciami. Postavte čokoľvek – od prototypu až po výrobu – za pár minút.
Rýchly štart
Začnite zahrnutím CSS a JavaScript pripravených na produkciu Bootstrapu cez CDN bez potreby akýchkoľvek krokov na zostavenie. Pozrite si to v praxi s touto ukážkou Bootstrap CodePen .
-
Vytvorte nový
index.html
súbor v koreňovom adresári projektu. Zahrňte aj<meta name="viewport">
značku pre správne responzívne správanie v mobilných zariadeniach.<!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>
-
Zahrňte CSS a JS Bootstrapu. Umiestnite
<link>
značku<head>
pre náš CSS a<script>
značku pre náš balík JavaScript (vrátane Popper na umiestnenie rozbaľovacích zoznamov, poppers a popisov) pred zatvorením</body>
. Získajte viac informácií o našich odkazoch CDN .<!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>
Môžete tiež zahrnúť Popper a náš JS samostatne. Ak neplánujete používať rozbaľovacie ponuky, kontextové okná alebo popisy, ušetrite nejaké kilobajty tým, že nezahrniete 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>
-
Ahoj svet! Otvorte stránku vo svojom prehliadači, aby ste videli svoju Bootstrapped stránku. Teraz môžete začať stavať s Bootstrap vytvorením vlastného rozloženia , pridaním desiatok komponentov a využitím našich oficiálnych príkladov .
Odkazy CDN
Ako referenciu tu sú naše primárne odkazy CDN.
Popis | 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 |
Môžete tiež použiť CDN na načítanie ktorejkoľvek z našich dodatočných verzií uvedených na stránke Obsah .
Ďalšie kroky
-
Prečítajte si trochu viac o niektorých dôležitých nastaveniach globálneho prostredia , ktoré Bootstrap využíva.
-
Prečítajte si o tom, čo obsahuje Bootstrap v našej sekcii obsahu a nižšie nájdete zoznam komponentov, ktoré vyžadujú JavaScript .
-
Potrebujete trochu viac energie? Zvážte vytvorenie s Bootstrap zahrnutím zdrojových súborov cez správcu balíkov .
-
Chcete použiť Bootstrap ako modul s
<script type="module">
? Pozrite si časť o používaní Bootstrapu ako modulu .
komponenty JS
Zaujíma vás, ktoré komponenty výslovne vyžadujú náš JavaScript a Popper? Kliknite na odkaz zobraziť komponenty nižšie. Ak si vôbec nie ste istí všeobecnou štruktúrou stránky, pokračujte v čítaní vzorovej šablóny stránky.
Zobraziť komponenty vyžadujúce JavaScript
- Upozornenia na odvolanie
- Tlačidlá na prepínanie stavov a funkcie začiarkavacieho políčka/rádia
- Karusel pre všetky spôsoby správania, ovládacie prvky a indikátory snímok
- Zbaliť na prepnutie viditeľnosti obsahu
- Rozbaľovacie zoznamy na zobrazenie a umiestnenie (vyžaduje aj Popper )
- Modály pre zobrazenie, umiestnenie a rolovanie
- Navbar pre rozšírenie našich doplnkov Collapse a Offcanvas na implementáciu responzívneho správania
- Navigácia s doplnkom Tab na prepínanie panelov obsahu
- Offcanvas na zobrazovanie, umiestňovanie a posúvanie
- Scrollspy pre rolovanie a aktualizácie navigácie
- Toasty na zobrazenie a zrušenie
- Popisy a kontextové okná na zobrazenie a umiestnenie (vyžaduje aj Popper )
Dôležité globálne
Bootstrap využíva niekoľko dôležitých globálnych štýlov a nastavení, z ktorých všetky sú takmer výlučne zamerané na normalizáciu štýlov medzi prehliadačmi. Poďme sa ponoriť.
HTML5 doctype
Bootstrap vyžaduje použitie dokumentu HTML5. Bez toho uvidíte nejaký funky a neúplný štýl.
<!doctype html>
<html lang="en">
...
</html>
Responzívna metaznačka
Bootstrap je vyvinutý najprv pre mobilné zariadenia , čo je stratégia, v ktorej najprv optimalizujeme kód pre mobilné zariadenia a potom podľa potreby zväčšujeme komponenty pomocou mediálnych dopytov CSS. Ak chcete zabezpečiť správne vykreslenie a priblíženie dotykom pre všetky zariadenia, pridajte do svojho súboru metaznačku responzívnej zobrazovanej oblasti <head>
.
<meta name="viewport" content="width=device-width, initial-scale=1">
Príklad toho v praxi môžete vidieť v rýchlom štarte .
Veľkosť krabice
Pre jednoduchšie nastavenie veľkosti v CSS prepneme globálnu box-sizing
hodnotu z content-box
na border-box
. Tým sa zabezpečí padding
, že to neovplyvní konečnú vypočítanú šírku prvku, ale môže to spôsobiť problémy s niektorým softvérom tretích strán, ako sú Mapy Google a Vlastný vyhľadávací nástroj Google.
V zriedkavých prípadoch, keď ho potrebujete prepísať, použite niečo ako nasledovné:
.selector-for-some-widget {
box-sizing: content-box;
}
S vyššie uvedeným úryvkom zdedia všetky vnorené prvky – vrátane vygenerovaného obsahu prostredníctvom ::before
a – špecifikované pre to .::after
box-sizing
.selector-for-some-widget
Viac informácií o modeli krabice a veľkosti nájdete na stránke CSS Tricks .
Reštartovať
Na zlepšenie vykresľovania naprieč prehliadačmi používame Reboot na opravu nezrovnalostí medzi prehliadačmi a zariadeniami a zároveň poskytujeme trochu názornejšie resety bežných prvkov HTML.
Spoločenstva
Zostaňte v obraze o vývoji Bootstrapu a oslovte komunitu pomocou týchto užitočných zdrojov.
- Prečítajte si a prihláste sa na odber oficiálneho blogu Bootstrap .
- Opýtajte sa a preskúmajte naše diskusie na GitHub .
- Chatujte s ostatnými bootstrappermi v IRC. Na
irc.libera.chat
serveri, v#bootstrap
kanáli. - Pomoc pri implementácii nájdete na Stack Overflow (označené
bootstrap-5
). - Vývojári by mali pri distribúcii prostredníctvom npm alebo podobných mechanizmov doručovania používať kľúčové slovo
bootstrap
na balíkoch, ktoré upravujú alebo pridávajú k funkciám Bootstrap , aby ich bolo možné čo najviac zistiť.
Môžete tiež sledovať @getbootstrap na Twitteri , kde nájdete najnovšie klebety a úžasné hudobné videá.