ናቭስ

ሰነዳትን ኣብነታትን ከመይ ጌርካ ናይ 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">Disabled</a>
  </li>
</ul>

ክፍልታት ኣብ ምሉእ ይጥቀሙ፣ ስለዚ ናትካ ማርክኣፕ ልዕሊ ዓቐን ተዓጻጻፊ ክኸውን ይኽእል። <ul>ከምዚ ኣብ ላዕሊ ዝተጠቕሰ s ተጠቐም ፣ <ol>ቅደም ተኸተል ኣቑሑትካ ኣገዳሲ እንተኾይኑ፣ ወይ ድማ ናትካ ብሓደ <nav>ባእታ ምጥቕላል። ምኽንያቱ እቶም .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">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">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">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">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">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">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">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="#">Much 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">Disabled</a>
  </li>
</ul>

-based navigation ክትጥቀም ከለኻ ፡ ንቅዲ ባእታታት ጥራይ ስለ ዘድሊ <nav>ብዘይ ስግኣት ክትገድፎ ትኽእል ኢኻ ።.nav-item.nav-link<a>

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

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

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Much 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">Disabled</a>
  </li>
</ul>

ምስቲ -based navigation .nav-fillዝጥቀም ኣብነት ዝመሳሰል ።<nav>

<nav class="nav nav-pills nav-justified">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Much longer nav link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">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="#">Longer nav 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">Disabled</a>
</nav>

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

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

ኣስተውዕል፡ ናይ ምድህሳስ ባር፡ ዋላ ብዓይኒ ከም ትቦታት ምስቲ .nav-tabsክፍሊ ቅዲ እንተተገይሩ ፡ ፡ ወይ ባህርያት ክወሃብ የብሉን ። እዚኦም ንዳይናሚክ ትብ ዘለዎም መተሓላለፍቲ ጥራይ እዮም ዝምጥኑ፣ ከምቲ ኣብ ARIA Authoring Practices Guide tabs pattern ዝተገልጸ ። ንኣብነት ኣብዚ ክፍሊ ንዳይናሚክ ትብ ዘለዎም መተሓላለፍቲ ባህሪ ጃቫስክሪፕት ርአ ።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-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">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-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">Disabled</a>
  </li>
</ul>

ባህሪ ጃቫስክሪፕት።

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

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

ዳይናሚክ ትብ ዘለዎም መተሓላለፍቲ፡ ከምቲ ኣብ ARIA Authoring Practices Guide tabs pattern ዝተገልጸ ፡ ኣቃውምኦም፡ ተግባራቶምን ህሉው ኩነታቶምን ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት (ከም ስክሪን ኣንበብቲ) ንምትሕልላፍ role="tablist"፡ , role="tab", role="tabpanel", ከምኡ’ውን ተወሳኺ ባህርያት የድልዮም ። aria-ከም ዝበለጸ ልምዲ፡ ንባእታታት ክትጥቀም ንመክር <button>፡ እዚኦም ናብ ሓድሽ ገጽ ወይ ቦታ ዝጓዓዙ መላግቦታት ዘይኮነስ፡ ዳይናሚካዊ ለውጢ ዝቐስቅሱ ቁጽጽራት ስለ ዝኾኑ።

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

ትሕዝቶ መትሓዚ ቦታ ንናይ ትብ ፓነል። እዚኣ ምስቲ ናይ ገዛ ትብ ዝተኣሳሰር እዩ። ማይልስ ቁመት ይወስደካ፣ ኣዝዩ ልዑል፣ 'ምኽንያቱ ንሳ እታ ሓንቲ ኣህጉራዊ ፍሽኽታ ኣለዋ። ኣብ ዓራተይ ሓደ ዘይፈልጦ ሰብ ኣሎ፡ ኣብ ርእሰይ ምድብዳብ ኣሎ። ኣየ ኣይፋልን ። ኣብ ካልእ ህይወት ክትጸንሕ ምገበርኩኻ። 'ምኽንያቱ ኣነ፡ ኣነ ዝኾነ ነገር ዓቕሚ ኣለኒ። ንናይ ዘውዲ ውግአይ ዝምጥን። ናይ ወለድኻ መስተ ሰሪቕካ ናብ ናሕሲ ክትድይብ ትጥቀመሉ። ቃና፣ ታን ፊት ከምኡውን ድሉው፣ ተርን it up cause its gettin 'heavy. ፍቕራ ከም ሓሽሽ እዩ። ምርጫ ከም ዝነበረኒ ረሲዐዮ እየ ዝብል ግምት ኣለኒ።

