Úvod

Začnite s Bootstrap, svetovo najpopulárnejším rámcom na vytváranie responzívnych webových stránok pre mobilné zariadenia, s jsDelivr a úvodnou stránkou šablóny.

Na tejto stránke

Rýchly štart

Chcete rýchlo pridať Bootstrap do svojho projektu? Použite jsDelivr, bezplatný open source CDN. Používate správcu balíkov alebo potrebujete stiahnuť zdrojové súbory? Prejdite na stránku sťahovania .

CSS

Skopírujte a vložte šablónu so štýlmi <link>do svojej <head>pred všetky ostatné šablóny so štýlmi, aby sa načítal náš CSS.

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

JS

Mnoho našich komponentov vyžaduje na fungovanie JavaScript. Konkrétne vyžadujú naše vlastné JavaScript pluginy a Popper . Umiestnite jedno z nasledujúcich <script>s na koniec svojich stránok, priamo pred koncovú </body>značku, aby ste ich povolili.

Bundle

Zahrňte každý Bootstrap JavaScript plugin a závislosť s jedným z našich dvoch balíkov. Obe bootstrap.bundle.jsa bootstrap.bundle.min.jszahŕňajú Popper pre naše popisy a kontextové okná. Viac informácií o tom, čo obsahuje Bootstrap, nájdete v našej sekcii obsahu .

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

Samostatné

Ak sa rozhodnete použiť samostatné riešenie skriptov, najprv musí byť Popper (ak používate popisky alebo kontextové okná) a až potom naše doplnky JavaScript.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

Moduly

Ak používate <script type="module">, pozrite si časť o používaní Bootstrapu ako modulu .

Komponenty

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 nášho doplnku Collapse na implementáciu responzívneho správania
Toasty na zobrazenie a zrušenie
Popisy a kontextové okná na zobrazenie a umiestnenie (vyžaduje aj Popper )
Scrollspy pre rolovanie a aktualizácie navigácie

Štartovacia šablóna

Uistite sa, že máte svoje stránky nastavené podľa najnovších štandardov dizajnu a vývoja. To znamená použitie HTML5 doctype a zahrnutie metaznačky viewport pre správne responzívne správanie. Dajte to všetko dokopy a vaše stránky by mali vyzerať takto:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

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

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

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Ďalšie kroky nájdete v dokumentoch k rozloženia alebo v našich oficiálnych príkladoch , aby ste mohli začať s rozložením obsahu a komponentov vašej lokality.

Dôležité globálne

Bootstrap využíva niekoľko dôležitých globálnych štýlov a nastavení, o ktorých si musíte byť vedomí pri jeho používaní, pričom 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 neho uvidíte nejaký funky neúplný štýl, ale jeho zahrnutie by nemalo spôsobiť žiadne výrazné čkanie.

<!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 môžete vidieť v akcii v úvodnej šablóne .

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