Bootstrap Tooltip፡የመሳሪያ ምክሮችን መፍጠር

ዝርዝር ሁኔታ:

Bootstrap Tooltip፡የመሳሪያ ምክሮችን መፍጠር
Bootstrap Tooltip፡የመሳሪያ ምክሮችን መፍጠር
Anonim

እንዴት ጣቢያዎን ለጎብኚዎች ማራኪ ማድረግ ይቻላል? ይህ ጥያቄ ሁሉንም የኢንተርኔት ሃብቶች ባለቤቶችን ያሳስባል፡ ነጋዴዎች፣ ጦማሪዎች፣ የአነስተኛ እና ትላልቅ ንግዶች ባለቤቶች፣ ተጓዦች እና በቀላሉ ለአለም የሚነግሩት ነገር ያላቸው ፈጠራ ሰዎች።

አንድ ድር ጣቢያ ለምን ቆንጆ እና ተግባራዊ ይሆናል?

የጉብኝቶች ብዛት በጣቢያው ጭብጥ እና በታለመላቸው ታዳሚዎች፣ ሰዎች ለአንድ የተወሰነ ምርት ያላቸው ፍላጎት፣ ኢንቨስትመንት፣ ማስተዋወቅ፣ ይዘት እና ሌሎች በርካታ ነገሮች ላይ የተመሰረተ ነው። ነገር ግን ጣቢያው "በልብስ ሰላምታ" መደረጉን መካድ አይቻልም. የሀብቱ የመጀመሪያ እና ዋና ገፅ ነው ፊቱ ፣የመደወያ ካርዱ ፣በዚህም ጎብኚው ጊዜውን ለበለጠ እይታ ይዘት ማዋል ይፈልግ እንደሆነ መረዳት አለበት።

ቡትስትራፕ የመሳሪያ ጫፍ
ቡትስትራፕ የመሳሪያ ጫፍ

እና ለስህተት ምንም ቦታ የለም! በዩኤስኤ ከሚገኙት የቴክኒክ ዩኒቨርሲቲዎች በአንዱ ጥናት መሰረት ጎብኚው የጣቢያው የመጀመሪያ እይታ ከአንድ ሰከንድ ባነሰ ጊዜ ውስጥ ያገኛል። በአማካይ አንድ ሰው በ 3 ሰከንድ ውስጥ አንድ ጣቢያ "ይቃኛል". የመብረቅ ፍጥነት፣ አይደል?!

እስከ 70% የሚሆነው የሀብቱ ስኬት የሚወሰነው ዋናው ገጽ እንዴት እንደሚመስል ላይ ነው። ሰዎች የሚያስተውሉት የመጀመሪያው ነገር ነው።ሎጎ፣ ሁለተኛው ግን አሰሳ ነው። እና ሁሉም ነገር በአርማው የበለጠ ወይም ያነሰ ግልጽ ከሆነ ፣ ከዚያ በጣቢያው ergonomics አሰሳ ፣ ምናሌ እና ምቾት ላይ ጭንቅላትዎን መስበር ጠቃሚ ነው። ምክንያታዊ ጥያቄ የሚነሳው "ጣቢያዎን እንዴት ማስጌጥ, በተቻለ መጠን ተግባራዊ እና ምቹ እንዲሆን ያድርጉ, ግን በተመሳሳይ ጊዜ ቆንጆ?" የሚቀርቡ ብዙ ያልተለመዱ ሀሳቦች አሉ፣ ግን በጣም ከሚያስደስት አንዱ የመሳሪያ ምክሮች ነው።

የመሳሪያ ምክሮች ምንድን ናቸው? የድረ-ገጹን ተግባራዊነት ለማሻሻል ጥሩ ዘዴ ከመሆኑ በተጨማሪ ተጠቃሚው በአንድ አዶ፣ ቃል ወይም ምስል ላይ ሲያንዣብብ ለአንድ የተወሰነ ምስል ማብራሪያ እንዲያይ የሚያስችል መሳሪያ ነው።

