Přehled
Komponenty a možnosti pro uspořádání vašeho projektu Bootstrap, včetně obalových kontejnerů, výkonného systému mřížky, flexibilního mediálního objektu a responzivních tříd obslužných programů.
Kontejnery jsou nejzákladnějším prvkem rozvržení v Bootstrapu a jsou vyžadovány při použití našeho výchozího systému mřížky . Vyberte si z responzivního kontejneru s pevnou šířkou (což znamená jeho max-width
změny v každém bodě přerušení) nebo fluidního kontejneru (to znamená, že je 100%
neustále široký).
I když lze kontejnery vnořit, většina rozvržení vnořený kontejner nevyžaduje.
Použijte .container-fluid
pro kontejner plné šířky, pokrývající celou šířku výřezu.
Vzhledem k tomu, že Bootstrap je vyvinut jako první pro mobilní zařízení, používáme několik mediálních dotazů k vytvoření rozumných bodů přerušení pro naše rozvržení a rozhraní. Tyto body přerušení jsou většinou založeny na minimální šířce výřezu a umožňují nám zvětšovat prvky podle toho, jak se výřez mění.
Bootstrap primárně používá následující rozsahy dotazů na média – nebo body přerušení – v našich zdrojových souborech Sass pro naše rozvržení, mřížkový systém a komponenty.
Protože naše zdrojové CSS píšeme v Sass, všechny naše mediální dotazy jsou dostupné prostřednictvím mixů Sass:
Občas používáme dotazy na média, které jdou opačným směrem (daná velikost obrazovky nebo menší ):
Všimněte si, že vzhledem k tomu, že prohlížeče v současné době nepodporují rozsahové kontextové dotazy , obcházíme omezení min-
a max-
předpony a výřezy se zlomkovou šířkou (které se mohou za určitých podmínek vyskytnout například na zařízeních s vysokým rozlišením) pomocí hodnot s vyšší přesností pro tato srovnání. .
Opět platí, že tyto dotazy na média jsou také dostupné prostřednictvím mixů Sass:
Existují také dotazy na média a mixiny pro cílení na jeden segment velikostí obrazovek pomocí minimální a maximální šířky bodu přerušení.
Tyto mediální dotazy jsou také dostupné prostřednictvím mixů Sass:
Podobně mohou dotazy na média zahrnovat více šířek bodů přerušení:
Mix Sass pro cílení na stejný rozsah velikostí obrazovky by byl:
Několik komponent Bootstrap využívá z-index
vlastnost CSS, která pomáhá řídit rozložení tím, že poskytuje třetí osu pro uspořádání obsahu. V Bootstrapu používáme výchozí měřítko z-indexu, které bylo navrženo tak, aby správně vrstvilo navigaci, popisky a vyskakovací okna, modály a další.
Tyto vyšší hodnoty začínají na libovolném čísle, dostatečně vysoké a specifické, aby se v ideálním případě předešlo konfliktům. Potřebujeme standardní sadu těchto prvků napříč našimi vrstvenými komponentami – popisky, vyskakovací okna, navigační panely, rozevírací seznamy, modály – abychom mohli být v chování přiměřeně konzistentní. Není důvod, proč bychom nemohli použít 100
+ nebo 500
+.
Nepodporujeme přizpůsobení těchto individuálních hodnot; pokud změníte jeden, budete pravděpodobně muset změnit všechny.
Abychom zvládli překrývající se hranice v rámci komponent (např. tlačítka a vstupy ve vstupních skupinách), používáme nízké jednociferné z-index
hodnoty 1
, 2
, a 3
pro výchozí stavy, přechod a aktivní stavy. Při hover/focus/active dáme konkrétní prvek do popředí s vyšší z-index
hodnotou, abychom ukázali jeho hranici nad sourozeneckými prvky.