Preskočiť na hlavný obsah Preskočiť na navigáciu v dokumentoch
Check
in English

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 .


  1. 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>
    
  2. 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>
    
  3. 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 .

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

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á.