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

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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

Mnoho našich komponentov vyžaduje na fungovanie JavaScript. Konkrétne vyžadujú jQuery , Popper a naše vlastné doplnky JavaScript. Používame tenkú zostavu jQuery , ale podporujeme aj plnú verziu.

Umiestnite jedno z nasledujúcich <script>s na koniec svojich stránok, priamo pred koncovú </body>značku, aby ste ich povolili. Najprv musí prísť jQuery, potom Popper a potom naše doplnky JavaScript.

Bundle

Zahrňte každý doplnok JavaScript Bootstrap do jedného z našich dvoch balíkov. Obidve bootstrap.bundle.jsa bootstrap.bundle.min.jszahŕňajú Popper pre naše popisy a kontextové okná, ale nie jQuery . Najprv zahrňte jQuery a potom balík JavaScript Bootstrap. 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/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" 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 potom naše doplnky JavaScript.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

Komponenty

Zaujíma vás, ktoré komponenty výslovne vyžadujú jQuery, náš JavaScript a Popper? Kliknite na odkaz zobraziť komponenty nižšie. Ak si nie ste istí š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
Scrollspy pre rolovanie a aktualizácie navigácie
Popisy a kontextové okná na zobrazenie a umiestnenie (vyžaduje aj Popper )

Š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, shrink-to-fit=no">

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

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

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

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

To je všetko, čo potrebujete pre celkové požiadavky na stránku. Navštívte dokumenty k rozloženia alebo naše oficiálne príklady a začnite 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, shrink-to-fit=no">

Príklad toho v akcii môžete vidieť 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

Prečítajte si viac o modeli krabice a veľkosti v 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-4).
Vývojári by mali používať kľúčové slovo bootstrapna balíkoch, ktoré upravujú alebo pridávajú funkcie Bootstrapu pri distribúcii prostredníctvom npm alebo podobných mechanizmov doručovania, aby bola dosiahnutá maximálna viditeľnosť.

Môžete tiež sledovať @getbootstrap na Twitteri , kde nájdete najnovšie klebety a úžasné hudobné videá.

CSP a vložené súbory SVG

Niekoľko komponentov Bootstrap obsahuje vložené súbory SVG v našom CSS, ktoré umožňujú konzistentný a jednoduchý štýl komponentov vo všetkých prehliadačoch a zariadeniach. Pre organizácie s prísnejšími konfiguráciami CSP sme zdokumentovali všetky inštancie našich vložených súborov SVG (všetky sú aplikované prostredníctvom background-image), aby ste si mohli dôkladnejšie prezrieť svoje možnosti.

Tlačidlo Zavrieť (používa sa v upozorneniach a spôsoboch)
Vlastné začiarkavacie políčka a prepínače
Prepínače formulárov
Ikony overenia formulárov
Vlastné výberové ponuky
Ovládanie karuselu
Prepínacie tlačidlá navigačnej lišty

Na základe konverzácie komunity niektoré možnosti, ako to vyriešiť vo vašej vlastnej kódovej základni, zahŕňajú nahradenie adries URL lokálne hostenými aktívami, odstránenie obrázkov a použitie vložených obrázkov (nie je možné vo všetkých komponentoch) a úpravu vášho CSP. Naším odporúčaním je dôkladne si preštudovať svoje vlastné bezpečnostné zásady a v prípade potreby rozhodnúť o najlepšej ceste vpred.