ግሊፊኮንስ

የሚገኙ ግሊፎች

ከGlyphicon Halflings ስብስብ ከ250 በላይ ግሊፍሎችን በቅርጸ-ቁምፊ ቅርጸት ያካትታል። Glyphicons Halflings በመደበኛነት በነጻ አይገኙም፣ ነገር ግን ፈጣሪያቸው ለBootstrap ያለምንም ወጪ እንዲገኙ አድርጓቸዋል። ለማመስገን፣ በተቻለ መጠን ወደ Glyphicons የሚመለስ አገናኝ እንዲያካትቱ እንጠይቃለን።

  • ግሊፊኮን ግሊፊኮን-አስቴሪክ
  • ግሊፊኮን ግሊፊኮን-ፕላስ
  • ግሊፊኮን ግሊፊኮን-ዩሮ
  • ግሊፊኮን ግሊፊኮን-ዩር
  • ግሊፊኮን ግሊፊኮን - ሲቀነስ
  • ግሊፊኮን ግሊፊኮን-ደመና
  • ግሊፊኮን ግሊፊኮን-ኤንቬሎፕ
  • ግሊፊኮን ግሊፊኮን-እርሳስ
  • ግሊፊኮን ግሊፊኮን-መስታወት
  • ግሊፊኮን ግሊፊኮን-ሙዚቃ
  • ግሊፊኮን ግሊፊኮን-ፍለጋ
  • ግሊፊኮን ግሊፊኮን-ልብ
  • ግሊፊኮን ግሊፊኮን-ኮከብ
  • ግሊፊኮን ግሊፊኮን-ኮከብ-ባዶ
  • ግሊፊኮን ግሊፊኮን-ተጠቃሚ
  • ግሊፊኮን ግሊፊኮን-ፊልም
  • ግሊፊኮን ግሊፊኮን-ኛ-ትልቅ
  • ግሊፊኮን ግሊፊኮን-ኛ
  • ግሊፊኮን ግሊፊኮን-ኛ-ዝርዝር
  • ግሊፊኮን ግሊፊኮን-እሺ
  • ግሊፊኮን ግሊፊኮን - አስወግድ
  • ግሊፊኮን ግሊፊኮን-ማጉላት
  • ግሊፊኮን ግሊፊኮን-ማጉላት
  • ግሊፊኮን ግሊፊኮን-ጠፍቷል
  • ግሊፊኮን ግሊፊኮን-ሲግናል
  • ግሊፊኮን ግሊፊኮን-ኮግ
  • glyphicon glyphicon-ቆሻሻ
  • glyphicon glyphicon-ሆም
  • ግሊፊኮን ግሊፊኮን-ፋይል
  • ግሊፊኮን ግሊፊኮን-ጊዜ
  • glyphicon glyphicon-road
  • glyphicon glyphicon-ማውረጃ-alt
  • glyphicon glyphicon-አውርድ
  • glyphicon glyphicon-መስቀል
  • ግሊፊኮን ግሊፊኮን-ገቢ መልእክት ሳጥን
  • ግሊፊኮን ግሊፊኮን-ጨዋታ-ክበብ
  • ግሊፊኮን ግሊፊኮን-ድገም
  • ግሊፊኮን ግሊፊኮን-አድስ
  • ግሊፊኮን ግሊፊኮን-ዝርዝር-አልት
  • ግሊፊኮን ግሊፊኮን-መቆለፊያ
  • ግሊፊኮን ግሊፊኮን-ባንዲራ
  • glyphicon glyphicon-የጆሮ ማዳመጫዎች
  • ግሊፊኮን ግሊፊኮን-ጥራዝ-ጠፍቷል
  • ግሊፊኮን ግሊፊኮን-ጥራዝ-ወደታች
  • ግሊፊኮን ግሊፊኮን-ጥራዝ-ከፍ
  • ግሊፊኮን ግሊፊኮን-qrcode
  • ግሊፊኮን ግሊፊኮን-ባርኮድ
  • ግሊፊኮን ግሊፊኮን-መለያ
  • glyphicon glyphicon-መለያዎች
  • ግሊፊኮን ግሊፊኮን-መጽሐፍ
  • ግሊፊኮን ግሊፊኮን-ዕልባት
  • ግሊፊኮን ግሊፊኮን-ህትመት
  • ግሊፊኮን ግሊፊኮን-ካሜራ
  • ግሊፊኮን ግሊፊኮን-ፎንት።
  • ግሊፊኮን ግሊፊኮን-ደፋር
  • ግሊፊኮን ግሊፊኮን-ኢታሊክ
  • ግሊፊኮን ግሊፊኮን-ጽሑፍ-ቁመት
  • ግሊፊኮን ግሊፊኮን-የጽሑፍ-ስፋት
  • ግሊፊኮን ግሊፊኮን-አሰላለፍ-ግራ
  • ግሊፊኮን ግሊፊኮን-አሰላለፍ-መሃል
  • ግሊፊኮን ግሊፊኮን-አሰላለፍ-ቀኝ
  • ግሊፊኮን ግሊፊኮን-አሰላለፍ-ማጽደቅ
  • ግሊፊኮን ግሊፊኮን-ዝርዝር
  • ግሊፊኮን ግሊፊኮን-ኢንደንት-ግራ
  • ግሊፊኮን ግሊፊኮን-ኢንደንት-ቀኝ
  • glyphicon glyphicon-facetime-ቪዲዮ
  • ግሊፊኮን ግሊፊኮን-ሥዕል
  • ግሊፊኮን ግሊፊኮን-ካርታ-ማርከር
  • ግሊፊኮን ግሊፊኮን-አስተካክል
  • ግሊፊኮን ግሊፊኮን-ቲንት
  • ግሊፊኮን ግሊፊኮን-አርትዕ
  • ግሊፊኮን ግሊፊኮን-አጋራ
  • ግሊፊኮን ግሊፊኮን-ቼክ
  • ግሊፊኮን ግሊፊኮን-አንቀሳቅስ
  • ግሊፊኮን ግሊፊኮን - ደረጃ - ወደ ኋላ
  • ግሊፊኮን ግሊፊኮን-ፈጣን-ወደ ኋላ
  • ግሊፊኮን ግሊፊኮን - ወደ ኋላ
  • ግሊፊኮን ግሊፊኮን-ጨዋታ
  • ግሊፊኮን ግሊፊኮን-አፍታ አቁም
  • ግሊፊኮን ግሊፊኮን-ማቆሚያ
  • ግሊፊኮን ግሊፊኮን-ወደ ፊት
  • ግሊፊኮን ግሊፊኮን-ፈጣን-ወደፊት
  • ግሊፊኮን ግሊፊኮን-ደረጃ-ወደ ፊት
  • ግሊፊኮን ግሊፊኮን-ማስወጣት
  • ግሊፊኮን ግሊፊኮን-ቼቭሮን-ግራ
  • ግሊፊኮን ግሊፊኮን-ቼቭሮን-ቀኝ
  • ግሊፊኮን ግሊፊኮን-ፕላስ-ምልክት
  • ግሊፊኮን ግሊፊኮን-መቀነስ-ምልክት
  • ግሊፊኮን ግሊፊኮን-ማስወገድ-ምልክት።
  • ግሊፊኮን ግሊፊኮን-ኦክ-ምልክት
  • ግሊፊኮን ግሊፊኮን-ጥያቄ-ምልክት።
  • ግሊፊኮን ግሊፊኮን-መረጃ-ምልክት።
  • ግሊፊኮን ግሊፊኮን-ቅጽበታዊ ገጽ እይታ
  • ግሊፊኮን ግሊፊኮን-አስወግድ-ክበብ
  • ግሊፊኮን ግሊፊኮን-ኦክ-ክበብ
  • ግሊፊኮን ግሊፊኮን-ባን-ክበብ
  • ግሊፊኮን ግሊፊኮን-ቀስት-ግራ
  • ግሊፊኮን ግሊፊኮን-ቀስት-ቀኝ
  • ግሊፊኮን ግሊፊኮን-ቀስት-ላይ
  • ግሊፊኮን ግሊፊኮን-ቀስት-ታች
  • glyphicon glyphicon-share-alt
  • ግሊፊኮን ግሊፊኮን-መጠን-ሙሉ
  • ግሊፊኮን ግሊፊኮን-መጠን-ትንሽ
  • ግሊፊኮን ግሊፊኮን - አጋኖ - ምልክት
  • ግሊፊኮን ግሊፊኮን-ስጦታ
  • ግሊፊኮን ግሊፊኮን-ቅጠል
  • ግሊፊኮን ግሊፊኮን-እሳት
  • ግሊፊኮን ግሊፊኮን-ዓይን-ክፍት
  • ግሊፊኮን ግሊፊኮን-ዓይን-ቅርብ
  • glyphicon glyphicon-ማስጠንቀቂያ-ምልክት
  • ግሊፊኮን ግሊፊኮን-አውሮፕላን
  • ግሊፊኮን ግሊፊኮን- የቀን መቁጠሪያ
  • ግሊፊኮን ግሊፊኮን- በዘፈቀደ
  • ግሊፊኮን ግሊፊኮን-አስተያየት
  • ግሊፊኮን ግሊፊኮን-ማግኔት
  • ግሊፊኮን ግሊፊኮን-ቼቭሮን-አፕ
  • ግሊፊኮን ግሊፊኮን-ቼቭሮን-ታች
  • ግሊፊኮን ግሊፊኮን-ሪትዊት
  • ግሊፊኮን ግሊፊኮን-ግዢ-ጋሪ
  • ግሊፊኮን ግሊፊኮን-አቃፊ-ቅርብ
  • ግሊፊኮን ግሊፊኮን-አቃፊ-ክፍት
  • ግሊፊኮን ግሊፊኮን-መጠን-አቀባዊ
  • ግሊፊኮን ግሊፊኮን-መጠን-አግድም
  • ግሊፊኮን ግሊፊኮን-ኤችዲዲ
  • ግሊፊኮን ግሊፊኮን-ቡልሆርን
  • ግሊፊኮን ግሊፊኮን-ደወል
  • glyphicon glyphicon-ሰርቲፊኬት
  • ግሊፊኮን ግሊፊኮን-አውራ ጣት-አፕ
  • ግሊፊኮን ግሊፊኮን-አውራ ጣት-ታች
  • ግሊፊኮን ግሊፊኮን-እጅ-ቀኝ
  • ግሊፊኮን ግሊፊኮን-እጅ-ግራ
  • ግሊፊኮን ግሊፊኮን-እጅ ወደ ላይ
  • ግሊፊኮን ግሊፊኮን-እጅ-ወደታች
  • ግሊፊኮን ግሊፊኮን-ክበብ-ቀስት-ቀኝ
  • ግሊፊኮን ግሊፊኮን-ክበብ-ቀስት-ግራ
  • ግሊፊኮን ግሊፊኮን - ክበብ - ቀስት
  • ግሊፊኮን ግሊፊኮን-ክበብ-ቀስት-ታች
  • ግሊፊኮን ግሊፊኮን-ግሎብ
  • ግሊፊኮን ግሊፊኮን-መፍቻ
  • ግሊፊኮን ግሊፊኮን-ተግባራት
  • ግሊፊኮን ግሊፊኮን-ማጣሪያ
  • ግሊፊኮን ግሊፊኮን-አጭር ቦርሳ
  • ግሊፊኮን ግሊፊኮን-ሙሉ ማያ
  • ግሊፊኮን ግሊፊኮን-ዳሽቦርድ
  • glyphicon glyphicon-paperclip
  • ግሊፊኮን ግሊፊኮን-ልብ-ባዶ
  • ግሊፊኮን ግሊፊኮን-አገናኝ
  • glyphicon glyphicon-ስልክ
  • ግሊፊኮን ግሊፊኮን-ፑሽፒን
  • ግሊፊኮን ግሊፊኮን-USd
  • ግሊፊኮን ግሊፊኮን-ጂቢፒ
  • ግሊፊኮን ግሊፊኮን-አይነት
  • ግሊፊኮን ግሊፊኮን-በፊደል ደርድር
  • ግሊፊኮን ግሊፊኮን-በፊደል-አልት-አልት
  • ግሊፊኮን ግሊፊኮን-በቅደም ተከተል
  • ግሊፊኮን ግሊፊኮን-በትእዛዝ-አልት
  • ግሊፊኮን ግሊፊኮን-በባህሪያት
  • ግሊፊኮን ግሊፊኮን-በባህሪያት-አልት
  • ግሊፊኮን ግሊፊኮን-ያልተረጋገጠ
  • ግሊፊኮን ግሊፊኮን-ዘርጋ
  • ግሊፊኮን ግሊፊኮን - ወድቆ - ወደታች
  • ግሊፊኮን ግሊፊኮን-ሰብስብ-አፕ
  • glyphicon glyphicon-መግቢያ
  • ግሊፊኮን ግሊፊኮን-ፍላሽ
  • glyphicon glyphicon-ውጣ
  • ግሊፊኮን ግሊፊኮን-አዲስ-መስኮት።
  • ግሊፊኮን ግሊፊኮን-መዝገብ
  • ግሊፊኮን ግሊፊኮን-አስቀምጥ
  • ግሊፊኮን ግሊፊኮን-ክፍት
  • glyphicon glyphicon-የተቀመጠ
  • ግሊፊኮን ግሊፊኮን-ማስመጣት
  • glyphicon glyphicon-ወደ ውጪ መላክ
  • ግሊፊኮን ግሊፊኮን-ላክ
  • ግሊፊኮን ግሊፊኮን-ፍሎፒ-ዲስክ
  • ግሊፊኮን ግሊፊኮን-ፍሎፒ-የተቀመጠ
  • ግሊፊኮን ግሊፊኮን-ፍሎፒ-አስወግድ
  • ግሊፊኮን ግሊፊኮን-ፍሎፒ-ማዳን
  • ግሊፊኮን ግሊፊኮን-ፍሎፒ-ክፍት
  • ግሊፊኮን ግሊፊኮን-ክሬዲት-ካርድ
  • ግሊፊኮን ግሊፊኮን-ማስተላለፍ
  • glyphicon glyphicon-cutlery
  • ግሊፊኮን ግሊፊኮን-ራስጌ
  • ግሊፊኮን ግሊፊኮን-የተጨመቀ
  • glyphicon glyphicon-earphone
  • ግሊፊኮን ግሊፊኮን-ስልክ-አልት
  • glyphicon glyphicon-ማማ
  • ግሊፊኮን ግሊፊኮን-ስታቲስቲክስ
  • ግሊፊኮን ግሊፊኮን-ኤስዲ-ቪዲዮ
  • ግሊፊኮን ግሊፊኮን-ኤችዲ-ቪዲዮ
  • ግሊፊኮን ግሊፊኮን - የትርጉም ጽሑፎች
  • ግሊፊኮን ግሊፊኮን-ድምጽ-ስቲሪዮ
  • ግሊፊኮን ግሊፊኮን-ድምጽ-ዶልቢ
  • ግሊፊኮን ግሊፊኮን-ድምጽ-5-1
  • ግሊፊኮን ግሊፊኮን-ድምጽ-6-1
  • ግሊፊኮን ግሊፊኮን-ድምጽ-7-1
  • ግሊፊኮን ግሊፊኮን-የቅጂ መብት-ምልክት
  • ግሊፊኮን ግሊፊኮን-ምዝገባ-ምልክት
  • glyphicon glyphicon-cloud- አውርድ
  • glyphicon glyphicon-cloud-መስቀል
  • ግሊፊኮን ግሊፊኮን-ዛፍ-ኮንፈር
  • ግሊፊኮን ግሊፊኮን-ዛፍ-የሚረግፍ
  • ግሊፊኮን ግሊፊኮን-ሲዲ
  • glyphicon glyphicon-save-file
  • ግሊፊኮን ግሊፊኮን-ክፍት-ፋይል
  • glyphicon glyphicon-ደረጃ ከፍ
  • ግሊፊኮን ግሊፊኮን-ኮፒ
  • ግሊፊኮን ግሊፊኮን-መለጠፍ
  • glyphicon glyphicon-ማስጠንቀቂያ
  • ግሊፊኮን ግሊፊኮን-አመጣጣኝ
  • ግሊፊኮን ግሊፊኮን-ኪንግ
  • ግሊፊኮን ግሊፊኮን-ንግሥት
  • ግሊፊኮን ግሊፊኮን-ፓውን
  • ግሊፊኮን ግሊፊኮን-ጳጳስ
  • ግሊፊኮን ግሊፊኮን-ባላባት
  • glyphicon glyphicon-ሕፃን-ቀመር
  • ግሊፊኮን ግሊፊኮን-ድንኳን
  • ግሊፊኮን ግሊፊኮን-ጥቁር ሰሌዳ
  • ግሊፊኮን ግሊፊኮን-አልጋ
  • ግሊፊኮን ግሊፊኮን-ፖም
  • ግሊፊኮን ግሊፊኮን-ሰርዝ
  • glyphicon glyphicon-hourglass
  • ግሊፊኮን ግሊፊኮን-መብራት
  • ግሊፊኮን ግሊፊኮን-የተባዛ
  • ግሊፊኮን ግሊፊኮን-ፒጊ-ባንክ
  • ግሊፊኮን ግሊፊኮን-መቀስ
  • ግሊፊኮን ግሊፊኮን-ቢትኮይን
  • ግሊፊኮን ግሊፊኮን-ቢቲሲ
  • ግሊፊኮን ግሊፊኮን-xbt
  • ግሊፊኮን ግሊፊኮን-የን
  • ግሊፊኮን ግሊፊኮን-ጂፒ
  • ግሊፊኮን ግሊፊኮን-ሩብል
  • glyphicon glyphicon-rub
  • ግሊፊኮን ግሊፊኮን-ልኬት
  • ግሊፊኮን ግሊፊኮን-በረዶ-ሎሊ
  • ግሊፊኮን ግሊፊኮን-በረዶ-ሎሊ-የቀመሰ
  • glyphicon glyphicon-ትምህርት
  • ግሊፊኮን ግሊፊኮን-አማራጭ-አግድም
  • ግሊፊኮን ግሊፊኮን-አማራጭ-አቀባዊ
  • ግሊፊኮን ግሊፊኮን-ሜኑ-ሃምበርገር
  • ግሊፊኮን ግሊፊኮን-ሞዳል-መስኮት
  • ግሊፊኮን ግሊፊኮን-ዘይት
  • ግሊፊኮን ግሊፊኮን-እህል
  • glyphicon glyphicon-የፀሐይ መነጽር
  • ግሊፊኮን ግሊፊኮን - የጽሑፍ መጠን
  • ግሊፊኮን ግሊፊኮን-ጽሑፍ-ቀለም
  • ግሊፊኮን ግሊፊኮን-ጽሑፍ-ዳራ
  • ግሊፊኮን ግሊፊኮን-ነገር-አሰላለፍ-ከላይ
  • ግሊፊኮን ግሊፊኮን-ነገር-አሰላለፍ-ከታች
  • ግሊፊኮን ግሊፊኮን-ነገር-አሰላለፍ-አግድም።
  • ግሊፊኮን ግሊፊኮን-ነገር-አሰላለፍ-ግራ
  • ግሊፊኮን ግሊፊኮን-ነገር-አሰላለፍ-ቁመት
  • ግሊፊኮን ግሊፊኮን-ነገር-አሰላለፍ-ቀኝ
  • ግሊፊኮን ግሊፊኮን-ትሪያንግል-ቀኝ
  • ግሊፊኮን ግሊፊኮን-ትሪያንግል-ግራ
  • ግሊፊኮን ግሊፊኮን-ትሪያንግል-ታች
  • glyphicon glyphicon-triangle-top
  • ግሊፊኮን ግሊፊኮን-ኮንሶል
  • ግሊፊኮን ግሊፊኮን-ሱፐርስክሪፕት
  • ግሊፊኮን ግሊፊኮን-ንዑስ ጽሑፍ
  • ግሊፊኮን ግሊፊኮን-ምናሌ-ግራ
  • ግሊፊኮን ግሊፊኮን-ምናሌ-ቀኝ
  • ግሊፊኮን ግሊፊኮን-ምናሌ-ታች
  • ግሊፊኮን ግሊፊኮን-ሜኑ-ላይ

