Úvod do Chotty 4 Bootstrap
Bootstrap 4 cheat sheet včlenil hlavní generální opravu od Bootstrap 3. K mnoha změnám došlo u většiny komponent, které zahrnují tabulky, formuláře, rozbalovací nabídky, mřížky, navbars atd. Hlavní výhody rámců jako Bootstrap je, že mohou zrychlit doby vývoje i při zachování kvality a konzistence aplikace na celém webu. Bootstrap 4 cheat sheet funguje na všech moderních prohlížečích nad internetovým průzkumníkem 9.
Bootstrap 4
Bootstrap 4 je nejnovější a nejpokročilejší verze bootstrapu. Je to nejpopulárnější rámec pro HTML, CSS a JavaScript, který se používá k vývoji responzivních a mobilních aplikací. Bootstrap 4, stejně jako předchozí verze, je zdarma a open-source. Už nemusíme přepisovat a přepracovávat vše od nuly pro různé sady zařízení. A také nemusíme čekat několik hodin, abychom se vše vyřešili a zajistili, aby to vypadalo a fungovalo napříč různými prohlížeči, jedinečnými platformami a zařízeními.
Příkazy a popis na chotovce Bootstrap 4
Níže jsou uvedeny některé důležité příkazy Bootstrap 4 a jejich popis: -
| Příkazy | Popis |
| Opravený kontejner | Pevný kontejner má pevnou šířku. Při změně velikosti prohlížeče zůstává jeho šířka stejná, dokud není nalezen zlom. |
| Nádoba na tekutinu | Nádoba na tekutinu se rozpíná na celou šířku dostupného výřezu. Rozšiřuje se a smršťuje se, což znamená, že se mění, když se mění velikost prohlížeče. |
| .Col- | Je pro extra malá zařízení - šířka obrazovky je menší než 576 pixelů |
| .Col-sm- | Je to pro malá zařízení - šířka obrazovky zůstává stejná nebo větší než 576px |
| .Col-md- | Je to pro střední zařízení - šířka obrazovky zůstává stejná nebo větší než 768px |
| .Col-lg- | Je to pro velká zařízení - šířka obrazovky se rovná nebo je větší než 992px |
| .Col-xl- | Je to pro xlarge zařízení - šířka obrazovky je rovna nebo větší než 1200px |
- | h1 Nadpis velikosti zaváděcího systému s 2, 5rem = 40px h2 Nadpis velikosti zaváděcího systému s 2rem = 32px h3 Nadpis velikosti zaváděcího systému s 1, 75rem = 28px h4 Nadpis velikosti zaváděcího systému s 1, 5rem = 24px h5 Nadpis velikosti zaváděcího systému s 1, 25rem = 20px h6 Směrování velikosti zaváděcího zařízení s 1rem = 16px |
| Tento prvek značky HTML poskytuje žlutou barvu pozadí s určitým čalouněním | |
| Tento prvek značky HTML poskytuje tečkované ohraničení. | |
|
| Přidat třídu s
se používá pro citování bloků obsahu ze zdroje, které jsou z vnějšku. |
| .před váha tučně | Tučným textem |
| .font-italic | Kurzíva |
| .hmotnost-lehký | Pro text s nízkou hmotností |
| .font-weight-normal | Pro normální text |
| .Vést | To dělá odstavec viditelně vyniknout |
| .malý | Označuje menší text, tj. Zmenšuje velikost písma na 85% velikosti jeho nadřazeného textu. |
| .text-left | Označuje, že text je zarovnán doleva. |
| .text - * - vlevo | Označuje, že text je zarovnán doleva na všech obrazovkách velikosti |
| .textové centrum | Označuje text zarovnaný na střed |
| .text - * - centrum | Označuje text zarovnaný na střed na všech obrazovkách velikosti |
| .text-right | Označuje text zarovnaný doprava |
| .text - * - správně | Označuje text zarovnaný doprava na všech obrazovkách velikosti |
| .text-justify | Označuje odůvodněný text |
| .text-monospace | Má Monospaced text |
| .text-nowrap | Označuje, že není zabalený text |
| .text-malá písmena | Označuje text s nízkými písmeny |
| .text-velká písmena | Označuje horní text |
| .text-capitalize | Označuje velká písmena |
| .initialismus | Zobrazí text uvnitř prvku značky HTML v písmu menší velikosti. Odstraňuje dostupný výchozí výchozí styl seznamu a levý okraj u vnořených seznamů položek |
| .stůl | Třída přidá základní styl ke stolu. |
| .tabulka | Třída přidá do tabulky pruhy zebry. |
| ohraničený stůl | Třída přidá ohraničení na všech stranách tabulky a buněk. |
| .table-hover | Třída přidá efekt přechodu, tj. Barvu šedého pozadí na dostupné řádky tabulky. |
| .table-dark | Třída přidá do tabulky černé pozadí. |
Tipy a triky zdarma pro používání Bootstrap 4 Cheat sheet: -
V této části jsou zmíněny některé skvělé tipy a triky, jak rychle hacknout funkce cheatového listu bootstrap 4 a vytvořit úžasnou aplikaci na mobilu: -
- S použitím. col- (breakpoint) -push- (number) nebo při použití. sloupce col- (breakpoint) -pull- (number) ke sloupcům, lze změnit pořadí zadaných sloupců.
- Chcete-li rychle a snadno skrýt prvek pouze na xs zařízeních, existuje. skrytá třída xs, kterou lze použít ke skrytí.
- . Třída skrytý (bod přerušení) lze použít také ke zbývajícím bodům přerušení a při kombinaci lze dosáhnout skrytého rozsahu, jak je uvedeno výše. Příklad: - třídy .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap přichází s 5 výchozími dostupnými styly tlačítek, kterými jsou výchozí, primární, úspěch a nebezpečí. Když je třeba změnit tlačítko, aby se snížil jeho poloměr ohraničení nebo čalounění, nejlepším způsobem je toho dosáhnout, je to přepsat .btn
- Chcete-li zakázat rádia a zaškrtávací políčka, je třeba přidat zakázanou třídu do nadřazeného prvku .checkbox nebo to.radio. pak přidejte zakázaný atribut na konkrétní vstup
- Chcete-li tlačítka deaktivovat, přidejte do tlačítek značek HTML atribut disabled
Totéž lze provést přidáním třídy .disabled do tlačítek.
- Chcete-li snadno centrovat prvek bloku vodorovně, je třeba do něj přidat třídu středového bloku, jako v.
- Má-li být rychle dosaženo středního vloženého obsahu nebo mají být provedeny prvky vloženého bloku uvnitř prvku div, přidejte do nadřazeného prvku třídu .text-center.
- Je také možné snadno vkládat videa z YouTube pomocí třídy Bootstrap, která reaguje na vložení, což je pomocník, třídy. třídu vložit-responzivní-16by9 nebo vložit-responzivní-4by3 je třeba zvolit na základě poměru stran videa
Bootstrap 4 Cheat sheet - závěr
Nad bootstrap 4 cheat sheet poskytuje pohled na to, co je možné s bootstrapem 4. Ale je k dispozici komplexnější průvodce s tisíci dalších parametrů a značek. Je zřejmé, že informace týkající se všeho nemohou být uvedeny v jediném článku, který si vývojář musí pamatovat také na všechny značky a třídy, aby se mohl vyvíjet. Nejlepší a nejvíce doporučovaný přístup je udržovat takové cheatové archy po ruce a uživatel by se na tyto archy měl odkazovat, kdykoli to bude potřeba. To zajistí, že veškerá práce bude provedena v okamžiku potřeby a zlepší se porozumění a znalost uživatele o bootstrapu 4 po určitou dobu.
Doporučený článek
To je průvodce po Bootstrap 4 Cheat sheet zde jsme diskutovali o obsahu a příkaz, stejně jako bezplatné tipy a triky Bootstrap 4 Cheat sheet můžete také podívat na následující článek se dozvědět více -
- Cheat Sheet CSS
- Bootstrap vs Jquery Differences
- Jednoduchý a užitečný průvodce Cheat sheet SQL
- Ultimate Cheat list pro programovací jazyk C ++ (základy)