ናይ መጠወቒ ጉጅለታት

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

ንዝያዳ ዝተሓላለኹ ፕሮጀክትታት ውን ስብስባት ናይ <div class="btn-group">ናብ ሓደ ከተዋሃህድ ትኽእል ኢኻ ።<div class="btn-toolbar">

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

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

<div class="btn-ጉጅለ"> ዝብል ጽሑፍ ኣሎ።
  <a class="btn" href="#">1</a> ዝብል ጽሑፍ ኣሎ።
  <a class="btn" href="#">2</a> ዝብል ጽሑፍ ኣሎ።
  <a class="btn" href="#">3</a> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

ከምኡ’ውን ምስ መሳርሒ ባር ንብዙሓት ጉጅለታት፤

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

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

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

ጃቫስክሪፕት ረኸቡ »

ርእሲ ንላዕሊ

CSS ንጉጅለታት መጠወቒ ኣብ ፍሉይ ፋይል ኣሎ፡ button-groups.less።

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

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

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

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

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

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

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

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

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

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

ሓያል መሰረት ክፍሊ

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

ስለምንታይ ትቦታትን ከኒናታትን

ኣብ ቡትስትራፕ ዝርከቡ ትቦታትን ከኒናታትን ኣብ ሓደ <ul>ምስ ተመሳሳሊ ቀንዲ ኤችቲኤምኤል፡ ዝርዝር መላግቦታት ዝተሃንጹ እዮም። ኣብ መንጎ ትቦታት ወይ ከኒናታት ብክላስ ጥራይ ምልውዋጥ።

ክልቲኦም ኣማራጺታት ንንኡሳን ክፍልታት ትሕዝቶ ወይ ኣብ መንጎ ገጻት ተዛማዲ ትሕዝቶ ንምንቅስቓስ ብሉጻት እዮም።

መሰረታዊ ትቦታት

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

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

<ul class="ናቭ ናቭ-ታብታት">
  <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="ናቭ ናቭ-ታብስ ናቭ-ተደራሪቡ">
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

ዝተደራረቡ ከኒናታት

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

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

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

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

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

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

• ገዛ
• መግለፂ
• ንቑልቁል ዝወርድ
  • ተግባር
  • ካልእ ስጉምቲ
  • ኣብዚ ካልእ ነገር
  • ዝተፈለየ ሊንክ

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

ከኒና ምስ ንጣብ ንጣብ

• ገዛ
• መግለፂ
• ንቑልቁል ዝወርድ
  • ተግባር
  • ካልእ ስጉምቲ
  • ኣብዚ ካልእ ነገር
  • ዝተፈለየ ሊንክ

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

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

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

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

ምስ ምልክታት

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

ኣብነት nav list

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

<ul class="nav nav-ዝርዝር">
  <li class="ናቭ-ርእሲ">
    ርእሲ ዝርዝር
  </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> ዝብል ጽሑፍ ኣሎ።

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

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

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

ሰንጠረዥ ኣብነት

ትቦታት tabbable ንምግባር፡ ነቲ .nav-tabsኣብ ካልእ div ብ class ጠቕልሎ .tabbable።

ብሕታዊ ናይ jQuery ተወሰኽቲ

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

ጃቫስክሪፕት ውሰድ →

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

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

<div class="ኣብ ታሕቲ ዘሎ ሰንጠረዥ ትቦታት">
  <div class="ትሕዝቶ-ትብ">
    ...
  </div> ዝብል ጽሑፍ ኣሎ።
  <ul class="ናቭ ናቭ-ታብታት">
    ...
  </ul> ዝብል ጽሑፍ ኣሎ።
</div> ዝብል ጽሑፍ ኣሎ።

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

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

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

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

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

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

ናቭባር ስካፎልዲንግ

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

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

ነቲ ናቭባር ኣብ ላዕሊ ናይቲ ቪውፖርት ከም ዝጸንዕ ንምግባር .navbar-fixed-top፡ ኣብቲ ደጋዊ div ወስኸሉ .navbar፡ ። padding-top: 40px;ኣብ CSS ናትካ፡ ኣብ ልዕሊ ናትካ ብምውሳኽ ዘስዕቦ ምድብላቕ እውን ክትሕተት ከድልየካ እዩ <body>።

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

ሽም ምልክት ንግዲ

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

<a class="ብራንድ" href="#"> ዝብል ምዃኑ ይፍለጥ
  ስም ፕሮጀክት
</a>

ቅጥዒ ምድላይ

ቅጥዕታት ምድላይ ኣብቲ navbar ምስቲ .navbar-searchክፍሊ ብሕታዊ ቅዲታት ይቕበሉ። ንዕኡ ንምስላፍ .pull-leftወይ .pull-rightኣብ ልዕሊ እቲ ኣካትት ።form

<form class="ናቭባር-ድለ ስሓብ-ጸጋም">
  <input type="text" class="ድለ-ሕቶ" ቦታ="ድለ">
</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="ምዕራፍ" ዳታ-ዕላማ=".ናቭ-ምዕራፍ">
        <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="nav"> ዝብል ጽሑፍ ኣሎ።
  <li class="ንጡፍ"> ዝብል ምዃኑ ይፍለጥ
    <a href="#">ገዛ</a>
  </li> ዝብል ጽሑፍ ኣሎ።
  <li><a href="#">ምትእስሳር</a></li>
  <li><a href="#">ምትእስሳር</a></li>