እንዴት መጠቀም እንደሚቻል

ለአፈጻጸም ምክንያቶች ሁሉም አዶዎች የመሠረት ክፍል እና የግለሰብ አዶ ክፍል ያስፈልጋቸዋል። ለመጠቀም የሚከተለውን ኮድ በማንኛውም ቦታ ያስቀምጡ። ለትክክለኛው ንጣፍ በአዶ እና በጽሑፍ መካከል ክፍተት መተውዎን ያረጋግጡ።

ከሌሎች አካላት ጋር አትቀላቅሉ

የአዶ ክፍሎች በቀጥታ ከሌሎች አካላት ጋር ሊጣመሩ አይችሉም። በተመሳሳይ ኤለመንት ላይ ከሌሎች ክፍሎች ጋር አብረው ጥቅም ላይ መዋል የለባቸውም. በምትኩ፣ ጎጆ ያክሉ <span>እና የአዶ ክፍሎችን በ <span>.

በባዶ አካላት ላይ ብቻ ለመጠቀም

የአዶ መደቦች የጽሑፍ ይዘት በሌላቸው እና ምንም የሕፃን ክፍሎች በሌሉት አካላት ላይ ብቻ ነው ጥቅም ላይ መዋል ያለባቸው።

የአዶ ቅርጸ-ቁምፊውን ቦታ በመቀየር ላይ

