Bootstrap Tooltip: ustvarite orodje

Kako narediti svojo spletno stran privlačno za obiskovalce? To vprašanje skrbi skoraj vsi lastniki spletnih virov: trgovci, blogerji, lastniki malih in velikih podjetij, potniki in samo ustvarjalni ljudje, ki imajo kaj povedati svetu.

Zakaj naj bi bila spletna stran lepa in funkcionalna?

Število obiskov je odvisno od teme spletnega mesta in njegovega ciljnega občinstva, zanimanja ljudi za določen izdelek, naložb, promocije, dopolnjevanja in številnih drugih dejavnikov. Vendar pa ni mogoče zanikati, da se spletno mesto "sestane na oblekah". To je prva in glavna stran vira, ki je njegov obraz, vizitka, na kateri mora obiskovalec razumeti, ali želi preživeti svoj čas pri nadaljnjem ogledu vsebine.

In ni nobene pravice do napake! Po raziskavi ene od tehničnih univerz v Združenih državah je prvi vtis spletnega mesta obiskovalec v manj kot sekundi. V povprečju oseba v 3 sekundah skenira spletno mesto. Hitrost strele, kajne?

Glede na to, kako izgleda glavna stran, je do 70% uspeha vira odvisno. Prva stvar, ki jo ljudje upoštevajo, je logotip, druga pa navigacija. In če je logotip bolj ali manj jasen, je vredno prekiniti glavo nad navigacijo, meni in udobje ergonomije mesta. Obstaja razumno vprašanje: "Kako okrasite svojo spletno stran, naredite jo čim bolj funkcionalno in udobno, a lepo?" Obstaja veliko nenavadnih idej, ki jih lahko ponudi, vendar je eden izmed najbolj zanimivih pop-up nasvetov.

Kakšni so namigov? Poleg tega, da so odličen mehanizem za izboljšanje funkcionalnosti spletnega mesta, so namesto orodja orodje, ki uporabniku omogoča premikanje nad ikono, besedo ali sliko, da bi videli razlago slike.

Orodja za delo s pripomočki

Bootstrap lahko uporabite za ustvarjanje orodja. To je preprost za učenje nabor predlog za ustvarjanje aplikacij in spletnih mest, zapisanih v HTML, CSS, Sassu in jаvascriptu.

Če podate, potem za orodne vrstice uporabite enega od grafičnih elementov predloge Bootstrap - Tooltip.

Okvir Bootstrap je bil ustvarjen za "Twitter" in je bil prvotno imenovan "Twitter Blint." Po nekaj spremembah v letu 2012 je prejel mrežo 12 stolpcev, postal prilagodljiv in je dobil znano ime - Tooltip. Orodje je element, ki se pojavlja, ko se pomaknete nad določeno postavko na zaslonu zaslona.

Ustvarite kartico

Ukaz Bootstrap Tooltip lahko ustvarite z uporabo atributov podatkov ali z aktiviranjem elementov Java Script Script. Obstajata dva glavna načina za ustvarjanje orodja HTML Bootstrap Tooltip. Bistvo prvega je uporaba atributa data-toggle = "tooltip" in atributa naslova, ki bo vseboval besedilo pomoči. Navodilo se bo pojavilo od zgoraj (privzeta nastavitev). Treba je spomniti, da namig potrebuje inicializacijo, saj je avtomatska inicializacija preklicana v "Twitter bootstrap" zaradi povečanja zmogljivosti.

Za inicializiranje namigov se uporablja poseben jаvascript, pri katerem je za vse elemente, ki imajo atribut data-toggle = "tooltip", način obnovitve orodja obnovljen. Bistvo druge metode je aktiviranje java skripta z orodjem za knjižnico jQuery s pisanjem orodja, ki vključuje namig. Metoda je podobna prvi, razen metode izbire elementov. V nasvet "Java Script" vnesite nasvete na način, prikazan spodaj.

Primer začetka orodja za zagon

Obstajajo štiri osnovne možnosti za namestitev orodnih vrst: na levi in ​​desni robovi ter tudi na zgornji in spodnji strani elementa.

