ኣብነት

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

<ul class = "ንቑልቁል ዝወርድ ዝርዝር" ተራ = "ምልክት" aria-labelledby = "ንቑልቁል ዝወርድ ዝርዝር" >   
  <li><a tabindex = "-1" href = "#" > ስጉምቲ </a></li>  
  <li><a tabindex = "-1" href = "#" > ካልእ ተግባር </a></li>  
  <li><a tabindex = "-1" href = "#" > ካልእ ኣብዚ </a></li>  
  <li class = "መከፋፈልቲ" </li> 
  <li><a tabindex = "-1" href = "#" > ዝተፈለየ መላግቦ </a></li>  
</ul> ዝብል ጽሑፍ ኣሎ።

ምልክት ምግባር

ኣብቲ ንቑልቁል ዝወርድ ዝርዝር ጥራይ እንተርኢናዮ፡ እቲ ዘድሊ HTML እንሆ። ናይቲ ንቑልቁል ዝወርድ ትሪግርን ነቲ ንቑልቁል ዝወርድ ዝርዝርን ኣብ ውሽጢ ክትጠቕልሎ ኣለካ .dropdown፣ ወይ ካልእ ን ዝእውጅ ባእታ position: relative;። ድሕሪኡ በቃ ነቲ ምልክት ፍጠር።

<div class = "ንቑልቁል ዝወርድ" > 
  <!-- ንቑልቁል ዝወርድ ንምቕያር ዝሕግዝ ምትእስሳር ወይ መጠወቒ -->
  <ul class = "ንቑልቁል ዝወርድ-ምልክት" ተራ = "ምልክት" aria-labelledby = "dLabel" >   
    <li><a tabindex = "-1" href = "#" > ስጉምቲ </a></li>  
    <li><a tabindex = "-1" href = "#" > ካልእ ተግባር </a></li>  
    <li><a tabindex = "-1" href = "#" > ካልእ ኣብዚ </a></li>  
    <li class = "መከፋፈልቲ" </li> 
    <li><a tabindex = "-1" href = "#" > ዝተፈለየ መላግቦ </a></li>  
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ኣማራጺታት

ምልክታታት ናብ የማን ኣሰልፍዮምን ተወሳኺ ደረጃታት ንቑልቁል ዝወርዱ ዘጠቓልል ምውሳኽን።

ምምዕርራይ ናይቶም ምልክታታት

.pull-rightናብ a ወስኹ ናብ .dropdown-menuየማን ነቲ ንቑልቁል ዝወርድ ዝርዝር ኣሰላልፍዎ።

<ul class = "ንቑልቁል ዝወርድ-ምልክት ስሓብ-የማን" ተራ = "ምልክት" aria-labelledby = "dLabel" >   
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

ናይ ምልክት ዝርዝር ኣማራጺታት ተሰናኺሎም

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

<ul class = "ንቑልቁል ዝወርድ ዝርዝር" ተራ = "ምልክት" aria-labelledby = "ንቑልቁል ዝወርድ ዝርዝር" >   
  <li><a tabindex = "-1" href = "#" > ስሩዕ መላግቦ </a></li>  
  <li class = "ተሰናኺሉ" ><a tabindex = "-1" href = "#" > ተሰናኺሉ መላግቦ </a></li>   
  <li><a tabindex = "-1" href = "#" > ካልእ መላግቦ </a></li>  
</ul> ዝብል ጽሑፍ ኣሎ።

ኣብ ንቑልቁል ዝወርድ ንኡሳን ምልክታታት

ተወሳኺ ደረጃ ናይ ንቑልቁል ዝወርድ ምልክታታት ወስኹ፣ ኣብ ሆቨር ከም ናይ OS X ዝረኣዩ፣ ምስ ገለ ቀለልቲ ተወሳኺ ምልክት ምልክት። .dropdown-submenuኣብ ዝኾነ liኣብ ዝጸንሐ ንቑልቁል ዝወርድ ዝርዝር ንኣውቶማቲክ ቅዲ ምውሳኽ ።

<ul class = "ንቑልቁል ዝወርድ-ምልክት" ተራ = "ምልክት" aria-labelledby = "dLabel" >   
  ...
  <li class = "ንኡስ-ንኡስ ዝርዝር" > 
    <a tabindex = "-1" href = "#" > ተወሳኺ ኣማራጺታት </a>  
    <ul class = "ንቑልቁል ዝወርድ ዝርዝር" > 
      ...
    </ul> ዝብል ጽሑፍ ኣሎ።
  </li> ዝብል ጽሑፍ ኣሎ።
