Source

Ú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, ktorý bezplatne poskytujú ľudia z jsDelivr. 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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

JS

Mnoho našich komponentov vyžaduje na fungovanie JavaScript. Konkrétne vyžadujú jQuery , Popper.js a naše vlastné doplnky JavaScript. Umiestnite nasledujúce <script>s blízko konca svojich stránok, tesne pred koncovú </body>značku, aby ste ich povolili. Najprv musí prísť jQuery, potom Popper.js a potom naše doplnky JavaScript.

Používame tenkú zostavu jQuery , ale podporujeme aj plnú verziu.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Zaujíma vás, ktoré komponenty výslovne vyžadujú jQuery, náš JS a Popper.js? 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 ponuky na zobrazenie a umiestnenie (vyžaduje aj Popper.js )
  • Modály pre zobrazenie, umiestnenie a rolovanie
  • Navbar pre rozšírenie nášho doplnku Collapse na implementáciu responzívneho správania
  • Popisy a kontextové okná na zobrazenie a umiestnenie (vyžaduje aj Popper.js )
  • 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, shrink-to-fit=no">

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

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

To je všetko, čo potrebujete pre celkové požiadavky na stránku. Navštívte dokumenty Layout 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 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.

  • Sledujte @getbootstrap na Twitteri .
  • Prečítajte si a prihláste sa na odber oficiálneho blogu Bootstrap .
  • Chatujte s ostatnými bootstrappermi v IRC. Na irc.freenode.netserveri, 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á.