Namig z vrha

Nasvet na desni

Namig na dnu

Nasvet na levi strani

Uporaba orodij

Obstaja več načinov uporabe orodja Bootstrap Tooltip. Vložke lahko vstavite tako, da lahko uporabnik razume prevod besedila iz tujega jezika v besedilu. Namigi lahko uporabite tudi kot orodje, ki uporabniku pomaga pri razumevanju pomena gumba na plošči, ko se premaknete nad njimi. Predloge Bootstrap Tooltip se pogosto uporabljajo na spletnih straneh različnih organizacij, da ustvarijo naročnino na novice podjetja. To vam omogoča, da obdržite obveščene stranke, obiskovalcem pa tudi možnost, da prejmejo nove informacije, kot so zneski popustov, ponudb in sprememb v podjetju.

Upoštevajte primer, v katerem mora uporabnik vnesti svoj e-poštni naslov, da se naroči na glasilo. Naloga zagotavljanja naročnine na novice odjemalcev je najlažje doseči z uporabo HTML5 in zahtevanega atributa. Navodilo v tem primeru je potrebno, da uporabnik razume zaporedje dejanj. Na primer, po vnosu e-poštnega naslova sem označil polje: »Strinjam se, da bom prejemal novice podjetja po elektronski pošti«. Spodaj je primer kode obrazca.

Če želite vnesti takšno kodo v HTML Bootstrap Tooltip ne opravlja posebnega dela. Toda korist od njega je precejšnja. Zdaj potrošniki poznajo vse novice o podjetju. To je nekakšno brezplačno oglaševanje.

Osnovne napake pri ustvarjanju namigov

Kaj naj storim, če orodje za zagon orodij ne deluje? Prva in glavna napaka, v kateri atribut orodne vrstice ne bo deloval, je opis orodja ni vključen. Če jo želite aktivirati, morate uporabiti posebno kodo.

Ta metoda vam omogoča, da inicializirate vse orodne vrstice na spletni strani.

Druga pogosta napaka je pomanjkanje jQuery v glavi.

Za kompetentno delo povezave je potreben pogoj - določiti je treba funkcijo za obdelavo podatkov, kot je "Java Script".

Lastnosti orodja

Komponenta orodja je na svojem jedru namenjena prikazovanju namigov, ko miško miškin kazalec premikate na del strani. Toda, poleg lokacije nagovora na desni, levo in na vrh s podatkovnim preklopom = "orodni vpis", ima v orodni vrstici te lastnosti:

• Aktivno. Z uporabo prave lastnosti v Bootstrap Tooltip vam omogoča, da prikažete namige, nato pa vrednost false za isto lastnost pomeni, da ne morete prikazati namigov.
• AutoPopDelay je čas, ko so prikazani pozivi.
• AutoPopDelay. To je časovno obdobje, v katerem mora biti miškin kazalec usmerjen na element, tako da se prikaže orodje.
• IsBaloon. Če je vrednost HTML Bootstrap Tooltip-a resnična, bo okno za pozivanje izgledalo kot oblak.
• ToolTipIcon. To je simbol, ki se pojavi v oknu za hitro klicanje.

Tooltipster

Če želite ustvariti odlične nasvete, na primer na spletnem mestu, ustvarjenem v programu WordPress, ni potrebno temeljito razumeti jezika spletnih razvijalcev. Dovolj je vedeti o obstoju takšnega vtičnika (razširitev), kot orodje Tooltipster. Iz naslova je jasno, da ta vtičnik temelji na orodni vrstici in je zaradi svojih lastnosti in namena presenetljivo podoben. Za kaj je ta vtičnik? Omogoča vam, da v namigu ustvarite potrebno oznako HTML.

plug-in temelji na vstavitvi bližnjic na tej strani. Vsebuje vse bistvene atribute za HTML Bootstrap namigu :. vsebine (-tooltip-vsebine podatki), naslov, položaj, sprožilec, itd To vam omogoča, da spremenite temo, pisavo, velikost nasvetov, barve, vstaviti sliko, in še veliko več.