Před stažením se ujistěte, že máte editor kódu (doporučujeme Sublime Text 3) a určité znalosti HTML a CSS. Zde se nebudeme dotýkat zdrojových souborů, ale vždy si je můžete stáhnout a prostudovat sami. Zaměříme svou pozornost na začátek s kompilovanými soubory Bootstrap.

Načítání zkompilovaných souborů

Nejrychlejší způsob, jak začít: získejte zkompilované a minifikované verze našich CSS, JS a obrázků. Žádné dokumenty ani zdrojové soubory.

2. Struktura souboru

Ve stažených souborech najdete následující strukturu a obsah, seskupené logicky podle společných vlastností a obsahující jak minifikovanou, tak zkompilovanou verzi.

Po stažení rozbalte komprimovanou složku, abyste viděli strukturu (zkompilovaného) Bootstrapu. Mělo by to být něco takového:

bootstrap / +-- css / ¦ +-- bootstrap . css ¦ +-- bootstrap . min. css +-- js / ¦ +-- bootstrap . js ¦ +-- bootstrap . min. js +-- img / ¦ +-- glyphicons - halflings . png ¦ +-- glyphicons - halflings - white . png L-- README . md

Toto je základní forma Bootstrapu: kompilované soubory pro rychlé a snadné použití v téměř jakémkoli webovém projektu. Poskytujeme vám zkompilované CSS a JS (bootstrap.*) a také zkompilované a minifikované CSS a JS (bootstrap.min.*). Soubory obrázků jsou komprimovány pomocí ImageOptim, aplikace pro Mac pro kompresi obrázků do PNG.

Upozorňujeme, že všechny pluginy JavaScript vyžadují jQuery.

3. Co je zahrnuto

Bootstrap je vybaven HTML, CSS a JS pro všechny druhy práce, všechny jsou uvedeny v kategoriích, které najdete v horní části stránky.

Sekce dokumentu Podporované prvky

Společné styly těla pro resetování typu a pozadí, styly odkazů, mřížka šablony a dva jednoduché prvky označení.

CSS styly

Styly pro běžné prvky HTML: design, kód, tabulky, formuláře a tlačítka. Obsahuje také Glyphicons, skvělou sadu ikon.

Komponenty

Základní styly pro jednoduché komponenty rozhraní: karty a tlačítka, navigační panely, zprávy, záhlaví stránek atd.

Javascriptové pluginy

Stejně jako komponenty jsou tyto pluginy Javascript interaktivní komponenty pro popisky, informační bloky, modální komponenty a další.

Seznam komponentů

Komponenty Javascript a pluginy společně obsahují následující prvky rozhraní:

• Skupiny tlačítek
• Rozbalovací seznamy tlačítek
• Navigační karty, tlačítka a seznamy
• Navigační lišta
• Zkratky
• Odznaky
• Záhlaví stránek a prvek hrdina
• Miniatury
• Zprávy
• Procesní indikátory
• Modální prvky
• Rozbalovací seznamy
• Popisky
• Informační bloky
• Prvek "Akordeon"
• Prvek karuselu
• Vstup z klávesnice dopředu

4. Základní HTML šablona

Po krátkém úvodu se zaměříme na používání Bootstrapu. K tomu použijeme základní HTML šablonu, která obsahuje všechny prvky uvedené v .

Takto vypadá typický soubor HTML:

Šablona Bootstrap 101

Ahoj světe!

Chcete-li vytvořit šablonu Bootstrap jako je tato, jednoduše připojte příslušné soubory CSS a JS:

Šablona Bootstrap 101

Ahoj světe!

A vše je nastaveno! Přidáním těchto dvou souborů můžete vytvořit web nebo aplikaci pomocí Bootstrap.

Ahoj! V tomto článku vám řeknu, jak nainstalovat a připojit framework Bootstrap. Můžete si přečíst o tom, co je Bootstrap.

Standardní instalace frameworku

O standardní instalaci jsem již řekl mnoho v předchozích článcích. Všechno je zde jednoduché. Jdeme na oficiální web getbootstrap.com, klikneme na položku Začínáme a vybereme úplně první možnost. Stahujeme tedy plnou verzi bootstrapu se všemi js a css komponentami.

Bootstrap CDN je příležitost k připojení frameworku z CDN úložiště bez stahování jeho souborů do vašeho počítače. O nějakém přizpůsobení samozřejmě nemůže být v tomto případě řeč.

Přizpůsobení rámce

Faktem ale je, že bootstrap ve výchozím nastavení obsahuje mnoho komponent a některé z nich se vám při vývoji konkrétního webu nemusí hodit. Navrhujete například internetový obchod. Možná nebudete potřebovat modály a popisky a možná nebudete potřebovat mnoho css komponent. V tomto případě by bylo rozumné tyto komponenty do rámce nezahrnout.

Nebo si vytváříte jednoduchý blog. Řekněme, že tam vlastně nepotřebujete vůbec nic, takže můžete nechat jen pletivo a pár nejdůležitějších komponentů.

Výběr pouze toho, co potřebujete, je profesionální přístup k tvorbě webových stránek a používání Bootstrapu. Ve výchozím nastavení váží nekomprimovaná verze stylů CSS frameworku v nejnovější verzi 143 kilobajtů. A skripty mají více než 60 kilobajtů. Ano, pokud zkomprimujete kód, můžete snížit váhu o 20-40%, ale stále soubory nebudou nejlehčí.

Pokud například zakážete všechny komponenty a ponecháte pouze mřížku (to se dělá velmi často), bude váha css pouze 15-20 kilobajtů a v komprimované podobě o dalších pár kilobajtů méně. Dosáhnete tak maximální rychlosti a optimalizace vašeho projektu.

Dobře, to byla jen teorie. Chcete-li upravit rámec, navštivte stejný oficiální web a přejděte na Přizpůsobit.

Výběr potřebných komponent

Prvním krokem je zde nakonfigurovat, které součásti chcete zahrnout do vaší verze Bootstrapu. Začněme s CSS:

Styly tiskových médií – dotazy na média pro tisk. Pokud neplánujete tisknout stránky webu, můžete to zakázat.

Typografie, kód, tabulky, formuláře a tlačítka jsou věci, které si můžete v CSS stylovat sami, pokud opravdu chcete. Samozřejmě to bude nějakou dobu trvat, ale pokud se design vašich prvků velmi liší od toho, co framework nabízí ve výchozím nastavení, můžete všechny tyto CSS styly zakázat a napsat je sami.

Grid System je vlastně mřížka. Nevidím žádný smysl to někdy deaktivovat, protože to je hlavní síla rámce. Právě díky gridu snadno přizpůsobíte šablony jakémukoli zařízení a to je dnes v době mobilní návštěvnosti nesmírně důležité. V žádném případě jej nevypínáme.

Responzivní utility – adaptivní utility, také doporučuji je nikdy nevypínat. O adaptivních utilitách si povíme v příštím článku, kde se na gridový systém podíváme podrobně. Jedná se o třídy, které umožňují skrýt prvek nebo jej zviditelnit při určité šířce obrazovky. Velmi pohodlné a užitečné.

Jsou to například věci jako skupiny seznamů, lišty tlačítek, ikony, panely, upozornění, stránkování, drobečky atd. Můžete také zakázat písmo ikony. To se vyplatí udělat v případě, kdy ikony na webu vůbec nepotřebujete, nebo připojujete jinou sadu. Ve skutečnosti byste měli sedět a přemýšlet o tom, co ze všech předložených komponent potřebujete a co ne. Každý jednotlivý web bude mít svou vlastní sadu, protože každý web má jiný design a funkčnost.

Komponenty Javascript

Jedná se o rozevírací nabídky, nápovědu, modální okna a posuvníky. Pokud nic z toho nepotřebujete, vypněte to. V některých případech se mohou všechny komponenty opravdu hodit, když má váš web rozbalovací nabídku, posuvník na hlavní stránce a modální okna. V některých případech se mohou hodit maximálně 1-2 komponenty, pak není potřeba prodlužovat kód, deaktivovat nepotřebné komponenty.

Jquery pluginy

Zde můžete zakázat pluginy knihovny jquery, které pomáhají komponentám javascriptu pracovat správně. Pokud tedy na svém webu nepoužíváte posuvník, nepotřebujete plugin pro vytváření karuselů, pokud nepotřebujete popisky, vypněte tooltips.js atd.

Zásuvný modul scrollspy sleduje polohu textu a v závislosti na tom zvýrazní jednu nebo druhou položku nabídky. Obvykle je taková funkce potřeba na vstupních stránkách, na běžných stránkách jsem ji prakticky nikdy neviděl. A tak dále. Dobře si prohlédněte, co potřebujete a co ne.

Méně proměnných

Dále se před vámi otevře obrovská položka, ve které bude spousta podpoložek s nastavením pro Méně proměnných. Zde můžete změnit téměř vše: barvy, velikosti písma, zarážky, počet sloupců v mřížce, odsazení atd.

K tomu samozřejmě musíte znát alespoň základy Less nebo se v těchto formulářích alespoň intuitivně orientovat.

Pokud například vidíte proměnnou @font-family-base, musíte alespoň intuitivně pochopit, že je zodpovědná za název písma, což je základní písmo na webu. Proměnná @font-size-base nastavuje základní velikost písma. Ve výchozím nastavení je v bootstrapu 14 pixelů.

Všechna tato pole můžete upravit. Stačí změnit 14 na 20 a nyní si můžete stáhnout framework, ve kterém je výchozí velikost písma 20 pixelů. Podle toho můžete okamžitě upravit velikost nadpisů atd.

Nastavení mřížky

Velmi zajímavé je pro nás také nastavení gridového systému, zde jsou:

Jak vidíte, během několika sekund můžete změnit počet sloupců a šířku odsazení mezi nimi. Proměnná grid-float-breakpoint nastavuje bod, ve kterém se mobilní nabídka sbalí do ikony.

Pokud změníte hodnotu například na @screen-md-min, pak při šířce 991 pixelů nebo méně dojde ke sbalení. Tuto proměnnou můžete také odstranit a zapsat hodnotu v pixelech. Například 520 pixelů. Ke sbalení nabídky pak dojde pouze na chytrých telefonech a mobilních telefonech.

Stránka přizpůsobení Bootstrap má ve skutečnosti spoustu nastavení, ale obecně tento způsob přizpůsobení (pomocí stránky Přizpůsobit na oficiálním webu) není nejrychlejší a nejpohodlnější. Dále vám ukážu nejrychlejší způsob.

Stránku Přizpůsobit použijte, když potřebujete provést 2-10 změn v frameworku nebo jednoduše deaktivovat potřebné komponenty. Pokud chcete změnit mnohem více hodnot, musíte použít jinou metodu.

Ve skutečnosti, když konfigurujete svou verzi frameworku, klikněte na velké tlačítko úplně dole na stránce. Zkompiluje vám verzi Bootstrapu a stáhne ji do vašeho počítače. Pak už jen stačí připojit a používat. O připojení jsem již mluvil v předchozích článcích (včetně toho, jak na to na WordPressu).

Stahování méně zdrojů a jejich úprava

Jak jsem již řekl, pokud potřebujete provést mnoho úprav ve zdrojovém kódu frameworku a chcete změny vidět okamžitě, budete potřebovat méně zdrojů. Stáhnout si je můžete na stejném místě jako plnou verzi frameworku – v sekci Začínáme.

Chcete-li pracovat se zdroji Less a upravovat je, potřebujete:

Alespoň nějaká znalost css a less nebo jiného preprocesoru

Méně kompilátoru (lze stáhnout zdarma)

Vlastně se nebudu podrobně zabývat přizpůsobením prostřednictvím méně zdrojů, ale je to nejlepší metoda, protože nebudete muset 100krát chodit na stránku Přizpůsobit a kompilovat další a další nové verze rámce.

Témata bootstrapu nebo změna vzhledu prvků

Ve výchozím nastavení v plné verzi frameworku najdete také soubor bootstrap-theme.css ve složce css. Není nutné jej připojovat k webu. Jaké funkce plní? Soubor je potřeba pouze k tomu, aby v případě potřeby změnil styly prvků, které potřebujete.

Stejnou roli může plnit i váš vlastní styl.css, ve kterém můžete styly také přepsat. Bootstrap-theme není povinný soubor, slouží spíše pro objednávku. Například máte 3 soubory:

bootstrap.css – to je samozřejmě kód samotného frameworku;

bootstrap-theme.css – zde přepíšete styly pro prvky bootstrap;

style.css – do tohoto souboru zapište styly pro vaše prvky.

Pak budete mít pořádek v kódu a ve struktuře projektu. Nikdo vám ale nezakazuje provádět všechny operace v jediném souboru – style.css a soubor motivu vůbec nepoužívat.

Nejdůležitější je zahrnout soubor motivu a vlastní css do html označení později než soubor s kódem frameworku, aby byly styly úspěšně přepsány.

Příklad toho, jak funguje tématika

Jak jsem již řekl, ve výchozím nastavení Bootstrap obsahuje soubor bootstrap-theme. Zkuste to připojit. Podotýkám, připojte se po hlavním souboru.

Ve výchozím nastavení vypadají tlačítka v Bootstrapu takto:

A takto se změní jejich vzhled po připojení souboru k tématu:

Jak vidíte, objeví se mírný přechod. V souladu s tím můžete přepsat kód v souboru bootstrap-theme a získat vlastní styly pro tlačítka. Možná se ale ptáte, proč tyto změny neprovést přímo v bootstrap.css? Faktem je, že neustále vycházejí nové verze frameworku, a pokud se rozhodnete upgradovat, bude obtížné implementovat vaše změny do nové verze. Pro vývojáře se považuje za dobrou formu nedotýkat se zdrojového kódu, když můžete vytvořit samostatný soubor a popsat tam změny. Je to mnohem chytřejší a pohodlnější.

Jak nainstalovat nová témata Bootstrap stažená z internetu?

Existuje poměrně hodně stránek, většinou zahraničních, kde si můžete zdarma stáhnout hromadu témat a šablon. Abychom se vyhnuli nejasnostem, uvažujme web navržený pomocí Bootstrapu jako šablony a motivu jako sady pravidel CSS, která potlačují standardní vzhled prvků.

Taková témata lze stáhnout například z bootswatch.com/ a pomocí vyhledávače najdete desítky dalších.

Obecný princip instalace takových motivů závisí na webu, kde je stahujete. Pokud si ji můžete stáhnout ve formátu bootstrap-theme, skvělé, stáhněte si ji a připojte. Na bootswatch si například musíte stáhnout bootstrap.css a nahradit jím svůj standardní soubor frameworku. Existuje také možnost s menším počtem zdrojů.

Počínaje tímto článkem se pustíme do studia frameworku Twetter Bootstrap 3, který se nejčastěji používá pro tvorbu webů, admin panelů, vstupních stránek a webových aplikací, protože zajišťuje snadnost vývoje, přehlednou strukturu a přizpůsobivost stránek.

Instalace základní šablony Bootstrap 3

Chcete-li používat nástroje a metody Bootstrap 3, musíte přejít na http://getbootstrap.com a stáhnout si archiv se složkami css, fonts, js a odpovídajícími soubory v nich.

Pokud nevíte, jak propojit CSS styly a js skripty, doporučuji se podívat na tento a tento článek a v našem případě jsou CSS styly propojeny v sekcích

a skripty před uzavírací značkou

v dolní části stránky.

Rád bych také poznamenal, že používání souborů bootstrap.min.css a bootstrap.min.js prospěje vašemu webu, protože tyto soubory jsou menší a budou mít pozitivní vliv na rychlost načítání.

Propojení písem písem lze provést dvěma způsoby:

Přímo v sekci HEAD před uzavírací značkou

V samostatném souboru CSS umístěném ve složce css

Druhá možnost je vhodnější, ale bez ohledu na to, kterou metodu zvolíte, připojení bude probíhat takto

@font-face( font-family: glyphicons-halflings-regular; src: url(/fonts/glyphicons-halflings-regular.eot); src: local(glyphicons-halflings-regular), url(fonts/glyphicons-halflings- regular.ttf); ) h2( font-family: glyphicons-halflings-regular,sans-serif; )

nebo spíše ve značce stylu pro první metodu a vložte veškerý text uvnitř ní do souboru css pro druhou.

instalace jquery

Aby Bootstrap 3 fungoval správně, budete muset dodatečně stáhnout soubor knihovny jquery z oficiálního webu jquery.com prostřednictvím odkazu a umístit jej do složky js na vašem webu.

K připojení jquery dojde před uzavírací značkou

Soubory cookie nám usnadňují poskytování našich služeb. Používáním našich služeb nám povolujete používat soubory cookie.

, ale před souborem bootstrap.js

protože jquery by se měl načíst před bootstrapem.

Bootstrap 3 velikosti mřížky a obrazovky

Základem Bootstrapu je sada tříd, na kterých je postavena 12sloupcová mřížka (col-). V rámci gridu je podporováno 5 typů obrazovek -xs- -sm- -md- -lg- -xl-.

• -xs- velikost obrazovky menší než 575px;
• -sm- velikost obrazovky větší než 576 px a ne větší než 767 px;
• -md- velikost obrazovky větší než 768 px a ne větší než 991 px;
• -lg- velikost obrazovky větší než 992 px a ne větší než 1199 px;
• -xl- velikost obrazovky větší než 1200px;

Div s třídou col-lg-12 tedy znamená, že na velké obrazovce bude sloupec div zabírat 12 sloupců nebo 100 % šířky, podobně div col-sm-6 na obrazovce chytrého telefonu zabere 6 sloupců resp. 50 % šířky.

Typy síťových kontejnerů. Rozložení gumy

Hlavní typy kontejnerů pro mřížku jsou třídy kontejner a kontejner-tekutina.

Při použití uvnitř kontejneru bude vaše mřížka vizuálně zabírat třetinu obrazovky ve středu, přičemž všech 12 sloupců bude umístěno v této oblasti.

Umístěním mřížky do třídy kontejner-fluid budou všechny prvky rozvržení umístěny přes celou obrazovku jako gumová a při zmenšování šířky se budou posouvat k sobě.

Neexistuje žádné konkrétní doporučení pro použití kontejneru a kontejneru-fluid, protože vše závisí na rozvržení návrhu a účelu rozvržení, je však vhodné použít kontejner-fluid pro panel správce webu a kontejner.

