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

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 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 komponent vyžaduje ke svému fungování použití JavaScriptu. Konkrétně vyžadují jQuery , Popper a naše vlastní pluginy JavaScriptu. Používáme tenké sestavení jQuery , ale podporována je i plná verze.

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>Nejprve musí být jQuery, potom Popper a poté naše pluginy JavaScriptu.

Svazek

Zahrňte každý Bootstrap JavaScript plugin 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, ale ne jQuery . Nejprve zahrňte jQuery a poté balíček Bootstrap JavaScript. Další informace o tom, co je součástí Bootstrap, naleznete v sekci 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ý

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/[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

Zajímá vás, které komponenty výslovně vyžadují jQuery, náš JavaScript a Popper? Klikněte na odkaz zobrazit komponenty níže. Pokud si nejste jisti 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í
Scrollspy pro chování posouvání a aktualizace navigace
Popisky a vyskakovací okna pro zobrazení a umístění (vyžaduje také Popper )

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, 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še, co potřebujete pro celkové požadavky na stránku. Navštivte dokumenty k rozložení nebo naše oficiální příklady a začněte 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í zobrazovací<head> oblast .

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

CSP a vložené soubory SVG

Několik komponent Bootstrap zahrnuje vložené SVG v našem CSS, které umožňují konzistentní a snadné stylování komponent napříč prohlížeči a zařízeními. Pro organizace s přísnějšími konfiguracemi CSP jsme zdokumentovali všechny instance našich vložených SVG (všechny jsou aplikovány prostřednictvím background-image), abyste si mohli důkladněji prohlédnout své možnosti.

Tlačítko Zavřít (používá se ve výstrahách a modálech)
Vlastní zaškrtávací políčka a přepínače
Přepínače formulářů
Ikony ověření formuláře
Vlastní výběr nabídek
Ovládání karuselu
Přepínací tlačítka navigační lišty

Na základě konverzace komunity některé možnosti, jak to vyřešit ve vaší vlastní kódové základně, zahrnují nahrazení adres URL lokálně hostovanými prostředky, odstranění obrázků a použití vložených obrázků (není možné ve všech komponentách) a úpravu vašeho CSP. Naším doporučením je pečlivě zkontrolovat své vlastní bezpečnostní zásady a v případě potřeby se rozhodnout pro nejlepší cestu vpřed.