</ul> ዝብል ጽሑፍ ኣሎ።

ኣብነታት

ክልተ መሰረታዊ ኣማራጺታት፡ ምስ ክልተ ተወሳኺ ፍሉያት ፍልልያት።

ንጽል መጠወቒ ጉጅለ

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

<div ክፍሊ = "btn-ጉጅለ" > 
  <button class = "btn" > ጸጋማይ </button> ዝብል ጽሑፍ ኣሎ። 
  <button class = "btn" > ማእከላይ </button> 
  <button class = "btn" > የማናይ </button> 
</div> ዝብል ጽሑፍ ኣሎ።

ብዙሓት ናይ መጠወቒ ጉጅለታት

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

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

ቀጥታዊ መጠወቒ ጉጅለታት

ሓደ ስብስብ መጠወቒታት ብኣግማድ ዘይኮነስ ብቐጥታ ተደራሪቡ ከም ዝረአ ግበር።

<div class = "btn-ጉጅለ btn-ጉጅለ-ቀጥታዊ" > 
  ...
</div> ዝብል ጽሑፍ ኣሎ።

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

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

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

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

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

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

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

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

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

ጃቫስክሪፕት የድልዮ

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

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

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

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

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

ዓቐናት

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

<div ክፍሊ = "btn-ጉጅለ" > 
  <መጠወቒ ክፍሊ = "btn btn-mini" > ተግባር </መጠወቒ> 
  <button class = "btn btn-mini ንቑልቁል ዝወርድ-ምቕያር" 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

መሰረታዊ ትቦታት

ስሩዕ <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 component (tabs, pills, or list), ንሓምላይ መላግቦታትን ዝኾነ hover effects.disabled ን ወስኸሉ ። መላግቦታት ግን ነቲ ባህሪ እንተዘይኣልጊስካዮ፡ ክጥወቑ ዝኽእሉ ኮይኖም ክቕጽሉ እዮም። ከም ኣማራጺ፡ ነቶም ጠውቂ ንምክልኻል ብሕታዊ ጃቫስክሪፕት ከተተግብር ትኽእል ኢኻ።href

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

ኣሰላልፋ ኣካላት

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

ክድምር ዝኽእል

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

ዝተደራረቡ ትቦታት

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

ዝተደራረቡ ከኒናታት

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

ድሮፕዳውንድስ

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

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

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

ከኒና ምስ ንጣብ ንጣብ

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

ናቭ ዝርዝር

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

ኣብነት nav list

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

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

መዝገብኣብ ውሽጢ nav ዝርዝር ንምስፋር class="nav nav-list"፡ ኣብ ዝኾነ ምድቃል ኣካትት <ul>።

ልኡል መከፋፈልቲ

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

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

ጣብላ ናቭ

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

ሰንጠረዥ ኣብነት

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

<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> ዝብል ጽሑፍ ኣሎ።

ኣብ ትቦታት ምድምሳስ

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

jQuery ፕላግ-ኢን የድልዮ

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

ኣብ ዝኾነ ኣንፈት ጣብያ

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

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

<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> ዝብል ጽሑፍ ኣሎ።

መሰረታዊ ናቭባር

ንምጅማር፡ navbars ስታትቲክ እዮም (ኣብ ላዕሊ ዘይተጸንዑ) ኮይኖም ንስም ፕሮጀክትን መሰረታዊ ምድህሳስን ዝድግፉ እዮም። ሓደ ኣብ ዝኾነ ቦታ ኣብ ውሽጢ ሓደ ኣቐምጦ .container፣ እዚ ድማ ስፍሓት መርበብ ሓበሬታኻን ትሕዝቶኻን የቐምጥ።

<div class = "ናቭባር" > ዝብል ጽሑፍ ኣሎ። 
  <div class = "ናቭባር-ውሽጣዊ" > 
    <a class = "brand" href = "#" > ኣርእስቲ </a>  
    <ul class = "ናቭ" > ዝብል ጽሑፍ ኣሎ። 
      <li class = "ንጡፍ" ><a href = "#" > ገዛ </a></li>  
      <li><a href = "#" > መላግቦ </a></li> 
      <li><a href = "#" > መላግቦ </a></li> 
    </ul> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ናይ ናቭባር ኣካላት

