Použití kontejneru Bootstrap poskytne uživateli silné základní místo. A co opravdu dělá to působivé, je široká škála komponent, které mohou být přidány do webu. Vzhledem k tomu, že Bootstrap již obsahuje vestavěné CSS a javascript, jsou vyvinuty komponenty a funkční. Samozřejmě, uživatel je může dále upravovat tak, aby přizpůsobili stránky vašim představám.
Princip sítě
Tato sada nástrojů pro tvorbu webových stránek a webových aplikací je založená na správné měřítku komponent pro zobrazení na různých obrazovkách. Mřížkový systém Container Bootstrap se skládá z kontejnerů, řádků a sloupců, které se používají pro konkrétní uspořádání webu. Kontejnery Bootstrap se používají k určení šířky rozvržení. Prvky se přidávají do kontejnerů a ovlivňují jejich šířku. Je to prvek s třídou = "kontejner" a ovlivňuje všechny prvky v něm.
Kontejnery mají 15 pixelů, které zjemňují pohled od konce stránky. Řádky a sloupce se přidávají uvnitř kontejnerů s pevnou výchozí šířkou kontejneru Bootstrap Container, která se liší v závislosti na velikosti prohlížeče. Šířka zařízení je uvedena v následující tabulce:
Zobrazit šířku zařízení
Šířka nádoby
18)
Auto
768px - 991 px ) 992px - 119px
970 px
1200 px and higher 1170 px
Pravidla sítě:
Sloupce by měly býtpřímý podřízený prvek linky.
Linky se používají pouze pro ukládání sloupců a nic jiného.
Linky by měly být umístěny uvnitř kontejneru.
Tato pravidla jsou velmi důležitá. Linky a sloupce vždy pracují společně a uživatel by neměl používat jeden bez druhého.
Nejprve se to může zdát komplikované, ale je to opravdu snadné, stačí pochopit, jak funguje Grid. Pokud uživatelé nechtějí, aby se kontejnery měnily v pevné šířce, můžete namísto třídy = "kontejner" použít class = "container-fluid". To způsobí, že se kontejnery vždy přizpůsobí kontejneru Bootstrap na celou šířku obrazovky a změní velikost pevné šířky. Gridový systém umožňuje až 12 sloupců na stránku. Mohou být použity samostatně nebo seskupeny. Chcete-li seskupit sloupce dohromady, musíte vytvořit řádek, pro který přidat div s třídou = "řádek", který obsahuje kód sloupce.
Nastavení intervalu
Abyste měli elegantní tvar, musíte nejprve pochopit, jak Bootstrap nastavuje interval. U všech formulářů je nutné umístit štítek a ovládací prvek do třídy = "forma-group". Ovládací prvky a štítky mají styl intervalu. Musí být nutně v jejich vlastní třídě.
Třída řízení formuláře nastavuje šířku kontejneru Bootstrap na 100% a nutí jej pokrýt šířku formuláře a změnit jeho velikost pomocí okna. Tato vlastnost slouží k zadávání a výběru ovládacích prvků. Vybraný ovládací prvek bude tedy naformátován pomocí zapnutokontrolu nad formulářem a bude vypadat jako volba s třídou řízení formuláře nebo bez ní a vstupní správa bude formátována s přidáním kontrolního formuláře.
Ovládací prvky
Ovládací prvky, jako jsou textová pole, zaškrtávací políčka, jsou části, které lze snadno přidat do formuláře. Přihlašte se do polí, ve kterých může uživatel zadávat text. Toto je základní princip pro zadání Bootstrap kontejneru pomocí atributu HTML5 textu. Typ oznamuje vzhled vstupu. Náplň definuje text, který se zobrazí ve vstupním poli. Tyto typy lze deklarovat přidáním na vstup. Pokud chcete přidat e-mail, změňte jej na typ = "email". Měli byste mít na paměti, že musíte zadat typ vstupu tak, aby byl správně formátován. Ovládací prvek oblasti textu je oblast, která umožňuje použít velké množství textu, například pro sekci komentářů. Když přidáte textovou oblast, můžete ji upravit tak, že deklarujete, kolik řádků chcete zachytit. Vzhledem k tomu, že kontejner Bootstrap je založen na řádcích a sloupcích, můžete zvýšit nebo snížit počet řádků o textovou oblast. Zaškrtávací políčka umožňují uživatelům vybrat několik možností. Ve výchozím nastavení jsou zaškrtávací políčka zobrazeny svisle. Můžete však změnit zaškrtávací políčka zobrazující vodorovně změnou typu type = "checkbox-inline".
Inline fonty jsou konfigurovány odlišně než základní. Ve vestavěném příznaku je třída přiřazena = "checkbox-inline". Pokud se však podíváte na základní kontrolní kód, můžete se podívatže třída = "zaškrtávací políčko" je deklarováno v elementu, ne v prvku. Přepínač je podobný značce. Současně může být vybrán pouze jeden přepínač, zatímco samotné příznaky mohou mít několik výběrů. Stejně jako u příznaků jsou ve výchozím nastavení zobrazeny vertikální přepínače, ačkoli můžete také změnit kód na displeji a vodorovně.
Typy nakládacích formulářů
Existuje několik typů formulářů: základní, vestavěné a vodorovné. Každý z nich se odlišuje svým vlastním způsobem. Vestavěné komponenty se nazývají ovládací prvky, které jsou vertikálně zarovnány. U horizontálních tvarů jsou ovládací prvky nastaveny vodorovně. Hlavní formulář pochází z globálního stylu rozvržení. Chcete-li vytvořit základní formulář, stačí vytvořit formulář v kódu HTML pomocí prvku
a potom přidat značky Bootstrap ke značkám
. Ostatní dva typy formulářů používají třídy k jejich rozlišení. Není-li třída zadána, výchozí formulář odpovídá základnímu. Chcete-li vytvořit vestavěný formulář, musíte přidat prvek class = "form-inline"
. Automaticky upraví ovládací prvky tvaru ve svislém směru. Stejně jako v inline podobě se horizontální forma získává přidáním prvku class = "form-horizontální". Automaticky nastaví ovladače vodorovně.
Nastavení řádků a sloupců
Řádky pokrývají šířku bootstrapu kontejneru. Mají zápornou 15-ti pixelovou zásobu na konci instalovanou svým kontejnerem. To je způsobeno skutečností, že každá z nich má svůj vlastní 15 pixelůkterá nahrazuje značku kontejneru. Sloupce zarovnané vedle sebe budou mít 15-násobnou hranu, což vede k 30-pixelovému okraji mezi oběma sloupci.
Linky mají registraci -15 px, což zruší přidání 15 px kontejneru. Obsah ve sloupci bude záviset na poli 15 pixelů sloupce. Sloupce mají registraci 15 pixelů. Sloupce vedle sebe budou mít 15 pixelů, což bude mít za následek vyrovnávací paměť o velikosti 30 pixelů.
Nahradit předponu a číslo sloupce s převládající velikostí a počtem sloupců. Předpony určují, kterému zařízení je přiřazen sloupec Bootstrap 4 a výška kontejneru. Například xs je určen pro malé obrazovky, jako jsou telefony.
Předpona
xs )
Pokud je sloupec specifikován s předponou pro menší zařízení, bude zobrazen podobným způsobem na větších zařízeních. Jinými slovy, sloupec, který je definován jako sm, bude pracovat pro zařízení s velikostí tablet nebo více. Výhody použití sloupců:
Vytvořte vodorovné úseky z výřezu.
Mohou mít různé šířky.
Může se lišit v šířce při různých šířkách obrazovky.
Možnost stohování vodorovně zleva doprava, pak vertikálně nahoru a dolů.
Může změnit pozici (uspořádání) bratrů a sester v téže linii.
V jedné řadě mají stejnou výšku jako ostatní bratři a sestry.
Může "růst" nebo "stlačit" v šířce.
Může automaticky "zabalit" nebo"Vypusťte" vertikálně podle potřeby nebo na různých šířkách obrazovky.
Může obsahovat více řádků & amp; Sloupce _ hnízdí.
Aktualizace struktury css
Po mnoha letech čekání byl Bootstrap 4 propuštěn v lednu 2018. Bootstrap byla první rozšířená struktura css. Nová verze programu je založena na této úspěšné nadaci a má mnoho vylepšení, které usnadňují používání mřížky. Bootstrap 4 je OG vhodných rozložení. Nový konfigurační soubor angular.json má zcela jinou strukturu než původní úhlová-cli.json. Pokud má uživatel v úmyslu soustředit se na použití mřížky, aby vytvořil flexibilní uspořádání v aplikacích s úhlem, musí používat pouze balíky bootstrap-grid a bootstrap-reboot. Soubory Bootstrap kontejneru CSS můžete přidat přímo do vlastnosti "styly" angular.json. Importování mřížky do hlavního souboru style.scss má před importováním do souboru angular.json jednu důležitou výhodu. Umožňuje upravit libovolnou proměnnou použitou definicemi stylu Bootstrap. V praxi může být užitečné vytvořit soubor styles-variables.scss vedle styles.scss ve složce src s citlivými zarážkovými body definovanými ve výchozím nastavení ve verzi Bootstrap. Použití stylu-variables.scss umožňuje přepsat výchozí síť a implementovat vlastní vlastní styly. Proto jej můžete importovat do prvního řádku - styles.scss, který bude použit s aplikací Bootstrap, ale také v jakémkoliv jiném souboru stylů součástí pro důslednou implementaci selektivní odpovědi.
Pokyny pro začátečníky
Bootstrap je velmi užitečná platforma pro rozhranírychlejší a snadnější vývoj webových aplikací. Uživatel se nebude muset starat o to, že má praktické zkušenosti s výkonným rozhraním při jeho používání. Průvodce Bootstrap pro začátečníky pokrývá následující postupy, které vyžadují:
Přidejte podporu IE8 pro dotazy HTML5 a multimédia.
Přidejte navigační lištu.
Přidejte obsah na stránku kontejneru.
Přidat titul.
Přidejte tabulku.
Přidejte formulář do tabulky.
Přidejte tlačítko Bootstrap s Glyphicon.
Přidejte okno s dobrým vyhledáváním.
Závěrečný kód Live Demo.
Online zdroje.
Následující části se stanou příručkou krok za krokem pro první vývoj webových aplikací pomocí Bootstrap.
Stáhnout CDN a HTML5
Existuje několik způsobů, jak používat Bootstrap na webové stránce. Jedním z nich je použití CDN nebo sítě pro doručování obsahu. Použití bootstrap CDN znamená, že uživatel nebude stahovat a ukládat počáteční zaváděcí soubory na serveru nebo v místním počítači. Chcete-li to provést, vytvořte nový soubor index.html. Otevřete soubor, zadejte následující kód a uložte jej. Pokud chce uživatel použít jeho kopii, napište:
Musíte se ujistit, že je soubor stažen. Pak jej umístěte do stejného adresáře jako index.html například do složky "bootstrap-4". jQuery je vyžadováno pro funkci javascript Bootstrap. Pokud chcete použít svou kopii jQuery:
Pre-potřeba, aby se ujistil, že jQuery je vložen a umístěn do stejného adresáře jako index.html například filename jQuery «jQuery-300.min.js». Kontejner-tekutina je hlavní prvek se 100% šířkou svého vlastního uspořádání, provádí boční odsazení pro návrh sloupců. Kapalina kontejneru Bootstrap vytvoří na menších zařízeních celou šířku, jako je kontejnerová tekutina.
JavaScript a podpora IE8
Bootstrap funkce, jako například navigační liště, které vyžadují soubor JavaScript Bootstrap. K tomu, umístěte následující kód po kódu z předchozí části:
také nutné přidat podporu pro HTML5 a IE8 medyazaprosov. Bootstrap je základna, která je propojena s mobilní technologií, a proto reaguje na různá zařízení a velikosti obrazovky. Navigační panely jsou velmi chladné. Uživatelé nebudou hledat data na webu, pokud je kontejner Bootstrap centrálně správně používán. Chcete-li to provést, vložte do značky následující kód.
Home
všechny
Demo
Kontaktní
div tag bude mít obsah webových stránek. To je důležité, protože definuje šířku stránky obsahu. Pokud návštěvník používá velkou velikost obrazovky, nebude se rozptýlit. Chcete-li přidat kontejner obsahu, vložte následující kód do kódu předchozího oddílu.
header Registrace tabulka
Titul je důležité, protože to řekne uživateli, jaké stránky se jedná. Umístěte následující kód mezi značky "kontejneru div" předchozího oddílu.
Bootstrap Ukázka stránky s formulářem
V tomto příkladu je tabulka, která budeuložte prvky formuláře, například textové pole. Desktop vypadá dobře, nemá žádný visící efekt a reaguje na akce uživatele. Chcete-li to provést, vložte následující kód do předchozí části.
Name
Kontaktní číslo
(175 )
, adresa
seznam
(191 )
Příklad této formy bude obsahovat více textových polí, oblast textu, a rozevírací seznamu. Chcete-li to provést, nahraďte kód předchozího oddílu následujícími.
)
, adresa
seznam
(235 )
Přidat tlačítko GLYPHICON
Glyphicon je knihovna monochromatických ikon a symbolů vytvořených s důrazem na jednoduchost a pohodlnou orientaci. Tlačítka ikon vypadají hezky a knihovna signalizuje uživateli, pro které tlačítko je určeno. Ikona a barevné tlačítka snadno indikují, co dělá tlačítko v webové aplikaci. Chcete-li to provést, vložte následující kód mezi "poslední tagy" předchozí části.
Můžete také přidat poznámky pomocí bootstrapu umístěním následujícího kódu před otevřením značky dev z předchozí části.
Nad hlavou!codeofaninja.com!
V případě, že uživatel stáhne kód, ale výstup se zobrazí následující zpráva:
předmětu
Popis
Index-cdn.html
PoužitíBootstrap struktura v CDN. Pracuje, pokud je váš počítač online.
Index-local.html
Využívá staženu strukturu bez CDN. Pracuje na místním hostiteli. V Bootstrapu 4 bude pozadí obrázku velikosti kontejneru fungovat, i když je počítač vypnutý.
Je zřejmé, že Bootstrap nabízí uživateli mnoho vynikajících nástrojů, které urychlují vývoj softwarových aplikací. Šetří mnoho hodin a dokonce i několik dní v návrhu a kódování cizího uživatelského rozhraní. Softwarové komponenty a plug-iny jsou nejdůkladněji zdokumentovány, naplněné živými příklady a bloky kódů pro pohodlí uživatele. Bootstrap je velmi slušný nástroj pro vývoj a navrhování mobilních webových stránek, který vám umožní navrhnout strukturu jako první a později - písma, barvu a styl. Stačí, abyste strávili nějaký čas učením vlastností metody a její nejlepší využití.