</ul> ዝብል ጽሑፍ ኣሎ።

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

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

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

ጃቫስክሪፕት ውሰድ →

ንምንታይ ንጥቀመሎም

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

ኣብነታት

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

• ገዛ

• ገዛ /
• ቤተ ንባበ

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

ምልክት ምግባር

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

<ul class="ፍርቂ እንጀራ">
  <li> ዝብል ጽሑፍ ኣሎ።
    <a href="#">ገዛ</a> <span class="divider">/</span> ዝብል ጽሑፍ ኣሎ።
  </li> ዝብል ጽሑፍ ኣሎ።
  <li> ዝብል ጽሑፍ ኣሎ።
    <a href="#">ቤተ መጻሕፍቲ</a> <span class="divider">/</span> ዝብል ጽሑፍ ኣሎ።
  </li> ዝብል ጽሑፍ ኣሎ።
  <li class="ንጡፍ"> ዝብል ምዃኑ ይፍለጥ
    <a href="#">ዳታ</a> ዝብል ምዃኑ ይፍለጥ
  </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> ዝብል ጽሑፍ ኣሎ።

ብዛዕባ ፔጀር

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

ነባሪ ኣብነት

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

• ዝሓለፈ
• ቀፃሊ

<ul class="pager"> ዝብል ጽሑፍ ኣሎ።
  <li> ዝብል ጽሑፍ ኣሎ።
    <a href="#">ቅድሚ ሕጂ ዝነበረ</a>
  </li> ዝብል ጽሑፍ ኣሎ።
  <li> ዝብል ጽሑፍ ኣሎ።
    <a href="#">ዝቕጽል</a>
  </li> ዝብል ጽሑፍ ኣሎ።
</ul> ዝብል ጽሑፍ ኣሎ።

ዝተሰለፉ መላግቦታት

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

• ← ዝዓበየ
• ሓድሽ →

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

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

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

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

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

• 

  ንእሽቶ ስእሊ ምልክት

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

  ተግባር ተግባር

• 

  ንእሽቶ ስእሊ ምልክት

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

  ተግባር ተግባር

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

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

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

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

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

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

እቲ ምልክት ምግባር

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

<ul class="ንእሽቶ ስእልታት">
  <li class="span3"> ዝብል ጽሑፍ ኣሎ።
    <a href="#" class="ንእሽቶ ስእሊ">
      <img src="https://placehold.it/260x180" ዝብል ጽሑፍ ንምርካብ ኣብዚ ንጠውቅ
    </a>
  </li> ዝብል ጽሑፍ ኣሎ።
  ...
</ul> ዝብል ጽሑፍ ኣሎ።

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

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

ተወሳኺ ኣብነታት

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

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

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

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

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

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

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

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

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

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

<div class="ኣለርት"> ዝብል ጽሑፍ ኣሎ።
  <a class="close">×</a> ዝብል ጽሑፍ ኣሎ።
  <strong> መጠንቀቕታ!</strong> Best check yo self, ብዙሕ ጽቡቕ ኣይትመስልን ኢኻ።
</div> ዝብል ጽሑፍ ኣሎ።

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

<div class="መጠንቀቕታ-ምዕጋት">
  <a class="close">×</a> ዝብል ጽሑፍ ኣሎ።
  <h4 class="alert-heading"> መጠንቀቕታ!</h4>
  Best check yo self, ንስኻ ኣይኮንካን...
</div> ዝብል ጽሑፍ ኣሎ።

ጌጋ ወይ ሓደጋ

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

ዓወት

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

ሓበሬታ

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

መሰረታዊ

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

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

ስሪት ዘለዎ

ስሪት ዘለዎ ውጽኢት ንምፍጣር ግራድየንት ይጥቀም።

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

ተንቀሳቓሲ ስእሊ

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

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

ተወሳኺ ሕብርታት

ፕሮግረስ ባር ገለ ካብቶም ተመሳሳሊ ናይ ክፍሊ ኣስማት ከም መጠወቒታትን መጠንቀቕታታትን ንተመሳሳሊ ቅዲ ይጥቀሙ።

• .progress-info
• .progress-success
• .progress-danger

ከም ኣማራጺ ድማ፡ ነቶም LESS ፋይላት ክትጥዕሞምን ናይ ገዛእ ርእስኻ ሕብርታትን ዓቐናትን ክትጥቕልሎምን ትኽእል ኢኻ።

ባህርያት

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

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

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

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

ኦፔራ ኣብዚ እዋን እዚ ኣኒሜሽን ኣይድግፍን እዩ።

ዌልስ ዝበሃል ትካል

ነቲ ዒላ ከም ቀሊል ጽልዋ ኣብ ሓደ ባእታ ተጠቐመሉ ንናይ ውሽጢ ውጽኢት ምሃብ።

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

ባጅታት

ኣብ ሓደ ባእታ ንዘይተነበበ ቁጽሪ ወይ ከም ቀሊል መመልከቲ ባጅ ተጠቐም።

<span class="badge">3</div> ዝብል ጽሑፍ ኣሎ።

ምልክት ምዕጻው

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

×

<a class="close">&ግዜታት;</a> ዝብል ጽሑፍ ኣሎ።