ከመሳሪያ ምክሮች ጋር ለመስራት የሚረዱ መሳሪያዎች

Bootstrap የመሳሪያ ምክሮችን ለመፍጠር ምርጡ መሳሪያ ነው። በHTML፣ CSS፣ Sass እና JavaScript የተፃፉ መተግበሪያዎችን እና ድር ጣቢያዎችን ለመገንባት ለመማር ቀላል የሆነ የአብነት ስብስብ ነው።

bootstrap Tooltip አይሰራም
bootstrap Tooltip አይሰራም

የተለየ ለመሆን፣የመሳሪያ ምክሮች ከBootstrap አብነት ግራፊክ አባለ ነገሮች አንዱን ይጠቀማሉ - Tooltip።

የቡትስትራፕ ማዕቀፍ የተፈጠረው ለ"Twitter" ሲሆን በመጀመሪያ "Twitter Blueprint" ተብሎ ይጠራ ነበር። እ.ኤ.አ. በ 2012 ከተወሰኑ ለውጦች በኋላ ፣ ባለ 12-አምድ ፍርግርግ ተቀበለ ፣ መላመድ እና የታወቀውን ስም አግኝቷል - Tooltip። Tooltip በአንድ የተወሰነ አካል ላይ በማያ ገጹ ላይ ሲያንዣብቡ ብቅ ያለ አካል ነው።

ፍንጭ በመፍጠር ላይ

ባህሪዎችን በመጠቀም የBootstrap Tooltip መፍጠር ይችላሉ።ውሂብ, እንዲሁም "Java Script" ክፍሎችን በማንቃት. HTML Bootstrap Tooltip ለመፍጠር ሁለት ዋና መንገዶች አሉ። የመጀመርያው ፍሬ ነገር ፍንጭ ጽሑፍ የያዘውን የባህሪ እና የባህሪ ርዕስ (ርእስ) መተግበር ነው። የመሳሪያው ጫፍ ከላይ (ነባሪ ቅንብር) ላይ ብቅ ይላል. አውቶማቲክ ማስጀመሪያ በ"Twitter bootstrap" ውስጥ በአፈጻጸም ምክንያት ስለተቋረጠ የመሳሪያውን ጫፍ መጀመር እንዳለበት ማስታወስ ጠቃሚ ነው።

የቡትስትራፕ የመሳሪያ ምክር ምሳሌ
የቡትስትራፕ የመሳሪያ ምክር ምሳሌ

የመሳሪያ ምክሮችን ለማስጀመር ልዩ ጃቫ ስክሪፕት ጥቅም ላይ ይውላል፣ በዚህ ውስጥ የመሳሪያ ጥቆማ ዘዴ ባህሪ ላላቸው ለሁሉም አካላት የተመለሰ ነው። የሁለተኛው ዘዴ ፍሬ ነገር የ "ጃቫ ስክሪፕት" ኮድን በመጠቀም ከ jQuery ቤተ-መጽሐፍት ጋር በመሆን የመሳሪያ ክፍልን ያካተተ የመሳሪያ ክፍል በመጻፍ የመሳሪያ ምክሮችን ማንቃት ነው. ዘዴው ከመጀመሪያው ጋር ተመሳሳይ ነው, ከኤለመንቱ ምርጫ ዘዴ በስተቀር. ከታች በሚታየው መንገድ በ"Java Script" ውስጥ ፍንጮችን ማንቃት ትችላለህ።

ስክሪፕት
ስክሪፕት

Bootstrap Tooltip ምሳሌ

የመሳሪያ ምክሮችን ለማስቀመጥ አራት ዋና አማራጮች አሉ፡ በግራ እና በቀኝ ጠርዝ እና ከኤለመንት በላይ እና በታች።

ስክሪፕት ከላይ
ስክሪፕት ከላይ

ፍንጭ ከላይ

በቀኝ በኩል ፍንጭ
በቀኝ በኩል ፍንጭ

በቀኝ ፍንጭ

