Source

ናቭስ

ሰነዳትን ኣብነታትን ከመይ ጌርካ ናይ Bootstrap ዝተሓወሶ ናይ ምድህሳስ ኣካላት ትጥቀመሉ።

መሰረት ናቭ

ኣብ ቡትስትራፕ ዝርከብ ምድህሳስ ሓፈሻዊ ምልክትን ቅዲታትን ይካፈል፣ ካብ መሰረታዊ .navክፍሊ ክሳብ ንጡፍን ስንኩልን ኩነታት። ኣብ መንጎ ነፍሲ ወከፍ ቅዲ ንምቕያር ናይ መቐየሪ ክፍልታት ምቕያር።

እቲ መሰረታዊ .navክፍሊ ብፍሌክስቦክስ ዝተሃንጸ ኮይኑ ንኹሉ ዓይነት ናይ ምምራሕ ኣካላት ንምህናጽ ድልዱል መሰረት ዝህብ እዩ። ገለ ቅዲ ምግዳፍ (ምስ ዝርዝር ንምስራሕ)፣ ገለ ሊንክ ፓዲንግ ንዓበይቲ ሂት ከባቢታት፣ ከምኡ’ውን መሰረታዊ ስንክልና ዘለዎ ቅዲ የጠቓልል።

እቲ መሰረታዊ ባእታ ዝኾነ ይኹን ግዝኣት .navዘየጠቓልል እዩ ። .activeእዞም ዝስዕቡ ኣብነታት ነቲ ክፍሊ ዘጠቓልሉ ኮይኖም፡ ብቐንዱ እዚ ፍሉይ ክፍሊ ዝኾነ ፍሉይ ቅዲ ከም ዘየበገስ ንምግላጽ እዩ።

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

ክፍልታት ኣብ ምሉእ ይጥቀሙ፣ ስለዚ ናትካ ማርክኣፕ ልዕሊ ዓቐን ተዓጻጻፊ ክኸውን ይኽእል። ከምዚ ኣብ ላዕሊ ዘሎ s ተጠቐም <ul>፣ ወይ ድማ ናትካ ብ say a <nav>element ምጥቕላል። ምኽንያቱ እቶም .navuses display: flex, እቶም nav links ከምቲ nav items ዝገብርዎ ባህሪ ኣለዎም፣ ግን ብዘይ እቲ ተወሳኺ ምልክት።

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

ዝርከቡ ቅዲታት

ቅዲ .navs component ብ modifiersን utilitiesን ምቕያር። ከም ኣድላይነቱ ምትሕውዋስን ምትሕውዋስን፡ ወይ ድማ ናትካ ምህናጽ።

ልኡል ኣሰላልፋ

ናይ nav ናትካ ኣግማድ ኣሰላልፋ ብ flexbox utilities ቀይር ። ብነባሪ መልክዑ navs ብጸጋም ዝተሰለፉ እዮም፡ ግን ብቐሊሉ ናብ ማእከል ወይ ንየማን ዝተሰለፉ ክትቅይሮም ትኽእል ኢኻ።

ማእከል ዝገበረ ምስ .justify-content-center:

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

ብየማን ዝተሰለፈ ምስ .justify-content-end:

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

ንትኹል

.flex-columnነቲ ናይ ፍሌክስ ኣቕሓ ኣንፈት ምስቲ ዩቲሊቲ ብምቕያር ንናይ ምድህሳስካ ምድማር ። ኣብ ገለ viewports ክትድምርዎም የድልየኩም ኣብ ገለ ግን ኣይኮነን? እቶም ምላሽ ዝህቡ ስሪት ተጠቐሙ (ንኣብነት .flex-sm-column፡ ).

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

ከም ወትሩ፡ ቀጥታዊ ምምራሕ ብዘይ <ul>s እውን ይከኣል እዩ።

<nav class="nav flex-column">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

ትቦታት

ካብ ላዕሊ መሰረታዊ nav ወሲዱ ነቲ .nav-tabsclass ብምውሳኽ tabbed interface ይፈጥር። ብናይ ትብ ጃቫስክሪፕት ፕላግ- ኢንና ሰንጠረዥ ዝግበረሎም ዞባታት ንምፍጣር ተጠቐመሎም ።

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

ከኒናታት

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

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

ምምላእን ምጽዳቕን።