../fonts/Bootstrap የአዶ ቅርጸ-ቁምፊ ፋይሎች ከተቀናጁት የCSS ፋይሎች አንጻር በማውጫው ውስጥ እንደሚገኙ ይገምታል ። እነዚያን የቅርጸ-ቁምፊ ፋይሎችን ማንቀሳቀስ ወይም እንደገና መሰየም ማለት ከሶስቱ መንገዶች በአንዱ CSS ማዘመን ማለት ነው።

  • @icon-font-pathበምንጩ ውስጥ ያሉትን እና/ወይም ተለዋዋጮችን ይቀይሩ @icon-font-nameያነሱ ፋይሎች።
  • በትንሹ አቀናባሪ የቀረበውን አንጻራዊ የዩአርኤል አማራጮችን ተጠቀም ።
  • url()በተቀናበረው CSS ውስጥ ያሉትን መንገዶች ይቀይሩ ።

ለእርስዎ የተለየ የእድገት ማዋቀር የሚስማማውን ማንኛውንም አማራጭ ይጠቀሙ።

ተደራሽ አዶዎች

ዘመናዊ የረዳት ቴክኖሎጂዎች ስሪቶች በ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;። ከዚያ የምናሌውን HTML ያክሉ።

<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ወደ .dropdown-menuቀኝ አሰላለፍ።

