Pokročilý vývoj webového rozhraní Bootstrap Framework

V dalším tutoriálu byl vysvětlen úvod do uživatelských rozhraní Bootstrap a také tutoriál o tom, jak navrhnout webový projekt s Bootstrap 2.0, v tomto se přesuneme směrem k rozhraním a prvkům, které se při vývoji webu nejvíce používají.
Můžeme si stáhnout Bootstrap a umístit jej do adresáře na našich webových stránkách nebo jej použít propojením s vaší online knihovnou.
Bootstrap je open source framework a otevřený pro rychlejší a snadnější vývoj webu.
Při hledání můžeme najít mnoho příspěvků z komunity css a vlastní komponenty a šablony návrhů, které vytvořili a zpřístupnili jiní uživatelé, existuje mnoho komponent pro vytváření navigačních panelů, modálních oken a vyskakovacích oken, obrazových karuselů, nabídek a mnoha dalších jako pluginy JavaScriptu a Jquery k ověření formulářů a dalších funkcí

Tabulky a řádky s efekty

Bootstrap má již naprogramované styly a efekty CSS, které můžeme použít například ke změně barvy řádků v tabulce a když nad ní myš přejde.

Kód bude následující:

Tabulka a řádky s účinkem
 

 
 
Vozidlo
 
Zdroj
 
Stav
 
Cena
 

 

 

 
 
Fiat 500
 
Madrid
 
Použitý
 
9690€
 

 
 
Honda souhlas
 
Barcelona
 
Použitý
 
14500€
 

 
 
Renault Laguna
 
Toledo
 
Použitý
 
2800€
 

 

 

Dále vytvoříme nabídku s podnabídkou pouze pomocí Bootstrap CSS:

ZVĚTŠIT

Kód bude následující:

Víceúrovňová nabídka pomocí Css Bootstrap
Správce prodeje zákazníků 

Systém
Uživatelé
Nastavení

Oprávnění
Servery

Server Vps A.
Server Vps B


Spotřeba zdrojů
Záloha

Vysvětlíme strukturu a její předdefinované třídy. Třída definuje velikost webu, který se ve výchozím nastavení nachází v Bootstrapu.

 .container {šířka: 1170px; } 

Následující třídy řádků poskytují levý a pravý okraj na celé stránce:

 .řádek {; okraj -vpravo: -15px; } 

Třída rozevírací nabídky již obsahuje třídy Bootstrap a btn btn-primary button. Přidáme podnabídku a třídy úrovní, abychom mohli vygenerovat podnabídku. Pamatujte, že třídy mají hierarchie, a proto pokud pojmenujeme stejnou třídu, kterou máme v Bootstrapu, a přidáme k ní nějaký atribut, má přednost poslední provedená deklarace.
To je případ, kdy přidáme atribut shift left, přestože třída je již definována v bootstrap.min.css

 .downdown-menu {vlevo: 150px; } 

Vyskakovací okno CSS a jQuery s obsahem html
Použijeme funkci popover, která zobrazí vyskakovací okno, když je odkaz najet myší a obsahová proměnná má html k zobrazení.
Vezmeme předchozí tabulku a přidáme sloupec pro technický list.
V každém odkazu budeme mít následující větu a poté s id vyvoláme skript.

 
 

 
 
Vozidlo
 
Zdroj
 
Stav
 
Cena
 
Fotky
 

 

 

 
 
Fiat 500
 
Madrid
 
Použitý
 
9690€
 
Datový list
 

 
 
Honda souhlas
 
Barcelona
 
Použitý
 
14500€
 
Datový list
 

 

 

 

Pokud máme široký seznam, můžeme vytvořit funkci JQuery, do které můžeme posílat dynamický obsah, například extrahovaný z databáze.

Sloupce a bloky na stránce

Bootstrap je založen na šířce 1200 pixelů, rozdělených do 12 bloků, které pokrývají 99% struktury webu, každý blok pokrývá 8,3333%, což odpovídá 100 pixelům a má také prostor 1 pixel.
Vždy kombinace bloků ve stejném řádku pro přidání 12 například:
Dva bloky po 3 a jeden ze 6

Bloky bootstrapu
Blok Col-md-3 o velikosti 300 pixelů.
Blok Col-md-6 o 600 px.
Blok Col-md-3 o velikosti 300 pixelů.
800px blok col-md-8.

Níže uvádíme velikost bloku 8, která je 800 pixelů:

Tyto bloky reagují, protože jsou konfigurovány v souboru Bootstrap css. Zde můžeme vidět ukázku toho, jak se bloky přizpůsobují změně obrazovky mobilního zařízení.

Jak přizpůsobit Bootstrap tak, aby změnil styly a funkce

Abychom vytvořili styly a funkce tak, aby byly kompatibilní s Bootstrap, musíme ho použít jako jakoukoli jinou knihovnu css nebo js, ​​jako další rámec projektu, v tomto případě bude použit pro návrh a funkčnost v prohlížeči uživatele. Měli bychom se vyvarovat reformování původních knihoven, ale ukotvit vlastní, takže když vývojáři Bootstrap vydají aktualizaci, nebudeme mít problém začlenit novou, pokud ponecháme změny oddělené.
Abychom definovali vlastní šablony stylů, musíme vytvořit nový soubor stylů CSS, abychom definovali naše změny bez ovlivnění původního CSS. Vzpomeňme si například na hierarchii.
Pokud je v Bootstrap css bootstrap.min.css

 .col-md-3 {šířka: 25%; } 

A chceme, aby to mělo ohraničení, pak v samostatném souboru my styles.css můžeme deklarovat:

 .borderojo {border: 1px plná červená} 

Poté na stránce vyvoláme oba soubory

V bloku to aplikujeme následovně:

Blok Col-md-3 o velikosti 300 pixelů.

To by bylo ekvivalentní deklaraci takto:

 col-md-3 {šířka: 25%; ohraničení: 1px plná červená; } 

Pokud má z nějakého důvodu dvě podobná tvrzení, předpokládejme

 .borderojo {border: 1px plná červená; } .clientblock {border: 1px plná modrá; }
Blok Col-md-3 o velikosti 300 pixelů.

Kdo zvítězí, je věta, která byla vyhlášena jako poslední. Blok proto bude mít modrý okraj.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod