ናይ መጠወቒ ጉጅለታት

ብዙሓት መጠወቒታት ከም ሓደ ውሁድ ኣካል ንምጽንባር ናይ መጠወቒ ጉጅለታት ተጠቐም። ብተኸታታሊ <a>ወይ <button>ባእታታት ምህናጾም።

ብሉጻት ልምድታት

ንጉጅለታት መጠወቒን መሳርሒታትን ንምጥቃም እዞም ዝስዕቡ መምርሒታት ንመክር፤

• ኩሉ ግዜ ኣብ ሓደ መጠወቒ ጉጅለ ሓደ ዓይነት ባእታ ተጠቐም፣ <a>ወይ <button>.
• ኣብ ሓደ ናይ መጠወቒ ጉጅለ ዝተፈላለየ ሕብሪ ዘለዎም መጠወቒታት ኣይትሕወሱ።
• ኣብ ርእሲ ወይ ኣብ ክንዲ ጽሑፍ ምልክታት ተጠቐም፣ ግን ኣድላዪ ኣብ ዝኾነሉ altን title ጽሑፍን ምሕዋስ ኣረጋግጽ።

ተዛመድቲ ናይ መጠወቒ ጉጅለታት ምስ ንቑልቁል ዝወርድ (ኣብ ታሕቲ ርአ) ብተናጸል ክጽውዑን ኩሉ ግዜ ንዝተሓሰበ ባህሪ ንምምልካት ንቑልቁል ዝወርድ ካሬት ከጠቓልሉን ይግባእ።

ነባሪ ኣብነት

እቲ ኤችቲኤምኤል ብመልህቕ መለለዪ መጠወቒታት ዝተሃንጸ መደበኛ ጉጅለ መጠወቒ ብኸመይ ከም ዝደሊ ኣብዚ ኣሎ፤

<div ክፍሊ = "btn-ጉጅለ" > 
  <መጠወቒ ክፍሊ = "btn" > 1 </መጠወቒ> 
  <መጠወቒ ክፍሊ = "btn" > 2 </መጠወቒ> 
  <መጠወቒ ክፍሊ = "btn" > 3 </መጠወቒ> 
</div> ዝብል ጽሑፍ ኣሎ።

ኣብነት መሳርሒ ባር

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

<div class = "btn-መሳርሒ ባር" > 
  <div ክፍሊ = "btn-ጉጅለ" > 
    ...
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ሳጹን ምልክትን ሬድዮ መኣዛታትን

ጉጅለታት መጠወቒታት ከም ሬድዮታት እውን ክሰርሑ ይኽእሉ እዮም፣ ኣብኡ ሓደ መጠወቒ ጥራይ ንጡፍ ክኸውን ይኽእል፣ ወይ ድማ ዝኾነ ቁጽሪ መጠወቒታት ንጡፍ ክኸውን ዝኽእል ሳጹናት ምልክት። ንዕኡ ዝኸውን ናይ ጃቫስክሪፕት ዶክስ ርአ ።

ጃቫስክሪፕት ረኸቡ »

ኣብ ጉጅለታት መጠወቒታት ዝወድቁ

ርእሲ ንላዕሊ! ንቑልቁል ዝወርድ መጠወቒታት ንግቡእ ምቕራብ ብውልቂ ብናቶም .btn-groupኣብ ውሽጢ ሓደ ክጥቕለሉ ኣለዎም።.btn-toolbar

ሓፈሻዊ ትሕዝቶን ኣብነታትን

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

ኣብነት ምልክት ምግባር

ልክዕ ከም ናይ መጠወቒ ጉጅለ፡ ናትና ምልክት ስሩዕ ምልክት መጠወቒ ይጥቀም፡ ግን ከኣ ብኣጻብዕ ዝቑጸሩ ተወሳኺታት ነቲ ቅዲ ንምጽራይን ናይ Bootstrap ንቑልቁል ዝወርድ jQuery ፕላግ-ኢን ንምድጋፍን እዩ።

<div ክፍሊ = "btn-ጉጅለ" > 
  <a class = "btn ንቑልቁል ዝወርድ-ምቕያር" data-toggle = "ንቑልቁል ዝወርድ" href = "#" >   
    ተግባር
    <span class = "ካሬት" </span> ዝብል ጽሑፍ ኣሎ። 
  </a>
  <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
    <!-- ንቑልቁል ዝወርድ ዝርዝር መላግቦታት -->
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ምስ ኩሉ ዓቐን መጠወቒታት ይሰርሕ

ንቑልቁል ዝወርድ መጠወቒ ብዝኾነ ዓቐን ይሰርሑ። ናትካ መጠወቒ ዓቐን ናብ .btn-large, .btn-small, ወይ .btn-mini.

ጃቫስክሪፕት የድልዮ

ንቑልቁል ዝወርድ መጠወቒ ንኽሰርሕ Bootstrap ዝብል ንቑልቁል ዝወርድ ፕላግ-ኢን የድልዮ።

ኣብ ገለ ኣጋጣሚታት-ከም ሞባይል-ንቑልቁል ዝወርድ ምልክታታት ካብቲ ቪውፖርት ወጻኢ ክዝርጋሕ እዩ። ነቲ ኣሰላልፋ ብኢድካ ወይ ብብሕታዊ ጃቫስክሪፕት ክትፈትሖ ኣለካ።

ሓፈሻዊ ትሕዝቶን ኣብነታትን

ኣብቲ ናይ መጠወቒ ጉጅለ ቅዲታትን ምልክትን ብምህናጽ፡ ብቐሊሉ ናይ ምፍንጫል መጠወቒ ክንፈጥር ንኽእል። ዝተመቕሉ መጠወቒታት ብጸጋም መደበኛ ተግባርን ብየማን ድማ ንቑልቁል ዝወርድ ምቕያርን ምስ ዓውደ-ጽሑፋዊ መላግቦታት ኣለዎም።

ዓቐናት

ነቶም ተወሳኺ ናይ መጠወቒ ክፍልታት .btn-mini, .btn-small, ወይ ንመዐቀኒ ተጠቐም .btn-large።

<div ክፍሊ = "btn-ጉጅለ" > 
  ...
  <ul class = "ንቑልቁል ዝወርድ ዝርዝር ስሕበት-የማን" > 
    <!-- ንቑልቁል ዝወርድ ዝርዝር መላግቦታት -->
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ኣብነት ምልክት ምግባር

ከም ፍሉይ ንቑልቁል ዝወርድ መበገሲ ዝሰርሕ ካልኣይ ናይ መጠወቒ ተግባር ንምሃብ ኣብ ንቡር መጠወቒታት ነስፍሕ።

<div ክፍሊ = "btn-ጉጅለ" > 
  <button class = "btn" > ተግባር </button> ዝብል ጽሑፍ ኣሎ። 
  <button class = "btn ንቑልቁል ዝወርድ-ምቕያር" data-toggle = "ንቑልቁል ዝወርድ" >  
    <span class = "ካሬት" </span> ዝብል ጽሑፍ ኣሎ። 
  </መጠወቒ>
  <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
    <!-- ንቑልቁል ዝወርድ ዝርዝር መላግቦታት -->
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ምውዳቕ ምልክታታት

ንቑልቁል ዝወርድ ምልክታታት ውን ካብቲ ናይ ቀረባ ወላዲ ሓደ ክፍሊ ብምውሳኽ ካብ ታሕቲ ንላዕሊ ምቕያር ይከኣል .dropdown-menu። ኣንፈት ናይቲ .caretክግልብጦን ነቲ ዝርዝር ንባዕሉ ዳግማይ ኣቐሚጡ ኣብ ክንዲ ካብ ላዕሊ ንታሕቲ ካብ ታሕቲ ንላዕሊ ክኸይድ እዩ።

<div class = "btn-ጉጅለ ምውራድ" > 
  <button class = "btn" > ምውራድ </መጠወቒ> 
  <button class = "btn ንቑልቁል ዝወርድ-ምቕያር" data-toggle = "ንቑልቁል ዝወርድ" >  
    <span class = "ካሬት" </span> ዝብል ጽሑፍ ኣሎ። 
  </መጠወቒ>
  <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
    <!-- ንቑልቁል ዝወርድ ዝርዝር መላግቦታት -->
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ሓያል መሰረት ክፍሊ

ኩሎም ኣብዚ ዘለዉ nav ኣካላት- ትቦታት፡ ከኒናታትን ዝርዝርን- ብመንገዲ ክፍሊ ሓደ ዓይነት መሰረታዊ ምልክትን ቅዲታትን ይካፈሉ ።.nav

መዓስ ክትጥቀመሉ ኣለካ

ትቦታትን ከኒናታትን ንክፋላት ትሕዝቶ ወይ ኣብ መንጎ ገጻት ተዛማዲ ትሕዝቶ ንምንቅስቓስ ብሉጻት እዮም።

ኣሰላልፋ ኣካላት

ናይ nav መላግቦታት ንምስምማዕ .pull-left፡ ወይ .pull-rightዩቲሊቲ ክፍልታት ተጠቐም። ክልቲኦም ክፍልታት ኣብቲ ዝተወሰነ ኣንፈት CSS ፍሎት ክውስኹ እዮም።

መሰረታዊ ትቦታት

ስሩዕ <ul>ናይ ሊንክታት ውሰድ እሞ ወስኸሉ .nav-tabs:

• ገዛ
• መግለፂ
• መልእኽትታት

<ul class = "nav nav-tabs" > ዝብል ጽሑፍ ኣሎ። 
  <li class = "ንጡፍ" > ዝብል ጽሑፍ ኣሎ። 
    <a href = "#" > ገዛ </a> 
  </li> ዝብል ጽሑፍ ኣሎ።
  <li><a href = "#" > ... </a></li> ዝብል ጽሑፍ ኣሎ። 
  <li><a href = "#" > ... </a></li> ዝብል ጽሑፍ ኣሎ። 
</ul> ዝብል ጽሑፍ ኣሎ።

መሰረታዊ ከኒናታት

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

• ገዛ
• መግለፂ
• መልእኽትታት

<ul class = "ናቭ ናቭ-ከኒናታት" > 
  <li class = "ንጡፍ" > ዝብል ጽሑፍ ኣሎ። 
    <a href = "#" > ገዛ </a> 
  </li> ዝብል ጽሑፍ ኣሎ።
  <li><a href = "#" > ... </a></li> ዝብል ጽሑፍ ኣሎ። 
  <li><a href = "#" > ... </a></li> ዝብል ጽሑፍ ኣሎ። 
</ul> ዝብል ጽሑፍ ኣሎ።

ከመይ ጌርና ንደምር

ትቦታትን ከኒናታትን ብነባሪ ኣግማድ ስለዝኾኑ፡ ካልኣይ ክፍሊ ጥራይ ወስኹሉ .nav-stacked፡ ፡ ብቐጥታ ተደራሪቦም ንኽመስሉ።

ዝተደራረቡ ትቦታት

• ገዛ
• መግለፂ
• መልእኽትታት

<ul class = "nav nav-tabs nav-ተደራሪቡ" > 
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

ዝተደራረቡ ከኒናታት

• ገዛ
• መግለፂ
• መልእኽትታት

<ul class = "nav nav-ከኒናታት nav-ተደራሪቡ" > 
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

ሃብታም ምኒዩ ቀሊል ተገይሩ።

ኣብ ቡትስትራፕ ትቦታትን ከኒናታትን ዝርከቡ ንቑልቁል ዝወርድ ምልክታታት ልዕሊ ዓቐን ቀለልቲ ኮይኖም ቁሩብ ተወሳኺ ኤችቲኤምኤልን ቀሊል ክብደት ዘለዎ jQuery ፕላግ-ኢንን ጥራይ እዮም ዝሓትቱ።

ናብ ገጽ ጃቫስክሪፕት ኣቕንዕ እሞ ኣብ ቡትስትራፕ ንዝርከቡ ንቑልቁላት ኣብ ምጅማር ዝምልከት ሰነዳት ኣንብብ።

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

• ገዛ
• ሓገዝ
• ንቑልቁል ዝወርድ
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > ዝብል ጽሑፍ ኣሎ። 
  <li class = "ንቑልቁል ዝወርድ" > 
    <a class = "ንቑልቁል ዝወርድ-ምቕያር"። 
       data-toggle = "ንቑልቁል ዝወርድ"።
       href = "#" > ዝብል ጽሑፍ ኣሎ።
        ንቑልቁል ዝወርድ
        <b class = "ሓልዮት" </b> 
      </a>
    <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
      <!-- መላግቦታት -->
    </ul> ዝብል ጽሑፍ ኣሎ።
  </li> ዝብል ጽሑፍ ኣሎ።
</ul> ዝብል ጽሑፍ ኣሎ።

ከኒና ምስ ንጣብ ንጣብ

• ገዛ
• ሓገዝ
• ንቑልቁል ዝወርድ
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "ናቭ ናቭ-ከኒናታት" > 
  <li class = "ንቑልቁል ዝወርድ" > 
    <a class = "ንቑልቁል ዝወርድ-ምቕያር"። 
       data-toggle = "ንቑልቁል ዝወርድ"።
       href = "#" > ዝብል ጽሑፍ ኣሎ።
        ንቑልቁል ዝወርድ
        <b class = "ሓልዮት" </b> 
      </a>
    <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
      <!-- መላግቦታት -->
    </ul> ዝብል ጽሑፍ ኣሎ።
  </li> ዝብል ጽሑፍ ኣሎ።
</ul> ዝብል ጽሑፍ ኣሎ።

ብቅዲ መተግበሪ ዝግበር ምድህሳስ

ዝርዝር Nav ንኣማራጺ ርእሲ ዘለዎም ጉጅለታት ናይ nav መላግቦታት ንምህናጽ ቀሊልን ቀሊልን መገዲ ይህቡ። ኣብ ከም ፋይንደር ኣብ OS X ዝኣመሰሉ ጎድናዊ ባር ዝበለጸ ይጥቀሙ።

ብኣቃውማ፡ ኣብ ሓደ ዓይነት ቀንዲ ቅዲ ናቭ ከም ትቦታትን ከኒናን ዝተሃንጹ ስለዝኾኑ፡ ኣጠቓቕማን ምምዕርራይን ቀጥታዊ እዩ።

ምስ ምልክታት

Nav lists እውን ብኣምሳላት ንምዕጣቕ ቀሊል እዩ። እቲ ግቡእ <i>መለለዪ ምስ ክፍሊ ወስኸሉ እሞ ተዳልዩ ኣለኻ።

ልኡል መከፋፈልቲ

ባዶ ዝርዝር ኣቕሓ ምስ ክፍሊ ብምፍጣር ኣግማድ መከፋፈልቲ ምውሳኽ .divider፣ ከምዚ፤

<ul class = "nav nav-ዝርዝር" > 
  ...
  <li class = "መከፋፈልቲ" </li> 
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

ኣብነት nav list

ዝርዝር ናይ ሊንክታት ውሰድ እሞ ወስኸሉ class="nav nav-list":

<ul class = "nav nav-ዝርዝር" > 
  <li class = "nav-ርእሲ" > 
    ርእሲ ዝርዝር
  </li> ዝብል ጽሑፍ ኣሎ።
  <li class = "ንጡፍ" > ዝብል ጽሑፍ ኣሎ። 
    <a href = "#" > ገዛ </a> 
  </li> ዝብል ጽሑፍ ኣሎ።
  <li> ዝብል ጽሑፍ ኣሎ።
    <a href = "#" > ቤተ መጻሕፍቲ </a> 
  </li> ዝብል ጽሑፍ ኣሎ።
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

ኣብነት ምስ ምልክታት

ተመሳሳሊ ኣብነት፡ ግን ምስ <i>መለለዪታት ንኣርኣያታት።

<ul class = "nav nav-ዝርዝር" > 
  ...
  <li> ዝብል ጽሑፍ ኣሎ።
    <a href = "#" > ዝብል ጽሑፍ ኣሎ። 
      <i class = "ምልክት-መጽሓፍ" </i> 
      ቤተ ንባበ
    </a>
  </li> ዝብል ጽሑፍ ኣሎ።
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

እንታይ ተሓዊስዎ ኣሎ።

ብመንገዲ ትቦታት ኣብ መንጎ ትሕዝቶታት ንምቕያር ብቐሊል ፕላግ-ኢን ትቦታትካ ህይወት ኣምጽእዎም። ቡትስትራፕ ንዝተፈላለዩ ትቦታት ብኣርባዕተ ቅዲታት የዋሃህዶም፡ ላዕለዋይ (ነባሪ)፡ የማን፡ ታሕተዋይን ጸጋምን።

ኣብ መንጎኦም ምቕያር ቀሊል ኮይኑ ኣዝዩ ውሑድ ምልክት ምቕያር ጥራይ እዩ ዝሓትት።

ኣብ ትቦታት ምድምሳስ

ትቦታት ንኽሃስሱ ንምግባር፡ ኣብ .fadeነፍሲ ወከፍ ወስኸሉ .tab-pane።

jQuery ፕላግ-ኢን የድልዮ

ኩሎም tabbable tabs ብቐሊል jQuery ፕላግ-ኢንና እዮም ዝሰርሑ። ብዛዕባ ከመይ ጌርና tabbable tabs ህይወት ከም እንህቦ ኣብ ገጽ javascript docs ዝያዳ ኣንብብ ።

ጃቫስክሪፕት ውሰድ →

ሰንጠረዥ ኣብነት

ትቦታት tabable ንምግባር .tab-pane፡ ንነፍሲ ​​ወከፍ ትብ ፍሉይ መለለዪ ዘለዎ ፍጠር እሞ ኣብ ጠቕልሎ .tab-content።

ንየማን ወይ ጸጋም ዝተሰለፉ ትቦታት፡ ነቲን .nav-tabsኣብ ጠቕልሎ .tab-content።.tabbable

ትኽ ዝበለ ምልክት ምግባር

ሰንጠረዥ ትቦታት ምጥቃም መጠቕለሊ div፣ ስብስብ ትቦታትን ስብስብ ሰንጠረዥ ፓንታት ትሕዝቶን የድሊ።

<div class = "tabbable" > <!-- ንጸጋማይ/የማናይ ትቦታት ጥራይ እዩ ዘድሊ -->  
  <ul class = "nav nav-tabs" > ዝብል ጽሑፍ ኣሎ። 
    <li class = "ንጡፍ" ><a href = "#tab1" data-toggle = "ታብ" > ክፍሊ 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > 2ይ ክፋል </a></li>  
  </ul> ዝብል ጽሑፍ ኣሎ።
  <div class = "ትሕዝቶ-ትብ" > 
    <div class = "ትብ-መስኮት ንጡፍ" id = "ታብ1" >  
      <p> ኣብ ክፍሊ 1 ኣለኹ። </p>
    </div> ዝብል ጽሑፍ ኣሎ።
    <div class = "ትብ-መስኮት" id = "ትብ 2" >  
      <p> ሃውዲ ኣብ 2ይ ክፋል ኣለኹ </p>
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ኣብ ታሕቲ ዝርከቡ ትቦታት

ቅደም ተኸተል ናይቲ ኤችቲኤምኤል ገልቢጥካ ኣብ ታሕቲ ትቦታት ንምቕማጥ ክፍሊ ወስኸሉ።

<div class = "ኣብ ታሕቲ ዝርከቡ ሰንጠረዥ ትቦታት" > 
  <div class = "ትሕዝቶ-ትብ" > 
    ...
  </div> ዝብል ጽሑፍ ኣሎ።
  <ul class = "nav nav-tabs" > ዝብል ጽሑፍ ኣሎ። 
    ...
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ኣብ ጸጋማይ ሸነኽ ዝርከቡ ትቦታት

ነቲ ክፍሊ ቀይርካ ኣብ ጸጋማይ ሸነኽ ትቦታት ኣቐምጦ።

<div class = "ሰንጠረዥ ትቦታት-ጸጋም" > 
  <ul class = "nav nav-tabs" > ዝብል ጽሑፍ ኣሎ። 
    ...
  </ul> ዝብል ጽሑፍ ኣሎ።
  <div class = "ትሕዝቶ-ትብ" > 
    ...
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ኣብ የማናይ ሸነኽ ዝርከቡ ትቦታት

ነቲ ክፍሊ ቀይርካ ኣብ የማን ትቦታት ኣቐምጦ።

<div class = "ሰንጠረዥ ትቦታት-የማን" > 
  <ul class = "nav nav-tabs" > ዝብል ጽሑፍ ኣሎ። 
    ...
  </ul> ዝብል ጽሑፍ ኣሎ።
  <div class = "ትሕዝቶ-ትብ" > 
    ...
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ናቭባር ስካፎልዲንግ

እቲ navbar ንstatic ወይ fixed display ብጽቡቕ ንምውዳብ ውሑዳት divs ጥራይ እዩ ዝሓትት።

<div class = "ናቭባር" > ዝብል ጽሑፍ ኣሎ። 
  <div class = "ናቭባር-ውሽጣዊ" > 
    <div class = "መትሓዚ" > 
      ...
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ጽኑዕ ናቭባር

ነቲ navbar ናብ ላዕሊ ወይ ታሕተዋይ ክፋል ናይቲ viewport ምስ ተወሳኺ ክፍሊ ኣብቲ ደጋዊ div ኣዐርዮ፣ .navbar.

<div class = "ናቭባር ናቭባር-ጽኑዕ-ላዕሊ" > 
  ...
</div> ዝብል ጽሑፍ ኣሎ።

<div class = "ናቭባር ናቭባር-ጽኑዕ-ታሕተዋይ" > 
  ...
</div> ዝብል ጽሑፍ ኣሎ።

ነቲ navbar ክትለጥፎ ከለኻ፡ ነቲ ኣብ ትሕቲኡ ዘሎ ሕቡእ ቦታ ክትሕተት ኣይትረስዕ። 40px ወይ ልዕሊኡ ናይ ፓዲንግ ኣብቲ <body>. እዚ ድሕሪ እቲ ቀንዲ Bootstrap CSSን ቅድሚ እቲ ኣማራጺ ምላሽ ዝህብ CSSን ምውሳኽካ ኣረጋግጽ።

ሽም ምልክት ንግዲ

ስም ትካልካ ወይ ፕሮጀክትካ ንምርኣይ ዝሕግዝ ቀሊል ሊንክ መልህቕ መለለዪ ጥራይ እዩ ዘድልዮ።

<a class = "ብራንድ" href = "#" >  
  ስም ፕሮጀክት
</a>

ቅጥዕታት ኣብ navbar

ንሓደ ቅጥዒ ብግቡእ ቅዲን ኣብ ውሽጢ navbar ንምቕማጥን፡ ከምቲ ኣብ ታሕቲ ዘሎ ዝምልከቶም ክፍልታት ወስኸሉ። ንሓደ ነባሪ ቅጥዒ፡ ኣካትትዎን .navbar-formወይ .pull-leftወይ .pull-rightብግቡእ ንምስላፍን።

