Pred stiahnutím sa uistite, že máte editor kódu (odporúčame Sublime Text 3) a určité znalosti HTML a CSS. Tu sa nebudeme dotýkať zdrojových súborov, ale vždy si ich môžete stiahnuť a preštudovať sami. Svoju pozornosť zameriame na začiatok s kompilovanými súbormi Bootstrap.

Načítavanie kompilovaných súborov

Najrýchlejší spôsob, ako začať: získajte skompilované a zmenšené verzie našich CSS, JS a obrázkov. Žiadne dokumenty ani zdrojové súbory.

2. Štruktúra súboru

V stiahnutých súboroch nájdete nasledujúcu štruktúru a obsah, logicky zoskupené podľa spoločných vlastností a obsahujúce minifikovanú aj kompilovanú verziu.

Po stiahnutí rozbaľte komprimovaný priečinok, aby ste videli štruktúru (kompilovaného) Bootstrapu. Malo by to byť niečo takéto:

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: skompilované súbory na rýchle a jednoduché použitie v takmer akomkoľvek webovom projekte. Poskytujeme vám skompilované CSS a JS (bootstrap.*), ako aj skompilované a minifikované CSS a JS (bootstrap.min.*). Obrazové súbory sú komprimované pomocou ImageOptim, aplikácie pre Mac na kompresiu obrázkov do PNG.

Upozorňujeme, že všetky doplnky JavaScript vyžadujú jQuery.

3. Čo je zahrnuté

Bootstrap je vybavený HTML, CSS a JS pre všetky druhy práce, všetky sú uvedené v kategóriách, ktoré nájdete v hornej časti stránky.

Sekcie dokumentu Podporované prvky

Bežné štýly tela na obnovenie typu a pozadia, štýly odkazov, mriežka šablóny a dva jednoduché prvky označovania.

CSS štýly

Štýly pre bežné prvky HTML: dizajn, kód, tabuľky, formuláre a tlačidlá. Obsahuje tiež Glyphicons, skvelú sadu ikon.

Komponenty

Základné štýly pre jednoduché komponenty rozhrania: karty a tlačidlá, navigačné panely, správy, hlavičky stránok atď.

Javascript pluginy

Podobne ako komponenty, aj tieto doplnky Javascript sú interaktívne komponenty pre popisy nástrojov, informačné bloky, modálne komponenty a ďalšie.

Zoznam komponentov

Komponenty a doplnky Javascript spolu obsahujú nasledujúce prvky rozhrania:

• Skupiny tlačidiel
• Rozbaľovacie zoznamy tlačidiel
• Navigačné karty, tlačidlá a zoznamy
• Navigačná lišta
• Skratky
• Odznaky
• Hlavičky stránok a prvok hrdina
• Miniatúry
• Správy
• Procesné ukazovatele
• Modálne prvky
• Rozbaľovacie zoznamy
• Popisy
• Informačné bloky
• Prvok "Akordeón"
• Kolotočový prvok
• Vstup z klávesnice dopredu

4. Základná HTML šablóna

Po krátkom úvode sa zameriame na používanie Bootstrapu. Na tento účel použijeme základnú šablónu HTML, ktorá obsahuje všetky prvky uvedené v .

Takto vyzerá typický súbor HTML:

Šablóna bootstrap 101

Ahoj svet!

Ak chcete vytvoriť šablónu Bootstrap ako je táto, jednoducho pripojte príslušné súbory CSS a JS:

Šablóna bootstrap 101

Ahoj svet!

A všetko je nastavené! Pridaním týchto dvoch súborov môžete vytvoriť webovú lokalitu alebo aplikáciu pomocou Bootstrapu.

Ahoj! V tomto článku vám poviem, ako nainštalovať a pripojiť rámec Bootstrap. Môžete si prečítať o tom, čo je Bootstrap.

Štandardná inštalácia rámu

O štandardnej inštalácii som už povedal veľa v predchádzajúcich článkoch. Všetko je tu jednoduché. Ideme na oficiálnu stránku getbootstrap.com, klikneme na položku Začíname a vyberieme úplne prvú možnosť. Sťahujeme teda plnú verziu bootstrapu so všetkými komponentmi js a css.

Bootstrap CDN je príležitosť na pripojenie rámca z úložiska CDN bez sťahovania jeho súborov do počítača. Prirodzene, v tomto prípade nemôže byť reč o žiadnom prispôsobení.

Prispôsobenie rámca

Faktom však je, že bootstrap štandardne obsahuje veľa komponentov a niektoré z nich vám jednoducho nemusia byť užitočné pri vývoji konkrétneho webu. Napríklad navrhujete internetový obchod. Možno nebudete potrebovať modály a popisy nástrojov a možno nebudete potrebovať veľa css komponentov. V tomto prípade by bolo rozumné nezahrnúť tieto komponenty do rámca.

Alebo si vytvoríte jednoduchý blog. Povedzme, že tam vlastne nepotrebujete vôbec nič, takže môžete nechať len sieťku a pár najdôležitejších komponentov.

Výber len toho, čo potrebujete, je profesionálny prístup k tvorbe webových stránok a používaniu Bootstrapu. V predvolenom nastavení váži nekomprimovaná verzia štýlov CSS rámca v najnovšej verzii 143 kilobajtov. A skripty majú viac ako 60 kilobajtov. Áno, ak skomprimujete kód, môžete znížiť hmotnosť o 20-40%, ale stále súbory nebudú najľahšie.

Ak napríklad zakážete všetky komponenty a ponecháte iba mriežku (to sa robí veľmi často), hmotnosť css bude iba 15-20 kilobajtov av komprimovanej forme o ďalších pár kilobajtov menej. Dosiahnete tak maximálnu rýchlosť a optimalizáciu vášho projektu.

Dobre, to bola len teória. Ak chcete prispôsobiť rámec, navštívte rovnakú oficiálnu webovú stránku a prejdite na položku Prispôsobiť.

Výber potrebných komponentov

Prvým krokom je konfigurácia komponentov, ktoré chcete zahrnúť do svojej verzie Bootstrapu. Začnime s CSS:

Štýly tlačových médií – dopyty na médiá pre tlač. Ak neplánujete tlačiť stránky lokality, môžete to zakázať.

Typografia, kód, tabuľky, formuláre a tlačidlá sú všetko veci, ktoré si môžete v CSS naštylizovať sami, ak naozaj chcete. Samozrejme, bude to chvíľu trvať, ale ak je dizajn vašich prvkov veľmi odlišný od toho, čo framework ponúka štandardne, môžete všetky tieto CSS štýly zakázať a napísať si ich sami.

Grid System je vlastne mriežka. Nevidím zmysel v jeho deaktivácii, pretože toto je hlavná sila rámca. Práve vďaka gridu ľahko prispôsobíte šablóny akémukoľvek zariadeniu a dnes v dobe mobilnej návštevnosti je to mimoriadne dôležité. V žiadnom prípade ho nevypíname.

Responzívne nástroje – adaptívne nástroje, tiež ich odporúčam nikdy nevypínať. O adaptívnych utilitách si povieme v nasledujúcom článku, kde sa na grid systém pozrieme podrobne. Ide o triedy, ktoré umožňujú skryť prvok alebo ho zviditeľniť pri určitej šírke obrazovky. Veľmi pohodlné a užitočné.

Sú to napríklad veci ako skupiny zoznamov, lišty tlačidiel, ikony, panely, upozornenia, stránkovanie, navigácia atď. Môžete tiež vypnúť písmo ikony. To sa oplatí urobiť v prípade, keď ikony na stránke vôbec nepotrebujete, alebo pripájate inú sadu. V skutočnosti by ste mali sedieť a premýšľať o tom, čo potrebujete zo všetkých prezentovaných komponentov a čo nie. Každá jednotlivá lokalita bude mať svoj vlastný súbor, pretože každá lokalita má iný dizajn a funkčnosť.

Komponenty Javascript

Sú to rozbaľovacie ponuky, popisy nástrojov, modálne okná a posúvače. Ak nič z toho nepotrebujete, vypnite to. V niektorých prípadoch sa môžu všetky komponenty skutočne hodiť, keď má váš web rozbaľovaciu ponuku, posúvač na hlavnej stránke a modálne okná. V niektorých prípadoch môžu byť užitočné maximálne 1-2 komponenty, potom nie je potrebné predlžovať kód, deaktivovať nepotrebné komponenty.

Doplnky Jquery

Tu môžete zakázať doplnky knižnice jquery, ktoré pomáhajú komponentom javascriptu správne fungovať. Ak teda na svojom webe nepoužívate posuvník, nepotrebujete doplnok na vytváranie karuselov, ak nepotrebujete popisy, vypnite tooltips.js atď.

Doplnok scrollspy sleduje polohu textu a v závislosti od toho zvýrazní jednu alebo druhú položku ponuky. Zvyčajne je takáto funkcia potrebná na vstupných stránkach, na bežných stránkach som ju prakticky nikdy nevidel. A tak ďalej. Dobre sa pozrite na to, čo potrebujete a čo nie.

Menej premenných

Ďalej sa pred vami otvorí obrovská položka, v ktorej bude množstvo podpoložiek s nastaveniami pre Menej premenných. Tu môžete zmeniť takmer všetko: farby, veľkosti písma, zarážky, počet stĺpcov v mriežke, zarážky atď.

Samozrejme, na to musíte poznať aspoň základy Less alebo sa aspoň intuitívne orientovať v týchto formulároch.

Napríklad, ak vidíte premennú @font-family-base, musíte aspoň intuitívne pochopiť, že je zodpovedná za názov písma, ktorý je základným písmom na stránke. No, premenná @font-size-base nastavuje základnú veľkosť písma. V predvolenom nastavení je v bootstrape 14 pixelov.

Všetky tieto polia môžete upraviť. Stačí zmeniť 14 na 20 a teraz si môžete stiahnuť rámec, v ktorom je predvolená veľkosť písma 20 pixelov. Podľa toho môžete okamžite upraviť veľkosť nadpisov atď.

Nastavenie mriežky

Veľmi zaujímavé sú pre nás aj nastavenia mriežkového systému, tu sú:

Ako vidíte, počet stĺpcov a šírku zarážok medzi nimi môžete zmeniť v priebehu niekoľkých sekúnd. Premenná grid-float-breakpoint nastavuje bod, v ktorom sa mobilná ponuka zbalí do ikony.

Ak zmeníte hodnotu napríklad na @screen-md-min, potom pri šírke 991 pixelov alebo menej dôjde k zrúteniu. Môžete tiež odstrániť túto premennú a zapísať hodnotu v pixeloch. Napríklad 520 pixelov. Potom dôjde k zbaleniu ponuky iba na smartfónoch a mobilných telefónoch.

Stránka prispôsobenia Bootstrap má v skutočnosti veľa nastavení, ale vo všeobecnosti tento spôsob prispôsobenia (pomocou stránky Prispôsobiť na oficiálnej webovej stránke) nie je najrýchlejší a najpohodlnejší. Ďalej vám ukážem najrýchlejší spôsob.

Stránku Prispôsobiť použite, keď potrebujete vykonať 2-10 zmien v rámci alebo jednoducho zakázať potrebné komponenty. Ak sa chystáte zmeniť oveľa viac hodnôt, musíte použiť inú metódu.

V skutočnosti, keď konfigurujete svoju verziu rámca, kliknite na veľké tlačidlo úplne dole na stránke. Zostaví vám verziu Bootstrapu a stiahne ju do vášho počítača. Potom už len stačí pripojiť a používať. O pripojení som už hovoril v predchádzajúcich článkoch (vrátane toho, ako to urobiť na WordPress).

Sťahovanie Menej zdrojov a ich úprava

Ako som už povedal, ak potrebujete urobiť veľa úprav zdrojového kódu frameworku a chcete zmeny vidieť okamžite, budete potrebovať menej zdrojov. Môžete si ich stiahnuť na rovnakom mieste ako plnú verziu frameworku – v sekcii Začíname.

Ak chcete pracovať s menej zdrojmi a upravovať ich, potrebujete:

Aspoň nejaká znalosť css a menej alebo iného preprocesora

Menej kompilátora (možno stiahnuť zadarmo)

V skutočnosti sa nebudem podrobne zaoberať prispôsobením prostredníctvom menšieho počtu zdrojov, ale toto je najlepšia metóda, pretože nebudete musieť ísť na stránku Prispôsobiť 100-krát a kompilovať ďalšie a ďalšie nové verzie rámca.

Téma bootstrap alebo zmena vzhľadu prvkov

Štandardne v plnej verzii frameworku nájdete aj súbor bootstrap-theme.css v priečinku css. Nie je potrebné ho pripájať k lokalite. Aké funkcie vykonáva? Súbor je potrebný výlučne na to, aby v prípade potreby zmenil štýly prvkov, ktoré potrebujete.

Rovnakú úlohu môže splniť aj váš vlastný style.css, v ktorom môžete štýly aj prepísať. Bootstrap-theme nie je povinný súbor, slúži skôr na objednávku. Napríklad máte 3 súbory:

bootstrap.css – samozrejme, toto je kód samotného rámca;

