Začněte s Bootstrap

Bootstrap je výkonný frontendový nástroj nabitý funkcemi. Sestavte cokoli – od prototypu po výrobu – během několika minut.

Na této straně

Rychlý start

Začněte tím, že zahrnete CSS a JavaScript připravené pro produkci Bootstrap přes CDN, aniž byste potřebovali jakékoli kroky sestavení. Podívejte se na to v praxi s tímto demo Bootstrap CodePen .

Vytvořte nový index.htmlsoubor v kořenovém adresáři projektu. Pro správnou odezvu v mobilních zařízeních zahrňte také <meta name="viewport">značku .

<!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. Umístěte <link>značku <head>pro naše CSS a <script>značku pro náš balíček JavaScript (včetně Popperu pro umístění rozbalovacích nabídek, poppers a popisků) před uzávěrkou </body>. Zjistěte více o našich odkazech 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 také zahrnout Popper a náš JS samostatně. Pokud neplánujete používat rozevírací seznamy, vyskakovací okna nebo popisky, ušetříte nějaké kilobajty tím, že nezahrnete 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 světe! Otevřete stránku ve zvoleném prohlížeči, abyste viděli svou Bootstrapped stránku. Nyní můžete začít stavět s Bootstrap vytvořením vlastního rozvržení , přidáním desítek komponent a využitím našich oficiálních příkladů .

Odkazy CDN

Jako reference zde jsou naše primární 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 také použít CDN k načtení kterékoli z našich dalších sestav uvedených na stránce Obsah .

Další kroky

Přečtěte si trochu více o některých důležitých globálních nastaveních prostředí , která Bootstrap využívá.
Přečtěte si o tom, co je součástí Bootstrap v naší části obsahu a níže v seznamu komponent, které vyžadují JavaScript .
Potřebujete trochu více energie? Zvažte vytvoření s Bootstrap zahrnutím zdrojových souborů prostřednictvím správce balíčků .
Chcete použít Bootstrap jako modul s <script type="module">? Přečtěte si prosím sekci o použití Bootstrapu jako modulu .

JS komponenty

Zajímá vás, které komponenty výslovně vyžadují náš JavaScript a Popper? Klikněte na odkaz zobrazit komponenty níže. Pokud si vůbec nejste jisti obecnou strukturou stránky, pokračujte ve čtení vzorové šablony stránky.

Zobrazit komponenty vyžadující JavaScript

Upozornění na propuštění
Tlačítka pro přepínání stavů a funkce zaškrtávacího políčka/rádia
Karusel pro všechna chování snímků, ovládací prvky a indikátory
Sbalit pro přepínání viditelnosti obsahu
Rozbalovací seznamy pro zobrazení a umístění (vyžaduje také Popper )
Modály pro zobrazení, umístění a chování posouvání
Navbar pro rozšíření našich pluginů Collapse a Offcanvas o implementaci responzivního chování
Navs s pluginem Tab pro přepínání panelů obsahu
Offcanvas pro zobrazení, umístění a chování posouvání
Scrollspy pro chování posouvání a aktualizace navigace
Toasty pro zobrazení a propuštění
Popisky a vyskakovací okna pro zobrazení a umístění (vyžaduje také Popper )

Důležití globalisté

Bootstrap využívá několik důležitých globálních stylů a nastavení, z nichž všechny jsou téměř výhradně zaměřeny na normalizaci stylů napříč prohlížeči. Pojďme se ponořit.

HTML5 doctype

Bootstrap vyžaduje použití doctype HTML5. Bez něj uvidíte nějaký funky a neúplný styl.

<!doctype html>
<html lang="en">
  ...
</html>

Responzivní meta tag

Bootstrap je vyvíjen mobile first , strategie, ve které nejprve optimalizujeme kód pro mobilní zařízení a poté podle potřeby škálujeme komponenty pomocí dotazů na média CSS. Chcete-li zajistit správné vykreslování a přiblížení dotykem pro všechna zařízení, přidejte do svého souboru metaznačku responzivní výřez <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

Příklad toho v akci můžete vidět v rychlém startu .

Velikost krabice

Pro jednodušší dimenzování v CSS přepneme globální box-sizinghodnotu z content-boxna border-box. To zajistí padding, že to neovlivní konečnou vypočítanou šířku prvku, ale může to způsobit problémy s některým softwarem třetích stran, jako jsou Mapy Google a Vlastní vyhledávač Google.

Ve vzácných případech, kdy jej potřebujete přepsat, použijte něco jako následující:

.selector-for-some-widget {
  box-sizing: content-box;
}

S výše uvedeným úryvkem zdědí všechny vnořené prvky – včetně generovaného obsahu prostřednictvím ::beforea – specifikovaný pro tento .::afterbox-sizing.selector-for-some-widget

Zjistěte více o modelu krabice a její velikosti v CSS Tricks .

Restartujte

Pro vylepšené vykreslování napříč prohlížeči používáme Reboot k opravě nekonzistentností mezi prohlížeči a zařízeními a zároveň poskytujeme trochu více názorové resety běžných prvků HTML.

Společenství

Zůstaňte v obraze o vývoji Bootstrapu a oslovte komunitu pomocí těchto užitečných zdrojů.

Přečtěte si a přihlaste se k odběru oficiálního blogu Bootstrap .
Zeptejte se a prozkoumejte naše diskuze na GitHubu .
Chatujte s ostatními Bootstrappery v IRC. Na irc.libera.chatserveru, v #bootstrapkanálu.
Nápovědu k implementaci naleznete na Stack Overflow (označené bootstrap-5).
Vývojáři by měli používat klíčové slovo bootstrapu balíčků, které upravují nebo rozšiřují funkčnost Bootstrapu při distribuci prostřednictvím npm nebo podobných doručovacích mechanismů, aby bylo možné co nejvíce zjistit.

Můžete také sledovat @getbootstrap na Twitteru pro nejnovější drby a úžasná hudební videa.