Úvod do hry Chotstrap 4
Bootstrap 4 cheat sheet obsahuje hlavnú generálnu opravu z Bootstrap 3. Došlo k mnohým zmenám vo väčšine komponentov, ktoré zahŕňajú tabuľky, formuláre, rozbaľovacie zoznamy, mriežky, navigačné lišty atď. Hlavné výhody rámcov ako Bootstrap spočíva v tom, že môžu urýchliť vývojové časy aj pri zachovaní kvality a konzistentnosti aplikácie na celom webe. Bootstrap 4 cheat sheet funguje na všetkých moderných prehliadačoch nad internetovým prieskumníkom 9.
Bootstrap 4
Bootstrap 4 je najnovšia a najpokročilejšia verzia bootstrapu. Je to najpopulárnejší rámec pre HTML, CSS a JavaScript, ktoré sa používajú na vývoj responzívnych a mobilných aplikácií. Bootstrap 4, rovnako ako predchádzajúce verzie, je bezplatný a je otvoreným zdrojom. Už nemusíme prepisovať a prepracovávať všetko od nuly pre rôzne sady zariadení. A tiež nemusíme trvať niekoľko hodín, aby sme sa všetko vyriešili a zaistili, že bude vyzerať a bude fungovať naprieč rôznymi prehliadačmi, jedinečnými platformami a zariadeniami.
Príkazy a popis na chotovke Bootstrap 4
Niektoré dôležité príkazy Bootstrap 4 a ich popis sú uvedené nižšie: -
| príkazy | popis |
| Pevný kontajner | Pevný kontajner má pevnú šírku. Keď sa veľkosť prehliadača zmení, jeho šírka zostane rovnaká až do nájdenia bodu prerušenia. |
| Nádoba na tekutiny | Nádoba na tekutinu sa rozkladá na celú šírku dostupného výrezu. Po zmene veľkosti prehliadača sa plynulo rozširuje a zmenšuje, čo znamená, že sa mení. |
| .Col- | Je určený pre extra malé zariadenia - šírka obrazovky je menšia ako 576 px |
| Coli-SM- | Je určená pre malé zariadenia - šírka obrazovky zostáva rovnaká alebo väčšia ako 576px |
| Coli-md- | Je to pre stredné zariadenia - šírka obrazovky zostáva rovnaká alebo väčšia ako 768px |
| Coli-Lg- | Je určený pre veľké zariadenia - šírka obrazovky sa rovná alebo je väčšia ako 992px |
| Coli-XL- | Je určené pre zariadenia xlarge - šírka obrazovky je rovná alebo väčšia ako 1200px |
- | h1 Nadpis veľkosti zavádzacej hlavy s 2, 5rem = 40px h2 Nadpis veľkosti zavádzacieho systému s 2rem = 32px h3 Nadpis veľkosti zavádzacieho systému s 1, 75rem = 28px h4 Nadpis veľkosti zavádzacej hlavy s 1, 5rem = 24px h5 Nadpis veľkosti zavádzacieho systému s 1, 25rem = 20px h6 Nadpis veľkosti zavádzacieho systému s 1rem = 16px |
| Tento prvok značky HTML poskytuje žlté pozadie s určitou výplňou | |
| Tento prvok značky HTML poskytuje bodkované orámovanie dna. | |
|
| Pridať triedu pomocou
sa používa na citovanie blokov obsahu zo zdroja, ktoré sú zvonku. |
| .font hmotnosti tučné | Tučné písmo |
| .font-kurzíva | Pre kurzívu |
| .font hmotnosti svetlo | Pre ľahký text |
| .font hmotnosti normálne | Pre normálny text |
| .viesť | To robí odsek viditeľne vyniknúť |
| .small | Označuje menší text, tj zmenšuje veľkosť písma na 85% veľkosti jeho rodiča. |
| .Texty ľavý | Označuje, že text je zarovnaný doľava. |
| .Texty - * - ľavá | Označuje, že text je zarovnaný doľava na všetkých obrazovkách veľkosti |
| .Texty-centrum | Označuje text zarovnaný na stred |
| .Texty - * - centrum | Označuje text zarovnaný na stred na všetkých obrazovkách veľkostí |
| .Texty-right | Označuje zarovnanie textu vpravo |
| .Texty - * - vpravo | Označuje zarovnaný text na všetkých obrazovkách veľkostí |
| .Texty-ospravedlniť | Označuje odôvodnený text |
| .Texty-neproporcionálne | Má text v tvare Monospaced |
| .Texty-nowrap | Označuje, že nie je zalamovaný text |
| .Texty-malé písmená | Označuje nízky text |
| .Texty-uppercase | Označuje horný text |
| .Texty-zarábať | Označuje veľké písmená |
| .initialism | Zobrazuje text vo vnútri prvku značky HTML menším písmom. Odstráni dostupný predvolený štýl zoznamu a ľavý okraj zo zoznamu vnorených zoznamov |
| .table | Trieda pridáva k stolu základný štýl. |
| .table pruhovaný | Trieda pridá do tabuľky pruhy zebry. |
| .table okrajom | Trieda pridá hranice na všetkých stranách tabuľky a buniek. |
| .table-hover | Trieda pridá efekt hover, tj sivú farbu pozadia na dostupné riadky tabuľky. |
| .table-tma | Trieda pridá do tabuľky čierne pozadie. |
Tipy a triky zadarmo s využitím Bootstrap 4 Cheat sheet: -
V tejto sekcii sú uvedené niektoré skvelé tipy a triky na rýchle prenikanie funkcií cheatového listu bootstrap 4 a vytvorenie úžasnej aplikácie pre mobil:
- S použitím. col- (breakpoint) -push- (number) alebo pri použití. col- (breakpoint) -pull- (number) triedy na stĺpce, je možné zmeniť poradie zadaných stĺpcov.
- Na rýchle a ľahké skrytie prvku iba na zariadeniach s xs existuje a. skrytá trieda xs, ktorú možno použiť na skrytie.
- , triedu skrytý (bod prerušenia) je možné použiť aj pre zvyšok bodov prerušenia a keď sa skombinuje, môže sa dosiahnuť skrytý rozsah, ako je uvedené vyššie. Napr .: - triedy .hidden-LG, .hidden-MD, .hidden-sm.
- Bootstrap prichádza s 5 predvolenými dostupnými štýlmi tlačidiel, ktoré sú predvolené, primárne, úspech a nebezpečenstvo. Ak je potrebné zmeniť tlačidlo, aby sa znížil jeho polomer ohraničenia alebo čalúnenie, najlepším spôsobom je to dosiahnuť prepísaním .btn
- Ak chcete zakázať rádiá a začiarkavacie políčka, musíte do nadradeného prvku .checkbox alebo to.radio pridať triedu disabled. potom pridajte zakázaný atribút na konkrétny vstup
- Ak chcete tlačidlá zakázať, pridajte do tlačidiel značiek HTML atribút disabled
To isté sa dá urobiť aj pridaním triedy .disabled do tlačidiel.
- Ak chcete ľahko centrovať prvok bloku vodorovne, je potrebné do neho pridať triedu stredných blokov, ako v.
- Ak sa má rýchlo dosiahnuť stredný vložený obsah alebo ak sa majú vykonať prvky vloženého bloku vo vnútri prvku div, pridajte do svojho nadradeného prvku triedu .text-center.
- Videá YouTube môžete tiež ľahko vložiť pomocou triedy Bootstrap, ktorá reaguje na vloženie, čo je pomocník, triedy. triedu vložiť-responzívny-16by9 alebo vložiť-responzívny-4by3 je potrebné zvoliť na základe pomeru strán videa
Bootstrap 4 Cheat sheet - záver
Nad bootstrap 4 cheat sheet poskytuje pohľad na to, čo je možné s bootstrap 4. K dispozícii je však komplexnejší sprievodca s tisíckami ďalších parametrov a značiek. Je zrejmé, že informácie týkajúce sa všetkých nemôžu byť poskytnuté v jednom článku, ani si vývojár nemusí pamätať všetky značky a triedy, aby mohol vyvíjať. Najlepším a najviac odporúčaným prístupom je mať takéto cheatové hárky po ruke a užívateľ by sa mal na tieto hárky obracať vždy, keď to bude potrebné. Tým sa zabezpečí, že sa všetka práca vykonáva v čase potreby, a zlepší sa tým porozumenie a znalosti používateľa o bootstrap 4 počas určitého obdobia.
Odporúčaný článok
Toto bol návod pre Chotstrap 4 Cheat sheet, kde sme diskutovali o obsahu a príkazoch, ako aj bezplatné tipy a triky Chotstrap 4 Cheat sheet, prečítajte si tiež nasledujúci článok, aby ste sa dozvedeli viac -
- Cheat Sheet CSS
- Rozdiely v zavádzaní verzií Jquery
- Jednoduchý a užitočný sprievodca Cheat sheet SQL
- Ultimate Cheat sheet pre programovací jazyk C ++ (základy)