<form class = "navbar-ቅጥዒ ስሓብ-ጸጋም" > 
  < ዓይነት ምእታው = "ጽሑፍ" ክፍሊ = "span2" >  
</form> ዝብል ጽሑፍ ኣሎ።

ንዝያዳ ብዓይነት ዝተዳለወ ቅጥዒ ምድላይ ፡ ኣብቲን ኣብቲ ንፍሉያት ቅዲታት ኣብ ናቭባር ዘሎ ምእታው .navbar-searchወስኸሉ form።.search-query

<form class = "navbar-ድለ ስሓብ-ጸጋም" > 
  < ዓይነት ምእታው = "ጽሑፍ" ክፍሊ = "ድለ-ሕቶ" ቦታ = "ድለ" >   
</form> ዝብል ጽሑፍ ኣሎ።

ኣማራጺ ምላሽ ዝህብ ፍልልይ

ከከም መጠን ትሕዝቶ ኣብ ላዕለዋይ ባርካ፡ ነቶም ምላሽ ዝህቡ ኣማራጺታት ከተተግብሮም ትደሊ ትኸውን። ነዚ ንምግባር፡ ትሕዝቶ navካ ኣብ ዝሓዘ div, .nav-collapse.collapse, ጠቕልሎ እሞ፡ ነቲ navbar toggle button ወስኸሉ .btn-navbar፡ ።

<div class = "ናቭባር" > ዝብል ጽሑፍ ኣሎ። 
  <div class = "ናቭባር-ውሽጣዊ" > 
    <div class = "መትሓዚ" > 
 
      <!-- .btn-navbar ከም መቐያየሪ ንዝተዓጽወ ትሕዝቶ ናቭባር ይጥቀመሉ -->
      <a class = "btn btn-navbar" data-toggle = "ምዕራፍ" ዳታ-ዕላማ = ".nav-ምዕራፍ" >   
        <span class = "ምልክት-ባር" </span> 
        <span class = "ምልክት-ባር" </span> 
        <span class = "ምልክት-ባር" </span> 
      </a>
 
      <!-- እቲ ምልክት ንግዲ ክረአ እንተደሊኹም ኣብ ደገ ምግዳፍኩም ኣረጋግጹ -->
      <a class = "brand" href = "#" > ስም ፕሮጀክት </a>  
 
      <!-- ኩሉ ኣብ 940px ወይ ትሕቲኡ ተሓቢኡ እትደልዮ ነገር፡ ኣብ ውሽጢ ኣብዚ ኣቐምጦ -->
      <div class = "ናቭ-ምዕራፍ" > 
        <!-- .ናቭ፡ .ናቭባር-ምድላይ፡ .ናቭባር-ቅርጺ ወዘተ -->
      </div> ዝብል ጽሑፍ ኣሎ።
 
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ናቭ ሊንክታት

Nav ነገራት ብመንገዲ ዘይተሰርዑ ዝርዝር ክትውስኾም ቀለልቲ እዮም።

<ul class = "ናቭ" > ዝብል ጽሑፍ ኣሎ። 
  <li class = "ንጡፍ" > ዝብል ጽሑፍ ኣሎ። 
    <a href = "#" > ገዛ </a> 
  </li> ዝብል ጽሑፍ ኣሎ።
  <li><a href = "#" > መላግቦ </a></li> 
  <li><a href = "#" > መላግቦ </a></li> 
</ul> ዝብል ጽሑፍ ኣሎ።

ብቐሊሉ ብባዶ ዝርዝር ኣቕሓን ቀሊል ክፍልን ኣብ nav መላግቦታትካ መከፋፈልቲ ክትውስኽ ትኽእል ኢኻ። ኣብ መንጎ ሊንክታት እዚ ጥራይ ወስኹሉ፤

<ul class = "ናቭ" > ዝብል ጽሑፍ ኣሎ። 
  ...
  <li class = "መከፋፈልቲ-ቀጥታዊ" </li> 
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

ኣሰላልፋ ኣካላት

ንሓደ nav፡ ቅጥዒ ምድላይ ወይ ጽሑፍ ንምስምማዕ .pull-left፡ ወይ .pull-rightዩቲሊቲ ክፍልታት ተጠቐም። ክልቲኦም ክፍልታት ኣብቲ ዝተወሰነ ኣንፈት CSS ፍሎት ክውስኹ እዮም።

ንቑልቁል ዝወርድ ምልክታታት ምውሳኽ

ኣብ nav ንቑልቁልን ንቑልቁልን ምውሳኽ ልዕሊ ዓቐን ቀሊል እዩ፣ ግን ናይ ጃቫስክሪፕት ፕላግ-ኢንና ምጥቃም የድሊ ።

<ul class = "ናቭ" > ዝብል ጽሑፍ ኣሎ። 
  <li class = "ንቑልቁል ዝወርድ" > 
    <a href = "#" ዝብል ጽሑፍ ኣሎ። 
          class = "ንቑልቁል ዝወርድ-ምቕያር"።
          data-toggle = "ንቑልቁል ዝወርድ" >
          ኣካውንት
          <b class = "ሓልዮት" </b> 
    </a>
    <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
      ...
    </ul> ዝብል ጽሑፍ ኣሎ።
  </li> ዝብል ጽሑፍ ኣሎ።
</ul> ዝብል ጽሑፍ ኣሎ።

ጃቫስክሪፕት ውሰድ →

ኣብ ናቭባር ዘሎ ጽሑፍ

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

ንምንታይ ንጥቀመሎም

Breadcrumb navigation ከም መገዲ ተጠቀምቲ ኣብ ውሽጢ ሓደ ኣፕ ወይ ሳይት ኣበይ ከምዘለዉ ንምርኣይ ዝጥቀመሉ ኮይኑ፡ ንመባእታዊ ምምራሕ ግን ኣይኮነን። ዝያዳ ውጽኢታዊ ንኽኸውን ኣጠቓቕምኦም ውሑድን ሓጺርን ይኹን።

ኣብነታት

ኣብ ብዙሓት ገጻት ክረአ ከም ዝኽእል ዝረአ ሓደ ኣብነት።

• ገዛ

• ገዛ /
• ቤተ ንባበ

• ገዛ /
• ቤተ መጻሕፍቲ /
• ሰነድ

ምልክት ምግባር

HTML ናትካ መደበኛ ዘይተሰርዐ ዝርዝር ምስ መላግቦታት እዩ።

<ul class = "ፍርቂ እንጀራ" > 
  <li> ዝብል ጽሑፍ ኣሎ።
    <a href = "#" > መበገሲ </a> <span class = "መከፋፈልቲ" > / </span>   
  </li> ዝብል ጽሑፍ ኣሎ።
  <li> ዝብል ጽሑፍ ኣሎ።
    <a href = "#" > ቤተ-መጻሕፍቲ </a> <span class = "መከፋፈልቲ" > / </span>   
  </li> ዝብል ጽሑፍ ኣሎ።
  <li class = "ንጡፍ" > መረዳእታ </li> 
</ul> ዝብል ጽሑፍ ኣሎ።

መዓስ ክትጥቀመሉ ኣለካ

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

ስቴትful ናይ ገጽ መላግቦታት

ሊንክታት ንዓኻ ዝምጥን ኮይኑ ኣብ ሓያሎ ኩነታት ምስ ትኽክለኛ ክፍሊ ዝሰርሑ እዮም። .disabledንዘይጥወቕ መላግቦታትን .activeንናይ ሕጂ ገጽን።

ተዓጻጻፊ ኣሰላልፋ

ኣሰላልፋ ናይ ገጻት መላግቦታት ንምቕያር ካብ ክልተ ኣማራጺ ክፍልታት ሓደ ወስኽ፦ .pagination-centeredከምኡውን .pagination-right.

ኣብነታት

እቲ ነባሪ ገጽ ምሃብ ክፍሊ ተዓጻጻፊ ኮይኑ ብብዙሕ ፍልልያት ይሰርሕ።

ምልክት ምግባር

ኣብ ሓደ <div>ተጠቕሊሉ ፣ ገጽ ምግባር <ul>.

<div class = "ገጽ ምጽሓፍ" > 
  <ul> ዝብል ጽሑፍ ኣሎ።
    <li><a href = "#" > ቅድሚት </a></li> 
    <li class = "ንጡፍ" > ዝብል ጽሑፍ ኣሎ። 
      <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 = "#" > ዝቕጽል </a></li> 
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ብዛዕባ ፔጀር

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

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

ፔጀር ሊንክታት እውን ካብቲ ገጻት ዝመጽእ ሓፈሻዊ .disabledክፍሊ ይጥቀሙ።

ነባሪ ኣብነት

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

• ዝሓለፈ
• ቀፃሊ

<ul class = "ፔገር" > ዝብል ጽሑፍ ኣሎ። 
  <li> ዝብል ጽሑፍ ኣሎ።
    <a href = "#" > ዝሓለፈ </a> 
  </li> ዝብል ጽሑፍ ኣሎ።
  <li> ዝብል ጽሑፍ ኣሎ።
    <a href = "#" > ዝቕጽል </a> 
  </li> ዝብል ጽሑፍ ኣሎ።
</ul> ዝብል ጽሑፍ ኣሎ።

ዝተሰለፉ መላግቦታት

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

• ← ዝዓበየ
• ሓድሽ →

<ul class = "ፔገር" > ዝብል ጽሑፍ ኣሎ። 
  <li class = "ቅድሚ ሕጂ ዝነበረ" > 
    <a href = "#" > ← ዝኣረገ </a> 
  </li> ዝብል ጽሑፍ ኣሎ።
  <li class = "ዝቕጽል" > 
    <a href = "#" > ሓድሽ → </a> 
  </li> ዝብል ጽሑፍ ኣሎ።
</ul> ዝብል ጽሑፍ ኣሎ።

ብዝዕባ

ባጅ ንገለ ዓይነት መርኣዪ ወይ ቁጽሪ ንምግላጽ ንኣሽቱን ቀለልትን ባእታታት እዮም። መብዛሕትኡ ግዜ ኣብ ከም Mail.app ዝኣመሰሉ ናይ ኢመይል ዓማዊል ወይ ኣብ ሞባይል ኣፕታት ንመፍለጢታት ምድፋእ ይርከቡ።

ዝርከቡ ክፍልታት

ቡትስትራፕ ኣብ መርበብ ሓበሬታኻ ትሕዝቶ ንምርኣይ ጅግና ኣሃዱ ዝበሃል ቀሊልን ተዓጻጻፍን ኣካል ይህብ። ኣብ ዕዳጋን ትሕዝቶ ዝበዝሖም መርበባት ሓበሬታን ጽቡቕ ይሰርሕ።

ምልክት ምግባር

ትሕዝቶኻ ብላይክ ጠቕልሎ divስለዚ፤

<div class = "ጅግና-ኣሃዱ" > 
  <h1> ርእሲ </h1>
  <p> ምልክት ምልክት </p>
  <p> ዝብል ጽሑፍ ኣሎ።
    <a class = "btn btn-መባእታዊ btn-ዓቢ" > 
      ተወሳኺ ፍለጡ
    </a>
  </p> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

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

<div class = "ገጽ-ርእሲ" > 
  <h1> ኣብነት ርእሲ ገጽ </h1>
</div> ዝብል ጽሑፍ ኣሎ።

ነባሪ ንኣሽቱ ስእልታት

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