ተጨማሪ አቀማመጥ ሊፈልግ ይችላል

ተቆልቋይዎች በሰነዱ መደበኛ ፍሰት ውስጥ በራስ-ሰር በ CSS በኩል ይቀመጣሉ። ይህ ማለት ተቆልቋይ አንዳንድ overflowንብረቶች ባላቸው ወላጆች ሊቆረጡ ወይም ከእይታ እይታ ወሰን ውጭ ሊመስሉ ይችላሉ። እነዚህን ችግሮች በሚነሱበት ጊዜ በራስዎ ይፍቱ።

የተቋረጠ .pull-rightአሰላለፍ

ከ v3.1.0 ጀምሮ፣ .pull-rightበተቆልቋይ ምናሌዎች ላይ አቋርጠናል። አንድ ምናሌን ወደ ቀኝ ለማስተካከል፣ ተጠቀም .dropdown-menu-right። በቀኝ የተሰለፉ የናቭ ክፍሎች በናvbar ውስጥ ያሉ የናቭ ክፍሎች ምናሌውን በራስ-ሰር ለማስተካከል የዚህን ክፍል ድብልቅ ስሪት ይጠቀማሉ። እሱን ለመሻር ይጠቀሙ .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ያክሉ ።<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>

የአዝራር ቡድኖች

ተከታታይ አዝራሮችን በአንድ መስመር በአንድ መስመር ከአዝራር ቡድን ጋር ይሰብስቡ። በአማራጭ የጃቫ ስክሪፕት ሬዲዮ እና የአመልካች ሳጥን ዘይቤ ባህሪን በአዝራሮቻችን ፕለጊን ያክሉ ።

በአዝራር ቡድኖች ውስጥ ያሉ የመሳሪያ ምክሮች እና ብቅ-ባዮች ልዩ ቅንብር ያስፈልጋቸዋል

በ a ውስጥ ባሉ ንጥረ ነገሮች ላይ የመሳሪያ ምክሮችን ወይም ብቅ-ባዮችን ሲጠቀሙ ያልተፈለጉ የጎንዮሽ ጉዳቶችን ለማስወገድ .btn-groupአማራጩን መግለጽ አለብዎት container: 'body'(እንደ ኤለመንቱ እየሰፋ እያደገ እና/ወይም የመሳሪያ ጥቆማው ወይም ብቅ-ባይ ሲቀሰቀስ) የተጠጋጋ ማዕዘኖቹን ማጣት)።

ትክክለኛውን ያረጋግጡ roleእና መለያ ያቅርቡ

ረዳት ቴክኖሎጂዎች - እንደ ማያ አንባቢዎች - ተከታታይ አዝራሮች በቡድን መከፋፈላቸውን ለማስተላለፍ, ተገቢ roleባህሪን መስጠት ያስፈልጋል. ለአዝራር ቡድኖች፣ ይህ ይሆናል role="group"፣ የመሳሪያ አሞሌዎች ግን ሊኖራቸው ይገባል role="toolbar"

አንድ ለየት ያለ ሁኔታ አንድ ነጠላ ቁጥጥር ብቻ (ለምሳሌ የጸደቁ የአዝራር ቡድኖች ከኤለመንቶች ጋር <button>) ወይም ተቆልቋይ የያዙ ቡድኖች ናቸው።

roleበተጨማሪም, ቡድኖች እና የመሳሪያ አሞሌዎች ትክክለኛ መለያዎች ቢኖሩም, አብዛኛዎቹ አጋዥ ቴክኖሎጂዎች ስለማያውቁ ግልጽ መለያ ሊሰጣቸው ይገባል . እዚህ በቀረቡት ምሳሌዎች ውስጥ, እንጠቀማለን aria-label, ነገር ግን እንደ አማራጮች aria-labelledbyእንዲሁ ጥቅም ላይ ሊውሉ ይችላሉ.

መሰረታዊ ምሳሌ

በ ውስጥ ተከታታይ አዝራሮችን .btnጠቅልል .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። በውጤቱም፣ ለBootstrap ባደረጉት ማበጀት ላይ በመመስረት፣ ድንበሮችን ማስወገድ ወይም እንደገና መቀባት ሊፈልጉ ይችላሉ።

IE8 እና ድንበሮች

ኢንተርኔት ኤክስፕሎረር 8 በተረጋገጠ የአዝራር ቡድን ውስጥ ባሉ አዝራሮች ላይ ድንበሮችን አያደርግም ፣ ላይም <a>ሆነ <button>አካላት። ይህንን ለማድረግ እያንዳንዱን ቁልፍ በሌላ ጠቅ ያድርጉ .btn-group

ለበለጠ መረጃ #12476 ይመልከቱ።

ከንጥረ <a>ነገሮች ጋር

ተከታታይ .btnዎች ውስጥ ብቻ ጠቅልለው .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>

የአዝራሮች ተቆልቋይ

የተቆልቋይ ምናሌን በ ውስጥ በማስቀመጥ .btn-groupእና ተገቢውን የሜኑ ማርክ በማቅረብ ለማስነሳት ማንኛውንም ቁልፍ ይጠቀሙ።

የተሰኪ ጥገኝነት

የአዝራር ተቆልቋይ ተቆልቋይ ተሰኪው በእርስዎ የBootstrap ስሪት ውስጥ እንዲካተት ይፈልጋሉ።

ነጠላ አዝራር ተቆልቋይ

ከአንዳንድ መሰረታዊ የማርክ ለውጦች ጋር አንድ ቁልፍን ወደ ተቆልቋይ መቀያየር ይለውጡ።

<!-- 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>በWebKit አሳሾች ውስጥ ሙሉ ለሙሉ ሊዘጋጁ ስለማይችሉ ኤለመንቶችን ከመጠቀም ይቆጠቡ ።

በአንዳንድ ሁኔታዎች <textarea>ባህሪያቸው ስለማይከበር ኤለመንቶችን ከመጠቀም ይቆጠቡ ።rows

በግቤት ቡድኖች ውስጥ ያሉ የመሳሪያ ምክሮች እና ብቅ-ባዮች ልዩ መቼት ያስፈልጋቸዋል

በ ውስጥ ባሉ ንጥረ ነገሮች ላይ የመሳሪያ ምክሮችን ወይም ብቅ-ባዮችን ሲጠቀሙ ያልተፈለጉ የጎንዮሽ ጉዳቶችን ለማስወገድ .input-groupአማራጩን መግለጽ አለብዎት container: 'body'(እንደ ኤለመንቱ እየሰፋ እያደገ እና/ወይም የመሳሪያው ጫፍ ወይም ብቅ-ባይ ሲቀሰቀስ) የተጠጋጋ ማዕዘኖቹን ማጣት)።

ከሌሎች አካላት ጋር አትቀላቅሉ

የቅጽ ቡድኖችን ወይም የፍርግርግ አምድ ክፍሎችን በቀጥታ ከግብዓት ቡድኖች ጋር አታቀላቅሉ። በምትኩ፣ የግቤት ቡድኑን ከቅጽ ቡድን ውስጥ ወይም ከፍርግርግ ጋር የተዛመደ ኤለመንት ውስጥ ያስገቡ።

ሁልጊዜ መለያዎችን ያክሉ

ለእያንዳንዱ ግቤት መለያ ካላካተቱ የስክሪን አንባቢዎች በእርስዎ ቅጾች ላይ ችግር አለባቸው። ለእነዚህ የግቤት ቡድኖች ማንኛውም ተጨማሪ መለያ ወይም ተግባር ወደ አጋዥ ቴክኖሎጂዎች መተላለፉን ያረጋግጡ።

ትክክለኛው ጥቅም ላይ የሚውለው ቴክኒክ (የሚታዩ <label>ንጥረ ነገሮች፣ ክፍልን <label>ተጠቅመው የተደበቁ ንጥረ ነገሮች፣ ወይም የ , , , ወይም ባህሪን መጠቀም) እና ምን ተጨማሪ መረጃ ማስተላለፍ እንደሚያስፈልግዎ እርስዎ እየተገበሩት ባለው የበይነገጽ መግብር አይነት ይለያያል። በዚህ ክፍል ውስጥ ያሉት ምሳሌዎች ጥቂት የተጠቆሙ፣ ጉዳይ-ተኮር አቀራረቦችን ያቀርባሉ።.sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder

መሰረታዊ ምሳሌ

በግቤት በሁለቱም በኩል አንድ ተጨማሪ ወይም አዝራር ያስቀምጡ። እንዲሁም አንዱን በግቤት በሁለቱም በኩል ማስቀመጥ ይችላሉ።

በአንድ በኩል ብዙ ተጨማሪዎችን ( .input-group-addonወይም ) አንደግፍም ።.input-group-btn

በአንድ የግቤት ቡድን ውስጥ ብዙ የቅጽ መቆጣጠሪያዎችን አንደግፍም።

@

@example.com

$ .00

https://example.com/users/
<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 -->

የአዝራር addons

በግቤት ቡድኖች ውስጥ ያሉ አዝራሮች ትንሽ ለየት ያሉ ናቸው እና አንድ ተጨማሪ የጎጆ ደረጃ ያስፈልጋቸዋል። በምትኩ ፣ አዝራሮቹን ለመጠቅለል .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 ውስጥ የሚገኙት የባህር ኃይል መርከቦች ከመሠረታዊ .navክፍል ጀምሮ እና እንዲሁም የተጋሩ ግዛቶች የጋራ ምልክት አላቸው። በእያንዳንዱ ዘይቤ መካከል ለመቀያየር የመቀየሪያ ክፍሎችን ይቀያይሩ።

ናቭስን ለትብ ፓነሎች መጠቀም የJavaScript tabs ፕለጊን ያስፈልገዋል

ሊታዩ የሚችሉ ቦታዎች ላሏቸው ትሮች፣ ትሮችን መጠቀም አለቦት JavaScript ፕለጊን ። ምልክት ማድረጊያው ተጨማሪ roleእና ARIA ባህሪያትን ይፈልጋል - ለተጨማሪ ዝርዝሮች የተሰኪውን ምሳሌ ምልክት ይመልከቱ።

የመርከብ መርከቦችን እንደ አሰሳ ተደራሽ ያድርጉ

የአሰሳ አሞሌን ለማቅረብ ናቭስ እየተጠቀሙ ከሆነ 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>

ከ 768 ፒክስል ሰፋ ባሉ ስክሪኖች ላይ በቀላሉ ትሮችን ወይም እንክብሎችን የወላጆቻቸውን እኩል ስፋት ይስሩ .nav-justified። በትናንሽ ስክሪኖች ላይ፣ የባህር ኃይል ማገናኛዎች ተቆልለዋል።

ትክክለኛ የናቭባር ናቭ ማገናኛዎች በአሁኑ ጊዜ አይደገፉም።

ሳፋሪ እና ምላሽ ሰጪ የተረጋገጠ የባህር ኃይል መርከቦች

ከ v9.1.2 ጀምሮ፣ ሳፋሪ አሳሽዎን በአግድም መቀየር በሚያድስበት ጊዜ በጸዱ የባህር ኃይል ውስጥ ስህተቶችን የሚፈጥርበት ስህተት ያሳያል። ይህ ስህተት በተረጋገጠው የናቭ ምሳሌ ላይም ይታያል ።

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

ለማንኛውም የናቭ አካል (ትሮች ወይም ክኒኖች)፣ ለግራጫ ማያያዣዎች ያክሉ .disabledእና ምንም የማንዣበብ ውጤቶች የሉም

የአገናኝ ተግባር አልተጎዳም።

ይህ ክፍል የ <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>

ናቭባር

Navbars ለመተግበሪያዎ ወይም ለጣቢያዎ እንደ ዳሰሳ ራስጌ የሚያገለግሉ የሜታ ክፍሎች ናቸው። በሞባይል እይታዎች መውደቅ ይጀምራሉ (እና ሊለዋወጡ የሚችሉ ናቸው) እና ያለው የመመልከቻ ስፋት ሲጨምር አግድም ይሆናሉ።

ትክክለኛ የናቭባር ናቭ ማገናኛዎች በአሁኑ ጊዜ አይደገፉም።

የተትረፈረፈ ይዘት

ቡትስትራፕ በእርስዎ ናቭባር ውስጥ ያለው ይዘት ምን ያህል ቦታ እንደሚያስፈልገው ስለማያውቅ፣ ይዘቱ ወደ ሁለተኛ ረድፍ መጠቅለል ላይ ችግሮች ሊያጋጥሙዎት ይችላሉ። ይህንን ለመፍታት የሚከተሉትን ማድረግ ይችላሉ:

  1. የናቭባር ንጥሎችን መጠን ወይም ስፋት ይቀንሱ።
  2. ምላሽ ሰጪ የመገልገያ ክፍሎችን በመጠቀም የተወሰኑ የናቭባር ንጥሎችን በተወሰኑ ስክሪን መጠኖች ደብቅ
  3. የናቭባርዎ በተሰበሰበ እና አግድም ሁነታ መካከል የሚቀያየርበትን ነጥብ ይቀይሩ። ተለዋዋጭውን ያብጁ @grid-float-breakpointወይም የራስዎን የሚዲያ ጥያቄ ያክሉ።

JavaScript ፕለጊን ያስፈልገዋል

ጃቫ ስክሪፕት ከተሰናከለ እና የመመልከቻ ቦታው ጠባብ ከሆነ ናቭባር ከተሰበሰበ ናቭባርን ማስፋት እና በውስጡ ያለውን ይዘት ማየት አይቻልም።.navbar-collapse

ምላሽ ሰጪው navbar የስብስብ ተሰኪው በእርስዎ የBootstrap ስሪት ውስጥ እንዲካተት ይፈልጋል።

የተሰበሰበውን የሞባይል ናቭባር መግቻ ነጥብ በመቀየር ላይ

የመመልከቻ ቦታው ከ ጠባብ በሆነበት ጊዜ ናቭባር ወደ ቁመታዊ የሞባይል እይታው ይወድቃል @grid-float-breakpointእና መመልከቻው ቢያንስ @grid-float-breakpointወርድ ሲሆን ወደ አግድም የሞባይል ያልሆነ እይታ ይሰፋል። ናቭባር ሲፈርስ/ሲሰፋ ለመቆጣጠር ይህንን ተለዋዋጭ በትንሽ ምንጭ ውስጥ ያስተካክሉት። ነባሪ እሴቱ 768px(ትንሹ "ትንሽ" ወይም "ታብሌት" ማያ ገጽ) ነው።

Navbars ተደራሽ ያድርጉ

<nav>ኤለመንት መጠቀሙን ያረጋግጡ ወይም እንደ ሀ ያለ የበለጠ አጠቃላይ አካል ከተጠቀሙ ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች እንደ ምልክት ክልል በግልፅ ለመለየት በእያንዳንዱ ናቭባር ላይ <div>ይጨምሩ ።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>

ጽሁፉን ወደ አንድ በመቀየር የናቭባርን ስም በራስዎ ምስል ይተኩ <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ለትክክለኛው አቀባዊ አሰላለፍ እና ለተሰበሰበ ባህሪ በጠባብ የእይታ ወደቦች ውስጥ ያስቀምጡ። በናቭባር ይዘት ውስጥ የት እንደሚኖር ለመወሰን የአሰላለፍ አማራጮችን ይጠቀሙ።

እንደ .navbar-formመጀመሪያው ጊዜ፣ ብዙ ኮዱን .form-inlineበ 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ክፍሉን በ navbar ውስጥ በአቀባዊ ወደ መሃል ለማኖር በ <button>ውስጥ የማይኖሩ አካላት ላይ ይጨምሩ ።<form>

<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>

.navbar-leftየፍጆታ ክፍሎችን ወይም .navbar-rightየፍጆታ ክፍሎችን በመጠቀም ማገናኛዎችን፣ ቅጾችን፣ አዝራሮችን ወይም ጽሁፍን አሰልፍ ። ሁለቱም ክፍሎች በተጠቀሰው አቅጣጫ የሲኤስኤስ ተንሳፋፊ ይጨምራሉ። ለምሳሌ፣ የናቭ አገናኞችን ለማስተካከል፣ ከተተገበረው <ul>የመገልገያ ክፍል ጋር በተለየ ያስቀምጧቸው።

እነዚህ ክፍሎች የተዋሃዱ .pull-leftእና የተቀላቀሉ ስሪቶች ናቸው .pull-right፣ ነገር ግን በመሣሪያ መጠኖች ውስጥ የናቭባር ክፍሎችን በቀላሉ ለማስተናገድ የሚዲያ ጥያቄዎችን ያካተቱ ናቸው።

ብዙ ክፍሎችን በትክክል ማመጣጠን

Navbars በአሁኑ ጊዜ ከበርካታ .navbar-rightክፍሎች ጋር ገደብ አላቸው። ይዘትን በትክክል ለማስቀመጥ በመጨረሻው .navbar-rightአካል ላይ አሉታዊ ህዳግ እንጠቀማለን። ያንን ክፍል የሚጠቀሙ ብዙ አካላት ሲኖሩ እነዚህ ህዳጎች እንደታሰበው አይሰሩም።

ያንን አካል በ v4 ውስጥ እንደገና መፃፍ ስንችል ይህንን እንደገና እንጎበኘዋለን።

አክል .navbar-fixed-topእና ወደ መሃል እና ወደ ፓድ navbar ይዘት .containerያካትቱ ።.container-fluid

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

የሰውነት መቆንጠጥ ያስፈልጋል