ናትካ .nav's ትሕዝቶታት ምሉእ ዝርከብ ስፍሓት ሓደ ካብ ክልተ መቐየሪ ክፍልታት ንምንዋሕ ኣገድድ። ንኹሉ እቲ ዘሎ ቦታ ብs ናትካ ብመጠኑ ንምምላእ .nav-item፡ ን ተጠቐም .nav-fill። ኩሉ ኣግማድ ቦታ ከም ዝተታሕዘ ኣስተውዕል፣ ግን ኩሉ nav ኣቕሓ ሓደ ዓይነት ስፍሓት የብሉን።

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

-based navigation ክትጥቀም ከለኻ ፡ ኣብቲ መልህቕ <nav>ምእታውካ ኣረጋግጽ ።.nav-item

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

ንማዕረ ስፍሓት ዘለዎም ባእታታት .nav-justified፡ . ኩሉ ኣግማድ ቦታ ብnav links ክሕዝ እዩ፣ ግን ዘይከምዚ ኣብ .nav-fillላዕሊ ዝተጠቕሰ ኩሉ nav item ሓደ ዓይነት ስፍሓት ክህልዎ እዩ።

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

ከምቲ -based navigation .nav-fillዝጥቀም ኣብነት ፡ ኣብ መልህቕ <nav>ምእታውካ ኣረጋግጽ ።.nav-item

<nav class="nav nav-pills nav-justified">
  <a class="nav-item nav-link active" href="#">Active</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link" href="#">Link</a>
  <a class="nav-item nav-link disabled" href="#">Disabled</a>
</nav>

ምስ ፍሌክስ ዩቲሊቲስ ምስራሕ

ምላሽ ዝህቡ nav ፍልልያት እንተድኣ ደሊኻ፡ ተኸታታሊ ፍሌክስቦክስ ዩቲሊቲታት ምጥቃም ኣብ ግምት ኣእቱ ። ዝያዳ ቃላት ዝዛረቡ እኳ እንተኾኑ፡ እዞም ዩቲሊቲታት ኣብ መላእ ምላሽ ዝህቡ ነጥብታት ዝዓበየ ምምዕርራይ የቕርቡ። ኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት፡ nav ናትና ኣብቲ ዝወሓደ ስብራት ነጥቢ ክድምር እዩ፡ ድሕሪኡ ካብቲ ንእሽቶ ነጥቢ ምብታኽ ጀሚሩ ነቲ ዘሎ ስፍሓት ዝመልእ ኣግማድ ኣቀማምጣ ክላመድ እዩ።

<nav class="nav nav-pills flex-column flex-sm-row">
  <a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Disabled</a>
</nav>

ተበጻሕነት ብዝምልከት።

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

ኣስተውዕል፡ ናይ ምድህሳስ ባር፡ ዋላ ብዓይኒ ከም ትቦታት ምስቲ .nav-tabsክፍሊ ቅዲ እንተተገይሩ ፡ ፡ ወይ ባህርያት ክወሃብ የብሉን ። እዚኦም ንዳይናሚክ ትቦ ዘለዎም መተሓላለፍቲ ጥራይ እዮም ዝምጥኑ፣ ከምቲ ኣብ WAI ARIA Authoring Practices ዝተገልጸ ። ንኣብነት ኣብዚ ክፍሊ ንዳይናሚክ ትብ ዘለዎም መተሓላለፍቲ ባህሪ ጃቫስክሪፕት ርአ ።role="tablist"role="tab"role="tabpanel"

ንቑልቁል ዝወርድ ነገራት ምጥቃም

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

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

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

ከኒና ምስ ንጣብ ንጣብ

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

ባህሪ ጃቫስክሪፕት።

ነቲ ትብ ጃቫስክሪፕት ፕላግ-ኢን ተጠቐም-ብውልቂ ወይ ብመንገዲ እቲ ዝተጠርነፈ bootstrap.jsፋይል ኣካትትዎ-ንመገሻ ትቦታትናን ከኒናታትናን ንምንዋሕ፡ ዋላ ብመንገዲ ንቑልቁል ዝወርድ ምልክታታት፡ ትቦ ዝግበረሎም መስኮታት ናይ ከባብያዊ ትሕዝቶ ንምፍጣር።

ጃቫስክሪፕትናutil.js ካብ ምንጪ ትሃንጽ እንተኾንካ ፡ .

ዳይናሚክ ትብ ዘለዎም መተሓላለፍቲ፡ ከምቲ ኣብ WAI ARIA Authoring Practices ዝተገልጸ፡ ኣቃውምኦም ፡ ተግባራቶምን ህሉው ኩነታቶምን ናብ ተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት (ከም ስክሪን ኣንበብቲ) ንምትሕልላፍ role="tablist"፡ , role="tab", role="tabpanel", ከምኡ’ውን ተወሳኺ ባህርያት የድልዮም ።aria-

ዳይናሚክ ትብ ዘለዎም መተሓላለፍቲ ንቑልቁል ዝወርድ ምልክታታት ክሕዙ ከምዘይብሎም ኣስተውዕል ፣ እዚ ንኽልቲኡ ናይ ተጠቃምነትን ተበጻሕነትን ጸገማት ስለዘስዕብ። ብዓይኒ ተጠቃምነት፡ እቲ ኣብዚ እዋን እዚ ዝረአ ትብ መበገሲ ባእታ ብቕጽበት ዘይምርኣይ (ኣብ ውሽጢ እቲ ዕጹው ንቑልቁል ዝወርድ ዝርዝር ስለዘሎ) ምድንጋር ከስዕብ ይኽእል። ብዓይኒ ተበጻሕነት፡ ኣብዚ እዋን’ዚ ነዚ ዓይነት ህንጻ ናብ መደበኛ WAI ARIA ቅዲ ንምምልካት ርትዓዊ ዝኾነ መንገዲ የለን፡ ማለት ንተጠቀምቲ ሓጋዚ ቴክኖሎጂታት ብቐሊሉ ርዱእ ክኸውን ኣይክእልን።

ጥረ ዲኒም ምናልባት ዘይሰማዕካዮም ጂን ሓጺር ኦስቲን። Nesciunt ቶፉ stumptown aliqua, ሬትሮ ሲንት ማስተር ጽሬት. ጭሕሚ ክሊሸ ግዝያዊ፡ ዊልያምስበርግ ካርለስ ቪጋን ሄልቨቲካ። Reprehenderit ስጋ ሬትሮ ኬፊየህ ሕልሚ ዝሕዝ ሲንት. ኮስቢ ስዊተር eu banh mi, qui irure ቴሪ ሪቻርድሰን ኤክስ ስኩዊድ. Aliquip placeat ሳልቭያ ሲሉም ኣይፎን. Seitan aliquip quis ካርዲጋን ኣሜሪካዊ ኣልባሳት፣ ስጋ ዝሸይጥ voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

ንዘድልየካ ንምምጥጣን ንምሕጋዝ፡ እዚ <ul>ከምቲ ኣብ ላዕሊ ዝተገልጸ ብ -based markup ይሰርሕ፡ ወይ ምስ ዝኾነ ፍቓደኛ “roll your own” markup ይሰርሕ። ኣስተውዕል <nav>, ትጥቀም እንተኾንካ ብቐጥታ ክትውስኸሉ የብልካን role="tablist"��� እዚ ነቲ ናይቲ ባእታ መበቆላዊ ተራ ከም ምልክት ምድህሳስ ክሽፍኖ እዩ። ኣብ ክንድኡስ ናብ ኣማራጺ ባእታ (ኣብዚ ኣብ ታሕቲ ዘሎ ኣብነት፡ ቀሊል <div>) ቀይርካ ነቲ <nav>ኣብ ዙርያኡ ጠቕልሎ።

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

እቲ tabs plugin ምስ ከኒናታት እውን ይሰርሕ እዩ።

Consequat occaecat ullamco amet non eiusmod ኖስትሩድ ዶሎረ ኢሩረ ኢንሲዲዱንት ኤስት ዱይስ ኣኒም ሱንት ኦፊስያ። ፉጊያት ቬሊት ፕሮይደንት ኣሊኲፕ ኒሲ ኢንሲዲዱንት ኖስትሩድ ምውስዋስ ኣካላት ፕሮኢደንት ኤስት ኒሲ። ኢሩረ ማግና ኤሊት ኮሞዶ ኣኒም ኤክስ ቬኒየም ኩልፓ ኤዩስሞድ ኢድ ኖስትሩድ ኮፍ ኲፒዳታት ኣብ ቬኒያም ኣድ. Eiusmod consequat eu adipisicing minim anim ኣሊኲፕ ኩፒዳታት ኩልፓ ብዘይካ ኲስ. Occaecat ኮፍ eu ምውስዋስ ኣካላት irure Lorem incididunt nostrud.

Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.

Est quis nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud. Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate consequat non.

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">...</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>
</div>

ከምኡ’ውን ምስ ቀጥታዊ ከኒናታት።

ሲሉም ኣድ ኡት ኢሩረ ግዝያዊ ቬሊት ኖስትሩድ ኦካካት ኡላምኮ ኣሊኳ ኣኒም ሎረም ሲንት. ቬንያም ሲንት ዱይስ ኢንሲዲዱንት ዶ ኤሰ ማግና ሞሊት ብዘይካ ላቦሩም ኪ. Id id reprehenderit sit est eu aliqua occaecat quis et velit ብዘይካ ላቦረም ሞሊት ዶሎረ ኢዩስሞድ። ኢፕሱም ዶሎር ኣብ ኦካካት ኮሞዶ ኤት ቮሉፕቴት ሚኒም ሪፕረሄንደሪት ሞሊት ፓርያተር። Deserunt non laborum enim et cillum eu ደሴሩንት ብዘይካ ea incididunt minim occaecat.

Culpa dolor voluptate do laboris laboris irure reprehenderit id incididunt duis pariatur mollit aute magna pariatur consectetur. Eu veniam duis non ut dolor deserunt commodo et minim in quis laboris ipsum velit id veniam. Quis ut consectetur adipisicing officia excepteur non sit. Ut et elit aliquip labore Lorem enim eu. Ullamco mollit occaecat dolore ipsum id officia mollit qui esse anim eiusmod do sint minim consectetur qui.

Fugiat id quis dolor culpa eiusmod anim velit excepteur proident dolor aute qui magna. Ad proident laboris ullamco esse anim Lorem Lorem veniam quis Lorem irure occaecat velit nostrud magna nulla. Velit et et proident Lorem do ea tempor officia dolor. Reprehenderit Lorem aliquip labore est magna commodo est ea veniam consectetur.

Eu dolore ea ullamco dolore ሎረም id cupidat excepteur reprehenderit consectetur elit id ዶሎር ፕሮኢደንት ኣብ ኲፒዳታት ኦፊስያ። ቮሉፕተት ኤክስፕተር ኮሞዶ ላቦረ ኒሲ ሲሉም ዱይስ ኣሊክዋ ዶ. ኣሊክዋ ኣመት ኪ ሞሊት ኮንሰክተተር ኑላ ሞሊት ቬሊት ኣሊክዋ ቬኒየም ኒሲ ኢድ ዶ ሎረም ደሰሩንት ኣመት። ካልፓ ኡላምኮ ኮፍ ኣዲፒሲሲንግ ላቦረ ኦፊስያ ማግና ኤሊት ኒሲ ኣብ ኣውተ ቴምፖር ኮሞዶ ኢዩስሞድ።

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
      <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
      <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
      <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
    </div>
  </div>
  <div class="col-9">
    <div class="tab-content" id="v-pills-tabContent">
      <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
      <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
      <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
      <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
    </div>
  </div>
</div>

ናይ ዳታ ባህርያት ምጥቃም

ዝኾነ ጃቫስክሪፕት ከይጸሓፍካ ንሓደ ባእታ ብምግላጽ data-toggle="tab"ወይ data-toggle="pill"ኣብ ልዕሊ ሓደ ባእታ ጥራይ ብምግላጽ ንሓደ ትብ ወይ ከኒና ምድህሳስ ከተነቓቕሖ ትኽእል ኢኻ። ነዞም ናይ ዳታ ባህርያት ኣብ .nav-tabsወይ ተጠቐመሎም .nav-pills.

<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

ብመንገዲ ጃቫስክሪፕት።

ብመንገዲ ጃቫስክሪፕት ንዝተፈላለዩ ትቦታት ኣንቅሑ (ነፍሲ ወከፍ ትብ ብውልቂ ክነጥፍ ኣለዎ)፦

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

ንውልቀ ትብታት ብዝተፈላለየ መንገዲ ከተነቓቕሖም ትኽእል ኢኻ፤