ኣዝዩ ንዓኻ ዝምጥን እዩ።

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

• 

  ንእሽቶ ስእሊ ምልክት

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

  ተግባር ተግባር

• 

  ንእሽቶ ስእሊ ምልክት

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

  ተግባር ተግባር

ንምንታይ ንኣሽቱ ስእልታት ንጥቀም

ንኣሽቱ ስእልታት (ቅድሚ ሕጂ .media-gridክሳብ v1.4) ንሽቦታት ስእልታት ወይ ቪድዮታት፡ ውጽኢት ምድላይ ምስሊ፡ ፍርያት ችርቻሮ፡ ፖርትፎሊዮታትን ካልእ ብዙሕን ብሉጻት እዮም። ሊንክ ወይ ስታትቲክ ትሕዝቶ ክኾኑ ይኽእሉ።

ቀሊልን ተዓጻጻፍን ምልክት ምግባር

ንእሽቶ ስእሊ ምልክት ምግባር ቀሊል እዩ-a ulምስ ዝኾነ ቁጽሪ liባእታታት ጥራይ እዩ ዘድሊ። ብተወሳኺ ልዕሊ ዓቐን ተዓጻጻፊ እዩ፣ ዝኾነ ዓይነት ትሕዝቶ ምስ ቁሩብ ዝያዳ ምልክት ጥራይ ትሕዝቶኻ ንምጥቕላል የኽእል።

ዓቐናት ዓምድታት ሽቦ ይጥቀም

ኣብ መወዳእታ፡ እቲ ናይ ንኣሽቱ ስእልታት ክፍሊ ፡ ንመቆጻጸሪ መለክዒታት ንኣሽቱ ስእልታት ፡ ዝጸንሑ ናይ ሽቦ ስርዓት ክፍልታት ይጥቀም-ከም .span2ወይ ።.span3

እቲ ምልክት ምግባር

ከምቲ ኣቐዲሙ ዝተገልጸ፡ ንንኣሽቱ ስእልታት ዘድሊ ምልክት ቀሊልን ቅኑዕን እዩ። ንዝተኣሳሰሩ ምስልታት ዝኸውን ነባሪ ኣወዳድባ ኣብዚ ንርአ :

<ul class = "ንኣሽቱ ስእልታት" > 
  <li ክፍሊ = "span3" > 
    <a href = "#" ክፍሊ = "ንእሽቶ ስእሊ" >  
      <img src = "https://placehold.it/260x180" alt = "" > ዝብል ጽሑፍ ኣሎ።  
    </a>
  </li> ዝብል ጽሑፍ ኣሎ።
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

ንብሕታዊ ትሕዝቶ ኤችቲኤምኤል ኣብ ንኣሽቱ ስእልታት፡ እቲ ምልክት ቁሩብ ይቕየር። ኣብ ዝኾነ ቦታ ብሎክ ደረጃ ትሕዝቶ ንምፍቃድ፡ ነቲ <a>ብ <div>like so ንቕይሮ፤

<ul class = "ንኣሽቱ ስእልታት" > 
  <li ክፍሊ = "span3" > 
    <div class = "ንእሽቶ ስእሊ" > 
      <img src = "https://placehold.it/260x180" alt = "" > ዝብል ጽሑፍ ኣሎ።  
      <h5> ምልክት ንእሽቶ ስእሊ </h5>
      <p> ንእሽቶ ስእሊ ጽሑፍ ልክዕ ኣብዚ... </p>
    </div> ዝብል ጽሑፍ ኣሎ።
  </li> ዝብል ጽሑፍ ኣሎ።
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

ተወሳኺ ኣብነታት

ኩሎም ኣማራጺታትካ ምስ ዝተፈላለዩ ንዓኻ ዝቐርቡ ናይ ሽቦ ክፍልታት ዳህሰሶም። ዝተፈላለዩ ዓቐናት እውን ክትሓዋውሱን ከተመዓራርዩን ትኽእሉ ኢኹም።

ዳግማይ ዝተጻሕፈ መሰረታዊ ክፍሊ

ብ Bootstrap 2፡ ነቲ መሰረታዊ ክፍሊ ኣቃሊልናዮ ኣለና፡ ኣብ .alertክንዲ .alert-message. ነቲ ዝተሓተ ዝድለ ምልክት እውን ኣጉዲልናዮ ኣለና-ኣይፋልን <p>ብነባሪ የድሊ፣ እቲ ደጋዊ ጥራይ <div>.

ሓደ ናይ መጠንቀቕታ መልእኽቲ

ንዝያዳ ነዊሕ ዝጸንሕ ኣካል ምስ ውሑድ ኮድ፡ ነቲ ፍልልይ ዝፈጥር መልክዕ ናይ ብሎክ መጠንቀቕታታት፡ ምስ ዝያዳ መሸፈኒ ዝመጹ መልእኽትታትን ብተለምዶ ዝያዳ ጽሑፍን ኣወጊድናዮ ኣለና። እቲ ክፍሊ ’ ውን ናብ .alert-block.

ምስ ጃቫስክሪፕት ጽቡቕ ይኸይድ

Bootstrap ንመልእኽትታት መጠንቀቕታ ዝድግፍ ብሉጽ jQuery ፕላግ-ኢን ሒዙ ይመጽእ፣ እዚ ድማ ምብራር ቅልጡፍን ቀሊልን ይገብሮ።

እቲ ፕላግ-ኢን ረኸብ »

ኣብነት መጠንቀቕታታት

መልእኽትኻን ኣማራጺ ናይ ምዕጻው ምልክትን ኣብ div ብቐሊል ክፍሊ ጠቕልሎ።

<div class = "መጠንቀቕታ" > 
  <button class = "ዕጾ" data-dismiss = "መጠንቀቕታ" > × </መጠወቒ>  
  <strong> መጠንቀቕታ! </strong> Best check yo self, ብዙሕ ጽቡቕ ኣይትመስልን ኢኻ።