ከታች ፍንጭ
ከታች ፍንጭ

ከታች ፍንጭ

በግራ በኩል ፍንጭ
በግራ በኩል ፍንጭ

ፍንጭ ወደ ግራ

ስክሪፕት መዝጊያ
ስክሪፕት መዝጊያ

የመሳሪያ ምክሮችን በመጠቀም

ለBootstrap Tooltip ብዙ አጠቃቀሞች አሉ። ተጠቃሚው በጽሁፉ ውስጥ ከባዕድ ቋንቋ የጽሑፍ ትርጉም እንዲረዳ የመሳሪያ ምክሮችን ማስገባት ይችላሉ. ተጠቃሚው በፓነሉ ላይ በሚያንዣብቡበት ጊዜ በፓነል ላይ ያሉትን አዝራሮች ትርጉም እንዲረዳ ለመርዳት የመሳሪያ ምክሮች እንደ መሳሪያ መጠቀም ይችላሉ። ለኩባንያ ዜና ደንበኝነት ምዝገባን ለመፍጠር የቡትስትራፕ Tooltip አብነቶች በተለያዩ ድርጅቶች ድረ-ገጾች ላይ ብዙ ጊዜ ጥቅም ላይ ይውላሉ። ይህ ደንበኞችን ወቅታዊ ያደርጋቸዋል እንዲሁም ጎብኚዎች እንደ የቅናሽ ተመኖች፣ ቅናሾች፣ በኩባንያው ውስጥ ያሉ ለውጦች ያሉ አዳዲስ መረጃዎችን እንዲቀበሉ ያስችላቸዋል።

bootstrap Tooltip html
bootstrap Tooltip html

አንድ ተጠቃሚ ለዜና መጽሄት ለመመዝገብ የኢሜይል አድራሻቸውን ማስገባት ያለበትን ምሳሌ አስቡ። የተገልጋይ ታዳሚ ለዜና መመዝገቡን የማረጋገጥ ተግባር በቀላሉ የሚገኘው HTML5 እና የሚፈለገውን ባህሪ በመጠቀም ነው። ተጠቃሚው የእርምጃዎችን ቅደም ተከተል እንዲረዳው በዚህ ጉዳይ ላይ ያለው የመሳሪያ ፍንጭ ያስፈልጋል. ለምሳሌ, የኢሜል አድራሻውን ከገባሁ በኋላ, ሳጥኑ ላይ ምልክት አደረግሁ: "የኩባንያ ዜና ወደ ኢሜል አድራሻዬ ለመቀበል ተስማምቻለሁ." ከታች ያለው የቅጽ ኮድ ምሳሌ ነው።

ጠቃሚ ምክር
ጠቃሚ ምክር

ይህን ኮድ ወደ HTML Bootstrap Tooltip መጫን ቀላል ነው። ጥቅሞቹ ግን ጉልህ ናቸው። አሁን ሸማቾች የኩባንያውን ሁሉንም ዜናዎች ያውቃሉ. ይህ የነጻ ማስታወቂያ አይነት ነው።

bootstrap Tooltip html ይዘት
bootstrap Tooltip html ይዘት

ብቅ-ባዮችን ሲፈጥሩ ዋና ዋና ስህተቶችፍንጭ

የBootstrap Tooltip የማይሰራ ከሆነ ምን ማድረግ አለበት? የመሳሪያ ምክር ባህሪ የማይሰራበት የመጀመሪያው እና ዋናው ስህተት የመሳሪያ ጥቆማው ካልነቃ ነው። እሱን ለማግበር ልዩ ኮድ መጠቀም ያስፈልግዎታል።

የመሳሪያ ቲፕ ማስጀመር
የመሳሪያ ቲፕ ማስጀመር

ይህ ዘዴ ሁሉንም የመሳሪያ ምክሮች በድረ-ገጽ ላይ እንዲያስጀምሩ ያስችልዎታል።

ሁለተኛው የተለመደ ስህተት jQuery በርዕሱ ላይ አለመኖር ነው።