bootstrap-theme.css – tu prepíšete štýly pre prvky bootstrap;

style.css – do tohto súboru napíšte štýly pre vaše prvky.

Potom budete mať poriadok v kóde a v štruktúre projektu. Nikto vám ale nezakazuje vykonávať všetky operácie v jedinom súbore – style.css a už vôbec nepoužívať súbor témy.

Najdôležitejšie je zahrnúť súbor témy a vlastný css do html označenia neskôr ako súbor s kódom frameworku, aby sa štýly úspešne prepísali.

Príklad toho, ako funguje tematizácia

Ako som už povedal, Bootstrap štandardne obsahuje súbor bootstrap-theme. Skúste to pripojiť. Podotýkam, pripojte sa po hlavnom súbore.

V predvolenom nastavení vyzerajú tlačidlá v Bootstrape takto:

A takto sa zmení ich vzhľad po pripojení súboru k téme:

Ako vidíte, objaví sa mierny gradient. V súlade s tým môžete prepísať kód v súbore bootstrap-theme a získať vlastné štýly pre tlačidlá. Môžete sa však opýtať, prečo tieto zmeny nevykonať priamo v bootstrap.css? Faktom je, že neustále vychádzajú nové verzie frameworku a ak sa rozhodnete pre upgrade, bude ťažké implementovať vaše zmeny do novej verzie. Pre vývojára sa považuje za dobrú formu nedotýkať sa zdrojového kódu, keď môžete vytvoriť samostatný súbor a opísať tam zmeny. Je to oveľa inteligentnejšie a pohodlnejšie.

Ako nainštalovať nové témy Bootstrap stiahnuté z internetu?

Existuje pomerne veľa stránok, väčšinou zahraničných, kde si môžete zadarmo stiahnuť kopu tém a šablón. Aby sme sa vyhli nejasnostiam, uvažujme webovú stránku navrhnutú pomocou Bootstrapu ako šablóny a tému ako súbor pravidiel CSS, ktoré prepíšu štandardný vzhľad prvkov.

Takéto témy sa dajú stiahnuť napríklad z bootswatch.com/ a pomocou vyhľadávača nájdete desiatky ďalších.

Všeobecný princíp inštalácie takýchto tém závisí od lokality, z ktorej si ich stiahnete. Ak si ho môžete stiahnuť vo formáte bootstrap-theme, skvelé, stiahnite si ho a pripojte. Napríklad na bootswatch si musíte stiahnuť bootstrap.css a nahradiť ním súbor so štandardným rámcom. Existuje aj možnosť s menším počtom zdrojov.

Počnúc týmto článkom začneme študovať framework Twetter Bootstrap 3, ktorý sa najčastejšie používa na vytváranie webových stránok, admin panelov, vstupných stránok a webových aplikácií, pretože zabezpečuje jednoduchosť vývoja, prehľadnú štruktúru a prispôsobivosť stránok.

Inštalácia základnej šablóny Bootstrap 3

Ak chcete použiť nástroje a metódy Bootstrap 3, musíte prejsť na http://getbootstrap.com a stiahnuť si archív s priečinkami css, fonts, js a príslušnými súbormi v nich.

Ak neviete, ako prepojiť CSS štýly a js skripty, odporúčam pozrieť si tento a tento článok a v našom prípade sú CSS štýly prepojené v sekciách

a skripty pred koncovou značkou

v spodnej časti stránky.

Chcel by som tiež poznamenať, že používanie súborov bootstrap.min.css a bootstrap.min.js bude prínosom pre vašu stránku, pretože tieto súbory sú menšie a budú mať pozitívny vplyv na rýchlosť načítania.

Pripojenie fontov fontov je možné vykonať dvoma spôsobmi:

Priamo v sekcii HEAD pred záverečnou značkou

V samostatnom súbore CSS umiestnenom v priečinku css

Druhá možnosť je vhodnejšia, ale bez ohľadu na to, ktorý spôsob zvolíte, pripojenie bude prebiehať 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; )

alebo skôr v značke štýlu pre prvú metódu a vložte celý text v nej do súboru css pre druhú.

inštalácia jquery

Aby Bootstrap 3 fungoval správne, budete si musieť dodatočne stiahnuť súbor knižnice jquery z oficiálnej webovej stránky jquery.com prostredníctvom odkazu a umiestniť ho do priečinka js na vašom webe.

Pripojenie jquery sa uskutoční pred uzatváracou značkou

Súbory cookie nám uľahčujú poskytovanie našich služieb. Používaním našich služieb nám povoľujete používať cookies.

, ale pred súborom bootstrap.js

pretože jquery by sa mal načítať pred bootstrapom.

Bootstrap 3 veľkosti mriežky a obrazovky

Základom Bootstrapu je množina tried, na ktorých je postavená 12-stĺpcová mriežka (col-). V rámci mriežky je podporovaných 5 typov obrazoviek -xs- -sm- -md- -lg- -xl-.

• -xs- veľkosť obrazovky menšia ako 575 pixelov;
• -sm- veľkosť obrazovky viac ako 576 px a nie viac ako 767 px;
• -md- veľkosť obrazovky viac ako 768 px a nie viac ako 991 px;
• -lg- veľkosť obrazovky viac ako 992 px a nie viac ako 1199 px;
• -xl- veľkosť obrazovky viac ako 1200px;

Div s triedou col-lg-12 teda znamená, že na veľkej obrazovke bude stĺpec div zaberať 12 stĺpcov alebo 100 % šírky, podobne div col-sm-6 na obrazovke smartfónu zaberie 6 stĺpcov resp. 50% šírky.

Typy sieťových kontajnerov. Rozloženie gumy

Hlavnými typmi nádob pre mriežku sú triedy nádoba a nádoba-tekutina.

Pri použití vo vnútri kontajnera bude vaša mriežka vizuálne zaberať tretinu obrazovky v strede, pričom všetkých 12 stĺpcov sa nachádza v tejto oblasti.

Umiestnením mriežky do triedy kontajner-fluid budú všetky prvky rozloženia umiestnené po celej obrazovke ako gumené a pri zmenšovaní šírky sa budú posúvať k sebe.

Neexistuje žiadne konkrétne odporúčanie na používanie kontajnera a kontajnera-fluid, pretože všetko závisí od rozloženia dizajnu a účelu rozloženia, je však vhodné použiť kontajner-fluid pre panel správcu lokality a kontajner.

Okrem toho triedu -fluid možno použiť nielen na triedu kontajnera, ale aj na riadkový reťazec na usporiadanie prvkov do radu. Ak však umiestnite kvapalinu do riadkov do bežnej nádoby, rozdiel si nevšimnete. Túto kombináciu je najlepšie použiť mimo kontajnera div.container, napríklad takto:

