Úvod

Začněte s Bootstrap, celosvětově nejoblíbenějším rámcem pro vytváření responzivních webů zaměřených na mobily, s jsDelivr a úvodní stránkou šablony.

Na této straně

Rychlý start

Chcete rychle přidat Bootstrap do svého projektu? Použijte jsDelivr, bezplatný open source CDN. Používáte správce balíčků nebo potřebujete stáhnout zdrojové soubory? Přejděte na stránku ke stažení .

CSS

Zkopírujte a vložte šablonu stylů <link>do své <head>před všechny ostatní šablony stylů, aby se načetly naše 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 komponent vyžaduje ke svému fungování použití JavaScriptu. Konkrétně vyžadují naše vlastní JavaScript pluginy a Popper . Chcete-li je povolit, umístěte jeden z následujících <script>symbolů na konec stránek, těsně před uzavírací značku.</body>

Svazek

Zahrňte každý Bootstrap JavaScript plugin a závislost s jedním z našich dvou balíčků. Oba bootstrap.bundle.jsa bootstrap.bundle.min.jszahrnují Popper pro naše popisky a vyskakovací okna. Další informace o tom, co je součástí Bootstrap, naleznete v sekci 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ý

Pokud se rozhodnete použít řešení samostatných skriptů, musí být na prvním místě Popper (pokud používáte popisky nebo vyskakovací okna) a poté naše pluginy JavaScriptu.

<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

Pokud používáte <script type="module">, podívejte se prosím do sekce Používání Bootstrapu jako modulu .

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šeho pluginu Collapse o implementaci responzivního chování
Toasty pro zobrazení a propuštění
Popisky a vyskakovací okna pro zobrazení a umístění (vyžaduje také Popper )
Scrollspy pro chování posouvání a aktualizace navigace

Startovací šablona

Ujistěte se, že máte své stránky nastaveny podle nejnovějších návrhových a vývojových standardů. To znamená použití doctype HTML5 a zahrnutí metaznačky viewport pro správné chování. Dejte to všechno dohromady a vaše stránky by měly vypadat 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>

Další kroky naleznete v dokumentech k rozložení nebo v našich oficiálních příkladech , kde můžete začít s rozvržením obsahu a komponent vašeho webu.

Důležití globalisté

Bootstrap využívá několik důležitých globálních stylů a nastavení, o kterých si musíte být vědomi, když jej používáte, přičemž všechna jsou téměř výhradně zaměřena 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 neúplný styl, ale jeho zahrnutí by nemělo způsobit žádné výrazné škytavky.

<!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 tohoto v akci můžete vidět v úvodní šabloně .

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