ግሊፊኮንስ ዝበሃል ጽሑፍ

ዝርከቡ ግሊፍታት

ልዕሊ 250 ግሊፍ ብቅርጺ ቅርጺ ካብ ስብስብ ግሊፊኮን ሃፍሊንግስ ዘጠቓለለ እዩ። ግሊፊኮንስ ሃፍሊንግስ ንቡር ብነጻ ኣይርከብን እዩ፡ ፈጣሪኡ ግን ንቡትስትራፕ ብነጻ ከም ዝቐርብ ገይሩ ኣሎ። ከም ምስጋና ድማ ብዝተኻእለ መጠን ናብ ግሊፊኮንስ ዝምለስ ሊንክ ከተእትዉ ጥራይ ኢና ንሓትት ።

  • ግሊፊኮን ግሊፊኮን-ኮኾብ
  • ግሊፊኮን ግሊፊኮን-ፕላስ
  • ግሊፊኮን ግሊፊኮን-ዩሮ
  • ግሊፊኮን ግሊፊኮን-eur
  • ግሊፊኮን ግሊፊኮን-ምጉዳል
  • ግሊፊኮን ግሊፊኮን-ደበና
  • ግሊፊኮን ግሊፊኮን-ፖስታ
  • ግሊፊኮን ግሊፊኮን-እርሳስ
  • ግሊፊኮን ግሊፊኮን-ብርጭቆ
  • ግሊፊኮን ግሊፊኮን-ሙዚቃ
  • ግሊፊኮን ግሊፊኮን-ምድላይ
  • ግሊፊኮን ግሊፊኮን-ልቢ
  • ግሊፊኮን ግሊፊኮን-ኮኾብ
  • ግሊፊኮን ግሊፊኮን-ኮኾብ-ባዶ
  • ግሊፊኮን ግሊፊኮን-ተጠቃሚ
  • ግሊፊኮን ግሊፊኮን-ፊልም
  • ግሊፊኮን ግሊፊኮን-መበል-ዓቢ
  • ግሊፊኮን ግሊፊኮን-ት
  • ግሊፊኮን ግሊፊኮን-ዝ-ዝርዝር
  • ግሊፊኮን ግሊፊኮን-ok
  • ግሊፊኮን ግሊፊኮን-ምእላይ
  • ግሊፊኮን ግሊፊኮን-ምዕባይ
  • ግሊፊኮን ግሊፊኮን-ምዕባይ-ኣውጽእ
  • ግሊፊኮን ግሊፊኮን-off
  • ግሊፊኮን ግሊፊኮን-ምልክት
  • ግሊፊኮን ግሊፊኮን-ኮግ
  • ግሊፊኮን ግሊፊኮን-ጓሓፍ
  • ግሊፊኮን ግሊፊኮን-ገዛ
  • ግሊፊኮን ግሊፊኮን-ፋይል
  • ግሊፊኮን ግሊፊኮን-ግዜ
  • ግሊፊኮን ግሊፊኮን-መንገዲ
  • ግሊፊኮን ግሊፊኮን-download-alt
  • ግሊፊኮን ግሊፊኮን-download
  • ግሊፊኮን ግሊፊኮን-ምጽዓን።
  • ግሊፊኮን ግሊፊኮን-ኢንቦክስ
  • ግሊፊኮን ግሊፊኮን-ጸወታ-ዓንኬል
  • ግሊፊኮን ግሊፊኮን-ምድጋም
  • ግሊፊኮን ግሊፊኮን-ሕድሽ
  • ግሊፊኮን ግሊፊኮን-ዝርዝር-ኣልት
  • ግሊፊኮን ግሊፊኮን-ሎክ
  • ግሊፊኮን ግሊፊኮን-ባንዴራ
  • ግሊፊኮን ግሊፊኮን-እዝኒ ስልኪ
  • ግሊፊኮን ግሊፊኮን-ድምጺ-ምጥፋእ
  • ግሊፊኮን ግሊፊኮን-ድምጺ-ንታሕቲ
  • ግሊፊኮን ግሊፊኮን-ቮሉም-ኣፕ
  • ግሊፊኮን ግሊፊኮን-qrcode
  • ግሊፊኮን ግሊፊኮን-ባርኮድ
  • ግሊፊኮን ግሊፊኮን-ታግ
  • ግሊፊኮን ግሊፊኮን-ታግስ
  • ግሊፊኮን ግሊፊኮን-መጽሓፍ
  • ግሊፊኮን ግሊፊኮን-ዕልባ
  • ግሊፊኮን ግሊፊኮን-ሕትመት
  • ግሊፊኮን ግሊፊኮን-ካሜራ
  • ግሊፊኮን ግሊፊኮን-ቅርጺ ጽሑፍ
  • ግሊፊኮን ግሊፊኮን-ደፋር
  • ግሊፊኮን ግሊፊኮን-ሰያፍ
  • ግሊፊኮን ግሊፊኮን-ጽሑፍ-ቁመት
  • ግሊፊኮን ግሊፊኮን-ጽሑፍ-ስፍሓት
  • ግሊፊኮን ግሊፊኮን-align-ጸጋም
  • ግሊፊኮን ግሊፊኮን-ኣሰላልፋ-ማእከል
  • ግሊፊኮን ግሊፊኮን-align-right
  • ግሊፊኮን ግሊፊኮን-ምምዕርራይ-ምምኽናይ
  • ግሊፊኮን ግሊፊኮን-ዝርዝር
  • ግሊፊኮን ግሊፊኮን-ኢንደንት-ጸጋም
  • ግሊፊኮን ግሊፊኮን-ኢንደንት-የማን
  • ግሊፊኮን ግሊፊኮን-ገጽ-ግዜ-ቪድዮ
  • ግሊፊኮን ግሊፊኮን-ስእሊ
  • ግሊፊኮን ግሊፊኮን-ካርታ-ማርከር
  • ግሊፊኮን ግሊፊኮን-ምትዕርራይ
  • ግሊፊኮን ግሊፊኮን-ቲንት
  • ግሊፊኮን ግሊፊኮን-ኣርትዖት።
  • ግሊፊኮን ግሊፊኮን-ሼር ምግባር
  • ግሊፊኮን ግሊፊኮን-ምፍታሽ
  • ግሊፊኮን ግሊፊኮን-ምንቅስቓስ
  • ግሊፊኮን ግሊፊኮን-ስጉምቲ-ንድሕሪት።
  • ግሊፊኮን ግሊፊኮን-ቅልጡፍ-ድሕሪት።
  • ግሊፊኮን ግሊፊኮን-ድሕሪት።
  • ግሊፊኮን ግሊፊኮን-ጸወታ
  • ግሊፊኮን ግሊፊኮን-ዕረፍቲ
  • ግሊፊኮን ግሊፊኮን-ስቶፕ
  • ግሊፊኮን ግሊፊኮን-ንቕድሚት።
  • ግሊፊኮን ግሊፊኮን-ቅልጡፍ-ንቕድሚት።
  • ግሊፊኮን ግሊፊኮን-ስጉምቲ-ንቕድሚት።
  • ግሊፊኮን ግሊፊኮን-ኤጀክት
  • ግሊፊኮን ግሊፊኮን-ሸቭሮን-ጸጋም
  • ግሊፊኮን ግሊፊኮን-ሸቭሮን-የማን
  • ግሊፊኮን ግሊፊኮን-ፕላስ-ምልክት
  • ግሊፊኮን ግሊፊኮን-ምጉዳል-ምልክት
  • ግሊፊኮን ግሊፊኮን-ምእላይ-ምልክት
  • ግሊፊኮን ግሊፊኮን-ok-ምልክት
  • ግሊፊኮን ግሊፊኮን-ሕቶ-ምልክት
  • ግሊፊኮን ግሊፊኮን-ሓበሬታ-ምልክት
  • glyphicon glyphicon-ስእሊ ስክሪን
  • ግሊፊኮን ግሊፊኮን-ምእላይ-ዓንኬል
  • ግሊፊኮን ግሊፊኮን-ኦክ-ዓንኬል
  • ግሊፊኮን ግሊፊኮን-ባን-ዓንኬል
  • ግሊፊኮን ግሊፊኮን-ፍላጻ-ጸጋም
  • ግሊፊኮን ግሊፊኮን-ፍላጻ-የማን
  • ግሊፊኮን ግሊፊኮን-ፍላጻ-ንላዕሊ
  • ግሊፊኮን ግሊፊኮን-ፍላጻ-ንታሕቲ
  • ግሊፊኮን ግሊፊኮን-ሼር-ኣልት
  • ግሊፊኮን ግሊፊኮን-ዓቐን ምቕያር-ምሉእ
  • ግሊፊኮን ግሊፊኮን-ዓቐን ምቕያር-ንእሽቶ
  • ግሊፊኮን ግሊፊኮን-ምልክት-ኣድናቖት።
  • ግሊፊኮን ግሊፊኮን-ህያብ
  • ግሊፊኮን ግሊፊኮን-ቆጽሊ
  • ግሊፊኮን ግሊፊኮን-ሓዊ
  • ግሊፊኮን ግሊፊኮን-ዓይኒ-ምኽፋት
  • ግሊፊኮን ግሊፊኮን-ዓይኒ-ምዕጻው
  • ግሊፊኮን ግሊፊኮን-መጠንቀቕታ-ምልክት
  • ግሊፊኮን ግሊፊኮን-ነፋሪት።
  • ግሊፊኮን ግሊፊኮን-ዓውደ-ኣዋርሕ
  • ግሊፊኮን ግሊፊኮን-ብሃንደበት
  • ግሊፊኮን ግሊፊኮን-ርእይቶ
  • ግሊፊኮን ግሊፊኮን-ማግኔት።
  • ግሊፊኮን ግሊፊኮን-ሸቭሮን-ኣፕ
  • ግሊፊኮን ግሊፊኮን-ሸቭሮን-ንታሕቲ
  • ግሊፊኮን ግሊፊኮን-ሪትዊት ምግባር
  • ግሊፊኮን ግሊፊኮን-ዕዳጋ-ዓረብያ
  • ግሊፊኮን ግሊፊኮን-ማህደር-ዕጾ
  • glyphicon ግሊፊኮን-ማህደር-ክፉት እዩ።
  • ግሊፊኮን ግሊፊኮን-ዓቐን ምቕያር-ቀጥታዊ
  • ግሊፊኮን ግሊፊኮን-ዓቐን ምቕያር-ኣግማድ
  • ግሊፊኮን ግሊፊኮን-hdd
  • ግሊፊኮን ግሊፊኮን-ቡልሆርን ዝበሃል እዩ።
  • ግሊፊኮን ግሊፊኮን-ደወል
  • ግሊፊኮን ግሊፊኮን-ምስክር ወረቐት
  • ግሊፊኮን ግሊፊኮን-ኣጻብዕቲ ኢድ ንላዕሊ
  • ግሊፊኮን ግሊፊኮን-ኣጻብዕቲ ኢድ ንታሕቲ
  • ግሊፊኮን ግሊፊኮን-ኢድ-የማን
  • ግሊፊኮን ግሊፊኮን-ኢድ-ጸጋም
  • ግሊፊኮን ግሊፊኮን-ኢድ ንላዕሊ
  • ግሊፊኮን ግሊፊኮን-ኢድ-ንታሕቲ
  • ግሊፊኮን ግሊፊኮን-ዓንኬል-ፍላጻ-የማን
  • ግሊፊኮን ግሊፊኮን-ዓንኬል-ፍላጻ-ጸጋም
  • ግሊፊኮን ግሊፊኮን-ዓንኬል-ፍላጻ-ንላዕሊ
  • ግሊፊኮን ግሊፊኮን-ዓንኬል-ፍላጻ-ንታሕቲ
  • ግሊፊኮን ግሊፊኮን-ግሎብ
  • ግሊፊኮን ግሊፊኮን-መፍትሕ
  • ግሊፊኮን ግሊፊኮን-ዕማማት
  • ግሊፊኮን ግሊፊኮን-ፍልተር
  • ግሊፊኮን ግሊፊኮን-ቦርሳ
  • ግሊፊኮን ግሊፊኮን-ምሉእ ስክሪን
  • ግሊፊኮን ግሊፊኮን-ዳሽቦርድ
  • ግሊፊኮን ግሊፊኮን-መቐመጢ ወረቐት
  • ግሊፊኮን ግሊፊኮን-ልቢ-ባዶ
  • ግሊፊኮን ግሊፊኮን-መላግቦ
  • ግሊፊኮን ግሊፊኮን-ስልኪ
  • ግሊፊኮን ግሊፊኮን-ፑሽፒን።
  • ግሊፊኮን ግሊፊኮን-usd
  • ግሊፊኮን ግሊፊኮን-gbp
  • ግሊፊኮን ግሊፊኮን-sort
  • ግሊፊኮን ግሊፊኮን-ብፊደላት-ምድላው
  • ግሊፊኮን ግሊፊኮን-ብፊደላት-ኣልት
  • glyphicon glyphicon-ብቕደም ተኸተል ምድላው
  • ግሊፊኮን ግሊፊኮን-ብቕደም ተኸተል-ኣልት
  • ግሊፊኮን ግሊፊኮን-ብባህርያት-ምስርዕ
  • ግሊፊኮን ግሊፊኮን-ብባህርያት-ኣልት
  • ግሊፊኮን ግሊፊኮን-ዘይተፈተሸ
  • ግሊፊኮን ግሊፊኮን-ምግፋሕ
  • ግሊፊኮን ግሊፊኮን-ምዕራስ-ንታሕቲ
  • ግሊፊኮን ግሊፊኮን-ምዕራፍ-ኣፕ
  • ግሊፊኮን ግሊፊኮን-ምእታው
  • ግሊፊኮን ግሊፊኮን-ፍላሽ
  • ግሊፊኮን ግሊፊኮን-መውጽኢ
  • ግሊፊኮን ግሊፊኮን-ሓድሽ-መስኮት።
  • ግሊፊኮን ግሊፊኮን-መዝገብ
  • ግሊፊኮን ግሊፊኮን-ምድሓን።
  • ግሊፊኮን ግሊፊኮን-ክፉት እዩ።
  • ግሊፊኮን ግሊፊኮን-ዝተዓቀበ
  • ግሊፊኮን ግሊፊኮን-ምእታው
  • ግሊፊኮን ግሊፊኮን-ሰደድ
  • ግሊፊኮን ግሊፊኮን-ልኣኽ
  • ግሊፊኮን ግሊፊኮን-ፍሎፒ-ዲስክ
  • ግሊፊኮን ግሊፊኮን-ፍሎፒ-ተዓቀበ
  • ግሊፊኮን ግሊፊኮን-ፍሎፒ-ምእላይ
  • ግሊፊኮን ግሊፊኮን-ፍሎፒ-ምዕቃብ
  • ግሊፊኮን ግሊፊኮን-ፍሎፒ-ክፉት እዩ።
  • ግሊፊኮን ግሊፊኮን-ክረዲት-ካርድ
  • ግሊፊኮን ግሊፊኮን-ምትሕልላፍ
  • ግሊፊኮን ግሊፊኮን-መቑረጺ መግቢ
  • ግሊፊኮን ግሊፊኮን-ርእሲ
  • ግሊፊኮን ብግሊፊኮን ዝተጸቕጠ
  • ግሊፊኮን ግሊፊኮን-እዝኒ ስልኪ
  • ግሊፊኮን ግሊፊኮን-ስልኪ-ኣልት
  • ግሊፊኮን ግሊፊኮን-ግምቢ
  • ግሊፊኮን ግሊፊኮን-ስታቲስቲክስ
  • ግሊፊኮን ግሊፊኮን-sd-ቪድዮ
  • ግሊፊኮን ግሊፊኮን-hd-ቪድዮ
  • ግሊፊኮን ግሊፊኮን-ንኡስ ኣርእስታት
  • ግሊፊኮን ግሊፊኮን-ድምጺ-ስቴሪዮ
  • ግሊፊኮን ግሊፊኮን-ድምጺ-ዶልቢ
  • ግሊፊኮን ግሊፊኮን-ድምጺ-5-1
  • ግሊፊኮን ግሊፊኮን-ድምጺ-6-1
  • ግሊፊኮን ግሊፊኮን-ድምጺ-7-1
  • glyphicon glyphicon-መሰል ቅዳሕ-ምልክት
  • ግሊፊኮን ግሊፊኮን-ምዝገባ-ምልክት
  • ግሊፊኮን ግሊፊኮን-ደበና-ምውራድ
  • ግሊፊኮን ግሊፊኮን-ደበና-ምጽዓን።
  • ግሊፊኮን ግሊፊኮን-ገረብ-ኮኒፈር
  • ግሊፊኮን ግሊፊኮን-ገረብ-ቆጽሊ ዝወድቕ
  • ግሊፊኮን ግሊፊኮን-ሲዲ
  • ግሊፊኮን ግሊፊኮን-ምዕቃብ-ፋይል
  • ግሊፊኮን ግሊፊኮን-ክፉት-ፋይል
  • ግሊፊኮን ግሊፊኮን-ደረጃ ንላዕሊ
  • ግሊፊኮን ግሊፊኮን-ቅዳሕ
  • ግሊፊኮን ግሊፊኮን-ልስሉስ መግቢ
  • ግሊፊኮን ግሊፊኮን-ኣለርት
  • ግሊፊኮን ግሊፊኮን-መመዓራረዪ
  • ግሊፊኮን ግሊፊኮን-ንጉስ
  • ግሊፊኮን ግሊፊኮን-ንግስቲ
  • ግሊፊኮን ግሊፊኮን-ፓውን
  • ግሊፊኮን ግሊፊኮን-ጳጳስ
  • ግሊፊኮን ግሊፊኮን-ፈረሰኛ
  • ግሊፊኮን ግሊፊኮን-ህጻን-ቀመር
  • ግሊፊኮን ግሊፊኮን-ቴንዳ
  • ግሊፊኮን ግሊፊኮን-ጸሊም ሰሌዳ
  • ግሊፊኮን ግሊፊኮን-ዓራት
  • ግሊፊኮን ግሊፊኮን-ኣፕል
  • ግሊፊኮን ግሊፊኮን-ምድምሳስ
  • ግሊፊኮን ግሊፊኮን-ሰዓት ሑጻ
  • ግሊፊኮን ግሊፊኮን-ላምባ
  • ግሊፊኮን ግሊፊኮን-ተደጋጋሚ
  • ግሊፊኮን ግሊፊኮን-ሓሰማ-ባንክ
  • ግሊፊኮን ግሊፊኮን-መቑረጺ
  • ግሊፊኮን ግሊፊኮን-ቢትኮይን
  • ግሊፊኮን ግሊፊኮን-btc
  • ግሊፊኮን ግሊፊኮን-xbt
  • ግሊፊኮን ግሊፊኮን-የን
  • ግሊፊኮን ግሊፊኮን-jpy
  • ግሊፊኮን ግሊፊኮን-ሩብል
  • ግሊፊኮን ግሊፊኮን-ምሕጸብ
  • ግሊፊኮን ግሊፊኮን-ስኬል
  • ግሊፊኮን ግሊፊኮን-በረድ-ሎሊ
  • ግሊፊኮን ግሊፊኮን-በረድ-ሎሊ-ዝጥዕም
  • ግሊፊኮን ግሊፊኮን-ትምህርቲ
  • ግሊፊኮን ግሊፊኮን-ኣማራጺ-ኣግማድ
  • ግሊፊኮን ግሊፊኮን-ኣማራጺ-ቀጥታዊ
  • ግሊፊኮን ግሊፊኮን-ሜኑ-ሃምበርገር
  • ግሊፊኮን ግሊፊኮን-ሞዳል-መስኮት።
  • ግሊፊኮን ግሊፊኮን-ዘይቲ
  • ግሊፊኮን ግሊፊኮን-እኽሊ
  • ግሊፊኮን ግሊፊኮን-መነጽር ጸሓይ
  • ግሊፊኮን ግሊፊኮን-ጽሑፍ-ዓቐን
  • ግሊፊኮን ግሊፊኮን-ጽሑፍ-ሕብሪ
  • ግሊፊኮን ግሊፊኮን-ጽሑፍ-ድሕረ ባይታ
  • ግሊፊኮን ግሊፊኮን-ነገር-ኣሰላልፋ-ላዕሊ
  • ግሊፊኮን ግሊፊኮን-ነገር-ኣሰላልፋ-ታሕቲ
  • ግሊፊኮን ግሊፊኮን-ነገር-ኣሰላልፋ-ኣግማድ
  • ግሊፊኮን ግሊፊኮን-ነገር-ኣሰላልፋ-ጸጋም
  • ግሊፊኮን ግሊፊኮን-ነገር-ኣሰላልፋ-ቀጥታዊ
  • ግሊፊኮን ግሊፊኮን-ነገር-ኣሰላልፋ-የማን
  • ግሊፊኮን ግሊፊኮን-ስሉስ ኩርናዕ-የማን
  • ግሊፊኮን ግሊፊኮን-ስሉስ ኩርናዕ-ጸጋም
  • ግሊፊኮን ግሊፊኮን-ስሉስ ኩርናዕ-ታሕተዋይ ክፋል
  • ግሊፊኮን ግሊፊኮን-ስሉስ ኩርናዕ-ላዕለዋይ ክፋል
  • ግሊፊኮን ግሊፊኮን-ኮንሶል
  • ግሊፊኮን ግሊፊኮን-ልዕለ-ጽሑፍ
  • ግሊፊኮን ግሊፊኮን-ትሕተ-ጽሑፍ
  • ግሊፊኮን ግሊፊኮን-ሜኑ-ጸጋም
  • ግሊፊኮን ግሊፊኮን-ሜኑ-የማን
  • ግሊፊኮን ግሊፊኮን-ሜኑ-ንታሕቲ
  • ግሊፊኮን ግሊፊኮን-ሜኑ-ኣፕ

ከመይ ጌርና ንጥቀመሉ

ንኣፈጻጽማ ምኽንያት ኩሎም ምልክታት መሰረታዊ ክፍልን ውልቃዊ ምልክት ክፍልን የድልዮም። ንኽትጥቀመሉ፡ ነዚ ዝስዕብ ኮድ ዳርጋ ኣብ ዝኾነ ቦታ ኣቐምጦ። ኣብ መንጎ እቲ ምልክትን ጽሑፍን ንግቡእ ምዕሻግ ቦታ ምግዳፍካ ኣረጋግጽ።

ምስ ካልኦት ባእታታት ኣይትሕወሱ

ናይ ምልክት ክፍልታት ብቐጥታ ምስ ካልኦት ባእታታት ክውሃሃዱ ኣይክእሉን እዮም። ምስ ካልኦት ክፍልታት ኣብ ሓደ ባእታ ክጥቀሙ የብሎምን። ኣብ ክንድኡስ፡ ሓደ nested ወስኸሉን <span>ነቶም ናይ ምልክት ክፍልታት ኣብቲ <span>.

ኣብ ባዶ ባእታታት ጥራይ ንኽትጥቀመሉ

ናይ ምልክት ክፍልታት ኣብ ትሕዝቶ ጽሑፍ ዘይሓዙን ውላድ ባእታታት ዘይብሎምን ባእታታት ጥራይ ክጥቀሙ ይግባእ።

ናይ ምልክት ቅርጺ ፊደል ቦታ ምቕያር

ቡትስትራፕ ምልክት ቅርጺ ፋይላት ኣብቲ ../fonts/ማህደር ክህልዉ እዮም ዝብል ግምት ኣለዎ፣ ብተዛማዲ ምስቶም ዝተጠርነፉ CSS ፋይላት። ነቶም ናይ ቅርጺ ፋይላት ምግዓዝ ወይ ምቕያር ማለት ነቲ CSS ብሓደ ካብ ሰለስተ መንገድታት ምዕራፍ ማለት እዩ፤

  • ኣብቲ ምንጪ ውሑድ ፋይላት @icon-font-pathዘሎን/ወይ ተለዋዋጢ ረቛሒታት ቀይር ።@icon-font-name
  • ብ Less compiler ዝቐረበ ኣንጻራዊ URLs ኣማራጺ ተጠቐም ።
  • url()ኣብቲ ዝተጠርነፈ CSS ዘለዉ መንገድታት ምቕያር ።

ንፍሉይ ናይ ምዕባለ ኣወዳድባኻ ዝበለጸ ዝሰማማዕ ዝኾነ ኣማራጺ ተጠቐም።

ተበጻሕቲ ዝኾኑ ምልክታት

ዘመናዊ ስሪት ሓገዝቲ ቴክኖሎጂታት ብሲኤስኤስ ዝተፈጥረ ትሕዝቶ፡ ከምኡ’ውን ፍሉያት ፊደላት ዩኒኮድ ከበስሩ እዮም። ኣብ ስክሪን ሪደርስ ዘይተደልየን ዘደናግርን ውጽኢት ንኸይፍጠር (ብፍላይ ምልክታት ንመጋየጺ ጥራይ ኣብ ዝጥቀሙሉ እዋን)፡ በቲ aria-hidden="true"ባህሪ ንሕብኦም።

ትርጉም ንምትሕልላፍ ምልክት ትጥቀም እንተኾንካ (ከም መጋየጺ ባእታ ጥራይ ዘይኮነስ)፡ እዚ ትርጉም እዚ ናብ ሓገዝቲ ቴክኖሎጂታት እውን ከም ዝመሓላለፍ ኣረጋግጽ - ንኣብነት፡ ተወሳኺ ትሕዝቶ ኣካትት፡ ብዓይኒ ምስቲ .sr-onlyክፍሊ ዝተሓብአ።

ካልእ ጽሑፍ ዘይብሉ ቁጽጽር ትፈጥር እንተኾንካ (ከም <button>ምልክት ጥራይ ዝሓዘ)፡ ኩሉ ግዜ ዕላማ ናይቲ ቁጽጽር ንምልላይ ኣማራጺ ትሕዝቶ ክትህብ ኣለካ፡ ምእንቲ ንተጠቀምቲ ሓጋዚ ቴክኖሎጂታት ትርጉም ክህልዎ። aria-labelኣብ ከምዚ ኩነታት ፡ ኣብቲ ቁጽጽር ባዕሉ ሓደ ባህሪ ክትውስኽ ትኽእል ኢኻ ።

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

ኣብነታት

ኣብ መጠወቒታት፣ ንመሳርሒታት ዝኸውን ጉጅለታት መጠወቒታት፣ ምድህሳስ፣ ወይ ቅድሚኡ ዝተሰነየ ቅጥዒ ምእታው ተጠቐመሎም።

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

ኣብ ሓደ መጠንቀቕታ ናይ ጌጋ መልእኽቲ ምዃኑ ንምትሕልላፍ ዝጥቀመሉ ምልክት፣ ምስ ተወሳኺ .sr-onlyጽሑፍ ነዚ ምልክት ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት ንምትሕልላፍ።

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

ድሮፕዳውንድስ

ዝርዝር መላግቦታት ንምርኣይ ዝቕየር፣ ዓውደ-ጽሑፋዊ ዝርዝር። ምስቲ ንቑልቁል ዝወርድ ተወሰኽቲ ጃቫስክሪፕት መስተጋብራዊ ተገይሩ ።

ናይቲ ንቑልቁል ዝወርድ መበገስን ነቲ ንቑልቁል ዝወርድ ዝርዝርን ኣብ ውሽጢ .dropdown፣ ወይ ካልእ ን ዝእውጅ ባእታ ጠቕልሎ position: relative;። ድሕሪኡ ናይቲ ዝርዝር ኤችቲኤምኤል ንውስኸሉ።

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

.dropupንቑልቁል ዝወርድ ምልክታታት ናብቲ ወላዲ ብምውሳኽ ንላዕሊ (ኣብ ክንዲ ንታሕቲ) ንምስፋሕ ክቕየሩ ይኽእሉ ።

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ብነባሪ መልክዑ፡ ሓደ ንቑልቁል ዝወርድ ዝርዝር ብኣውቶማቲክ ካብ ላዕሊን ብጸጋማይ ሸነኽ ወላዲኡን 100% ይቕመጥ። .dropdown-menu-rightናብ a ወስኹ ናብ .dropdown-menuየማን ነቲ ንቑልቁል ዝወርድ ዝርዝር ኣሰላልፍዎ።

ተወሳኺ ኣቀማምጣ ከድልዮ ይኽእል እዩ።

ድሮፕዳውንድ ብኣውቶማቲክ ብመንገዲ CSS ኣብ ውሽጢ ንቡር ዋሕዚ ናይቲ ሰነድ ይቕመጡ። እዚ ማለት ንቑልቁል ዝወርድ ነገራት ብገለ overflowባህርያት ዘለዎም ወለዲ ክቑረጹ ወይ ካብ ደረት ናይቲ ቪውፖርት ወጻኢ ክረኣዩ ይኽእሉ። ነዞም ጉዳያት ከም ዝለዓሉ ባዕልኻ ፍታሕ።

ዘይተጠቕመ .pull-rightኣሰላልፋ

ካብ v3.1.0 ጀሚርና .pull-rightኣብ ንቑልቁል ዝወርድ ምልክታታት ኣቋሪጽናዮ ኣለና። ንሓደ ዝርዝር ብየማናይ ምልክት ንምስምማዕ፡ ን ተጠቐም .dropdown-menu-right። ኣብ navbar ብየማን ዝተሰለፉ nav ክፍልታት ብኣውቶማቲክ ነቲ ምልክት ንምስላፍ ናይዚ ክፍሊ mixin ስሪት ይጥቀሙ። ንምግዳፍ ድማ .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

ኣብ ዝኾነ ንቑልቁል ዝወርድ ዝርዝር ንክፋላት ተግባራት ስያመ ንምሃብ ርእሲ ምውሳኽ።

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

ኣብ ንቑልቁል ዝወርድ ዝርዝር ንዝተፈላለዩ ተኸታተልቲ መላግቦታት መከፋፈልቲ ምውሳኽ።

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

ነቲ ሊንክ ንምስንኻል ኣብቲ ንቑልቁል ዝወርድ .disabledናብ a ወስኹሉ ።<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

ናይ መጠወቒ ጉጅለታት

ተኸታታሊ መጠወቒታት ብሓባር ኣብ ሓደ መስመር ምስቲ ጉጅለ መጠወቒታት ኣጥርዩ። ኣብ ኣማራጺ ጃቫስክሪፕት ሬድዮን ምልክት ሳጹን ቅዲ ባህሪ ብመጠወቒታትና ፕላግ-ኢን ወስኹ ።

Tooltips & popovers ኣብ ናይ መጠወቒ ጉጅለታት ፍሉይ ቅጥዒ የድልዮም

ኣብ ውሽጢ a ዝርከቡ ባእታታት መሳርሒታት ወይ ፖፖቨርስ ክትጥቀም ከለኻ ፡ ዘይተደልየ ጎናዊ ሳዕቤናት (ከም እቲ ባእታ እናሰፍሐን/ወይ ድማ እቲ መሳርሒ ወይ ፖፖቨር ክጅምር ከሎ ክቡብ ኩርናዓቱ ምጥፋእን) ንምውጋድ ዝሕግዝ .btn-groupኣማራጺ ክትገልጽ ክትግደድ ኢኻ ።container: 'body'

ቅኑዕ roleምርግጋጽን ምልክት ምሃብን።

ሓገዝቲ ቴክኖሎጂታት - ከም ስክሪን ሪደርስ - ተኸታታሊ መጠወቒታት ከም ዝተጠርነፉ ንኸመሓላልፉ፡ ግቡእ roleባህሪ ክቐርብ ኣለዎ። ንጉጅለታት መጠወቒ፡ እዚ ምኾነ role="group"፡ መሳርሒታት ባር ድማ role="toolbar".

ሓደ ፍሉይ ዝኾነ ሓደ ቁጽጽር ጥራይ ዝሓዙ ጉጅለታት እዮም (ንኣብነት እቶም ዝተመኽኑ መጠወቒ ጉጅለታት ምስ <button>ባእታታት) ወይ ንቑልቁል ዝወርድ።

roleብተወሳኺ፡ መብዛሕትኦም ሓገዝቲ ቴክኖሎጂታት ብኻልእ መገዲ፡ ዋላ’ኳ ቅኑዕ ባህሪ እንተሃለዎም፡ ስለዘይእውጅዎም፡ ጉጅለታትን መሳርሒታትን ግሉጽ ስያመ ክወሃቦም ይግባእ ። ኣብዚ ዝተዋህበ ኣብነታት፡ ንጥቀም aria-label, ግን ከም ኣማራጺታት aria-labelledbyእውን ክጥቀሙ ይኽእሉ እዮም።

መሰረታዊ ኣብነት

ተኸታታሊ መጠወቒታት ብ .btnin ጠቕልል .btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

ናይ መጠወቒ መሳርሒ ባር

ስብስባት ናይ <div class="btn-group">ናብ ሓደ <div class="btn-toolbar">ንዝያዳ ዝተሓላለኹ ባእታታት ምውህሃድ።

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

ሳይዚንግ ምግባር

ኣብ ክንዲ ኣብ ነፍሲ ወከፍ መጠወቒ ኣብ ሓደ ጉጅለ ናይ መጠወቒ ዓቐን ክፍልታት ምትግባር፡ ኣብ ነፍሲ ወከፍ ጥራይ ወስኸሉ .btn-group-*.btn-groupንብዙሓት ጉጅለታት ክትሰፍር ከለኻ ሓዊስካ።




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

ምድቃል

ንቑልቁል ዝወርድ ምልክታታት ብተኸታታሊ መጠወቒታት ክሕወሱ ምስ እትደሊ ኣብ .btn-groupውሽጢ ካልእ ኣቐምጦ ።.btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

ቀጥታዊ ለውጢ

ሓደ ስብስብ መጠወቒታት ብኣግማድ ዘይኮነስ ብቐጥታ ተደራሪቡ ከም ዝረአ ግበር። ኣብዚ ናይ ምፍንጫል መጠወቒ ንቑልቁል ዝወርድ ኣይድገፍን እዩ።

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

ምኽኑይ ዝኾኑ ናይ መጠወቒ ጉጅለታት

ሓደ ጉጅለ መጠወቒታት ንብምሉኡ ስፍሓት ወላዲኡ ዝሽፍን ብማዕረ ዓቐን ክዝርጋሕ ግበሮ። ከምኡ ውን ኣብ ውሽጢ ጉጅለ መጠወቒታት ምስ ዝወድቁ መጠወቒታት ይሰርሕ።

ኣተሓሕዛ ዶባት

ብሰንኪ እቲ ንመጠወቒታት ንምምኽናይ ዝጥቀመሉ ፍሉይ HTMLን CSSን (ማለት display: table-cell)፡ ኣብ መንጎኦም ዘሎ ዶባት ብዕጽፊ ይውስኽ። ኣብ ስሩዓት ናይ መጠወቒ ጉጅለታት፡ ኣብ margin-left: -1pxክንዲ ምእላይ ንዶባት ንምድማር ይጥቀመሉ። ይኹን marginእምበር፡ ምስ display: table-cell. ከም ውጽኢቱ ድማ፡ ከከምቲ ናብ ቡትስትራፕ ዝገበርካዮ ምምዕርራይ፡ ነቶም ዶባት ከተውጽኦም ወይ ዳግማይ ሕብሪ ክትህቦም ትደሊ ትኸውን።

IE8ን ዶባትን ምዃኑ’ዩ።

ኢንተርነት ኤክስፕሎረር 8 ኣብ ሓደ ዝተመኽነየ ናይ መጠወቒ ጉጅለ ኣብ ዝርከቡ መጠወቒታት ዶባት ኣይህብን እዩ፡ ንሱ ኣብ <a>ይኹን <button>ባእታታት። ካብዚ ንምእላይ ነፍሲ ወከፍ መጠወቒ ብኻልእ ጠቕልሎ .btn-group.

ንዝያዳ ሓበሬታ #12476 ርአ ።

ምስ <a>ባእታታት

በቃ ተኸታታሊ .btns ኣብ .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

ከም መጠወቒታት ዝሰርሑ መላግቦታት

እቶም <a>ባእታታት ከም መጠወቒታት ንኽሰርሑ ዝጥቀሙ እንተኾይኖም – ኣብ ውሽጢ ገጽ ንዘሎ ተግባር ዘበግሱ፡ ኣብ ክንዲ ናብ ካልእ ሰነድ ወይ ክፍሊ ኣብ ውሽጢ እቲ ህሉው ገጽ ምኻድ – ንዕኦም’ውን ዝምጥን role="button".

ምስ <button>ባእታታት

<button>ምኽኑይ ዝኾኑ ናይ መጠወቒ ጉጅለታት ምስ ባእታታት ንምጥቃም ፡ ነፍሲ ወከፍ መጠወቒ ኣብ ሓደ ናይ መጠወቒ ጉጅለ ክትጠቕልሎ ኣለካ ። መብዛሕትኦም ዳህሰስቲ ንባእታታት ንምምኽናይ CSSና ብግቡእ ኣይጥቀሙን እዮም <button>፡ ግን ንመጠወቒታት ንቑልቁል ዝወርድ ስለ እንድግፍ፡ ነዚ ክንፈትሖ ንኽእል ኢና።

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

መጠወቒ ንቑልቁል ዝወርድ

ዝኾነ መጠወቒ ተጠቒምካ ንሓደ ንቑልቁል ዝወርድ ዝርዝር ኣብ ውሽጢ a ብምቕማጥን .btn-groupግቡእ ምልክት ምልክት ብምሃብን ተጠቐም።

ጽግዕተኛነት ፕላግ-ኢን።

ንቑልቁል ዝወርድ መጠወቒታት እቲ ንቑልቁል ዝወርድ ፕላግ-ኢን ኣብ ስሪት ቡትስትራፕካ ክካተት የድልዮ ።

ንጽል መጠወቒ ንቑልቁል ዝወርድ

ንሓደ መጠወቒ ናብ ንቑልቁል ዝወርድ መቐያየሪ ምስ ገለ መሰረታዊ ለውጢ ምልክት ምቕያር።

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ስፕሊት መጠወቒ ንቑልቁል ዝወርድ

ብተመሳሳሊ ተመሳሳሊ ናይ ምልክት ለውጢ ዘለዎም ናይ ዝተመቕሉ መጠወቒታት ንቑልቁል ዝወርድ ፍጠር፣ ብፍሉይ መጠወቒ ጥራይ።

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

ሳይዚንግ ምግባር

ንቑልቁል ዝወርድ መጠወቒታት ምስ ኩሉ ዓቐን ዘለዎም መጠወቒታት ይሰርሑ።

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ምውዳቕ ፍልልይ

.dropupኣብ ልዕሊ ባእታታት ዝርከቡ ንቑልቁል ዝወርድ ምልክታታት ናብቲ ወላዲ ብምውሳኽ ኣበግስ ።

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

እታዎታት ጉጅለታት

ቅድሚ፡ ድሕሪ ወይ ኣብ ክልቲኡ ወገን ዝኾነ ጽሑፍ ዝተመርኮሰ ጽሑፍ ወይ መጠወቒታት ብምውሳኽ ንመቆጻጸሪታት ቅጥዒ ኣናውሕ <input>.input-groupምስ ሓደ .input-group-addonወይ .input-group-btnንሓደ ንጽል ባእታታት ንቕድሚት ንምንቅስቓስ ወይ ንምውሳኽ ተጠቐም .form-control

ጽሑፋዊ <input>ስ ጥራይ

<select>ኣብዚ ባእታታት ኣብ ዌብኪት ዳህሰስቲ ምሉእ ብምሉእ ቅዲ ክግበሩ ስለዘይክእሉ ካብ ምጥቃም ተቖጠቡ ።

<textarea>ኣብዚ ባእታታት ካብ ምጥቃም ተቖጠብ ምኽንያቱ rowsኣብ ገለ ገለ ኣጋጣሚታት ባህርያቶም ስለዘይክበር።

Tooltips & popovers ኣብ ናይ ምእታው ጉጅለታት ፍሉይ ቅጥዒ የድልዮም

ኣብ ውሽጢ ሓደ ኣብ ዝርከቡ ባእታታት መሳርሒታት ወይ ፖፖቨርስ ክትጥቀም ከለኻ ፡ ዘይተደልየ ጎናዊ ሳዕቤናት (ከም እቲ ባእታ እናሰፍሐን/ወይ ድማ እቲ መሳርሒ ወይ ፖፖቨር ክጅምር ከሎ ክቡብ ኩርናዓቱ ምጥፋእን) ንምውጋድ ዝሕግዝ .input-groupኣማራጺ ክትገልጽ ክትግደድ ኢኻ ።container: 'body'

ምስ ካልኦት ባእታታት ኣይትሕወሱ

ናይ ቅጥዒ ጉጅለታት ወይ ናይ ሽቦ ዓምዲ ክፍልታት ብቐጥታ ምስ ናይ ምእታው ጉጅለታት ኣይትሕወሱ። ኣብ ክንድኡስ፡ ነቲ ናይ ምእታው ጉጅለ ኣብ ውሽጢ ናይቲ ቅጥዒ ጉጅለ ወይ ምስ ሽቦ ዝተኣሳሰር ባእታ ሰፈር።

ኩሉ ግዜ ስያመታት ወስኹ

ንነፍሲ ወከፍ እታዎት ምልክት እንተዘይኣእቲኻዮ፡ ኣንበብቲ ስክሪን ኣብ ቅጥዕታትካ ጸገም ክህልዎም እዩ። ነዞም ናይ እታዎታት ጉጅለታት ዝኾነ ይኹን ተወሳኺ ምልክት ወይ ተግባር ናብ ሓገዝቲ ቴክኖሎጂታት ከምዝመሓላለፍ ምርግጋፅ።

እቲ ልክዕ ክጥቀመሉ ዘለዎ ሜላ (ዝርኣዩ <label>ባእታታት፣ ንክላስ <label>ተጠቒምካ ዝተሓብኡ ባእታታት .sr-only፣ ወይ ኣጠቓቕማ ናይቲ aria-label, aria-labelledby, aria-describedby, titleወይ placeholderባህሪ) ከምኡ’ውን እንታይ ተወሳኺ ሓበሬታ ምትሕልላፍ ከምዘድልዮ ከከምቲ ትተግብሮ ዘለኻ ልክዕ ዓይነት መተሓላለፊ ዊጀት ክፈላለ እዩ። ኣብዚ ክፍሊ ዘለዉ ኣብነታት ውሑዳት ሓሳባት ዝህቡ፣ ንጉዳይ ዝምልከት ኣገባባት ይህቡ።

መሰረታዊ ኣብነት

ኣብ ክልቲኡ ወገን ናይ ሓደ ምእታው ሓደ ተወሳኺ ወይ መጠወቒ ኣቐምጥ። ሓደ ኣብ ክልቲኡ ወገን ናይ ሓደ እታው እውን ከተቐምጥ ትኽእል ኢኻ።

ብሓደ ወገን ብዙሓት ተወሳኺ ( .input-group-addonወይ ) ኣይንድግፍን ኢና ።.input-group-btn

ኣብ ሓደ ናይ ምእታው ጉጅለ ብዙሓት ቅጥዒ-ቁጽጽር ኣይንድግፍን ኢና።

@

@ኣብነት.ኮም

$ .00 ዝብል እዩ።

https://ኣብነት.ኮም/ተጠቀምቲ/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

ሳይዚንግ ምግባር

ነቶም ኣንጻራዊ ናይ ቅጥዒ ዓቐን ክፍልታት ናብ .input-groupባዕሉ ወስኹሎም እሞ ኣብ ውሽጢ ዘለዉ ትሕዝቶታት ብኣውቶማቲክ ዓቐን ክቕይሩ እዮም-ኣብ ነፍሲ ወከፍ ባእታ ናይ ቅጥዒ ቁጽጽር ዓቐን ክፍልታት ምድጋም ኣየድልን።

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

ሳጹናት ምልክትን ናይ ሬድዮ ተወሳኺን

ዝኾነ ናይ ምልክት ሳጹን ወይ ናይ ሬድዮ ኣማራጺ ኣብ ክንዲ ጽሑፍ ኣብ ውሽጢ ናይ ሓደ ናይ ምእታው ጉጅለ ኣድዶን ኣቐምጦ።

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

መጠወቒ ተወሳኺ

ኣብ ጉጅለታት ምእታው ዝርከቡ መጠወቒታት ቁሩብ ዝተፈላለዩ ኮይኖም ሓደ ተወሳኺ ደረጃ ምድቃል የድልዮም። ኣብ ክንዲ ፡ ነቶም መጠወቒታት ንምጥቕላል .input-group-addonክትጥቀመሉ ከድልየካ እዩ ። .input-group-btnእዚ ብሰንኪ ነባሪ ቅዲታት መርበብ ሓበሬታ ክግለጽ ዘይክእል እዩ ዘድሊ።

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ንቑልቁል ዝወርድ መጠወቒታት

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ዝተኸፋፈሉ መጠወቒታት

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

ብዙሓት መጠወቒታት

ኣብ ነፍሲ ወከፍ ወገን ሓደ ተወሳኺ ጥራይ ክህልወካ ዝኽእል እኳ እንተኾነ፡ ኣብ ውሽጢ ሓደ ሓደ ግን ብዙሓት መጠወቒታት ክህልዉኻ ይኽእሉ እዮም .input-group-btn

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

ናቭስ

ኣብ Bootstrap ዝርከቡ Navs ካብ base class ጀሚሮም shared markup ኣለዎም .nav፣ ከምኡ ውን shared states ኣለዎም። ኣብ መንጎ ነፍሲ ወከፍ ቅዲ ንምቕያር ናይ መቐየሪ ክፍልታት ምቕያር።

ንtab panels navs ምጥቃም ጃቫስክሪፕት tabs plugin የድልዮ

ንጣብያታት ዘለዎም ከባቢታት ዘለዎም ትቦታት፡ ትቦታት ጃቫስክሪፕት ፕላግ-ኢን ክትጥቀም ኣለካ ። roleእቲ ምልክት ተወሳኺን ARIA ባህርያትን እውን ክሓትት እዩ - ንተወሳኺ ዝርዝር ሓበሬታ ናይቲ ፕላግ-ኢን ኣብነት ምልክት ርአ።

ከም ናቪጌሽን ዝጥቀሙ navs ተበጻሕቲ ምግባር

ናይ ምድህሳስ ባር ንምሃብ navs ትጥቀም እንተኾንካ role="navigation"፡ ኣብቲ ዝያዳ ስነ-መጐታዊ ወላዲ መትሓዚ ናይቲ ምውሳኽካ ኣረጋግጽ፣ ወይ ድማ ኣብ ዙርያ ምሉእ ምድህሳስ <ul>ሓደ ባእታ ምጥቕላል ። እዚ ብተሓጋገዝቲ ቴክኖሎጂታት ከም ጭቡጥ ዝርዝር ከይግለጽ ስለ ዝኽልክሎ <nav>፡ ነቲ ተራ ኣብቲ ንባዕሉ ኣይትውሰኾ።<ul>

ኣስተውዕል እቲ ክፍሊ መሰረታዊ ክፍሊ .nav-tabsይሓትት ።.nav

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

ንሱ ተመሳሳሊ ኤችቲኤምኤል ውሰድ .nav-pills፡ ኣብ ክንድኡ ግን ተጠቐም፤

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

ከኒናታት እውን ብቐጥታ ዝድምር እዩ። በቃ ወስኹሉ .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

ብቐሊሉ ትቦታት ወይ ከኒናታት ማዕረ ስፍሓት ወላዲኦም ኣብ ልዕሊ 768px ዝሰፍሐ ስክሪናት ምስ .nav-justified. ኣብ ንኣሽቱ ስክሪናት፡ እቶም nav ሊንክታት ተደራሪቦም ይርከቡ።

ምኽኑይ ዝኾኑ navbar nav መላግቦታት ኣብዚ እዋን እዚ ኣይድገፉን እዮም።

ሳፋሪን ምላሽ ዝህብን ምኽኑይ navs

ካብ v9.1.2 ጀሚሩ፡ ሳፋሪ ንዓቐን መርበብ ሓበሬታኻ ብኣግማድ ምቕያር ኣብቲ ምኽኑይ nav ናይ ምቕራብ ጌጋታት ዘስዕብ ስሕተት ዘርኢ ኮይኑ፡ ምስ ምሕዳስ ዝጽረግ እዩ። እዚ ስሕተት ኣብቲ ዝተመኽነየ nav ኣብነት ’ ውን ተገሊጹ ኣሎ ።

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

ንዝኾነ nav ክፍሊ (tabs ወይ ከኒናታት) ፡ ንሓምላይ መላግቦታትን ዝኾነ hover effects.disabled ን ወስኸሉ ።

ናይ ምትእስሳር ተግባር ኣይተጸልወን

እዚ ክፍሊ እዚ ንመልክዕ 's ጥራይ እዩ ዝቕይሮ <a>እምበር ንተግባራውነቱ ኣይኮነን። ኣብዚ ንዘለዉ መላግቦታት ንምዕጻው ብሕታዊ ጃቫስክሪፕት ተጠቐም።

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

ቁሩብ ተወሳኺ ኤችቲኤምኤል ዘለዎም ንቑልቁል ዝወርድ ምልክታታትን ንቑልቁል ዝወርድ ጃቫስክሪፕት ፕላግ-ኢንን ወስኹ ።

ንቑልቁል ዝወርድ ትቦታት

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ከኒና ምስ ንጣብ ንጣብ

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ናቭባር

ናቭባር ንመተግበሪኻ ወይ መርበብ ሓበሬታኻ ከም ርእሲ ምድህሳስ ዘገልግሉ ምላሽ ዝህቡ ሜታ ኣካላት እዮም። ኣብ ተንቀሳቓሲ ርእይቶታት ተደፊኦም ይጅምሩ (እሞ ድማ ክቕየሩ ይኽእሉ) እሞ እቲ ዝርከብ ስፍሓት ቪውፖርት እናወሰኸ ምስ ከደ ኣግማድ ይኾኑ።

ምኽኑይ ዝኾኑ navbar nav መላግቦታት ኣብዚ እዋን እዚ ኣይድገፉን እዮም።

ምሉእ ትሕዝቶ ዘለዎ

ቡትስትራፕ ኣብ ናቭባርካ ዘሎ ትሕዝቶ ክንደይ ቦታ ከም ዘድልዮ ስለዘይፈልጥ፡ ትሕዝቶ ኣብ ካልኣይ መስርዕ ምጥቕላል ዝምልከት ጸገማት ከጋጥመካ ይኽእል እዩ። ነዚ ንምፍታሕ ድማ፤

  1. መጠን ወይ ስፍሓት ናይ ናቭባር ኣቑሑት ምጉዳል።
  2. ምላሽ ዝህቡ ናይ ዩቲሊቲ ክፍልታት ብምጥቃም ኣብ ዝተወሰኑ ናይ ስክሪን ዓቐናት ዝተወሰኑ ናይ ናቭባር ነገራት ሕባእ ።
  3. ናቭባርካ ኣብ መንጎ ዝተዓጽወን ኣግማድን ሞድ ዝቕይረሉ ነጥቢ ቀይሮ። ነቲ ተለዋዋጢ ኣመዓራርዮ @grid-float-breakpointወይ ናይ ገዛእ ርእስኻ ናይ ሚድያ ሕቶ ወስኸሉ።

ጃቫስክሪፕት ፕላግ-ኢን የድልዮ

ጃቫስክሪፕት እንተተሰናኺሉን እቲ ቪውፖርት ጸቢብ እንተኾይኑን እቲ ናቭባር ዝፈርስ እንተኾይኑ፡ ነቲ ናቭባር ምግፋሕን ኣብ ውሽጢ እቲ ትሕዝቶ ምርኣይን ዘይከኣል ክኸውን እዩ .navbar-collapse

እቲ ምላሽ ዝህብ navbar እቲ collapse plugin ኣብ ናትካ ስሪት Bootstrap ክካተት ይጠልብ።

ነቲ ዝፈረሰ ሞባይል navbar breakpoint ምቕያር

እቲ navbar ናብቲ ቀጥታዊ ተንቀሳቓሲ ትርኢትኡ ዝፈርስ እቲ ቪውፖርት ካብ ዝጸበበ ምስ ዝኸውን @grid-float-breakpoint፣ እቲ ቪውፖርት እንተወሓደ @grid-float-breakpointብስፍሓት ምስ ዝኸውን ድማ ናብቲ ልኡም ዘይተንቀሳቓሲ ቪውኡ ይሰፍሕ። ነዚ ተለዋዋጢ ኣብቲ Less source ኣስተኻኽሎ፡ እቲ navbar መዓስ ከም ዝፈርስ/ክሰፍሕ ንምቁጽጻር። እቲ ነባሪ ዋጋ 768px(እቲ ዝነኣሰ "ንእሽቶ" ወይ "ጣብላ" ስክሪን) እ���።

navbars ተበጻሕቲ ምግባር

ሓደ ባእታ ምጥቃምካ ኣረጋግጽ <nav>ወይ ድማ፡ ከም a ዝኣመሰለ ዝያዳ ሓፈሻዊ ባእታ እንተተጠቒምካ፡ ኣብ ነፍሲ ወከፍ ናቭባር <div>a ወስኸሉ role="navigation"፡ ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት ከም ምልክት ዞባ ብግልጺ ከተለልዮ።

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

ነቲ ጽሑፍ ብሓደ ብምቕያር ነቲ ናይ navbar ምልክት ብናይ ገዛእ ርእስኻ ምስሊ ተክኦ <img>። እቲ .navbar-brandናይ ገዛእ ርእሱ ፓዲንግን ቁመትን ስለዘለዎ፡ ከከም ምስልኻ ገለ CSS ክትሽፍኖ ከድልየካ ይኽእል እዩ።

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

ትሕዝቶ ቅጥዒ ኣብ ውሽጢ .navbar-formንግቡእ ቀጥታዊ ኣሰላልፋን ዝተዓጽወ ባህርን ኣብ ጸበብቲ መዘናግዒታት ኣቐምጦ። ኣብ ውሽጢ ትሕዝቶ ናቭባር ኣበይ ከም ዝነብር ንምውሳን ናይ ኣሰላልፋ ኣማራጺታት ተጠቐም።

ከም ሓደ heads up, .navbar-formዝበዝሕ ኮዱ ምስ .form-inlinevia mixin ይካፈል። ገለ ቁጽጽር ቅጥዒ፡ ከም ናይ ምእታው ጉጅለታት፡ ኣብ ውሽጢ ናቭባር ብግቡእ ክረኣዩ ውሱናት ስፍሓት ክጠልቡ ይኽእሉ።

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

ናይ ሞባይል መሳርሒ መጠንቀቕታታት

ኣብ ውሽጢ ቀወምቲ ባእታታት ኣብ ተንቀሳቓሲ መሳርሒታት ቅጥዒ ቁጽጽር ምጥቃም ብዝምልከት ገለ መጠንቀቕታታት ኣለዉ። ንዝርዝር ሓበሬታ ኣብ መርበብ ሓበሬታና ናይ ደገፍ ሰነዳት ርአ

ኩሉ ግዜ ስያመታት ወስኹ

ንነፍሲ ወከፍ እታዎት ምልክት እንተዘይኣእቲኻዮ፡ ኣንበብቲ ስክሪን ኣብ ቅጥዕታትካ ጸገም ክህልዎም እዩ። .sr-onlyነዞም ኣብ ውሽጢ መስመር ዝርከቡ ቅጥዕታት፡ ነቲ ክፍሊ ተጠቒምካ ነቶም ስያመታት ክትሓብኦም ትኽእል ኢኻ ። ንሓገዝቲ ቴክኖሎጂታት ምልክት ንምሃብ ተወሳኺ ኣማራጺ ሜላታት ኣሎ፡ ከም aria-label, aria-labelledbyወይ titleባህሪ። ካብዚኦም ዝኾነ እንተዘይሃልዩ፡ ኣንበብቲ ስክሪን ነቲ placeholderባህሪ ክጥቀሙ ይኽእሉ እዮም፡ እንተሃልዮም፡ ግን placeholderከም መተካእታ ንኻልኦት ሜላታት ምልክት ምጥቃም ከምዘይምከር ኣስተውዕል።

ነቲ .navbar-btnክፍሊ <button>ኣብ a ዘይነብሩ ባእታታት <form>ወስኾም ኣብቲ navbar ብቐጥታ ማእከል ምግባር።

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

ንዓውዲ ዝምልከት ኣጠቓቕማ

ከምቲ መደበኛ መጠወቒ ክፍልታት , ኣብን ባእታታትን .navbar-btnክጥቀም ይኽእል ። ይኹን እምበር፡ ክልቲኦም ወይ እቶም መደበኛ ክፍልታት መጠወቒ ኣብ ውሽጢ ዝርከቡ ባእታታት ክጥቀሙ የብሎምን ።<a><input>.navbar-btn<a>.navbar-nav

ንሕብረ ቃላት ኣብ ሓደ ባእታ ብ .navbar-text፣ መብዛሕትኡ ግዜ ኣብ <p>መለለዪ ንግቡእ መሪሕነትን ሕብርን ጠቕልል።

<p class="navbar-text">Signed in as Mark Otto</p>

ኣብ ውሽጢ ስሩዕ ናይ ናቭባር ምድህሳስ ክፍሊ ዘይርከቡ መደበኛ መላግቦታት ዝጥቀሙ ሰባት፡ ነቲ .navbar-linkክፍሊ ተጠቐም ንናይ ነባሪን ተገላባጥን ናይ ናቭባር ኣማራጺታት ግቡእ ሕብርታት ንምውሳኽ።

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

ናይ nav መላግቦታት፣ ቅጥዕታት፣ መጠወቒታት ወይ ጽሑፍ ኣሰላልፍ፣ ነቲ .navbar-leftወይ .navbar-rightዩቲሊቲ ክፍልታት ተጠቒምካ። ክልቲኦም ክፍልታት ኣብቲ ዝተወሰነ ኣንፈት CSS ፍሎት ክውስኹ እዮም። ንኣብነት nav links ንምስምማዕ <ul>፡ ኣብቲ ዝምልከቶ utility class ተግባራዊ ብምግባር ኣብ ፍሉይ ኣቐምጦም።

እዞም ክፍልታት እዚኦም mixin-ed ስሪት ናይ .pull-leftand .pull-rightእዮም፣ ግን ንቐሊል ኣተሓሕዛ ናይ navbar ኣካላት ኣብ መላእ ዓቐናት መሳርሒታት ናብ ሚድያ ሕቶታት ስፍሓት ኣለዎም።

ብዙሓት ኣካላት ብየማን ምምዕርራይ

ኣብዚ እዋን እዚ ናቭባር ምስ ብዙሓት .navbar-rightክፍልታት ደረት ኣለዎም። .navbar-rightትሕዝቶ ብግቡእ ቦታ ንምሃብ ኣብቲ ናይ መወዳእታ ባእታ ኣሉታዊ ወሰን ንጥቀም ። ነቲ ክፍሊ ዝጥቀሙ ብዙሓት ባእታታት ክህልዉ ከለዉ፡ እዞም ወሰን ከምቲ ዝተሓሰበሉ ኣይሰርሑን እዮም።

ነዚ ዳግማይ ክንርእዮ ኢና፡ ነቲ ክፍሊ ኣብ v4 ዳግማይ ክንጽሕፎ ምስ እንኽእል።

.navbar-fixed-topሓደ .containerወይ .container-fluidናብ ማእከልን ፓድ ናቭባር ትሕዝቶን ወስኹን ኣካትቱን ።

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

ናይ ኣካላት መሸፈኒ የድሊ

እቲ ጽኑዕ ናቭባር ንኻልእ ትሕዝቶኻ ክድብሶ እዩ፣ paddingኣብ ላዕሊ ናይቲ <body>. ናይ ገዛእ ርእስኹም ክብርታት ፈትኑ ወይ ኣብ ታሕቲ ዘሎ ቁንጣሮ ጽሑፍና ተጠቐሙ። ምኽሪ፦ ብነባሪ መልክዑ፡ እቲ navbar 50px ቁመት ኣለዎ።

body { padding-top: 70px; }

ድሕሪ እቲ ቀንዲ Bootstrap CSS ነዚ ምሕዋስኩም ኣረጋግጹ ።

.navbar-fixed-bottomሓደ .containerወይ .container-fluidናብ ማእከልን ፓድ ናቭባር ትሕዝቶን ወስኹን ኣካትቱን ።

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

ናይ ኣካላት መሸፈኒ የድሊ

እቲ ጽኑዕ ናቭባር ንኻልእ ትሕዝቶኻ ክድብሶ እዩ፣ paddingኣብ ታሕቲ ናይቲ <body>. ናይ ገዛእ ርእስኹም ክብርታት ፈትኑ ወይ ኣብ ታሕቲ ዘሎ ቁንጣሮ ጽሑፍና ተጠቐሙ። ምኽሪ፦ ብነባሪ መልክዑ፡ እቲ navbar 50px ቁመት ኣለዎ።

body { padding-bottom: 70px; }

ድሕሪ እቲ ቀንዲ Bootstrap CSS ነዚ ምሕዋስኩም ኣረጋግጹ ።

ምሉእ ስፍሓት ዘለዎ ናቭባር ፍጠር እሞ ምስቲ ገጽ ዝሽክርከር ወይ ናብ ማእከል ብምውሳኽን .navbar-static-topብምሕዋስን ትሕዝቶ ናቭባር ፓድ ምግባርን።.container.container-fluid

ዘይከምቲ .navbar-fixed-*ክፍልታት፡ ኣብቲ body.

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

መልክዕ ናይቲ navbar ብምውሳኽ ኣዐርዮ .navbar-inverse

<nav class="navbar navbar-inverse">
  ...
</nav>

ፍርስራስ እንጀራ

ኣብ ውሽጢ ሓደ ናይ ምድህሳስ ስርዓተ-መሰረት ናይቲ ናይ ሕጂ ገጽ ኣቀማምጣ ኣመልክት።

መፍለዪታት ብኣውቶማቲክ ኣብ CSS :beforeብመንገዲን content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

ገጽ ምሃብ

ንመርበብ ሓበሬታኻ ወይ መተግበሪኻ ዝኸውን ናይ ገጽ መላግቦታት ምስቲ ብዙሕ ገጻት ዘለዎ ናይ ገጽ ገጽ ክፍሊ ኣቕርብ፣ ወይ ድማ እቲ ዝቐለለ ኣማራጺ ገጽ .

ነባሪ ገጽ ምግባር

ብ Rdio ዝተደፋፍአ ቀሊል ገጽ ምግባር፣ ንኣፕስን ውጽኢት ምድላይን ብሉጽ። እቲ ዓቢ ብሎክ ክትሓልፎ ኣጸጋሚ፡ ብቐሊሉ ዝዓቢ፡ ዓበይቲ ናይ ጠውቂ ቦታታት ዝህብ እዩ።

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

ነቲ ናይ ገጽ ጽሑፍ ምልክት ምሃብ

<nav>እቲ ናይ ገጽ ምውጻእ ክፍሊ ከም ሓደ ናይ ምድህሳስ ክፍሊ ንምልላይ ብኣንበብቲን ካልኦት ሓገዝቲ ቴክኖሎጂታትን ንምጽራይ ዝሕግዝ ባእታ ክጥቕለል ኣለዎ ። ብተወሳኺ፡ ሓደ ገጽ ድሮ ካብ ሓደ ንላዕሊ ከምዚ ዝኣመሰለ ናይ ምድህሳስ ክፍሊ ክህልዎ ተኽእሎ ስለዘሎ (ከም ኣብቲ ርእሲ ዘሎ ቀዳማይ ምድህሳስ፡ ወይ ናይ ጎድናዊ ምድህሳስ)፡ ንዕላማኡ ዘንጸባርቕ ገላጺ ምሃብ aria-labelይምከር <nav>። ንኣብነት፡ እቲ ናይ ገጽ ጽሑፍ ክፍሊ ኣብ መንጎ ሓደ ስብስብ ውጽኢት ምድላይ ንምንቅስቓስ እንተተጠቒምካሉ፡ ግቡእ ስያመ ክኸውን ይኽእል እዩ aria-label="Search results pages"

ስንኩላን ንጡፋትን ኩነታት

ሊንክታት ንዝተፈላለየ ኩነታት ዝምጥን እዩ። .disabledንዘይጥወቕ መላግቦታትን .activeናይ ሕጂ ገጽ ንምምልካትን ተጠቐም ።

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

ንጡፋት ወይ ዘይተዓጽዉ መልህቕ ብ ፡ ክትቅይሮም፡ ወይ <span>ድማ ኣብ ጉዳይ ናይቶም ዝሓለፉ/ዝቕጽሉ ፍላጻታት ነቲ መልህቕ ክትገድፎ፡ ንዝተሓሰቡ ቅዲታት እናዓቀብካ ናይ ጠውቂ ተግባር ንምእላይ ንመክር።

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

ሳይዚንግ ምግባር

ፋንሲ ዝዓበየ ድዩ ዝነኣሰ ገጽ? ምውሳኽ .pagination-lgወይ .pagination-smንተወሳኺ ዓቐናት።

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

ፔጀር

ቅልጡፍ ቅድሚትን ዝቕጽልን መላግቦታት ንቐሊል ናይ ገጽ ኣተገባብራታት ምስ ብርሃን ምልክትን ቅዲታትን። ንቐለልቲ መርበባት ሓበሬታ ከም ብሎግ ወይ መጽሔት ብሉጽ እዩ።

ነባሪ ኣብነት

ብነባሪ መልክዑ፡ እቲ ፔጀር ንመላግቦታት የማእከሎም።

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

ከም ኣማራጺ ድማ ነፍሲ ወከፍ መላግቦ ናብ ጎድኒ ከተመዓራርዮ ትኽእል ኢኻ፤

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ኣማራጺ ስንክልና ዘለዎ ኩነታት

.disabledፔጀር ሊንክታት እውን ካብቲ ገጽ ምግባር ዝመጽእ ሓፈሻዊ ዩቲሊቲ ክላስ ይጥቀሙ ።

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

ስያመታት

ኣብነት

ኣብነት ኣርእስቲ ሓድሽ

ኣብነት ኣርእስቲ ሓድሽ

ኣብነት ኣርእስቲ ሓድሽ

ኣብነት ኣርእስቲ ሓድሽ

ኣብነት ኣርእስቲ ሓድሽ
ኣብነት ኣርእስቲ ሓድሽ
<h3>Example heading <span class="label label-default">New</span></h3>

ዝርከቡ ፍልልያት

መልክዕ ናይ ሓደ ስያመ ንምቕያር ዝኾነ ካብዞም ኣብ ታሕቲ ዝተጠቕሱ ናይ መቐየሪ ክፍልታት ወስኹ።

ነባሪ ቀዳማይ ዓወት ሓበሬታ መጠንቀቕታ ሓደጋ
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

ቶናት ምልክታት ኣለዎም?

ኣብ ውሽጢ ሓደ ጸቢብ መትሓዚ ዓሰርተታት ናይ ውሽጢ መስመር ስያመታት ምስ ዝህልወካ ናይ ምቕራብ ጸገማት ክለዓል ይኽእል፣ ነፍሲ ወከፎም ናይ ገዛእ ርእሶም inline-blockባእታ (ከም ምልክት) ዝሓዙ እዮም። ነዚ ዝኸውን መንገዲ ምቕማጥ ’ ዩ display: inline-block;። ንዓውደ-ጽሑፍን ኣብነትን #13219 ርአ

ባጅታት

<span class="badge">a to links, Bootstrap navs, ካልእን ብምውሳኽ ሓደስቲ ወይ ዘይተነበቡ ነገራት ብቐሊሉ ኣጉልሕ ።

ኢንቦክስ42.

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

ነብስኻ ምፍራስ

ሓደስቲ ወይ ዘይተነበቡ ነገራት ኣብ ዘይህልዉሉ እዋን :empty፡ ኣብ ውሽጢ ዝኾነ ትሕዝቶ እንተዘይሃልዩ፡ ባጅ ብቐሊሉ ክዓጽዉ እዮም (ብመንገዲ መምረጺ CSS)።

ስግረ-ብራውዘር ምትእስሳር

ባጅ ኣብ ኢንተርነት ኤክስፕሎረር 8 ንመምረጺ ዝኸውን ደገፍ ስለ ዝጎደሎ ባዕሉ ኣይዓጽዎን እዮም :empty

ምስ ንጡፋት nav states ይላመድ

ኣብ ንጡፋት ግዝኣታት ኣብ ከኒና ምምራሕ ባጅ ንምቕማጥ ኣብ ውሽጢ ዝተሃንጹ ቅዲታት ተሓዊሶም ኣለዉ።

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

ጃምቦትሮን ዝበሃል እዩ።

ኣብ መርበብ ሓበሬታኻ ቁልፊ ትሕዝቶ ንምርኣይ ብኣማራጺ ንኹሉ ቪውፖርት ከናውሕ ዝኽእል ቀሊልን ተዓጻጻፍን ኣካል።

ሰላም ዓለም!

እዚ ቀሊል ጅግና ኣሃዱ እዩ፣ ንፍሉይ ትሕዝቶ ወይ ሓበሬታ ተወሳኺ ኣቓልቦ ንምጽዋዕ ዝሕግዝ ቀሊል ጃምቦትሮን-ቅዲ ባእታ እዩ።

ተወሳኺ ፍለጡ

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

ነቲ ጃምቦትሮን ምሉእ ስፍሓት ንኽህልዎ፡ ከምኡ’ውን ብዘይ ክቡብ ኩርናዓት፡ ካብ ኩሉ s ወጻኢ ኣቐምጦ ኣብ ክንድኡ ድማ ውሽጢ .containerወስኸሉ ።.container

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

ርእሲ ገጽ

h1ንሓደ ኣብ ሓደ ገጽ ዝርከቡ ክፍልታት ትሕዝቶ ብግቡእ ንምውጻእን ንምክፋልን ዝሕግዝ ቀሊል ሸል ። ነቲ h1's ነባሪ smallባእታ ክጥቀመሉ ይኽእል እዩ፣ ከምኡውን መብዛሕትኦም ካልኦት ኣካላት (ምስ ተወሳኺ ቅዲታት)።

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

ንኣሽቱ ስእልታት

ንናይ ቡትስትራፕ ስርዓተ ሽቦ ብናይ ንእሽቶ ስእሊ ክፍሊ ኣናዊሕካ ብቐሊሉ ሽቦታት ምስልታት፡ ቪድዮታት፡ ጽሑፍን ካልእን ንምርኣይ።

ከም Pinterest ዝመስል ኣቀራርባ ዝተፈላለየ ቁመትን/ወይ ስፍሓትን ዘለዎም ንኣሽቱ ስእልታት ትደልዩ እንተኾይንኩም፡ ከም Masonry , Isotope , ወይ Salvattore ዝኣመሰለ ናይ ሳልሳይ ወገን ፕላግ-ኢን ክትጥቀሙ ከድልየኩም እዩ ።

ነባሪ ኣብነት

ብነባሪ መልክዑ፡ ንኣሽቱ ስእልታት ቡትስትራፕ፡ ዝተኣሳሰሩ ምስልታት ብውሑድ ዘድሊ ምልክት ንምርኣይ ዝተዳለዉ እዮም።

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

ብሕታዊ ትሕዝቶ

ቁሩብ ተወሳኺ ምልክት ብምግባር፡ ዝኾነ ዓይነት ትሕዝቶ ኤችቲኤምኤል ከም ኣርእስታት፡ ሕጡበ-ጽሑፋት፡ ወይ መጠወቒታት ኣብ ንኣሽቱ ስእልታት ምውሳኽ ይከኣል።

100%x200 ይኸውን

ንእሽቶ ስእሊ ምልክት

ክራስ ጁስቶ ኦዲዮ፡ ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ፡ ኤገስታስ ኤጌት ኳም። Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus. ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.

መጠወቒ መጠወቒ

100%x200 ይኸውን

ንእሽቶ ስእሊ ምልክት

ክራስ ጁስቶ ኦዲዮ፡ ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ፡ ኤገስታስ ኤጌት ኳም። Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus. ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.

መጠወቒ መጠወቒ

100%x200 ይኸውን

ንእሽቶ ስእሊ ምልክት

ክራስ ጁስቶ ኦዲዮ፡ ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ፡ ኤገስታስ ኤጌት ኳም። Donec id elit ዘይ ሚ ፖርታ ግራቪዳ ኣብ eget metus. ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.

መጠወቒ መጠወቒ

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

መጠንቀቕታታት

ንልሙዳት ተግባራት ተጠቃሚ ምስ ብኣጻብዕ ዝቑጸሩ ዝርከቡን ተዓጻጻፍን ናይ መጠንቀቕታ መልእኽትታት ዓውደ-ጽሑፋዊ ግብረ-መልሲ መልእኽትታት ምቕራብ።

ኣብነታት

ዝኾነ ጽሑፍን ኣማራጺ ናይ ምብራር መጠወቒን ኣብን .alertሓደ ካብቶም ኣርባዕተ ዓውደ-ጽሑፋዊ ክፍልታት (ንኣብነት .alert-success፡ ) ንመሰረታዊ መልእኽትታት መጠንቀቕታ ጠቕልል።

ነባሪ ክፍሊ የለን

መጠንቀቕታታት ነባሪ ክፍልታት የብሎምን፣ መሰረታዊን መቐየሪን ክፍልታት ጥራይ እዮም። ነባሪ ግራጭ መጠንቀቕታ ብዙሕ ትርጉም የብሉን፣ ስለዚ ብመንገዲ ዓውደ-ጽሑፍ ክፍሊ ሓደ ዓይነት ክትገልጽ ይግደድ። ካብ ዓወት፡ ሓበሬታ፡ መጠንቀቕታ፡ ወይ ሓደጋ ምረጽ።

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

ካብ ስራሕ ዝእለ መጠንቀቕታታት

.alert-dismissibleኣብ ዝኾነ መጠንቀቕታ ኣማራጺን ምዕጻውን መጠወቒ ብምውሳኽ ምህናጽ ።

ናይ ጃቫስክሪፕት መጠንቀቕታ ፕላግ-ኢን የድሊ

ምሉእ ብምሉእ ንኽሰርሑ፣ ዝእለዩ መጠንቀቕታታት፣ ነቲ መጠንቀቕታታት ጃቫስክሪፕት ፕላግ-ኢን ክትጥቀም ኣለካ ።

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

ኣብ ኩሎም መሳርሒታት ግቡእ ባህሪ ምርግጋጽ

<button>ነቲ ባእታ ምስቲ ናይ data-dismiss="alert"ዳታ ባህሪ ምጥቃምካ ኣረጋግጽ ።

.alert-linkኣብ ውሽጢ ዝኾነ መጠንቀቕታ ብቕልጡፍ ዝሰማማዕ ሕብራዊ መላግቦታት ንምሃብ ነቲ ናይ ዩቲሊቲ ክፍሊ ተጠቐም ።

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

ናይ ምዕባለ ባር

ብዛዕባ ምዕባለ ዋሕዚ ስራሕ ወይ ስጉምቲ ብቐሊል ግን ከኣ ተዓጻጻፊ ናይ ምዕባለ ምልክታት እዋናዊ ርእይቶ ምሃብ።

ስግረ-ብራውዘር ምትእስሳር

ፕሮግረስ ባር ገለ ካብ ውጽኢታቶም ንምዕዋት CSS3 መሰጋገሪታትን ኣኒሜሽንን ይጥቀሙ። እዞም ባህርያት ኣብ ኢንተርነት ኤክስፕሎረር 9ን ትሕቲኡን ወይ ኣብ ዝኣረጉ ስሪት ፋየርፎክስ ኣይድገፉን እዮም። ኦፔራ 12 ኣኒሜሽን ኣይድግፍን እዩ።

ትሕዝቶ ድሕነት ፖሊሲ (CSP) ምትእስሳር

መርበብ ሓበሬታኻ ዘይፈቅድ ፖሊሲ ድሕነት ትሕዝቶ (CSP) እንተሃልይዎ ፣ ሽዑ ከምቲ ኣብ ታሕቲ ኣብነታትና ዝተገልጸ ስፍሓት ባር ምዕባለ ንምቕማጥ ኣብ style-src 'unsafe-inline'መስመር ዝርከቡ ባህርያት ክትጥቀም ኣይትኽእልን ኢኻ ። styleምስ ጽኑዓት CSPs ዝሰማምዑ ስፍሓት ንምቕማጥ ኣማራጺ ሜላታት ንእሽቶ ብሕታዊ ጃቫስክሪፕት ምጥቃም (that sets element.style.width) ወይ ብሕታዊ CSS ክፍልታት ምጥቃም የጠቓልል።

መሰረታዊ ኣብነት

ነባሪ ናይ ምዕባለ ባር።

60% ምሉእ እዩ።
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

ምስ ምልክት

ዝርአ ሚእታዊት ንምርኣይ ነቲ <span>with class ካብ ውሽጢ progress bar ኣውጽእዎ ።.sr-only

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

እቲ ናይ ስያመ ጽሑፍ ዋላ ንትሑት ሚእታዊት ተነባቢ ኮይኑ ከም ዝጸንሕ ንምርግጋጽ፡ ኣብቲ min-widthናይ ምዕባለ ባር a ምውሳኽ ኣብ ግምት ኣእቱ።

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

ዓውደ-ጽሑፋዊ ኣማራጺታት

ናይ ምዕባለ ባር ገለ ካብ ሓደ ዓይነት መጠወቒን ንዘይተለዋወጠ ቅዲታት ናይ መጠንቀቕታ ክፍልታትን ይጥቀሙ።

40% ምሉእ (ዓወት)
20% ምሉእ እዩ።
60% ምሉእ ( መጠንቀቕታ)
80% ምሉእ (ሓደጋ)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ስሪት ዘለዎ

ስሪት ዘለዎ ውጽኢት ንምፍጣር ግራድየንት ይጥቀም። ኣብ IE9ን ትሕቲኡን ኣይርከብን።

40% ምሉእ (ዓወት)
20% ምሉእ እዩ።
60% ምሉእ ( መጠንቀቕታ)
80% ምሉእ (ሓደጋ)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

ተንቀሳቓሲ ስእሊ

ነቶም መስመራት ካብ የማን ናብ ጸጋም ህያው .activeንምግባር ናብ ወስኹሉ ። .progress-bar-stripedኣብ IE9ን ትሕቲኡን ኣይርከብን።

45% ምሉእ እዩ።
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

ተደራሪቡ ኣሎ።

ብዙሓት ባር ኣብ ሓደ ኣቐምጦም .progressንኽትድምር።

35% ምሉእ (ዓወት)
20% ምሉእ ( መጠንቀቕታ)
10% ምሉእ (ሓደጋ)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

ናይ ሚድያ ነገር

ዝተፈላለዩ ዓይነታት ባእታታት (ከም ርእይቶታት ብሎግ፡ ትዊት ወዘተ) ንምህናጽ ዝሕግዙ ኣብስትራክት ነገራት ቅዲታት፡ ጎኒ ጎኒ ጽሑፋዊ ትሕዝቶ ብጸጋም ወይ ብየማን ዝተሰለፈ ምስሊ ዘርእዩ።

ነባሪ ሚድያ

እቲ ነባሪ ሚድያ ንሓደ ናይ ሚድያ ነገር (ስእልታት፡ ቪድዮ፡ ድምጺ) ብጸጋም ወይ የማን ናይ ሓደ ትሕዝቶ ብሎክ የቕርብ።

ኣርእስቲ ሚድያ

ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን ኮሞዶ። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.

ኣርእስቲ ሚድያ

ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን ኮሞዶ። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.

ዝተሰቕለ ርእሲ ሚድያ

ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን ኮሞዶ። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.

ኣርእስቲ ሚድያ

ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን ኮሞዶ። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ.

ኣርእስቲ ሚድያ

ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን ኮሞዶ። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ.
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

እቶም ክፍልታትን .pull-leftከምኡ’ውን .pull-rightኣለዉን ቅድሚ ሕጂ ከም ኣካል ናይቲ ሚድያ ክፍሊ ይጥቀሙ ነይሮምን፣ ግን ካብ v3.3.0 ንእቲ ኣጠቓቕማ ተኣልዮም ኣለዉ። ብግምት ምስን ማዕረ እዮም .media-left.media-rightብዘይካ እቲ ድሕሪ እቲ ኣብ html .media-rightክቕመጥ ዘለዎ ።.media-body

ኣሰላልፋ ሚድያ

እቶም ምስልታት ወይ ካልእ መራኸቢ ብዙሃን ኣብ ላዕሊ፡ ማእከላይ ወይ ታሕቲ ክስለፉ ይኽእሉ። እቲ ነባሪ ኣብ ላዕሊ ዝተሰለፈ እዩ።

ኣብ ላዕሊ ዝተሰለፉ ሚድያታት

ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን ኮሞዶ። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.

ዶነክ ሰድ ኦዲዮ ዱይ። ኑላም ኪስ ሪሱስ ኤጌት ኡርና ሞሊስ ኦርናረ ቬል ኤው ልዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ.

ኣብ ማእከል ዝተሰለፉ መራኸቢ ብዙሃን

ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን ኮሞዶ። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.

ዶነክ ሰድ ኦዲዮ ዱይ። ኑላም ኪስ ሪሱስ ኤጌት ኡርና ሞሊስ ኦርናረ ቬል ኤው ልዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ.

ኣብ ታሕቲ ዝተሰለፉ ሚድያታት

ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን ኮሞዶ። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ. ፉስ ኮንዲመንተም ኑንክ ኤሲ ኒሲ ቩልፑተት ፍሪንጂላ። ዶነክ ላሲንያ ኮንጉ ፌሊስ ኣብ ፋውሲበስ.

ዶነክ ሰድ ኦዲዮ ዱይ። ኑላም ኪስ ሪሱስ ኤጌት ኡርና ሞሊስ ኦርናረ ቬል ኤው ልዮ። Cum sociis natoque ፔናቲቡስን ማግኒስ ዲስ ፓርቱየንት ሞንተስ፡ ናስቸቱር ሪዲኩለስ ሙስ.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

ዝርዝር ሚድያታት

ቁሩብ ተወሳኺ ምልክት ብምግባር፡ ኣብ ውሽጢ ዝርዝር ሚድያ ክትጥቀም ትኽእል ኢኻ (ንፈትሊ ርእይቶታት ወይ ዝርዝር ጽሑፋት ጠቓሚ)።

  • ኣርእስቲ ሚድያ

    ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን ኮሞዶ። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ.

    ዝተሰቕለ ርእሲ ሚድያ

    ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን ኮሞዶ። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ.

    ዝተሰቕለ ርእሲ ሚድያ

    ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን ኮሞዶ። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ.

    ዝተሰቕለ ርእሲ ሚድያ

    ክራስ ኮፍ ኣመት ኒብ ሊበሮ፣ ኣብ ግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስክለሪስክ ኣንተ ሶሊሲቱዲን ኮሞዶ። ክራስ ፑሩስ ኦዲዮ፡ ቬስቲቡሉም ኣብ ቩልፑተት ኣብ፡ ቴምፑስ ቪቨራ ቱርፒስ.
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

ዝርዝር ጉጅለ

ዝርዝር ጉጅለታት ቀለልቲ ዝርዝር ባእታታት ጥራይ ዘይኮነስ፡ ዝተሓላለኹ ምስ ብሕታዊ ትሕዝቶ ንምግላጽ ተዓጻጻፍን ሓያልን ባእታ እዩ።

መሰረታዊ ኣብነት

እቲ ኣዝዩ መሰረታዊ ዝኾነ ዝርዝር ጉጅለ ብቐሊሉ ዘይተሰርዐ ዝርዝር ምስ ዝርዝር ነገራት፣ ከምኡውን ግቡእ ክፍልታት እዩ። ኣብ ልዕሊኡ በቶም ዝስዕቡ ኣማራጺታት ምህናጽ፣ ወይ ከም ኣድላይነቱ ናይ ገዛእ ርእስኻ CSS።

  • ክራስ ጁስቶ ኦዲዮ
  • ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ...
  • ሞርቢ ልዮ ሪሱስ
  • ፖርታ ኣሲ ኮንሰክተቱር ኣሲ
  • ቬስቲቡሉም ኣብ ኤሮስ
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

ባጅታት

ነቲ ናይ ባጅ ክፍሊ ኣብ ዝኾነ ናይ ዝርዝር ጉጅለ ኣቕሓ ወስኾ እሞ ብኣውቶማቲክ ኣብ የማን ክቕመጥ እዩ።

  • 14ክራስ ጁስቶ ኦዲዮ
  • 2.ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ...
  • 1.ሞርቢ ልዮ ሪሱስ
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

ዝተኣሳሰሩ ነገራት

ኣብ ክንዲ ዝርዝር ነገራት መልህቕ መለለዪታት ብምጥቃም ዝርዝር ጉጅለ ነገራት ኣተሓሕዞም (እዚ ውን ኣብ <div>ክንዲ ወላዲ ማለት እዩ <ul>)። ኣብ ዙርያ ነፍሲ ወከፍ ባእታ ውልቀ ወለዲ ኣየድልን።

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ናይ መጠወቒ ነገራት

ናይ ዝርዝር ጉጅለ ነገራት ኣብ ክንዲ ናይ ዝርዝር ነገራት መጠወቒታት ክኾኑ ይኽእሉ እዮም (እዚ ውን ኣብ <div>ክንዲ ወላዲ ማለት እዩ <ul>)። ኣብ ዙርያ ነፍሲ ወከፍ ባእታ ውልቀ ወለዲ ኣየድልን። ኣብዚ እቶም ስታንዳርድ ክፍልታት ኣይትጠቐሙ ።.btn

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

ስንኩላን ዝኾኑ ነገራት

ስንክልና ዘለዎ ኮይኑ ንኽመስል .disabledናብ a ምውሳኽ ።.list-group-item

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

ዓውደ-ጽሑፋዊ ክፍልታት

ንኣቑሑት ቅዲ ዝርዝር ንምግባር ዓውደ-ጽሑፋዊ ክፍልታት ተጠቐም፣ ነባሪ ወይ ዝተኣሳሰሩ። መንግስቲ እውን የጠቓልል .active

  • ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ...
  • ክራስ ኮፍ ኣመት ኒብህ ሊበሮ
  • ፖርታ ኣሲ ኮንሰክተቱር ኣሲ
  • ቬስቲቡሉም ኣብ ኤሮስ
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

ብሕታዊ ትሕዝቶ

ዳርጋ ዝኾነ ኤችቲኤምኤል ኣብ ውሽጢ ምውሳኽ፣ ዋላ ንከምዚ ኣብ ታሕቲ ዘሎ ዝተኣሳሰሩ ናይ ዝርዝር ጉጅለታት።

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

ፓነላት

ኩሉ ግዜ ኣድላዪ እኳ እንተዘይኮነ፡ ሓደ ሓደ ግዜ ናትካ DOM ኣብ ሳንዱቕ ከተቐምጦ የድልየካ። ነቶም ኩነታት፡ ነቲ ናይ ፓነል ክፍሊ ፈትኖ።

መሰረታዊ ኣብነት

ብነባሪ፡ ኩሉ እቲ .panelዝገብሮ ገለ መሰረታዊ ዶብን ፓዲንግን ገለ ትሕዝቶ ንምሓዝ ምትግባር እዩ።

መሰረታዊ ፓነል ኣብነት
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

ፓነል ምስ ኣርእስቲ

ብቐሊሉ ኣብ ፓነልካ ርእሲ መትሓዚ ብ .panel-heading. ከምኡ ውን ዝኾነ <h1>- <h6>ምስ ሓደ .panel-titleክፍሊ ቅድሚ ቅዲ ዝተገብረ ኣርእስቲ ንምውሳኽ ከተእቱ ትኽእል ኢኻ። ይኹን እምበር፡ ዓቐናት ቅርጺ <h1>- <h6>.panel-heading.

ንግቡእ ሕብሪ መላግቦ፡ መላግቦታት ኣብ ኣርእስታት ኣብ ውሽጢ ምቕማጥካ ኣረጋግጽ .panel-title

ርእሲ ፓነል ብዘይ ኣርእስቲ
ትሕዝቶ ፓነል

ኣርእስቲ ፓነል

ትሕዝቶ ፓነል
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

መጠወቒታት ወይ ካልኣዊ ጽሑፍ ኣብ .panel-footer. ፓነል እግረ ጽሑፋት ኣብ ቅድሚት ክኾኑ ስለዘይተሓሰቡ፡ ዓውደ-ጽሑፋዊ ፍልልያት ክትጥቀም ከለኻ ሕብርታትን ዶባትን ከምዘይወርሱ ኣስተውዕል ።

ትሕዝቶ ፓነል
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

ዓውደ-ጽሑፋዊ ኣማራጺታት

ከም ካልኦት ባእታታት፡ ዝኾነ ካብቶም ዓውደ-ጽሑፋዊ ኩነታት ክፍልታት ብምውሳኽ፡ ንሓደ ፓነል ንሓደ ፍሉይ ዓውዲ ዝያዳ ትርጉም ዘለዎ ምግባር ብቐሊሉ።

ኣርእስቲ ፓነል

ትሕዝቶ ፓነል

ኣርእስቲ ፓነል

ትሕዝቶ ፓነል

ኣርእስቲ ፓነል

ትሕዝቶ ፓነል

ኣርእስቲ ፓነል

ትሕዝቶ ፓነል

ኣርእስቲ ፓነል

ትሕዝቶ ፓነል
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

ምስ ጠረጴዛታት

ንዝኾነ ዘይተወሰነ .tableኣብ ውሽጢ ሓደ ፓነል ንዝኾነ ስሉጥ ዲዛይን ወስኹሉ። እንተሃልዩ .panel-bodyንመፍለዪ ኣብ ላዕሊ ናይቲ ሰደቓ ተወሳኺ ዶብ ንውስኽ።

ርእሲ ፓነል

ገለ ነባሪ ትሕዝቶ ፓነል ኣብዚ። ኑላ ቪታ ኤሊት ሊበሮ፡ ፋሬትራ ኣውጉ። ኤኒያን ላሲንያ ቢበንደም ኑላ ሴድ ኮንሰክተተር። ኤንያን ዩ ልዮ ኳም። ፔለንተስክ ኦርናረ ሴም ላሲንያ ኳም ቬነናቲስ ቬስቲቡሉም። ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.

# ናይ መጀመርታ ሽም ናይ መወዳእታ ሽም ስም ተጠቃሚ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ።
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

ኣካል ፓነል እንተዘይሃልዩ፡ እቲ ኣካል ካብ ርእሲ ፓነል ናብ ሰደቓ ብዘይ ምቁራጽ ይንቀሳቐስ።

ርእሲ ፓነል
# ናይ መጀመርታ ሽም ናይ መወዳእታ ሽም ስም ተጠቃሚ
1. ማርክ ኦቶ @mdo ዝብል ጽሑፍ ኣሎ።
2. ያእቆብ ቶርንተን ዝበሃል ትካል @ረጒድ
3. ላሪ እታ ዑፍ @twitter ዝብል ጽሑፍ ኣሎ።
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

ምስ ዝርዝር ጉጅለታት

ኣብ ውሽጢ ዝኾነ ፓነል ምሉእ ስፍሓት ዘለዎም ናይ ዝርዝር ጉጅለታት ብቐሊሉ ኣካትት።

ርእሲ ፓነል

ገለ ነባሪ ትሕዝቶ ፓነል ኣብዚ። ኑላ ቪታ ኤሊት ሊበሮ፡ ፋሬትራ ኣውጉ። ኤኒያን ላሲንያ ቢበንደም ኑላ ሴድ ኮንሰክተተር። ኤንያን ዩ ልዮ ኳም። ፔለንተስክ ኦርናረ ሴም ላሲንያ ኳም ቬነናቲስ ቬስቲቡሉም። ኑላም ኢድ ዶሎር ኢድ ኒብህ ኡልትሪሲስ ቬሂኩላ ኡት ኢድ ኤሊት.

  • ክራስ ጁስቶ ኦዲዮ
  • ዳፒቡስ ኣሲ ፋሲሊሲስ ኣብ...
  • ሞርቢ ልዮ ሪሱስ
  • ፖርታ ኣሲ ኮንሰክተቱር ኣሲ
  • ቬስቲቡሉም ኣብ ኤሮስ
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

ምላሽ ዝህብ embed

ዳህሰስቲ ኣብ ዝኾነ መሳርሒ ብግቡእ ዝዓቢ ውሽጣዊ ሬሽዮ ብምፍጣር ኣብ ስፍሓት ናይቲ ዝሓዘ ብሎኮኦም ተመርኲሶም መለክዒታት ቪድዮ ወይ ስላይድ ሾው ክውስኑ ፍቐደሎም።

ሕግታት ብቐጥታ ኣብ <iframe><embed><video>፣ ከምኡ እውን <object>ባእታታት ይትግበሩ፤ .embed-responsive-itemብኣማራጺ ንኻልኦት ባህርያት ቅዲ ክትመዓራረዮ ምስ እትደሊ ግሉጽ ዘርኢ ክፍሊ ተጠቐም ።

ፕሮ-ቲፕ! frameborder="0"ኣብ s ናትካ ምእታው ኣየድልየካን እዩ <iframe>ከምቲ ንሕና ንዓኻ ንዕኡ ዝሽርሽር።

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

ዌልስ ዝበሃል ትካል

ጽቡቕ ጌርካ ነባሪ

ነቲ ዒላ ከም ቀሊል ጽልዋ ኣብ ሓደ ባእታ ተጠቐመሉ ንውጽኢት ምትእትታው ክትህቦ።

ርኣዩኒ ኣብ ዒላ ኣለኹ!
<div class="well">...</div>

ኣማራጺ ክፍልታት

ምቁጽጻር ፓዲንግን ክቡብ ኩርናዓትን ምስ ክልተ ኣማራጺ መቐየሪ ክፍልታት።

ርኣዩኒ ኣብ ሓደ ዓቢ ዒላ ኣለኹ!
<div class="well well-lg">...</div>
ርኣዩኒ ኣብ ሓንቲ ንእሽቶ ዒላ ኣለኹ!
<div class="well well-sm">...</div>