ስም ምህርቲ

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

<a class = "brand" href = "#" > ስም ፕሮጀክት </a>  

ናቭ ሊንክታት

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> ዝብል ጽሑፍ ኣሎ።

ቅጥዕታት

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

<form class = "navbar-ቅጥዒ ስሓብ-ጸጋም" > 
  < ዓይነት ምእታው = "ጽሑፍ" ክፍሊ = "span2" >  
  <button type = "submit" class = "btn" > ኣቕርብ </መጠወቒ>  
</form> ዝብል ጽሑፍ ኣሎ።

ቅጥዒ ምድላይ

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

<form class = "navbar-ድለ ስሓብ-ጸጋም" > 
  <input type = "text" class = "ድለ-ሕቶ" ቦታ = "ድለ" >   
</form> ዝብል ጽሑፍ ኣሎ።

ኣሰላልፋ ኣካላት

ናይ 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>መለለዪ ንግቡእ መሪሕነትን ሕብርን ጠቕልል።

ኣማራጺ ናይ ምርኢት ፍልልያት

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

ናብ ላዕሊ ተቐሚጡ

ምውሳኽን .navbar-fixed-topኣብ ትሕቲኡ ዘሎ ሕቡእ ቦታ ብውሑዱ 40px paddingኣብቲ <body>. እዚ ድሕሪ እቲ ቀንዲ Bootstrap CSSን ቅድሚ እቲ ኣማራጺ ምላሽ ዝህብ CSSን ምውሳኽካ ኣረጋግጽ።

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

ናብ ታሕቲ ተቐሚጡ

.navbar-fixed-bottomኣብ ክንድኡ ወስኹሉ ።

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

ስታትቲክ ላዕለዋይ ናቭባር

ብምውሳኽ ምስቲ ገጽ ዝሽክርከር ምሉእ ስፍሓት ዘለዎ ናቭባር ፍጠር .navbar-static-top። ዘይከምቲ .navbar-fixed-topክፍሊ፡ ኣብቲ body.

<div class = "ናቭባር ናቭባር-ስታቲክ-ላዕለዋይ" > 
  ...
</div> ዝብል ጽሑፍ ኣሎ።

ምላሽ ዝህብ ናቭባር

ንዝተዓጽወ ምላሽ ዝህብ ናቭባር ንምትግባር፡ ትሕዝቶ ናቭባርካ ኣብ ዝሓዘ div, .nav-collapse.collapse, ጠቕልሎ እሞ፡ ነቲ ናይ ናቭባር ምቕያር መጠወቒ ወስኸሉ .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 = "nav-ምዕራፍ ምፍራስ" > 
        <!-- .ናቭ፡ .ናቭባር-ምድላይ፡ .ናቭባር-ቅርጺ ወዘተ -->
      </div> ዝብል ጽሑፍ ኣሎ።
 
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ዝተገልበጠ ለውጢ

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

<div class = "ናቭባር ናቭባር-ተገላባጢ" > 
  ...
</div> ዝብል ጽሑፍ ኣሎ።

ኣብነታት

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

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

መደበኛ ገጻት ምግባር

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

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

ኣማራጺታት

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

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

<div class = "ገጽ ምጽሓፍ" > 
  <ul> ዝብል ጽሑፍ ኣሎ።
    <li class = "ተሰናኺሉ" ><a href = "#" > « </a></li> ዝብል ጽሑፍ ኣሎ።  
    <li class = "ንጡፍ" ><a href = "#" > 1 </a></li> ዝብል ጽሑፍ ኣሎ።  
    ...
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ብኣማራጺ ንጡፋት ወይ ዝተሰናኸሉ መልህቕ ንስፓን ክትቅይሮም ትኽእል ኢኻ፡ ንዝተሓሰቡ ቅዲታት እናዓቀብካ ናይ ጠውቂ ተግባር ንምእላይ።

<div class = "ገጽ ምጽሓፍ" > 
  <ul> ዝብል ጽሑፍ ኣሎ።
    <li class = "ስንኩል" ><span> « </span></li> ዝብል ጽሑፍ ኣሎ። 
    <li class = "ንጡፍ" ><span> 1 </span></li> ዝብል ጽሑፍ ኣሎ። 
    ...
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ዓቐናት