Kromě toho lze třídu -fluid použít nejen na třídu kontejneru, ale také na řetězec řádků, aby se prvky uspořádaly do řady. Pokud však umístíte tekutinu do řádků do běžné nádoby, rozdíl si nevšimnete. Tato kombinace se nejlépe používá mimo kontejner div.container, například takto:

Ahoj, jsem šablona Bootstrap 3

Moje nádoba není tekutá!

A já jsem plynulý!

Linky pro umístění prvků

Třída řádek slouží k umístění prvků mřížky do jednoho řádku, to vám umožňuje uspořádat je vodorovně, ale je třeba vzít v úvahu, že součet indexů v řádku by neměl být větší než 12, jinak bude poslední prvek přesunuta do druhé řady.

Nadpis 1 Nadpis 2 Nadpis 3

Pokud zmenšíte velikost stránky prohlížeče, nadpisy se zarovnají ve svislém seznamu od vodorovného řádku.

Třídy viditelnosti prvků

Systém rozložení Bootstrap 3 poskytuje další třídy pro zobrazení nebo skrytí prvků na různých zařízeních a obrazovkách. Jsou označeny jako viditelné-*-* a skryté-*.

Třída pro zobrazení viditelné-*-* za první pomlčkou je obvykle identifikátor typu obrazovky (xs, sm, md, lg, xl) a za druhou pomlčkou velikost sloupce (1-12). Například viditelný-lg-6 - prvek je viditelný na velké obrazovce o šířce 6 sloupců.

Hiding class hidden-* Za pomlčkou je identifikátor typu obrazovky (xs,sm,md,lg,xl), například prvek značky s třídou hidden-xs nebude viditelný na malých zařízeních (velikost obrazovky menší než 575 pixelů).

Kombinace těchto prvků vám umožní zobrazit nebo skrýt kontejnery div:

Nadpis 1 Nadpis 2

První titul bude viditelný na velkých zařízeních, zatímco druhý zmizí na malých obrazovkách. Chcete-li to provést, zmenšete velikost okna prohlížeče tak, aby velikost odpovídala šířce obrazovky mobilního zařízení.

Také v kontejneru div ve třídě zadejte show nebo hidden, ale v tomto případě se vlastnosti zobrazení nezmění, když se obrazovka změní: pokud je viditelná, pak je viditelná, pokud je skrytá, pak pouze odstranění slova skryté z třídy vám umožní vidět požadovaný prvek.

Dotazy na média v Bootstrap 3

Abyste mohli používat dotazy na média CSS, musíte v souboru css zadat speciální symbol @media a v závorkách minimální a/nebo maximální šířku obrazovky. Pokud v běžném značkování css potřebujete zapisovat velikosti obrazovky v pixelech, v bootstrapu 3 můžete napsat následující konstrukci:

@media(min-width: @screen-sm-min)( ... ) @media(min-width: @screen-md-min)( ... ) @media(min-width: @screen-lg- min) (...)

Posouvání pořadí prvků

Další zajímavá třída, která vám umožňuje přesouvat bloky uvnitř kontejneru, třída push přesune prvek doprava a třída pull doleva.

Při kombinování ze sousedních kontejnerů můžete změnit jejich pořadí při změně velikosti obrazovky. V tomto příkladu je na velké obrazovce (-lg-) Nadpis 2 umístěn vlevo a Nadpis 1 vpravo, když se šířka obrazovky zmenší na střední velikost (-md-), prvky se posunou a pořadí se stát se sekvenční.

Nadpis 1 Nadpis 2

Dovolte mi uzavřít toto první seznámení se systémem rozložení Bootstrap 3; naučili jste se, jak instalovat styly šablon a skripty, základní prvky mřížky, dotazy na média, typy kontejnerů atd. V následujících článcích se podíváme na pomocné a doplňkové prvky: nabídky, tlačítka, posuvníky, ikony a mnoho dalšího.

24. února 2012 v 21:25 Twitter uživatelské rozhraní pro začátečníky založené na bootstrapu

• webový design

Abstrakt V tomto článku se pokusím pohovořit o tom, jak na základě Twitter Bootstrapu můžete velmi snadno implementovat pěkné uživatelské rozhraní pro malou (jednostránkovou) webovou aplikaci, která má pouze základní znalosti html. Hned vás varuji, že specialisty to nebude zajímat, budeme se bavit o základní standardní funkčnosti.
Úvod Ve svém volném čase jako koníčka vyvíjím jednostránkový agregátor zajímavých titulků novinek. V určitém okamžiku byla základní funkcionalita prototypu hotová, chybělo pouze zaškrtávací políčko vedle úkolu „Design“ Prohlášení o problému Chcete-li získat krásné uživatelské rozhraní bez zvládnutí kouzla designéra (máte pouze základní znalost malování) a programátora (máte pouze základní znalosti html a css).
Stránka se skládá z následujících prvků

• název
• Formulář pro zaslání odkazu na novinky
• Formulář pro zaslání unikátního kódu čtečky e-mailem
• Unikátní formulář pro zadání kódu čtečky
• Seznam zpráv seskupených podle data (datum, čas, název-odkaz, počet kliknutí, zprávy lze číst nebo nové)
• Odkaz na rss
• Odkaz na rozšíření pro Chrome
• id vydání
• e-mail se zpětnou vazbou

Proces Po několika dnech pohodového hledání hotové šablony (css šablony) jsem došel k závěru, že toto není cesta skutečného Jediho, protože... vše, co prošlo estetickým filtrem, se zaseklo v technickém filtru (viz prohlášení o problému, složitý kód jsem prostě nedokázal přizpůsobit svým potřebám). A pak jsem se téměř náhodou dostal do nebe. Nebudu podrobně popisovat Bootstrap, podrobnosti si můžete prohlédnout kliknutím na odkaz, uvedu hlavní prvky, pro které existují hotové styly (někdy i několik):

Standardní prvky formátování html

Seznamy

Fragmenty kódu

Tabulky

formuláře

Tlačítka

Navigační prvky

Stránkování

Miniatury

Informační zprávy

Progress bary

Podle mého názoru je to velmi cool. Vše, co potřebujete k návrhu prototypu. Dále vám řeknu, jak jsem ze seznamu použil prvky 1,4,5 a 7. Takže krok 1. Připojte Bootstrap Stáhněte a rozbalte archiv s Bootstrap do kořenové složky našeho webu, připojte css:
... ...
Druhý řádek je potřebný k automatickému přizpůsobení rozhraní zařízením podporovaným Bootstrapem Krok 2. Navrhněte „maso“. Tím „masem“ myslím seznam novinek. Nejjednodušší způsob, jak toho dosáhnout, je použít tabulku s vypnutými rámy. První sloupec je datum (pouze jednou na skupinu), druhý sloupec je čas, třetí je název a počet přechodů. To vše musí být podle pravidel Bootstrapu zabaleno v kontejneru:

(Datum)

(Čas)

(Název) ((Počet přechodů))

Pro čtení zpráv uvádíme speciální třídu:
(Nadpis) Krok 3. Formulář pro zaslání odkazu na novinky. Zde je opět vše jednoduché, Bootstrap nabízí několik předpřipravených stylů formuláře: běžný formulář, jednořádkový formulář, vyhledávací formulář... Potřebujeme druhý, přidejte jej do našeho kontejneru před stůl:
Přidat...
class="span10" - Bootstrap předpokládá vytvoření rozhraní založeného na mřížce 12 sloupců; naše prvky lze podél ní zarovnat. Vědeckou metodou pokusu a omylu jsem dospěl k šířce vstupního pole rovné 10. Krok 4,5,6. Čepice. Mé představy o tom, jak by měl uživatelsky přívětivý web vypadat, naznačují minimalistický styl: vše nepotřebné je skryto, vše, co skrýt nešlo, je bledé. Formuláře skryjeme v rozbalovací nabídce, ztmavíme odkazy na rss a rozšíření Chrome. To vše zabalíme do hlavičky, kterou přilepíme na horní část webu (třída = „navbar navbar-fixed-top“):
***

• rss
• Chrome rozšíření

• Váš jedinečný kód čtečky (Code)
  • Odeslat emailem
  • Zadejte jiný kód

...
Samotné formuláře:
... × Pošlete unikátní kód e-mailem

Zrušit odeslání × Zadejte jedinečný kód čtečky

Umožňuje synchronizovat zprávy čtené na různých počítačích.

Zrušit odeslání

Důležitý bod. Aby to fungovalo, musíte připojit několik skriptů:
...

Krok 7. Zápatí. Přidání hlavního kontejneru:
...

vydání 2012/02/19 23:49 *****

ResultEpilogue Twitter Bootstrap umožnil bez velkého úsilí a znalostí, bez psaní jediného řádku CSS a bez velkého lámání html kódu získat velmi pěkný prototyp rozhraní, který se nestydíte ukázat lidem. Pokud vás to zajímá, v dalším článku vám prozradím, jak bez hlubokých znalostí PHP + MySQL (pouze se základními programátorskými znalostmi) můžete implementovat funkcionalitu, která vám umožní ukázat váš milionový nápad nejen na papíře, ale ve formě funkčního prototypu.
Děkuji za pozornost!
UPD: Nechci odstraňovat téma v „Jsem PR“, odstranil jsem všechny zbytečné odkazy

Kluci, myslím, že Bootstrap je velmi skvělá věc. Proč tomu tak je, se pokusím vysvětlit v tomto článku. No jdeme na to.Okamžitě se omlouvám za to, že skoro celá první polovina článku je psaná bez obrázků, je tam jen teorie, vysvětlení, jak grid funguje. Ale to je velmi důležité! Každý z vás, kdo ji potřebuje, ji vezme do rukou, přečte si ji a doufám, že pochopí. Druhá polovina článku je již vnímána jednodušeji, je tam více ukázek se screenshoty.

Bootstrap - co to je?

Začněme tedy důležitou otázkou. Bootstrap je framework CSS a JS, v podstatě sada souborů s hotovým psaným kódem. Cílem vývojářů téměř jakéhokoli frameworku je zjednodušit vývoj webových stránek sobě i ostatním, kteří budou mít k nástroji přístup. V případě Bootstrapu je zcela zdarma, takže jej můžete jakkoli používat, upravovat zdrojový kód a upravovat framework dle libosti. Je to dokonale.

Instalace Bootstrap

Pokud potřebujete pouze propojit soubory frameworku s HTML dokumentem (například pro procvičení), stačí si framework stáhnout z oficiální stránky getbootstrap.com, zkopírovat jeho soubory do projektu a připojit potřebné. Dovolte mi uvést stručný přehled těchto souborů:

bootstrap.css a bootstrap.min.css - nekomprimované a komprimované verze kódu CSS rámce. Ke svému pracovnímu projektu se doporučuje zahrnout komprimovaný soubor, tímto způsobem mírně zvýšíte rychlost načítání. Pokud ale plánujete zobrazit kód v souboru, připojte nekomprimovanou verzi.

bootstrap.js a bootstrap.min.js - soubor se skripty

složka fonts a soubory glyphicons v ní jsou písmo ikony Bootstrap. Má asi 200 ikon. Ve většině případů jich budete mít dostatek, někdy je potřeba připojit další. O písmu ikony si povíme později.

Toto je standardní sada rámce. Ve skutečnosti si jej můžete snadno přizpůsobit a změnit tak, aby vám vyhovoval. Například vůbec nepoužívejte skripty nebo připojte pouze jednu mřížku. Obecně o tom také budeme mluvit.

Ruská dokumentace Bootstrap

Když navštívíte getbootstrap, pravděpodobně jste si všimli, že je zde vše v angličtině. Mohli bychom použít ruskou pomoc na frameworku. Je snadné to najít. Chcete-li to provést, přejděte z hlavní stránky do části Začínáme. Přejděte úplně dolů, bude tam odkaz na překlady. Najděte tam ruštinu a klikněte na ni. To je vše, nyní jste na ruské verzi webu. Pravda, ne všechno zde bylo přeloženo, ale někde kolem 70–80 % je přesných, takže všemu rozumíte.

Bootstrap mřížka

Ať už se dá říct cokoli, hlavním prvkem Bootstrapu je responzivní mřížka. Obecně by bez něj framework ztratil téměř veškerou hodnotu, protože díky mřížce můžete rychle vytvářet adaptivní šablony. Zároveň se možná vůbec nevyznáte v mediálních dotazech, nepotřebujete je, protože framework se stará o implementaci adaptability, stačí blokům přiřadit správné třídy.

Co jsou tyto třídy? Pojďme k dokumentaci, ta nám hodně pomůže. Přejděte do sekce CSS - Grid System. Obecná pravidla pro práci s mřížkou jsou jednoduchá, nyní je uvedu.

Jak pracovat s mřížkou?

Představte si to jako html tabulku. Pokud jste někdy psali HTML kód pro tabulky, víte, že veškerý obsah je umístěn do tagu table, jeden řádek je umístěn do tagu tr a do něj jsou pak umístěny buňky - td .

Takže v mřížce je vše podobné. Třída kontejneru slouží jako obecný kontejner pro mřížku. Existují 2 možnosti mřížky bootstrapu - zcela gumová a stále s konečnou maximální šířkou. Když je tedy obecnému bloku přiřazena třída kontejneru, web bude mít maximální šířku 1170 pixelů. Nebude se dále rozšiřovat. Obsah bude přirozeně vycentrován.

Pokud nastavíte třídu kontejneru-tekutiny, pak bude síťka zcela gumová, to znamená, že nebudou žádná omezení velikosti. Pokud si například člověk otevře webovou stránku na monitoru o šířce 1920 pixelů, uvidí ji v celé šířce.

Podle toho je první věcí při vývoji webu rozhodnout se, jaká bude šablona – zcela gumová, nebo je potřeba její šířku ještě omezit.

Skvělé, kontejnerový blok by měl obsahovat řadu mřížky. Do něj musíte umístit všechny bloky, které jsou na jednom řádku. To znamená, že pokud vezmeme nejtypičtější šablonu: záhlaví, hlavní část, pravý sloupec a zápatí, pak existují 3 sloupce. První bude mít pouze záhlaví, druhý bude mít obsah a postranní panel a poslední bude mít zápatí. Označení takového webu by bylo něco takového:

Obsah záhlaví... a postranní panel zápatí

Ale zatím je to špatné označení, protože chybí... co? Přesně tak, buňky! V případě Bootstrapu se jim také říká sloupce. Bootstrap mřížka se skládá z 12 sloupců. Lze jej vložit do libovolného bloku libovolné šířky, minimálně 1200 pixelů, minimálně 100. To vše proto, že šířka sloupců se neudává v pixelech, ale v procentech.

Jak tento 12 sloupcový systém funguje?

Dostáváme se tedy k nejdůležitější otázce související s frameworkem. Věřte mi, že pokud tomu rozumíte, všechno ostatní je nesmysl. Hlavní je pochopit, jak mřížka funguje, a cesta k rychlému adaptivnímu rozložení se vám otevře.

Chcete-li to provést, projděte si dokumentaci hned níže, najdete tam tabulku, která obsahuje důležité vlastnosti mřížky.

Mimochodem, samotné sloupce jsou v Bootstrapu označeny třídou col-, ale toto je složená třída, takže nikdy nepíší jednoduše col-. Bootstrap má 4 speciální třídy, které jsou navrženy pro kontrolu velikosti bloků v různých šířkách, zde jsou:

ld - pro velké obrazovky, více než 1200 pixelů na šířku (stolní počítače);

md - pro střední obrazovky, šířka od 992 do 1199 (počítače, netbooky);

sm - pro malé obrazovky, šířka od 768 do 991 pixelů (tablety);

xs - extra malé obrazovky, šířka menší než 768 pixelů.

Toto jsou 4 třídy, ale pro kontrolu velikosti prvků se používají čísla od 1 do 12, protože, jak si pamatujete, v mřížce je přesně 12 sloupců.

Záhlaví Obsah Postranní panel Zápatí

Je to docela snadné pochopit. Nejprve si vytvoříme hlavičku, ta nemusí být vůbec umístěna v mřížce, protože v každém případě zabere 100 % šířky (obvykle). Ale stejně to vložíme. Co je to za třídu col-md-12? Jak jsem vám již řekl, nikdo nepíše jednoduše col-, s touto třídou v podstatě říkáme prohlížeči:
Toto je buňka | sloupec
Na středních zařízeních (třída md) by jeho šířka měla být 12 sloupců z 12, tedy 100 % šířky řádku.
Ale co šířka na jiných zařízeních? Na velkých (lg) obrazovkách to bude také 100 %, protože hodnoty pro velké obrazovky se dědí, ale pro menší ne. Je to jednoduché: pokud byste napsali col-xs-4 , pak by šířka sloupce byla 33 % na všech zařízeních a pokud col-lg-4 , pak pouze na velkých. Toto je funkce, pamatujte si to.

No, pokud se hodnota šířky neuloží na menších obrazovkách, co se stane? Resetuje se. Stává se to takto:
col-sm-4 - na malých obrazovkách bude blok zabírat 33% šířky, na obrazovkách md a lg to bude stejné, ale na xs, tedy těch nejmenších, se šířka přenastaví na 100%. Pamatujte si tedy ještě jedno jednoduché pravidlo: Pokud pro menší obrazovky není nic zadáno, pak se na nich blok zobrazí ve 100% šířce.

Postranní panel obsahu

Prohlížeči v podstatě říkáme:
Nechte blok obsahu široký 8 z 12 sloupců a tato situace bude na malých, středních a velkých obrazovkách (stačí zadat pro malé, pro velké obrazovky, jak si pamatujete, hodnota se dědí). Ale na nejmenších obrazovkách bude blok obsazen na 100%. To je správně. Na mobilních zařízeních se stránky obvykle zobrazují v 1 sloupci.
Na stejných malých, středních a velkých obrazovkách nechť má boční sloupec jednu třetinu šířky řádku. No a na těch nejmenších, jak jste již pochopili, je jeho šířka také resetována na 100%. Je to tak jednoduché.

No, se zápatím není co řešit. Dobře, probrali jsme základní principy fungování gridu, ale stále musíme vidět, jak to funguje...

Bootstrap Nested Grid

Faktem je, že nyní jsme šablonu rozdělili pouze na hlavní bloky, ale uvnitř je lze rozdělit i na sloupce. Obsah může například zobrazovat produkty v několika sloupcích. Co bych měl dělat? Je to velmi jednoduché - uvnitř vytvoříme přesně stejnou mřížku. Bude vnořený, ale také obsahuje 12 sloupců. Když to všechno shrneme, dojdeme k tomuto závěru:
Uvnitř každého bloku může být neomezený počet mřížek. Například v bloku s produkty je mřížka pro oddělení produktů, v bloku s jedním produktem samotným můžete vytvořit další mřížku, například pro oddělení cen, informací o dostupnosti a doplňkových informací. informace.

Nyní se pokusíme vytvořit další mřížku uvnitř bloku obsahu, abychom uspořádali produkty do 3 sloupců. Vezměme si tedy blok, ve kterém máme obsah:

Obsah

A píšeme do něj:

Katalog produktů: Název produktu

Popis výrobku

Jak můžete vidět, vytvořili jsme novou mřížku uvnitř obsahu - vložili jsme řádek dovnitř a v řadě již budou 3 bloky s produkty. Stačí zkopírovat blok col-sm-4 s kartou produktu a vložit jej ještě 2krát, získáte toto (můžete vyfotit jakýkoli produkt, já jsem vzal velký):

Unikl mi další důležitý bod: aby se obrázky přizpůsobily blokům, ve kterých se nacházejí, je třeba každému z nich přiřadit třídu reagující na img. Pokud si stejně jako já myslíte, že je to nepohodlné, pak stačí napsat svůj vlastní style.css takto:

Img( max-width: 100%; height: auto; display: block; )

To je vše, uložte tento kód a připojte svůj soubor css k projektu. Nyní budou obrázky ve výchozím nastavení adaptivní.

No, dopadlo to celkem hladce? Ano, ale bez bootstrapu byste museli trpět déle. Jediná věc je, že při vytváření mřížky uvnitř jakéhokoli bloku již nemusíte vytvářet blok s třídou kontejneru. Proč to není nutné? Ano, protože blok, ve kterém je mřížka vytvořena, slouží jako kontejner.

V každém bloku tak můžete vytvořit libovolný počet sloupců a vytvořit šablonu libovolné složitosti. A to vše je mnohem rychlejší než bez Bootstrapu, protože všechny css musíte psát od začátku.

Responzivní nástroje

To je další skvělá vlastnost bootstrapu. Spočívá v tom, že můžete skrýt nebo zviditelnit libovolné bloky na šířku, kterou potřebujete. Například zcela skrýt boční sloupec na úzkých obrazovkách, přidat některé nové prvky na mobilních zařízeních, přidat sloupec na širokých obrazovkách atd.

Existuje mnoho možností aplikace, ale neřekl jsem vám to nejdůležitější: jak tyto nástroje používat? Chcete-li to provést, stačí přidat třídy do požadovaného bloku. Pokud ji potřebujete skrýt, stačí zadat následující třídu:

Zápatí

Co v tomto případě udělá třída hidden-xs? Na extra malých zařízeních skryje zápatí. Na všech ostatních bude blok viditelný.

Pokud jej naopak potřebujete zobrazit pouze na nejmenších obrazovkách, musíte použít třídu visible-xs-block. V tomto případě bude blok skrytý na všech obrazovkách kromě nejužších. Adaptivní třídy obslužných programů jsou tedy napsány takto:

Slovo skryté nebo viditelné, podle toho, co potřebujete

Zkratka xs, sm, md nebo lg označující, na kterých obrazovkách se má blok skrýt nebo zobrazit.

Pro viditelné je také potřeba přidat jednu ze tří hodnot: block - zobrazí prvek jako prvek bloku, inline-block - jako prvek vloženého bloku, inline - inline.

No, pár příkladů, aby bylo jasno:

hidden-xs hidden-lg - skryje prvek na nejmenší a největší obrazovce. Jak vidíte, můžete zadat více tříd oddělených mezerou.

viditelné-xs-inline viditelné-md-blok - na malých a velkých obrazovkách se prvek nezobrazí vůbec. Na extra-malých to bude malá písmena a na středních to bude blok.

Viditelný-lg-blok - prvek bude viditelný pouze na největších obrazovkách, na všech ostatních bude skrytý

Takhle to celé funguje. To je přesně ono a jinak to nejde. Doufám, že to chápete. Pojďme to uvést do praxe. Máme testovací šablonu, i když velmi primitivní.

Úkol: zmizet boční sloupec na malých obrazovkách a také jeden produkt na nejmenších obrazovkách. A aby na xs zařízeních byly produkty již ve 2 sloupcích, nikoli ve 3.

Zkuste to udělat sami, upravte pouze html kód. Co je potřeba udělat? Nejprve se podívejme na sloupec, pro jeho skrytí na sm obrazovkách do něj stačí přidat skrytou třídu-sm.

Skvělé, nyní třetí produkt potřebuje přidat třídu hidden-xs a na nejmenších obrazovkách zmizí. No, třídy zbývajících dvou zboží budou následující:

To znamená, že na středních zařízeních bude blok zabírat 4 sloupce z 12, což lze převést na 33,33 % šířky, a na extra malých zařízeních - 50 %. A protože jeden blok s produktem v této šířce zmizí, oba bloky s produkty budou úhledně uspořádány v 1 řadě, takto:

Skvělý! Když to pochopíte, můžete již s bloky na webové stránce manipulovat téměř jakýmkoli způsobem. Pokuste se sami vymýšlet úkoly a realizovat je.

Přesuňte mě celou cestu

Dále vám ukážu další velmi dobrý trik – možnost posunout blok doprava nebo doleva. Řekněme, že nemáme 3 produkty v řadě, ale 1. A nezabírá celou šířku. A vaším úkolem je zarovnat jej do středu. To je snadné, pokud budete mít na paměti, že pracujete s 12-sloupcovým systémem.

Necháme jeden blok s produktem:

Stačí provést jednoduché výpočty, abyste pochopili, jak moc musíte blok posunout, abyste jej vystředili. Na středních a velkých obrazovkách je potřeba jej posunout o 4 sloupce doleva a na malých o 3 sloupce. Takhle to vypadá:

Třída col-md-offset-4 říká: na středních a velkých obrazovkách posuňte blok doleva o 33 % šířky nadřazeného kontejneru (odsazení 1/3 vlevo, 1/3 šířka bloku, ⅓ posun vpravo, výsledkem je centrování).
Třída col-xs-offset-6: Na extra malých a malých obrazovkách posun doleva o 25 % (¼ odsazení doleva, ½ šířka bloku, ¼ odsazení doprava).

Doufám, že rozumíte podstatě a v případě potřeby tyto třídy použijete.

Bootstrap komponenty a příklady jejich použití

Blahopřeji ti. Právě jsme probrali nejdůležitější téma související s frameworkem. Důležitá je právě mřížka a práce s ní. Práce s komponentami již znamená, že jednoduše přejdete do dokumentace, zkopírujete si tam kód požadované komponenty a případně jej změníte podle svých potřeb. Ale přesto uvedu níže několik příkladů, jak komponenty používat.

Rychlé plovoucí a zrušení zábalu

Třídy pull-left a pull-right vám umožňují rychle nechat plavat jakýkoli blok jeho odesláním doleva nebo doprava. Nezapomeňte na zrušení toku. K tomu můžete použít třídu clearfix.

Bootstrap: Horizontální citlivá (mobilní) nabídka

Následující komponenty přidáme přímo do šablony, takže pokud chcete s kódem pracovat a ne jen číst, postupujte podle všech kroků po mně.

S Bootstrap si totiž můžete velmi snadno vytvořit nejen adaptivní menu, ale takzvané mobilní, které je na malých obrazovkách zcela složené a schované pod jedním tlačítkem. Tuto techniku ​​lze vidět v mnoha responzivních šablonách a je ve skutečnosti velmi snadno implementovatelná. Ukázkový kód mobilní nabídky je v dokumentaci, vezmu to odtud a trochu to předělám.

Takže první věc, kterou udělám, je odstranění bloku s hlavičkou, protože naše nabídka bude ve skutečnosti hlavičkou v případě mé šablony. Kód nabídky musí být umístěn před veškerým obsahem webu, dokonce i před blokem kontejneru. Proč? Ano, nyní sami uvidíte, že mřížka je již zabudována do navigační lišty. Takže tady je kód:

Logo/název přepínače

• Cyklistika
• Motorsport
• Cvičební zařízení
  • Běžecké pásy
  • Eliptické trenažéry
  • Lavičky

Vyhledávání

Neznepokojujte se tím, že existuje spousta kódu. Takto web nyní vypadá:

Pokud ale vaše nabídka nezabírá celou šířku obrazovky, má smysl ji vycentrovat. Chcete-li to provést, měli byste vytvořit další blok obalu pro nabídku, který by měl být umístěn za blok s třídou container-fluid. Nezapomeňte tento blok zavřít. Dal jsem tomu třídu navbar-wrap. Zde jsou jeho styly:

To znamená, že můžete jednoduše omezit šířku a vycentrovat ji. Nebo zpočátku vyměňte nádobu-tekutinu za nádobu .

Jak vidíte, do nabídky jsme přidali logo, dvě jednoduché položky, rozevírací nabídku a vyhledávací formulář. To znamená, že tam bylo mnoho prvků. Menu si můžete snadno přizpůsobit pro sebe přidáním vlastních tříd. Ale zatím je mým cílem jednoduše vám tuto součást ukázat.

Takto bude nabídka vypadat na zařízeních s šířkou obrazovky menší než 768 pixelů:

Jak vidíte, nabídka se zhroutila. Otevře se po kliknutí na tlačítko v pravém horním rohu. Na obrazovce zůstalo pouze logo.

Rozbalovací nabídka

Zároveň z výše uvedeného příkladu můžete pochopit, jak se v Bootstrapu vytváří položka rozbalovací nabídky; pojďme extrahovat tento kód pro podrobnější pohled:

Cvičební zařízení

• Běžecké pásy
• Eliptické trenažéry
• Lavičky

Kontejner pro rozevírací položku je tedy běžná položka seznamu s třídou rozevíracího seznamu. Uvnitř je hlavní odkaz, kliknutím na něj se otevře rozbalovací nabídka. Velmi důležité je přiřadit mu datový atribut, který vidíte v kódu, bez něj nebude nic fungovat. Měli byste se také ujistit, že soubor bootstrap.js je připojen k webovým stránkám.

Rozpětí s třídou stříšky není nic jiného než šipka, díky které můžete pochopit, že položka je rozevírací položkou a pod samotnou nabídkou se tvoří standardní seznam s odrážkami. To je vše, vše je docela jednoduché, tento kód můžete použít k implementaci rozevíracích položek.

Přidání strouhanky (breadcrumbs) pomocí Bootstrap

V mnoha obchodech se můžete setkat s tzv. blokem strouhanky, který obsahuje úplnou cestu k aktuální stránce. To je také snadné udělat pomocí frameworku, viz kód:

Domov

Katalog

Zboží

Ve skutečnosti stačí zadat třídu drobečkové navigace pro číslovaný seznam a zadat do ní obvyklé položky seznamu. Mimochodem, vycentruji nadpisy druhé úrovně v šabloně (toto musí být napsáno v css):

H2( zarovnání textu: na střed; )

Pokud chcete nějak změnit vzhled strouhanky, stačí použít selektor .breadcrumb v CSS. Například takto můžete odstranit barvu pozadí:

Drobečková navigace (pozadí: průhledné; )

Takto web nyní vypadá:

Bootstrap tabulky

Ve výchozím nastavení se tabulka roztáhne přes celé okno, takže ji zabalte do krabice s omezenou šířkou, abyste omezili rozměry. Ve výchozím nastavení to vypadá hrozně, ale pokud do tagu tabulky přidáte třídu tabulky, vše bude mnohem hezčí:

Všimněte si, že v této verzi mají buňky jasné ohraničení pouze ve spodní části; pokud chcete ohraničení na všech čtyřech stranách, musíte přidat další třídu:

To jsou v zásadě všechny možnosti tabulek. Už jsem napsal samostatný článek o tom, jak vytvořit adaptivní tabulku, takže to nebudu opakovat. Jediná věc je, že do řádků a buněk tabulky můžete přidat i třídy jako info, úspěch, varování a další a vybarvit je požadovanou barvou.

Samozřejmě můžete snadno napsat své vlastní třídy ve style.css a používat je.

Sečteno a podtrženo

Doufám, že byl článek užitečný a že jste pochopili to nejdůležitější. Pomocí komentářů můžete klást jakékoli dotazy.

Svět bezplatných programů a užitečných tipů
2024 whatsappss.ru