paddingወደ ላይኛው ክፍል ካልጨመሩ በስተቀር ቋሚው የዳሰሳ አሞሌ ሌላ ይዘትዎን ይሸፍነዋል <body>። የእራስዎን እሴቶች ይሞክሩ ወይም የእኛን ቅንጭብ ከታች ይጠቀሙ። ጠቃሚ ምክር፡ በነባሪ የ navbar 50px ከፍተኛ ነው።

body { padding-top: 70px; }

ይህንን ከዋና ቡትስትራፕ CSS በኋላ ማካተትዎን ያረጋግጡ ።

አክል .navbar-fixed-bottomእና ወደ መሃል እና ወደ ፓድ navbar ይዘት .containerያካትቱ ።.container-fluid

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

የሰውነት መቆንጠጥ ያስፈልጋል

paddingወደ ታችኛው ክፍል ካልጨመሩ በስተቀር ቋሚው የዳሰሳ አሞሌ ሌላ ይዘትዎን ይሸፍነዋል <body>። የእራስዎን እሴቶች ይሞክሩ ወይም የእኛን ቅንጭብ ከታች ይጠቀሙ። ጠቃሚ ምክር፡ በነባሪ የ navbar 50px ከፍተኛ ነው።

body { padding-bottom: 70px; }

ይህንን ከዋና ቡትስትራፕ CSS በኋላ ማካተትዎን ያረጋግጡ ።

አንድ ወይም ወደ መሃል እና የንድፍ ዳሳሽ ይዘት በማከል .navbar-static-topእና በማካተት ከገጹ ጋር የሚሸብልል ባለ ሙሉ ስፋት ናቭባር ይፍጠሩ።.container.container-fluid

ከክፍሎቹ በተለየ .navbar-fixed-*፣ በ ላይ ምንም አይነት ንጣፍ መቀየር አያስፈልግዎትም body

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

በማከል የናቭባርን መልክ ያስተካክሉ .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 href="#">Inbox <span class="badge">42</span></a>

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

ራስን መሰባበር

ምንም አዲስ ወይም ያልተነበቡ ንጥሎች ከሌሉ ባጆች በቀላሉ ይወድቃሉ (በ CSS :emptyመራጭ በኩል) ምንም ይዘት ከሌለ በስተቀር።

የአሳሽ ተሻጋሪ ተኳኋኝነት

በInternet Explorer 8 ውስጥ ባጅ በራሱ አይፈርስም ምክንያቱም ለመምረጡ ድጋፍ ስለሌለው :empty

ከንቁ የባህር ኃይል ግዛቶች ጋር ይስማማል።

በክኒን ዳሰሳ ውስጥ ባጆችን በገባሪ ግዛቶች ለማስቀመጥ አብሮ የተሰሩ ቅጦች ተካትተዋል።

<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>

Jumbotron

በጣቢያዎ ላይ ቁልፍ ይዘትን ለማሳየት አጠቃላይ እይታን እንደ አማራጭ ሊያራዝም የሚችል ቀላል ክብደት ያለው ተለዋዋጭ አካል።

ሰላም ልዑል!

ይህ ቀላል የጀግና አሃድ ነው፣ ለቀረበ ይዘት ወይም መረጃ ተጨማሪ ትኩረት ለመጥራት ቀላል የጃምቦሮን አይነት አካል ነው።

ተጨማሪ እወቅ

<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ነባሪውን smallኤለመንት፣ እንዲሁም ሌሎች ብዙ ክፍሎችን (ከተጨማሪ ቅጦች ጋር) መጠቀም ይችላል።

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

ድንክዬዎች

የምስሎችን፣ ቪዲዮዎችን፣ የጽሑፍ እና ሌሎችንም ፍርግርግ በቀላሉ ለማሳየት የ Bootstrapን ፍርግርግ ስርዓት ከትንሽ አክል አካል ጋር ያራዝሙ።

እንደ Pinterest የሚመስል የተለያየ ቁመት እና/ወይም ስፋቶች ድንክዬ ማቅረቢያ እየፈለጉ ከሆነ እንደ ሜሶነሪኢሶቶፕ ወይም ሳልቫቶር ያሉ የሶስተኛ ወገን ተሰኪ መጠቀም ያስፈልግዎታል ።

ነባሪ ምሳሌ

በነባሪ የ Bootstrap ጥፍር አከሎች የተገናኙ ምስሎችን በትንሹ የሚፈለገው ምልክት ለማሳየት የተነደፉ ናቸው።

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

ብጁ ይዘት

በትንሽ ተጨማሪ ምልክት ማድረጊያ እንደ አርእስት፣ አንቀጾች ወይም አዝራሮች ያሉ ማንኛውንም አይነት HTML ይዘት ወደ ድንክዬዎች ማከል ይቻላል።

100% x200

ድንክዬ መለያ

Cras justo odio፣ dapibus ac facilisis in፣ egestas eget quam። Donec id elit non mi porta gravida እና eget metus። Nullam id dolor id nibh ultricies vehicula ut id elit.

አዝራር አዝራር

100% x200

ድንክዬ መለያ

Cras justo odio፣ dapibus ac facilisis in፣ egestas eget quam። Donec id elit non mi porta gravida እና eget metus። Nullam id dolor id nibh ultricies vehicula ut id elit.

አዝራር አዝራር

100% x200

ድንክዬ መለያ

Cras justo odio፣ dapibus ac facilisis in፣ egestas eget quam። Donec id elit non mi porta gravida እና eget metus። Nullam id dolor id nibh ultricies vehicula ut id elit.

አዝራር አዝራር

<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እና ዝጋ ቁልፍ በማከል በማንኛውም ማንቂያ ላይ ይገንቡ።

ጃቫ ስክሪፕት ማንቂያ ተሰኪ ያስፈልገዋል

ሙሉ በሙሉ ለመስራት፣ ሊሰናበቱ የማይችሉ ማንቂያዎች፣ ማንቂያዎቹን መጠቀም አለቦት JavaScript ፕለጊን

<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 ሽግግሮችን እና እነማዎችን ይጠቀማሉ። እነዚህ ባህሪያት በInternet Explorer 9 እና ከዚያ በታች ወይም በቆዩ የፋየርፎክስ ስሪቶች ውስጥ አይደገፉም። ኦፔራ 12 እነማዎችን አይደግፍም።

የይዘት ደህንነት ፖሊሲ (CSP) ተኳኋኝነት

የእርስዎ ድር ጣቢያ የማይፈቅድ የይዘት ደህንነት ፖሊሲ (ሲ.ኤስ.ፒ.) ካለው፣ ከዚህ በታች ባለው ምሳሌያችን ላይ እንደሚታየው የሂደት አሞሌ ስፋቶችን ለማዘጋጀት style-src 'unsafe-inline'የመስመር ውስጥ ባህሪያትን መጠቀም አይችሉም ። styleከጥብቅ ሲኤስፒዎች ጋር የሚጣጣሙትን ስፋቶችን ለማዘጋጀት አማራጭ ዘዴዎች ትንሽ ብጁ ጃቫ ስክሪፕት (ያ ያዘጋጃል element.style.width) ወይም ብጁ የሲኤስኤስ ክፍሎችን መጠቀም ያካትታሉ።