ፋንሲ ዝዓበየ ድዩ ዝነኣሰ ገጽ? ንተወሳኺ ዓቐናት .pagination-large, .pagination-small, ወይ ወስኹሉ ።.pagination-mini

<div class = "ገጽ ገጽ-ዓቢ" > 
  <ul> ዝብል ጽሑፍ ኣሎ።
    ...
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።
<div class = "ገጽ ምጽሓፍ" > 
  <ul> ዝብል ጽሑፍ ኣሎ።
    ...
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።
<div class = "ገጽ ገጽ-ንእሽቶ" > 
  <ul> ዝብል ጽሑፍ ኣሎ።
    ...
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።
<div class = "ገጽ ገጽ-ሚኒ" > 
  <ul> ዝብል ጽሑፍ ኣሎ።
    ...
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ኣሰላልፋ

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

<div class = "ገጽ ገጽ ማእከል ዝገበረ" > 
  ...
</div> ዝብል ጽሑፍ ኣሎ።

<div class = "ገጽ ገጽ-የማን" > 
  ...
</div> ዝብል ጽሑፍ ኣሎ።

ፔጀር

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

ነባሪ ኣብነት

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

<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> ዝብል ጽሑፍ ኣሎ።

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

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

<ul class = "ፔገር" > ዝብል ጽሑፍ ኣሎ። 
  <li class = "ቅድሚ ሕጂ ተሰናኺሉ" > 
    <a href = "#" > ← ዝኣረገ </a> 
  </li> ዝብል ጽሑፍ ኣሎ።
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

ስያመታት

ባጅታት

ብቐሊሉ ዝዕጸፍ

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

ጅግና ኣሃዱ

ኣብ መርበብ ሓበሬታኻ ቁልፊ ትሕዝቶ ንምርኣይ ዝሕግዝ ቀሊልን ተዓጻጻፍን ባእታ። ኣብ ዕዳጋን ትሕዝቶ ዝበዝሖም መርበባት ሓበሬታን ጽቡቕ ይሰርሕ።

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

ርእሲ ገጽ

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

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

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

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

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

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

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

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

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

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

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

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

ምልክት ምግባር

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

<ul class = "ንኣሽቱ ስእልታት" > 
  <li ክፍሊ = "span4" > 
    <a href = "#" ክፍሊ = "ንእሽቶ ስእሊ" >  
      <img data-src = "ወናኒ.js/300x200" alt = "" > ዝብል ጽሑፍ ኣሎ።  
    </a>
  </li> ዝብል ጽሑፍ ኣሎ።
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

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

<ul class = "ንኣሽቱ ስእልታት" > 
  <li ክፍሊ = "span4" > 
    <div class = "ንእሽቶ ስእሊ" > 
      <img data-src = "ወናኒ.js/300x200" alt = "" > ዝብል ጽሑፍ ኣሎ።  
      <h3> ምልክት ንእሽቶ ስእሊ </h3>
      <p> መግለጺ ንእሽቶ ስእሊ... </p>
    </div> ዝብል ጽሑፍ ኣሎ።
  </li> ዝብል ጽሑፍ ኣሎ።
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

ተወሳኺ ኣብነታት

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

ነባሪ መጠንቀቕታ

ዝኾነ ጽሑፍን ኣማራጺ ናይ ምብራር መጠወቒን .alertንመሰረታዊ ናይ መጠንቀቕታ መጠንቀቕታ መልእኽቲ ጠቕልሎ።

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

ናይ ምብራር መጠወቒታት

ሞባይል ሳፋሪን ሞባይል ኦፔራን ዳህሰስቲ፡ ብዘይካ እቲ data-dismiss="alert"ባህሪ ፡ ንሓደ መለለዪ href="#"ኣብ ዝጥቀሙሉ እዋን ንዝግበር ምብራር መጠንቀቕታታት ሓደ የድልዮም።<a>

<a href = "#" class = "ዕጾ" ዳታ-ምእላይ = "መጠንቀቕታ" > × </a>   

ከም ኣማራጺ፡ ንሓደ ባእታ ምስቲ ናይ ዳታ ባህሪ ክትጥቀም ትኽእል ኢኻ <button>፡ እዚ ድማ ንሕና ንዶክስና ክንገብሮ መሪጽና ኣለና። ፡ ክትጥቀም <button>ከለኻ፡ ከተካትት ኣለካ type="button"ወይ ቅጥዕታትካ ከየቕርቡ ይኽእሉ እዮም።

< ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "ዕጾ" data-dismiss = "መጠንቀቕታ" > × </መጠወቒ>   

ብመንገዲ ጃቫስክሪፕት መጠንቀቕታታት ምብራር

ንቕልጡፍን ቀሊልን ምብራር መጠንቀቕታታት ነቲ ናይ መጠንቀቕታታት jQuery ፕላግ-ኢን ተጠቐም ።

ኣማራጺታት

ንነዊሕ መልእኽትታት፡ ኣብ ላዕልን ታሕትን ናይቲ ናይ መጠንቀቕታ መጠቕለሊ ዘሎ መሸፈኒ ብምውሳኽ ምውሳኽ .alert-block።

<div class = "ጥንቃቐ መጠንቀቕታ-ዕግት" > 
  < ዓይነት መጠወቒ = "መጠወቒ" ክፍሊ = "ዕጾ" data-dismiss = "መጠንቀቕታ" > × </መጠወቒ>   
  <h4> መጠንቀቕታ! </h4> ዝብል ጽሑፍ ኣሎ።
  Best check yo self, ንስኻ ኣይኮንካን...
</div> ዝብል ጽሑፍ ኣሎ።

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

ናይ ሓደ መጠንቀቕታ ትርጉም ንምቕያር ኣማራጺ ክፍልታት ምውሳኽ።

ጌጋ ወይ ሓደጋ

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

ዓወት

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

ሓበሬታ

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

ኣብነታትን ምልክት ምግባርን።

መሰረታዊ

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

<div class = "ገስጋስ" > 
  <div class = "ባር" ቅዲ = " ስፍሓት : 60 %; " ></div>   
</div> ዝብል ጽሑፍ ኣሎ።

ስሪት ዘለዎ

ስሪት ዘለዎ ውጽኢት ንምፍጣር ግራድየንት ይጥቀም። ኣብ IE7-8 ኣይርከብን እዩ።

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

ተንቀሳቓሲ ስእሊ

ነቶም መስመራት ካብ የማን ናብ ጸጋም ህያው .activeንምግባር ናብ ወስኹሉ ። .progress-stripedኣብ ኩሉ ስሪት IE ኣይርከብን እዩ።

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

ተደራሪቡ ኣሎ።

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

<div class = "ገስጋስ" > 
  <div class = "ባር ባር-ዓወት" ቅዲ = " ስፍሓት : 35 %; " ></div>   
  <div class = "ባር ባር- መጠንቀቕታ" ቅዲ = " ስፍሓት : 20 %; " ></div>   
  <div class = "ባር ባር-ሓደጋ" ቅዲ = " ስፍሓት : 10 %; " ></div>   
</div> ዝብል ጽሑፍ ኣሎ።

ኣማራጺታት

ተወሳኺ ሕብርታት

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

<div class = "ገስጋስ ምዕባለ-ሓበሬታ" > 
  <div class = "ባር" ቅዲ = " ስፍሓት : 20 % " ></div>   
</div> ዝብል ጽሑፍ ኣሎ።
<div class = "ገስጋስ ምዕባለ-ዓወት" > 
  <div class = "ባር" ቅዲ = " ስፍሓት : 40 % " ></div>   
</div> ዝብል ጽሑፍ ኣሎ።
<div class = "ናይ ምዕባለ ምዕባለ-መጠንቀቕታ" > 
  <div class = "ባር" ቅዲ = " ስፍሓት : 60 % " ></div>   
</div> ዝብል ጽሑፍ ኣሎ።
<div class = "ገስጋስ ምዕባለ-ሓደጋ" > 
  <div class = "ባር" ቅዲ = " ስፍሓት : 80 % " ></div>   
</div> ዝብል ጽሑፍ ኣሎ።

ስሪት ዘለዎም ባር

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

<div class = "ገስጋስ ምዕባለ-ሓበሬታ ምዕባለ-ስሪት ዘለዎ" > 
  <div class = "ባር" ቅዲ = " ስፍሓት : 20 % " ></div>   
</div> ዝብል ጽሑፍ ኣሎ።
<div class = "ገስጋስ ምዕባለ-ዓወት ምዕባለ-ስሪት ዘለዎ" > 
  <div class = "ባር" ቅዲ = " ስፍሓት : 40 % " ></div>   
