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.

Na tejto stránke

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.htmlsú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-sizinghodnotu z content-boxna 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 ::beforea – špecifikované pre to .::afterbox-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.chatserveri, v #bootstrapkaná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 bootstrapna 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á.