</div> ዝብል ጽሑፍ ኣሎ።

ርእሲ ንላዕሊ! መሳርሒታት iOS href="#"ንመውጽኢ መጠንቀቕታታት ሓደ የድልዮም። ንዕኡን ንናይ መልህቕ ምዕጻው ምልክታት ዝኸውን ናይ ዳታ ባህሪን ምሕዋስካ ኣረጋግጽ። ከም ኣማራጺ፡ ንሓደ ባእታ ምስቲ ናይ ዳታ ባህሪ ክትጥቀም ትኽእል ኢኻ <button>፡ እዚ ድማ ንሕና ንዶክስና ክንገብሮ መሪጽና ኣለና። ፡ ክትጥቀም <button>ከለኻ፡ ከተካትት ኣለካ type="button"ወይ ቅጥዕታትካ ከየቕርቡ ይኽእሉ እዮም።

ነቲ መደበኛ ናይ መጠንቀቕታ መልእኽቲ ብኽልተ ኣማራጺ ክፍልታት ብቐሊሉ ኣናውሖ: .alert-blockንዝያዳ ናይ ምዕሻግን ናይ ጽሑፍ ቁጽጽርን ከምኡውን .alert-headingንዝመሳሰል ኣርእስቲ።

<div class = "ጥንቃቐ መጠንቀቕታ-ዕግት" > 
  <a class = "ዕጾ" data-dismiss = "ጥንቃቐ" href = "#" > × </a>   
  <h4 class = "ኣርእስቲ መጠንቀቕታ" > መጠንቀቕታ! </h4> ዝብል ጽሑፍ ኣሎ። 
  Best check yo self, ንስኻ ኣይኮንካን...
</div> ዝብል ጽሑፍ ኣሎ።

ጌጋ ወይ ሓደጋ

<div class = "ጥንቃቐ መጠንቀቕታ-ጌጋ" > 
  ...
</div> ዝብል ጽሑፍ ኣሎ።

ዓወት

<div class = "ጥንቃቐ መጠንቀቕታ-ዓወት" > 
  ...
</div> ዝብል ጽሑፍ ኣሎ።

ሓበሬታ

<div class = "ጥንቃቐ መጠንቀቕታ-ሓበሬታ" > 
  ...
</div> ዝብል ጽሑፍ ኣሎ።

መሰረታዊ

ነባሪ ናይ ምዕባለ ባር ምስ ቀጥታዊ ምዕባለ።

<div class = "ገስጋስ" > 
  <div ክፍሊ = "ባር"። 
       style = " ስፍሓት : 60 %፤ " ></div> 
</div> ዝብል ጽሑፍ ኣሎ።

ስሪት ዘለዎ

ስሪትድ ኤፍክት ንምፍጣር ግራድየንት ይጥቀም (IE የለን)።

<div class = "ገስጋስ ምዕባለ-ስሪት ዘለዎ" > 
  <div ክፍሊ = "ባር"። 
       style = " ስፍሓት : 20 %፤ " ></div> 
</div> ዝብል ጽሑፍ ኣሎ።

ተንቀሳቓሲ ስእሊ

ነቲ ስሪት ዘለዎ ኣብነት ወሲዱ ህያው ይገብሮ (IE የለን)።

<div class = "ገስጋስ ምዕባለ-ስሪት ዘለዎ።" 
     ንጡፍ" >
  <div ክፍሊ = "ባር"። 
       ቅዲ = " ስፍሓት : 40 %፤ " ></div> 
</div> ዝብል ጽሑፍ ኣሎ።

ተወሳኺ ሕብርታት

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

ስሪት ዘለዎም ባር

ምስቶም ጽኑዓት ሕብርታት ዝመሳሰሉ ዝተፈላለዩ ስሪት ዘለዎም ናይ ምዕባለ ባር ኣለዉና።

ባህርያት

ፕሮግረስ ባርስ CSS3 መሰጋገሪታት ይጥቀሙ፣ ስለዚ ብመንገዲ ጃቫስክሪፕት ኣቢሉ ስፍሓት ብዳይናሚክ እንተ ኣስተኻኺልካዮ፣ ብዘይ ገለ ጸገም ዓቐን ክቕይር እዩ።

.activeነቲ ክፍሊ እንተተጠቒምካሉ ፡ ናይ .progress-stripedምዕባለ ባርካ ነቶም መስመራት ካብ ጸጋም ናብ የማን ህያው ክገብሩሎም እዮም።

ናይ መርበብ ሓበሬታ ደገፍ

ፕሮግረስ ባር ንኹሉ ውጽኢታቶም ንምዕዋት CSS3 gradients, transitions, and animations ይጥቀሙ። እዞም ባህርያት ኣብ IE7-9 ወይ ዝኣረጉ ስሪት ፋየርፎክስ ኣይድገፉን እዮም።

Operaን IEን ኣብዚ እዋን እዚ ኣኒሜሽን ኣይድግፉን እዮም።

ዌልስ ዝበሃል ትካል

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

<div class = "ጽቡቕ" > ዝብል ጽሑፍ ኣሎ። 
  ...
</div> ዝብል ጽሑፍ ኣሎ።

ምልክት ምዕጻው

ከም ሞዳላትን መጠንቀቕታታትን ዝኣመሰሉ ትሕዝቶታት ንምንጻግ ነቲ ሓፈሻዊ ናይ ምዕጻው ምልክት ተጠቐም።

×

<button class = "ዕጾ" > × </መጠወቒ> 

መሳርሒታት iOS ንኣንከር ክትጥቀም እንተደሊኻ ንፍጻመታት ጠውቂ href="#" የድልዮም።

<a class = "ዕጾ" href = "#" > &ግዜታት; </a>