ትሕዝቶ መትሓዚ ቦታ ንናይ ትብ ፓነል። እዚኣ ምስቲ ፕሮፋይል ትብ ዝተኣሳሰር እዩ። ዝበለጸ ስነ ህንጻ ረኺብካ። ፓስፖርት ማሕተም፡ ኮስሞፖሊታን እያ። ጽቡቕ፡ ፍሩይ፡ ጨካን፡ ኣብ መዕጸዊ ረኺብናዮ። ሓደ መዓልቲ ክስእነካ እየ ኢለ መደብ ኣውጺአ ኣይፈልጥን። ልብኻ ትበልዖ። ስዕመትካ ኮስሚክ እዩ፣ ኩሉ ምንቅስቓስ ስሕበት እዩ። እተን ማለተይ እየ ከም ንሳ እታ ሓንቲ ማለተይ እየ። ሰላም ፍቑራት እስከ ጉዕዞ ንግበር። በቃ እታ ለይቲ ከም 4 ሓምለ ምውናን! ግን ክትባኽን ትመርጽ።

Placeholder content for the tab panel. This one relates to the contact tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-toggle="tab" data-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </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>ኣብ ዙርያኡ ጠቕልሎ።

Placeholder content for the tab panel. This one relates to the profile tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-toggle="tab" data-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-toggle="tab" data-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-toggle="tab" data-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
  </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 ምስ ከኒናታት እውን ይሰርሕ እዩ።

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-toggle="pill" data-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
  </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>

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

ትሕዝቶ መትሓዚ ቦታ ንናይ ትብ ፓነል። እዚኣ ምስቲ ናይ ገዛ ትብ ዝተኣሳሰር እዩ። ኣብ ማእከል ከተማ ብሉዝ ክትደርፍ ርእየካ። ነቲ ፍሳስ ክትከብብ ከለኻ ተዓዘብ። ስለምንታይ ደው ክብል ዘይትፈቕደለይ? ኣኽሊል ዝለበሰ ርእሲ ከቢድ እዩ። እወ መላእኽቲ ካብ ላዕሊ ንላዕሊ ኣብ ምድሪ እናዘንበና ነብዕዩ። Wanna see the show in 3D, ሓደ ፊልም. ይስምዓካ ድዩ፣ ክሳብ ክንድዚ ወረቐት ቀጢን ኮይኑ ይስምዓካ። እወ ወይ ኣይፋልን ምናልባት ኣይፋልን እዩ።

Placeholder content for the tab panel. This one relates to the profile tab. Takes you miles high, so high, 'cause she’s got that one international smile. There's a stranger in my bed, there's a pounding in my head. Oh, no. In another life I would make you stay. ‘Cause I, I’m capable of anything. Suiting up for my crowning battle. Used to steal your parents' liquor and climb to the roof. Tone, tan fit and ready, turn it up cause its gettin' heavy. Her love is like a drug. I guess that I forgot I had a choice.

Placeholder content for the tab panel. This one relates to the messages tab. You got the finest architecture. Passport stamps, she's cosmopolitan. Fine, fresh, fierce, we got it on lock. Never planned that one day I'd be losing you. She eats your heart out. Your kiss is cosmic, every move is magic. I mean the ones, I mean like she's the one. Greetings loved ones let's take a journey. Just own the night like the 4th of July! But you'd rather get wasted.

Placeholder content for the tab panel. This one relates to the settings tab. Her love is like a drug. All my girls vintage Chanel baby. Got a motel and built a fort out of sheets. 'Cause she's the muse and the artist. (This is how we do) So you wanna play with magic. So just be sure before you give it all to me. I'm walking, I'm walking on air (tonight). Skip the talk, heard it all, time to walk the walk. Catch her if you can. Stinging like a bee I earned my stripes.

<div class="row">
  <div class="col-3">
    <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
      <button class="nav-link active" id="v-pills-home-tab" data-toggle="pill" data-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
      <button class="nav-link" id="v-pills-profile-tab" data-toggle="pill" data-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
      <button class="nav-link" id="v-pills-messages-tab" data-toggle="pill" data-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
      <button class="nav-link" id="v-pills-settings-tab" data-toggle="pill" data-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
    </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" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </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 button').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

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

$('#myTab button[data-target="#profile"]').tab('show') // Select tab by name
$('#myTab li:first-child button').tab('show') // Select first tab
$('#myTab li:last-child button').tab('show') // Select last tab
$('#myTab li:nth-child(3) button').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 ወይ data-targetወይ ድማ ሊንክ እንተተጠቒምካሉ hrefኣብ DOM ንዘሎ መትሓዚ መስመር ዝዓለመ ባህሪ ክህልዎ ኣለዎ።

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-toggle="tab" data-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-toggle="tab" data-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="messages-tab" data-toggle="tab" data-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="settings-tab" data-toggle="tab" data-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
  </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 button').tab('show')
  })
</script>

.tab('ኣርእይ')

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

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

.tab('ምጉሓፍ')

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

ፍጻሜታት

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

hide.bs.tab(ኣብቲ ሕጂ ዘሎ ንጡፍ ትብ)
show.bs.tab(ኣብቲ ክረአ ዘለዎ ትብ)
hidden.bs.tab(ኣብቲ ዝሓለፈ ንጡፍ ትብ፡ ከምቲ ናይቲ hide.bs.tabፍጻመ)
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`

$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})