$('#myTab a[href="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third tab

ምድምሳስ ውጽኢት

ትቦታት ንኽሃስሱ ንምግባር፡ ኣብ .fadeነፍሲ ወከፍ ወስኸሉ .tab-pane። እቲ ቀዳማይ ትብ ፓን እውን .showነቲ ናይ መጀመርታ ትሕዝቶ ርኡይ ክገብሮ ኣለዎ።

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

ኣገባባት

ዘይተመዓራረዩ ኣገባባትን ምስግጋራትን።

ኩሎም ናይ ኤፒኣይ ሜላታት ዘይተመዓራረዩ ኮይኖም ምስግጋር ይጅምሩ ። እቲ ምስግጋር ምስ ተጀመረ ግን ከኣ ቅድሚ ምውድኡ ናብቲ ደዋሊ ይምለሱ ። ብተወሳኺ፡ ኣብ ሓደ መሰጋገሪ ኣካል ዝግበር ናይ ሜላ ጻውዒት ዕሽሽ ክበሃል እዩ .

ንዝያዳ ሓበሬታ ኣብ ሰነድ ጃቫስክሪፕትና ርአ።

$().tab ዝብል ጽሑፍ ኣሎ።

ንሓደ ናይ ትብ ባእታን ትሕዝቶ መትሓዚን የነቓቕሕ። Tab ኣብ DOM ወይ a data-targetወይ ንሓደ hrefመትሓዚ መስመር ዕላማ ዝገበረ ክህልዎ ኣለዎ።

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
  <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab">...</div>
  <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab">...</div>
</div>

<script>
  $(function () {
    $('#myTab li:last-child a').tab('show')
  })
</script>

.tab('ኣርእይ')

ነቲ ዝተዋህበ ትብ ይመርጽ እሞ ምስኡ ዝተኣሳሰር ሸነኽ የርኢ። ዝኾነ ካልእ ኣቐዲሙ ዝተመርጸ ትብ ዘይተመርጸ ይኸውን እሞ ምስኡ ዝተኣሳሰር ሸነኽ ይሕባእ። ቅድሚ እቲ ትብ ፓን ብጭቡጥ ምርኣይ (ማለት ቅድሚ እቲ shown.bs.tabፍጻመ ምፍጣሩ) ናብቲ ደዋሊ ይምለስ።

$('#someTab').tab('show')

.tab('ምጉሓፍ')

ናይ ሓደ ባእታ ትብ የጥፍኦ።

ፍጻሜታት

ሓድሽ ትብ ኣብ እተርኢ እዋን፡ እቶም ፍጻመታት በዚ ዝስዕብ ቅደም ተኸተል ይትኩሱ፤

  1. hide.bs.tab(ኣብቲ ሕጂ ዘሎ ንጡፍ ትብ)
  2. show.bs.tab(ኣብቲ ክረአ ዘለዎ ትብ)
  3. hidden.bs.tab(ኣብቲ ዝሓለፈ ንጡፍ ትብ፡ ከምቲ ናይቲ hide.bs.tabፍጻመ)
  4. shown.bs.tab(ኣብቲ ሓድሽ-ንጡፍ ገና ዝተራእየ ትብ፡ ከምቲ ናይቲ show.bs.tabፍጻመ)

ድሮ ዝኾነ ትብ ንጡፍ እንተዘይነበረ፡ ሽዑ እቲ hide.bs.taband hidden.bs.tabevents ኣይክተኮስን እዩ።

ዓይነት ፍጻመ መግለፂ
show.bs.tab ዝብል ጽሑፍ ኣሎ። እዚ ፍጻመ ኣብ tab show ይትኩስ፣ ግን ቅድሚ እቲ ሓድሽ tab ምርኣይ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ event.targetንምግባርን ተጠቐም ።event.relatedTarget
shown.bs.tab ዝብል ጽሑፍ ኣሎ። እዚ ፍጻመ ድሕሪ ሓደ ትብ ምርኣይ ኣብ tab show ይትኩስ። ንጡፍ ትብን ነቲ ዝሓለፈ ንጡፍ ትብን (እንተሃልዩ) ብቕደም ተኸተል ዕላማ event.targetንምግባርን ተጠቐም ።event.relatedTarget
hide.bs.tab ዝብል ጽሑፍ ኣሎ። እዚ ፍጻመ ሓድሽ ትብ ክረአ ከሎ ይትኩስ (በዚ ኸኣ እቲ ዝሓለፈ ንጡፍ ትብ ክሕባእ ኣለዎ)። ነቲ ሕጂ ዘሎ ንጡፍ ትብን ነቲ ኣብ ቀረባ እዋን ንጡፍ ዝኸውን ሓድሽ ትብን ብቕደም ተኸተል ዕላማ event.targetንምግባርን ተጠቐም ።event.relatedTarget
ሕቡእ.bs.tab ዝብል ጽሑፍ ኣሎ። እዚ ፍጻመ ሓድሽ ትብ ምስ ተራእየ ይትኩስ (በዚ ኸኣ እቲ ዝሓለፈ ንጡፍ ትብ ይሕባእ)። ነቲ ዝሓለፈ ንጡፍ ትብን ነቲ ሓድሽ ንጡፍ ትብን ዕላማ ንምግባርን ብቕደም ተኸተል event.targetተጠቐም ።event.relatedTarget 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})