መሰረታዊ ምሳሌ

ነባሪ የሂደት አሞሌ።

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>ያስወግዱት ።.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የሂደት አሞሌን ማከል ያስቡበት።

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>

የሚዲያ ነገር

ከጽሑፋዊ ይዘት ጋር በግራ ወይም በቀኝ የተሰለፈ ምስል የሚያሳዩ የተለያዩ አይነት ክፍሎችን (እንደ ብሎግ አስተያየቶች፣ ትዊቶች፣ ወዘተ) ለመገንባት ረቂቅ የነገር ቅጦች።

ነባሪ ሚዲያ

ነባሪ ሚዲያ ከይዘት እገዳ በስተግራ ወይም ቀኝ ያለውን የሚዲያ ነገር (ምስሎች፣ ቪዲዮ፣ ኦዲዮ) ያሳያል።

የሚዲያ ርዕስ

Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis። Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis በፋሲባስ ውስጥ።

የሚዲያ ርዕስ

Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis። Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis በፋሲባስ ውስጥ።

የተከተተ የሚዲያ ርዕስ

Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis። Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis በፋሲባስ ውስጥ።

የሚዲያ ርዕስ

Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis።

የሚዲያ ርዕስ

Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis።
<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.media-right.media-body

የሚዲያ አሰላለፍ

ምስሎቹ ወይም ሌላ ሚዲያ ከላይ፣ መሃል ወይም ታች ሊደረደሩ ይችላሉ። ነባሪው ከላይ የተሰለፈ ነው።

ከፍተኛ የተጣጣመ ሚዲያ

Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis። Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis በፋሲባስ ውስጥ።

Donec ሴድ ኦዲዮ dui. ኑላም ኩይስ ሪስ ኢገት ኡርና ሞሊስ ኦርናሬ ቬል ኢዩ ሊዮ። Cum sociis natoque penatibus et magnis dis parturient montes፣ nascetur ridiculus mus።

መካከለኛ መስመር ያለው ሚዲያ

Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis። Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis በፋሲባስ ውስጥ።

Donec ሴድ ኦዲዮ dui. ኑላም ኩይስ ሪስ ኢገት ኡርና ሞሊስ ኦርናሬ ቬል ኢዩ ሊዮ። Cum sociis natoque penatibus et magnis dis parturient montes፣ nascetur ridiculus mus።

ከታች የተስተካከለ ሚዲያ

Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis። Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis በፋሲባስ ውስጥ።

Donec ሴድ ኦዲዮ dui. ኑላም ኩይስ ሪስ ኢገት ኡርና ሞሊስ ኦርናሬ ቬል ኢዩ ሊዮ። Cum sociis natoque penatibus et magnis dis parturient montes፣ nascetur ridiculus mus።

<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>

የሚዲያ ዝርዝር

ከትንሽ ተጨማሪ ምልክት ማድረጊያ ጋር፣ በዝርዝሩ ውስጥ ሚዲያን መጠቀም ይችላሉ (ለአስተያየት ክሮች ወይም ለጽሁፎች ዝርዝሮች ይጠቅማል)።

  • የሚዲያ ርዕስ

    Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis።

    የተከተተ የሚዲያ ርዕስ

    Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis።

    የተከተተ የሚዲያ ርዕስ

    Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis።

    የተከተተ የሚዲያ ርዕስ

    Cras sit አሜት ኒብ ሊቤሮ፣ በግራቪዳ ኑላ። ኑላ ቬል ሜቱስ ስሴልሪስክ አንተ ሶሊሲቱዲን ኮሞዶ። Cras purus odio፣ vestibulum in vulputate at፣ tempus viverra turpis።
<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 ይገንቡ።

  • Cras justo odio
  • Dapibus ac facilisis in
  • ሞርቢ ሊዮ ሪስ
  • Porta ac consectetur ac
  • Vestibulum እና eros
<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>

ባጆች

የባጃጆችን አካል ወደ ማንኛውም የዝርዝር ቡድን ንጥል ያክሉ እና በራስ-ሰር በቀኝ በኩል ይቀመጣል።

  • 14Cras justo odio
  • 2Dapibus ac facilisis in
  • 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ያክሉት ።.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

  • Dapibus ac facilisis in
  • Cras sit አሜት ኒብ ሊበሮ
  • Porta ac consectetur ac
  • Vestibulum እና eros
<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፣ ለመለያየት በጠረጴዛው አናት ላይ ተጨማሪ ድንበር እንጨምራለን ።

የፓነል ርዕስ

አንዳንድ ነባሪ የፓነል ይዘት እዚህ። ኑላ ቪታኤ ኤሊት ሊበሮ፣ ፋሬትራ አውጉ። አኔን ላሲኒያ ቢቤንዱም ኑላ ሴድ ኮንሴክቴተር። አኔን ኢዩ ሊዮ ቁም. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# የመጀመሪያ ስም ያባት ስም የተጠቃሚ ስም
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>

ከዝርዝር ቡድኖች ጋር

በማንኛውም ፓነል ውስጥ ባለ ሙሉ ስፋት ዝርዝር ቡድኖችን በቀላሉ ያካትቱ።

የፓነል ርዕስ

አንዳንድ ነባሪ የፓነል ይዘት እዚህ። ኑላ ቪታኤ ኤሊት ሊበሮ፣ ፋሬትራ አውጉ። አኔን ላሲኒያ ቢቤንዱም ኑላ ሴድ ኮንሴክቴተር። አኔን ኢዩ ሊዮ ቁም. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • ሞርቢ ሊዮ ሪስ
  • Porta ac consectetur ac
  • Vestibulum እና eros
<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>

ምላሽ ሰጪ መክተት

አሳሾች በማናቸውም መሳሪያ ላይ በትክክል የሚለካ ውስጣዊ ምጥጥን በመፍጠር በይዘታቸው ስፋት ላይ በመመስረት የቪዲዮ ወይም የተንሸራታች ትዕይንት ልኬቶችን እንዲወስኑ ይፍቀዱላቸው።

ደንቦች በቀጥታ የሚተገበሩት በ,,, እና <iframe>ንጥረ ነገሮች ላይ ነው; ከሌሎች ባህሪያት ጋር ማመሳሰል ሲፈልጉ እንደ አማራጭ ግልጽ የሆነ የዘር ክፍል ይጠቀሙ ።<embed><video><object>.embed-responsive-item

ጠቃሚ ምክር! frameborder="0"ያንን ለእርስዎ ስንሽረው በእርስዎ <iframe>s ውስጥ ማካተት አያስፈልገዎትም ።

<!-- 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>