Ahoj, som šablóna Bootstrap 3

Moja nádoba nie je tekutá!

A ja som veslovavý!

Linky na umiestnenie prvkov

Trieda riadku sa používa na umiestnenie prvkov mriežky do jedného riadku, čo vám umožňuje usporiadať ich vodorovne, ale musíte vziať do úvahy, že súčet indexov v riadku by nemal byť väčší ako 12, inak bude posledný prvok presunutý do druhého radu.

Nadpis 1 Nadpis 2 Nadpis 3

Ak zmenšíte veľkosť stránky prehliadača, nadpisy sa zoradia do zvislého zoznamu od vodorovného riadku.

Triedy viditeľnosti prvkov

Systém rozloženia Bootstrap 3 poskytuje ďalšie triedy na zobrazenie alebo skrytie prvkov na rôznych zariadeniach a obrazovkách. Sú označené ako viditeľné-*-* a skryté-*.

Trieda pre zobrazenie viditeľný-*-* za prvou pomlčkou je zvyčajne identifikátor typu obrazovky (xs, sm, md, lg, xl) a za druhou pomlčkou veľkosť stĺpca (1-12). Napríklad viditeľný-lg-6 – prvok je viditeľný na veľkej obrazovke so šírkou 6 stĺpcov.

Hiding class hidden-* Za pomlčkou sa nachádza identifikátor typu obrazovky (xs,sm,md,lg,xl), napríklad prvok značky s triedou hidden-xs nebude viditeľný na malých zariadeniach (veľkosť obrazovky menšia ako 575 pixelov).

Kombinácia týchto prvkov vám umožní zobraziť alebo skryť kontajnery div:

Nadpis 1 Nadpis 2

Prvý titul bude viditeľný na veľkých zariadeniach, zatiaľ čo druhý zmizne na malých obrazovkách. Ak to chcete urobiť, zmenšite veľkosť okna prehliadača tak, aby bola šírka podobná obrazovke mobilného zariadenia.

Aj v kontajneri div v triede zadajte show alebo hidden, ale v tomto prípade sa vlastnosti zobrazenia nezmenia, keď sa obrazovka zmení: ak je viditeľná, potom je viditeľná, ak je skrytá, z triedy sa iba odstráni slovo skryté. vám umožní vidieť požadovaný prvok.

Mediálne dotazy v Bootstrap 3

Ak chcete použiť dopyty na médiá CSS, musíte v súbore css zadať špeciálny symbol @media a minimálnu a/alebo maximálnu šírku obrazovky v zátvorkách. Ak v bežnom značke css potrebujete písať veľkosti obrazovky v pixeloch, v bootstrape 3 môžete napísať nasledujúcu konštrukciu:

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

Posun poradia prvkov

Ďalšia zaujímavá trieda, ktorá vám umožňuje presúvať bloky vo vnútri kontajnera, trieda push presunie prvok doprava a trieda pull doľava.

Pri kombinovaní zo susedných kontajnerov môžete pri zmene veľkosti obrazovky zmeniť ich poradie. V tomto príklade sa na veľkej obrazovke (-lg-) nachádza nadpis 2 vľavo a nadpis 1 vpravo, keď sa šírka obrazovky zmenší na strednú veľkosť (-md-), prvky sa posunú a poradie sa zmení stať sa sekvenčnými.

Nadpis 1 Nadpis 2

Dovoľte mi dokončiť toto prvé zoznámenie sa so systémom rozloženia Bootstrap 3; naučili ste sa, ako nainštalovať štýly šablón a skripty, základné prvky mriežky, mediálne dotazy, typy kontajnerov atď. V nasledujúcich článkoch sa pozrieme na pomocné a doplnkové prvky: ponuky, tlačidlá, posúvače, ikony a mnoho ďalšieho.

24. februára 2012 o 21:25 Twitter Užívateľské rozhranie založené na bootstrape pre začiatočníkov

• vzhľad stránky

Abstrakt V tomto článku sa pokúsim porozprávať o tom, ako na základe Twitter Bootstrap môžete veľmi jednoducho implementovať pekné používateľské rozhranie pre malú (jednostránkovú) webovú aplikáciu, ktorá má len základné znalosti html. Hneď vás varujem, že špecialistov to nebude zaujímať, budeme hovoriť o základnej štandardnej funkčnosti.
Úvod Vo svojom voľnom čase ako hobby vyvíjam jednostránkový agregátor zaujímavých titulkov noviniek. V istom momente bola základná funkcionalita prototypu hotová, chýbalo len zaškrtávacie políčko vedľa úlohy „Design“ Vyhlásenie o probléme Ak chcete získať krásne používateľské rozhranie bez ovládania kúzla dizajnéra (máte len základné znalosť farby) a programátora (máte len základné znalosti html a css) .
Stránka sa skladá z nasledujúcich prvkov

• názov
• Formulár na zaslanie odkazu na novinky
• Formulár na zaslanie unikátneho čítacieho kódu e-mailom
• Jedinečný formulár na zadanie čítacieho kódu
• Zoznam správ zoskupených podľa dátumu (dátum, čas, názov-odkaz, počet kliknutí, správy je možné prečítať alebo nové)
• Odkaz na rss
• Odkaz na rozšírenie pre Chrome
• vydanie id
• e-mail so spätnou väzbou

Proces Po niekoľkých dňoch pohodového hľadania hotovej šablóny (css šablóny) som dospel k záveru, že toto nie je cesta skutočného Jediho, pretože... všetko, čo prešlo estetickým filtrom, sa zaseklo v technickom filtri (pozri problémové vyhlásenie, jednoducho som si nevedel prispôsobiť zložitý kód svojim potrebám). A potom som sa takmer náhodou dostal do neba. Bootstrap nebudem podrobne popisovať, podrobnosti si môžete pozrieť kliknutím na odkaz, uvediem hlavné prvky, pre ktoré existujú hotové štýly (niekedy aj niekoľko):

Štandardné prvky formátovania html

zoznamy

Útržky kódu

Tabuľky

Formuláre

Tlačidlá

Navigačné prvky

Stránkovanie

Miniatúry

Informačné správy

Ukazovatele pokroku

Podľa mňa je to veľmi cool. Všetko, čo potrebujete na navrhnutie prototypu. Ďalej vám poviem, ako som zo zoznamu použil prvky 1,4,5 a 7. Takže krok 1. Pripojte Bootstrap Stiahnite si a rozbaľte archív pomocou Bootstrapu do koreňového priečinka našej stránky, pripojte css:
... ...
Druhý riadok je potrebný na automatické prispôsobenie rozhrania zariadeniam podporovaným Bootstrap Krok 2. Navrhnite „mäso“. Pod „mäsom“ myslím zoznam noviniek. Najjednoduchší spôsob, ako to urobiť, je použiť tabuľku s vypnutými rámami. Prvý stĺpec je dátum (len raz na skupinu), druhý stĺpec je čas, tretí je názov a počet prechodov. Toto všetko musí byť podľa pravidiel Bootstrap zabalené v kontajneri:

(Dátum)

(čas)

(Názov) ((Počet prechodov))

Pre čítanie správ uvádzame špeciálnu triedu:
(Nadpis) Krok 3. Formulár na odoslanie odkazu na novinky. Tu je opäť všetko jednoduché, Bootstrap poskytuje niekoľko hotových štýlov formulárov: bežný formulár, jednoriadkový formulár, vyhľadávací formulár... Potrebujeme druhý, pridajte ho do nášho kontajnera pred stôl:
Pridať...
class="span10" - Bootstrap predpokladá vytvorenie rozhrania založeného na mriežke 12 stĺpcov; naše prvky môžu byť zarovnané pozdĺž nej. Vedeckou metódou pokus-omyl som dospel k šírke vstupného poľa rovnajúcej sa 10. Krok 4,5,6. Čiapka. Moje predstavy o tom, ako by mal vyzerať užívateľsky príjemný web, naznačujú minimalistický štýl: všetko nepotrebné je skryté, všetko, čo sa skryť nedalo, je bledé. Formuláre skryjeme v rozbaľovacej ponuke, odkazy na rss a rozšírenie Chrome zbledneme. To všetko zabalíme do hlavičky, ktorú prilepíme na vrch stránky (class = “navbar navbar-fixed-top”):
***

• rss
• chrómové rozšírenie

• Váš jedinečný kód čítačky (Code)
  • Poslať e-mailom
  • Zadajte iný kód

...
Samotné formuláre:
... × Pošlite jedinečný kód e-mailom

Zrušiť odoslanie × Zadajte jedinečný kód čítačky

Umožňuje synchronizovať správy prečítané na rôznych počítačoch.

Zrušiť odoslanie

Dôležitý bod. Aby to fungovalo, musíte pripojiť niekoľko skriptov:
...

Krok 7. Päta. Pridanie hlavného kontajnera:
...

vydanie 2012/02/19 23:49 *****

ResultEpilogue Twitter Bootstrap umožnil bez veľkého úsilia a znalostí, bez písania jediného riadku CSS a bez veľkého lámania html kódu získať veľmi pekný prototyp rozhrania, ktorý sa nehanbíte ukázať ľuďom. Ak máte záujem, v ďalšom článku vám prezradím, ako bez hlbokých znalostí PHP + MySQL (len so základnými programátorskými zručnosťami) implementujete funkcionalitu, ktorá vám umožní ukázať váš miliónový nápad nielen na papieri, ale vo forme funkčného prototypu.
Ďakujem za tvoju pozornosť!
UPD: Nechcem odstrániť tému v časti „Som PR“, odstránil som všetky nepotrebné odkazy

Chlapci, myslím si, že Bootstrap je skvelá vec. Prečo je to tak, sa pokúsim vysvetliť v tomto článku. No poďme.Hneď sa ospravedlňujem za to, že takmer celá prvá polovica článku je napísaná bez obrázkov, je tam len teória, vysvetlenie ako mriežka funguje. Ale toto je veľmi dôležité! Každý z vás, kto ju potrebuje, ju vezme do rúk, prečíta si ju a dúfam, že pochopí. Druhá polovica článku je už vnímaná jednoduchšie, je tam viac príkladov so screenshotmi.

Bootstrap - čo to je?

Začnime teda dôležitou otázkou. Bootstrap je rámec CSS a JS, v podstate súbor súborov s pripraveným napísaným kódom. Cieľom vývojárov takmer akéhokoľvek frameworku je zjednodušiť vývoj webových stránok pre seba a ostatných, ktorí budú mať k nástroju prístup. V prípade Bootstrapu je úplne zadarmo, takže ho môžete používať akokoľvek, upravovať zdrojový kód a upravovať framework akokoľvek chcete. Je to perfektné.

Inštalácia Bootstrap

Ak potrebujete iba prepojiť súbory frameworku s HTML dokumentom (napríklad pre precvičenie), stačí si stiahnuť framework z oficiálnej stránky getbootstrap.com, skopírovať jeho súbory do projektu a pripojiť potrebné. Dovoľte mi uviesť stručný prehľad týchto súborov:

bootstrap.css a bootstrap.min.css - nekomprimované a komprimované verzie kódu CSS rámca. Odporúča sa zahrnúť komprimovaný súbor s pracovným projektom, týmto spôsobom mierne zlepšíte rýchlosť načítania. Ak však plánujete zobraziť kód v súbore, pripojte nekomprimovanú verziu.

bootstrap.js a bootstrap.min.js - súbor so skriptami

priečinok fonts a súbory glyphicons v ňom sú písmo ikony Bootstrap. Má asi 200 ikon. Vo väčšine prípadov ich budete mať dosť, niekedy potrebujete pripojiť ďalšie. O písme ikony si povieme neskôr.

Toto je štandardná sada rámca. V skutočnosti si ho môžete jednoducho prispôsobiť a zmeniť tak, aby vám vyhovoval. Napríklad nepoužívajte skripty vôbec alebo pripojte iba jednu mriežku. Vo všeobecnosti o tom budeme hovoriť aj my.

Ruská dokumentácia Bootstrap

Keď navštívite getbootstrap, pravdepodobne ste si všimli, že všetko je tu v angličtine. Mohli by sme použiť ruskú pomoc na framework. Je ľahké ho nájsť. Ak to chcete urobiť, prejdite z hlavnej stránky do časti Začíname. Prejdite úplne dole, bude tam odkaz na preklady. Vyhľadajte tam ruštinu a kliknite na ňu. To je všetko, teraz ste na ruskej verzii stránky. Pravda, nie všetko tu bolo preložené, ale niekde okolo 70 – 80 % je presných, takže všetkému budete rozumieť.

Bootstrap mriežka

Čokoľvek sa dá povedať, hlavným prvkom Bootstrapu je citlivá mriežka. Vo všeobecnosti by bez neho framework stratil takmer všetku svoju hodnotu, pretože vďaka mriežke môžete rýchlo vytvárať adaptívne šablóny. Zároveň možno vôbec nepoznáte mediálne dopyty, nepotrebujete ich, pretože framework sa stará o implementáciu adaptability, stačí blokom priradiť správne triedy.

Čo sú tieto triedy? Poďme k dokumentácii, tá nám veľmi pomôže. Prejdite do sekcie CSS - Grid System. Všeobecné pravidlá pre prácu s mriežkou sú jednoduché; teraz ich uvediem.

Ako pracovať s mriežkou?

Predstavte si to ako html tabuľku. Ak ste niekedy písali HTML kód pre tabuľky, viete, že všetok obsah je umiestnený v značke tabuľky, jeden riadok je umiestnený v značke tr a do nej sú potom umiestnené bunky - td .

Takže v mriežke je všetko podobné. Trieda kontajnera slúži ako všeobecný kontajner pre mriežku. Existujú 2 možnosti mriežky bootstrapu - úplne gumená a stále s konečnou maximálnou šírkou. Takže, keď je všeobecnému bloku priradená trieda kontajnera, stránka bude mať maximálnu šírku 1170 pixelov. Nebude sa ďalej rozširovať. Prirodzene, obsah bude vycentrovaný.

Ak nastavíte triedu nádoby-kvapalina, potom bude sieťka úplne gumená, to znamená, že nebudú existovať žiadne obmedzenia veľkosti. Ak si napríklad človek otvorí webovú stránku na 1920 pixelovom širokom monitore, uvidí ju v celej šírke.

Podľa toho je prvou vecou pri vývoji webu rozhodnúť sa, aká bude šablóna – úplne gumená, alebo jej šírku ešte treba obmedziť.

Skvelé, kontajnerový blok by mal obsahovať rad mriežky. Do nej musíte umiestniť všetky bloky, ktoré sú na jednom riadku. To znamená, že ak vezmeme najtypickejšiu šablónu: hlavička, hlavná časť, pravý stĺpec a päta, potom existujú 3 stĺpce. Prvý bude mať iba hlavičku, druhý bude mať obsah a bočný panel a posledný bude mať pätu. Označenie takejto lokality by bolo približne takéto:

Obsah hlavičky... a bočný panel päty

Ale zatiaľ je to nesprávne označenie, pretože chýba... čo? Presne tak, bunky! V prípade Bootstrapu sa nazývajú aj stĺpce. Bootstrap mriežka pozostáva z 12 stĺpcov. Môže byť vložený do ľubovoľného bloku ľubovoľnej šírky, najmenej 1200 pixelov, najmenej 100. To všetko preto, že šírka stĺpcov nie je uvedená v pixeloch, ale v percentách.

Ako tento 12-stĺpcový systém funguje?

Dostávame sa teda k najdôležitejšej otázke súvisiacej s rámcom. Verte mi, ak tomu rozumiete, všetko ostatné je nezmysel. Hlavná vec je pochopiť, ako mriežka funguje, a cesta k rýchlemu adaptívnemu rozloženiu sa vám otvorí.

Ak to chcete urobiť, prejdite dokumentáciou nižšie, nájdete tam tabuľku, ktorá obsahuje dôležité vlastnosti mriežky.

Mimochodom, samotné stĺpce sú v Bootstrape označené triedou col-, ale toto je zložená trieda, takže nikdy nepíšu jednoducho col-. Bootstrap má 4 špeciálne triedy, ktoré sú určené na kontrolu veľkosti blokov pri rôznych šírkach, tu sú:

ld - pre veľké obrazovky so šírkou viac ako 1200 pixelov (stolné počítače);

md - pre stredné obrazovky, šírka od 992 do 1199 (počítače, netbooky);

sm - pre malé obrazovky, šírka od 768 do 991 pixelov (tablety);

xs - extra malé obrazovky, šírka menšia ako 768 pixelov.

Toto sú 4 triedy, ale na kontrolu veľkosti prvkov sa používajú čísla od 1 do 12, pretože, ako si pamätáte, v mriežke je presne 12 stĺpcov.

Hlavička Obsah Bočný panel Päta

Je to celkom ľahké pochopiť. Najprv vytvoríme hlavičku, ktorá nemusí byť vôbec umiestnená v mriežke, pretože v každom prípade zaberie 100% šírky (zvyčajne). Ale aj tak to vložíme. Čo je to za triedu col-md-12? Ako som vám už povedal, nikto nepíše jednoducho col-, s touto triedou v podstate hovoríme prehliadaču:
Toto je bunka | stĺpec
Na stredných zariadeniach (trieda md) by jeho šírka mala byť 12 stĺpcov z 12, teda 100 % šírky riadku.
Ale čo šírka na iných zariadeniach? Na veľkých (lg) obrazovkách to bude tiež 100 %, pretože hodnoty pre veľké obrazovky sa dedia, ale pre menšie nie. Je to jednoduché: ak by ste napísali col-xs-4 , šírka stĺpca by bola 33 % na všetkých zariadeniach a ak col-lg-4 , tak iba na veľkých. Toto je funkcia, zapamätajte si ju.

Ak sa hodnota šírky neuloží na menších obrazovkách, čo sa stane? Resetuje sa. Stáva sa to takto:
col-sm-4 - na malých obrazovkách bude blok zaberať 33% šírky, na obrazovkách md a lg to bude rovnaké, ale na xs, teda tých najmenších, sa šírka prestaví na 100%. Takže si zapamätajte ešte jedno jednoduché pravidlo: Ak nie je nič špecifikované pre menšie obrazovky, potom sa na nich blok zobrazí v 100% šírke.

Bočný panel obsahu

V podstate hovoríme prehliadaču:
Nech je blok obsahu široký 8 z 12 stĺpcov a táto situácia bude na malých, stredných a veľkých obrazovkách (stačí zadať pre malé, pre veľké obrazovky, ako si pamätáte, hodnota sa zdedí). Ale na najmenších obrazovkách bude blok obsadený na 100%. To je správne. Na mobilných zariadeniach sa stránky zvyčajne zobrazujú v 1 stĺpci.
Bočný stĺpec nech má jednu tretinu šírky riadku na rovnakých malých, stredných a veľkých obrazovkách. No, na tých najmenších, ako ste už pochopili, je jeho šírka tiež nastavená na 100%. Je to také jednoduché.

No, s pätou nie je čo riešiť. Prebrali sme základné princípy fungovania mriežky, no stále musíme vidieť, ako funguje...

Bootstrap Nested Grid

Faktom je, že teraz sme šablónu rozdelili iba na hlavné bloky, ale vo vnútri sa dajú rozdeliť aj na stĺpce. Obsah môže napríklad zobrazovať produkty v niekoľkých stĺpcoch. Čo mám robiť? Je to veľmi jednoduché - vo vnútri vytvoríme presne rovnakú mriežku. Bude vnorený, ale obsahuje aj 12 stĺpcov. Ak to všetko zhrnieme, dospejeme k tomuto záveru:
V každom bloku môže byť neobmedzený počet mriežok. Napríklad v bloku s produktmi je mriežka na oddelenie produktov, v bloku s jedným produktom si môžete vytvoriť ďalšiu mriežku, napríklad na oddelenie cien, informácií o dostupnosti a doplnkových informácií. informácie.