የመሳሪያ ስህተት
የመሳሪያ ስህተት

አገናኙ በትክክል እንዲሰራ አስፈላጊው ቅድመ ሁኔታ አለ - እንደ "ጃቫ ስክሪፕት" ያለ የውሂብ ሂደት ተግባር መገለጽ አለበት።

የጃቫ ስክሪፕት
የጃቫ ስክሪፕት

የመሳሪያ ጠቃሚ ባህሪያት

በዋናው ላይ፣የመሳሪያ ጥቆማው አካል የመዳፊት ጠቋሚውን ወደ አንድ ወይም ሌላ የገጹ ክፍል ሲያንቀሳቅሱ የመሳሪያ ምክሮችን ለማሳየት ነው የተቀየሰው። ነገር ግን በእርዳታው በቀኝ፣ በግራ እና ከላይ ካለው የመሳሪያ ጫፍ መገኛ በተጨማሪ የመሳሪያ ምክሮች የሚከተሉት ባህሪያት አሉት፡

  • ንቁ። በBootstrap Tooltip ውስጥ ያለውን እውነተኛ ንብረት መጠቀም የመሳሪያ ምክሮች እንዲታዩ ያስችላል፣ነገር ግን ተመሳሳዩን ንብረት ወደ ሐሰት ማቀናበር ማለት ምንም ዓይነት የመሳሪያ ምክሮች ሊታዩ አይችሉም።
  • AutoPopDelay ጠቃሚ ምክሮች የሚታዩበት ጊዜ ነው።
  • ራስ-ፖፕ መዘግየት። የመሳሪያ ጥቆማው እንዲታይ የመዳፊት ጠቋሚው በአንድ አካል ላይ የሚያንዣብብበትን ጊዜ ይወክላል።
  • IsBaloon። የHTML Bootstrap Tooltip መሣሪያ ጠቃሚ ምክር ዋጋ እውነት ከሆነ፣የመሳሪያ ጥቆማው ወደ ደመና ይቀየራል።
  • የመሳሪያ ጠቃሚ ምክር አዶ። በመስኮቱ ውስጥ የሚታየውን ቁምፊ ይወክላልፍንጭ።
bootstrap Tooltip HTML እውነት
bootstrap Tooltip HTML እውነት

የመሳሪያ ጠቃሚ ምክር

የሚያምሩ የመሳሪያ ምክሮችን ለመፍጠር ለምሳሌ በ Wordpress ላይ በተፈጠረው ጣቢያ ላይ የድር ገንቢዎችን ቋንቋ በደንብ ማወቅ አያስፈልግም። እንደ Tooltipster እንደዚህ ያለ ተሰኪ (ቅጥያ) መኖሩን ማወቅ በቂ ነው. ከስሙ መረዳት እንደሚቻለው ይህ ፕለጊን በ Tooltip ላይ የተመሰረተ እና በሚያስደንቅ ሁኔታ በንብረቶቹ እና በዓላማው ተመሳሳይ ነው. ይህ ተሰኪ ምንድነው? በመሳሪያው ጫፍ ውስጥ አስፈላጊውን የኤችቲኤምኤል ምልክት እንዲፈጥሩ ይፈቅድልዎታል።

የመሳሪያ ምክሮች ምሳሌ
የመሳሪያ ምክሮች ምሳሌ

የፕለጊኑ ስራ በገጹ ላይ አቋራጮችን በማስገባት ላይ የተመሰረተ ነው። ሁሉንም መሠረታዊ HTML Bootstrap Tooltip ባህሪያትን ይዟል፡ ይዘት (ዳታ-መሳሪያ-ይዘት)፣ ርዕስ፣ አቀማመጥ፣ ቀስቅሴ፣ ወዘተ። ይህ ገጽታውን፣ ቅርጸ-ቁምፊውን፣ የመሳሪያውን መጠን፣ ቀለም፣ ምስል ለማስገባት እና ሌሎችንም እንዲቀይሩ ያስችልዎታል።

የሚመከር: