Ú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.
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í.
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.
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, poté Popper.js a poté naše pluginy JavaScriptu.
Používáme tenké sestavení jQuery , ale podporována je i plná verze.
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.js
a bootstrap.bundle.min.js
zahrnují 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
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:
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.
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.
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.
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>
.
Příklad tohoto v akci můžete vidět v úvodní šabloně .
Pro jednodušší dimenzování v CSS přepneme globální box-sizing
hodnotu z content-box
na 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í:
S výše uvedeným fragmentem zdědí všechny vnořené prvky – včetně generovaného obsahu prostřednictvím ::before
a – specifikovaný pro daný prvek .::after
box-sizing
.selector-for-some-widget
Zjistěte více o modelu krabice a její velikosti v CSS Tricks .
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.
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.net
serveru, v##bootstrap
kaná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
bootstrap
u 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.