Teraz sa pokúsime vytvoriť ďalšiu mriežku vo vnútri bloku obsahu, aby sme produkty usporiadali do 3 stĺpcov. Vezmime si teda blok, v ktorom máme obsah:

Obsah

A píšeme v ňom:

Katalóg produktov: Názov produktu

Popis produktu

Ako vidíte, vo vnútri obsahu sme vytvorili novú mriežku - dovnútra sme vložili riadok a v rade už budú 3 bloky s produktmi. Stačí skopírovať blok col-sm-4 s produktovou kartou a prilepiť ho ešte 2-krát, toto dostanete (môžete odfotiť akýkoľvek produkt, ja som vzal veľkú):

Ušiel mi ďalší dôležitý bod: aby sa obrázky prispôsobili blokom, v ktorých sa nachádzajú, každému z nich treba priradiť triedu reagujúcu na img. Ak si rovnako ako ja myslíte, že je to nepohodlné, napíšte vo svojom vlastnom style.css takto:

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

To je všetko, uložte tento kód a pripojte svoj súbor css k projektu. Teraz budú obrázky predvolene adaptívne.

No dopadlo to celkom hladko? Áno, ale bez bootstrapu by ste museli trpieť dlhšie. Jediná vec je, že pri vytváraní mriežky vo vnútri akéhokoľvek bloku už nemusíte vytvárať blok s triedou kontajnera. Prečo to nie je potrebné? Áno, pretože blok, v ktorom je vytvorená mriežka, slúži ako kontajner.

V každom bloku tak môžete vytvoriť ľubovoľný počet stĺpcov a vytvoriť šablónu ľubovoľnej zložitosti. A to všetko je oveľa rýchlejšie ako bez Bootstrapu, pretože musíte písať všetky css od začiatku.

Responzívne nástroje

Toto je ďalšia skvelá vlastnosť bootstrapu. Spočíva v tom, že môžete skryť alebo zviditeľniť akékoľvek bloky v šírke, ktorú potrebujete. Napríklad úplne skryť bočný stĺpec na úzkych obrazovkách, pridať nejaké nové prvky na mobilných zariadeniach, pridať stĺpec na širokouhlých obrazovkách atď.

Existuje veľa možností aplikácie, ale nepovedal som vám o najdôležitejšej veci: ako používať tieto nástroje? Ak to chcete urobiť, stačí pridať triedy do požadovaného bloku. Ak ho potrebujete skryť, stačí zadať nasledujúcu triedu:

Päta

Čo urobí trieda hidden-xs v tomto prípade? Na extra malých zariadeniach skryje pätu. Na všetkých ostatných bude blok viditeľný.

Ak ho naopak potrebujete zobraziť len na tých najmenších obrazovkách, musíte použiť triedu viditeľný-xs-block. V tomto prípade bude blok skrytý na všetkých obrazovkách okrem najužších. Adaptívne pomocné triedy sú teda napísané takto:

Slovo skryté alebo viditeľné, podľa toho, čo potrebujete

Skratka xs, sm, md alebo lg označujúca, na ktorých obrazovkách sa má blok skryť alebo zobraziť.

Pre viditeľné je tiež potrebné pridať jednu z troch hodnôt: block - zobrazí prvok ako prvok bloku, inline-block - ako prvok inline-block, inline - inline.

No, pár príkladov, aby to bolo jasné:

hidden-xs hidden-lg - skryje prvok na najmenšej a najväčšej obrazovke. Ako vidíte, môžete zadať viacero tried oddelených medzerou.

viditeľný-xs-inline viditeľný-md-blok - na malých a veľkých obrazovkách sa prvok nezobrazí vôbec. Na extra-malých to bude malé a na stredných bude blok.

viditeľný-lg-blok - prvok bude viditeľný len na najväčších obrazovkách, na všetkých ostatných bude skrytý

Takto to celé funguje. To je presne ono a inak to nejde. Dúfam, že tomu rozumiete. Uveďme to do praxe. Máme skúšobnú šablónu, aj keď veľmi primitívnu.

Úloha: zmiznúť bočný stĺpec na malých obrazovkách a tiež jeden produkt na najmenších obrazovkách. A tak, že na zariadeniach xs sú produkty už v 2 stĺpcoch, nie v 3.

Skúste to urobiť sami, upravte iba html kód. Čo je potrebné urobiť? Najprv sa pozrime na stĺpec, ak ho chcete skryť na obrazovkách sm, stačí k nemu pridať triedu hidden-sm.

Skvelé, teraz musí tretí produkt pridať triedu hidden-xs a na najmenších obrazovkách zmizne. Triedy zvyšných dvoch tovarov budú nasledovné:

To znamená, že na stredných zariadeniach bude blok zaberať 4 stĺpce z 12, čo sa dá preložiť na 33,33% šírky, a na extra malých zariadeniach - 50%. A keďže jeden blok s produktom pri tejto šírke zmizne, oba bloky s produktmi budú úhľadne usporiadané v 1 rade, takto:

Skvelé! Keď to pochopíte, môžete už s blokmi na webovej stránke manipulovať takmer akýmkoľvek spôsobom. Skúste si vymyslieť úlohy pre seba a zrealizovať ich.

Presuňte ma celú cestu

Ďalej vám ukážem ďalší veľmi dobrý trik – možnosť posunúť blok doprava alebo doľava. Povedzme, že nemáme 3 produkty v rade, ale 1. A nezaberá celú šírku. A vašou úlohou je zarovnať ho do stredu. Je to jednoduché, ak máte na pamäti, že pracujete s 12-stĺpcovým systémom.

Nechajme jeden blok s produktom:

Stačí urobiť jednoduché výpočty, aby ste pochopili, o koľko musíte blok posunúť, aby ste ho vycentrovali. Na stredných a veľkých obrazovkách ho treba posunúť o 4 stĺpce doľava a na malých o 3 stĺpce. Takto to vyzerá:

Trieda col-md-offset-4 hovorí: na stredných a veľkých obrazovkách odsaďte blok doľava o 33 % šírky nadradeného kontajnera (1/3 odsadenia vľavo, 1/3 šírky bloku, ⅓ odsadenia vpravo, výsledkom je centrovanie).
Trieda col-xs-offset-6: Na extra malých a malých obrazovkách posun doľava o 25 % (¼ výplne doľava, ½ šírky bloku, ¼ výplne doprava).