</div> ዝብል ጽሑፍ ኣሎ።
<div class = "ገስጋስ ምዕባለ-መጠንቀቕታ ምዕባለ-ስሪት" > 
  <div class = "ባር" ቅዲ = " ስፍሓት : 60 % " ></div>   
</div> ዝብል ጽሑፍ ኣሎ።
<div class = "ገስጋስ ምዕባለ-ሓደጋ ምዕባለ-ስሪት ዘለዎ" > 
  <div class = "ባር" ቅዲ = " ስፍሓት : 80 % " ></div>   
</div> ዝብል ጽሑፍ ኣሎ።

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

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

ካብ ኢንተርነት ኤክስፕሎረር 10ን ኦፔራ 12ን ዝቐደሙ ስሪት ንኣኒሜሽን ኣይድግፉን እዮም።

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

ነባሪ ኣብነት

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

ኣርእስቲ ሚድያ

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

ኣርእስቲ ሚድያ

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

ኣርእስቲ ሚድያ

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

<div class = "ሚድያ" > ዝብል ጽሑፍ ኣሎ። 
  <a class = "ንጸጋም ስሓብ" href = "#" >  
    <img class = "ሚድያ-ነገር" ዳታ- src = "ወናኒ.js/64x64" >  
  </a>
  <div class = "ሚድያ-ኣካል" > 
    <h4 class = "media-heading" > ርእሲ ሚድያ </h4> 
    ...
 
    <!-- ዝተሰቕለ ናይ ሚድያ ነገር -->
    <div class = "ሚድያ" > ዝብል ጽሑፍ ኣሎ። 
      ...
    </div> ዝብል ጽሑፍ ኣሎ።
  </div> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ዝርዝር ሚድያታት

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

<ul class = "ዝርዝር-ሚድያ" > 
  <li class = "ሚድያ" > 
    <a class = "ንጸጋም ስሓብ" href = "#" >  
      <img class = "ሚድያ-ነገር" ዳታ- src = "ወናኒ.js/64x64" >  
    </a>
    <div class = "ሚድያ-ኣካል" > 
      <h4 class = "media-heading" > ርእሲ ሚድያ </h4> 
      ...
 
      <!-- ዝተሰቕለ ናይ ሚድያ ነገር -->
      <div class = "ሚድያ" > ዝብል ጽሑፍ ኣሎ። 
        ...
     </div> ዝብል ጽሑፍ ኣሎ።
    </div> ዝብል ጽሑፍ ኣሎ።
  </li> ዝብል ጽሑፍ ኣሎ።
</ul> ዝብል ጽሑፍ ኣሎ።

ዌልስ ዝበሃል ትካል

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

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

ኣማራጺ ክፍልታት

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

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

<div class = "ጽቡቕ ጽቡቕ-ንእሽቶ" > 
  ...
</div> ዝብል ጽሑፍ ኣሎ።

ምልክት ምዕጻው

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

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

መሳርሒታት iOS href="#"መልህቕ ክትጥቀም እንተደሊኻ for click events የድልዮም።

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

ናይ ሓጋዚ ክፍልታት

ንንኣሽቱ ምርኢት ወይ ናይ ባህሪ ምትዕርራይ ቀለልቲ፣ ትኹረት ዝገበሩ ክፍልታት።

.ስሓብ-ጸጋም

ሓደ ባእታ ንጸጋም ኣንሳፈፍ

class = "ስሓብ-ጸጋም"።

. ስሓብ - ጸጋም { .
  float : ንጸጋም ;
} ።

.ስሓብ-የማን

ሓደ ባእታ ንየማን ኣንሳፈፍ

class = "ስሓብ-የማን"።

. ስሓብ - የማን { .
  ተንሳፋፊ : የማን ;
} ።

.ድምጺ ኣልቦ

ናይ ሓደ ባእታ ሕብሪ ናብ ምቕያር#999

class = "ተዓጽዩ"።

. ድምጺ ኣልቦ {
  ሕብሪ : #999፤ 
} ።

.ንጹር ምእራም

floatነቲ ኣብ ዝኾነ ባእታ ኣጽርዮ

class = "ምጽራይ"።

. ንጹር ምእራም {
  * ዙም : 1 ፤ 
  &: ቅድሚ ፣
  &: ድሕሪ {
    ምርኢት : ሰደቓ ;
    ትሕዝቶ : "" ; 
  } ።
  &: ድሕሪ {
    ንጹር : ክልቲኦም ;
  } ።
} ።