Source

Ú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, který zdarma poskytují lidé z jsDelivr. 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-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

JS

Mnoho našich komponent vyžaduje ke svému fungování použití JavaScriptu. Konkrétně vyžadují jQuery , Popper.js a naše vlastní JavaScriptové pluginy. Chcete-li je povolit, umístěte následující <script>s blízko konce stránek, těsně před uzavírací značku. </body>Nejprve musí být jQuery, potom Popper.js a poté naše pluginy JavaScriptu.

Používáme tenké sestavení jQuery , ale podporována je i plná verze.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Zajímá vás, které komponenty výslovně vyžadují jQuery, náš JS a Popper.js? 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.

Naše bootstrap.bundle.jsa bootstrap.bundle.min.jszahrnují Popper , ale ne jQuery . Další informace o tom, co je součástí Bootstrap, naleznete v sekci obsahu .

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.js )
  • 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í
  • Popisky a vyskakovací okna pro zobrazení a umístění (vyžaduje také Popper.js )
  • 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, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 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.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 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ů.

  • Sledujte @getbootstrap na Twitteru .
  • 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.freenode.netserveru, 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.