Dúfam, že rozumiete podstate a v prípade potreby použijete tieto triedy.

Bootstrap komponenty a príklady ich použitia

Gratulujem ti. Práve sme sa venovali najdôležitejšej téme súvisiacej s rámcom. Dôležitá je práve mriežka a práca s ňou. Práca s komponentmi už znamená, že jednoducho prejdete do dokumentácie, skopírujete si tam kód požadovaného komponentu a v prípade potreby ho zmeníte podľa svojich potrieb. Nižšie však uvediem niekoľko príkladov použitia komponentov.

Rýchle nadnášanie a zrušenie zábalu

Triedy ťahať-doľava a ťahať-doprava vám umožňujú rýchlo rozplávať akýkoľvek blok jeho odoslaním doľava alebo doprava. Nezabudnite na zrušenie toku. Na to môžete použiť triedu clearfix.

Bootstrap: Horizontálne responzívne (mobilné) menu

Nasledujúce komponenty pridáme priamo do šablóny, takže ak chcete s kódom pracovať a nielen čítať, postupujte podľa všetkých krokov po mne.

V skutočnosti s Bootstrap môžete veľmi jednoducho vytvoriť nielen adaptívne menu, ale aj takzvané mobilné, ktoré je na malých obrazovkách úplne zbalené a skryté pod jedným tlačidlom. Túto techniku ​​možno vidieť v mnohých responzívnych šablónach a v skutočnosti je veľmi jednoduchá na implementáciu. Príklad kódu mobilného menu je v dokumentácii, vezmem ho odtiaľ a trochu ho prerobím.

Takže prvá vec, ktorú urobím, je odstrániť blok s hlavičkou, pretože naša ponuka bude v skutočnosti hlavičkou v prípade mojej šablóny. Kód ponuky musí byť umiestnený pred všetkým obsahom stránky, dokonca aj pred blokom kontajnera. prečo? Áno, teraz sami uvidíte, že mriežka je už zabudovaná do navigačnej lišty. Takže tu je kód:

Logo/Názov prepínacieho tlačidla

• Jazda na bicykli
• Motoršport
• Vybavenie na cvičenie
  • Bežecké pásy
  • Eliptické trenažéry
  • Lavičky

Vyhľadávanie

Neznepokojujte sa tým, že existuje veľa kódu. Takto vyzerá stránka teraz:

Ak však vaša ponuka nezaberá celú šírku obrazovky, má zmysel ju vycentrovať. Ak to chcete urobiť, mali by ste vytvoriť dodatočný obalový blok pre menu, ktorý by mal byť umiestnený za blokom s triedou kontajnera-fluid. Nezabudnite zatvoriť tento blok. Dal som tomu triedu navbar-wrap. Tu sú na to štýly:

To znamená, že môžete jednoducho obmedziť šírku a vycentrovať ju. Alebo najskôr nahraďte nádobu-tekutinu nádobou .

Ako vidíte, do ponuky sme pridali logo, dve jednoduché položky, rozbaľovaciu položku a vyhľadávací formulár. To znamená, že tam bolo veľa prvkov. Ponuku si môžete ľahko prispôsobiť pre seba pridaním vlastných tried. Ale zatiaľ je mojím cieľom jednoducho vám ukázať tento komponent.

Takto bude ponuka vyzerať na zariadeniach so šírkou obrazovky menšou ako 768 pixelov:

Ako vidíte, ponuka sa zrútila. Otvorí sa po kliknutí na tlačidlo v pravom hornom rohu. Na obrazovke zostalo len logo.

Rozbaľovacia ponuka

Zároveň z vyššie uvedeného príkladu môžete pochopiť, ako sa v Bootstrape vytvára položka rozbaľovacej ponuky; extrahujeme tento kód pre podrobnejší pohľad:

Vybavenie na cvičenie

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

Takže kontajner pre rozbaľovaciu položku je bežná položka zoznamu s triedou rozbaľovacej ponuky. Vnútri je hlavný odkaz, kliknutím na ktorý sa otvorí rozbaľovacia ponuka. Je veľmi dôležité priradiť mu dátový atribút, ktorý vidíte v kóde, bez neho nebude nič fungovať. Mali by ste sa tiež uistiť, že súbor bootstrap.js je pripojený k webovým stránkam.

Rozpätie s triedou vsuvky nie je nič iné ako šípka, vďaka ktorej môžete pochopiť, že položka je rozbaľovacia položka a pod samotnou ponukou sa tvorí štandardný zoznam s odrážkami. To je všetko, všetko je celkom jednoduché, tento kód môžete použiť na implementáciu rozbaľovacích položiek.

Pridanie omrviniek (drobčekov) pomocou Bootstrapu

V mnohých obchodoch nájdete takzvaný blok strúhanky, ktorý obsahuje celú cestu k aktuálnej stránke. Je to tiež jednoduché pomocou rámca, pozrite si kód:

Domov

Katalóg

Tovar

V skutočnosti stačí zadať triedu strúhanky pre číslovaný zoznam a zadať do nej obvyklé položky zoznamu. Mimochodom, vycentrujem nadpisy druhej úrovne v šablóne (treba to napísať v css):

H2( zarovnanie textu: stred; )

Ak chcete nejako zmeniť vzhľad strúhanky, stačí použiť selektor .breadcrumb v CSS. Napríklad takto môžete odstrániť farbu pozadia:

strúhanka (pozadie: priehľadné; )

Takto vyzerá stránka teraz:

Bootstrap tabuľky

Štandardne sa tabuľka roztiahne cez celé okno, preto ju zabaľte do krabice s obmedzenou šírkou, aby ste obmedzili rozmery. V predvolenom nastavení to vyzerá hrozne, ale ak pridáte triedu tabuľky do značky tabuľky, všetko bude oveľa krajšie:

Všimnite si, že v tejto verzii majú bunky jasné okraje iba v spodnej časti; ak chcete okraje na všetkých štyroch stranách, musíte pridať ďalšiu triedu:

V zásade sú to všetky možnosti tabuliek. Už som napísal samostatný článok o tom, ako vytvoriť adaptívnu tabuľku, takže to nebudem opakovať. Jediná vec je, že do riadkov a buniek tabuľky môžete pridať aj triedy ako info, úspech, varovanie a iné, aby ste ich vyfarbili v požadovanej farbe.

Prirodzene, môžete ľahko napísať svoje vlastné triedy v style.css a použiť ich.

Spodná čiara

Dúfam, že článok bol užitočný a že ste pochopili to najdôležitejšie. Pomocou komentárov môžete klásť akékoľvek otázky.

Svet bezplatných programov a užitočných tipov
2024 whatsappss.ru