ናቪስ

የ Bootstrapን የተካተቱ የአሰሳ ክፍሎችን እንዴት መጠቀም እንደሚቻል ሰነዶች እና ምሳሌዎች።

ቤዝ የባህር ኃይል

ዳሰሳ በBootstrap ውስጥ ይገኛል አጠቃላይ ምልክት ማድረጊያ እና ቅጦች፣ ከመሠረታዊ .navክፍል እስከ ንቁ እና አካል ጉዳተኞች ግዛቶች። በእያንዳንዱ ዘይቤ መካከል ለመቀያየር የመቀየሪያ ክፍሎችን ይቀያይሩ።

የመሠረት .navክፍሉ የተገነባው በ flexbox ነው እና ሁሉንም አይነት የአሰሳ ክፍሎችን ለመገንባት ጠንካራ መሰረት ይሰጣል. አንዳንድ የቅጥ መሻሪያዎችን (ከዝርዝሮች ጋር ለመስራት)፣ አንዳንድ ለትልቅ ተወዳጅ አካባቢዎች አንዳንድ ማገናኛ እና መሰረታዊ የአካል ጉዳተኛ የቅጥ አሰራርን ያካትታል።

የመሠረቱ አካል ማንኛውንም ግዛት .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>የእቃዎችዎ ቅደም ተከተል አስፈላጊ ከሆነ እንደ ከላይ ያሉትን ይጠቀሙ <ol>ወይም የእራስዎን በአንድ <nav>አካል ይንከባለሉ። ምክንያቱም .navአጠቃቀሞች display: flex፣ የባህር ኃይል ማያያዣዎች የባህር ኃይል ዕቃዎች እንደሚያደርጉት ተመሳሳይ ባህሪ አላቸው፣ ነገር ግን ያለ ተጨማሪ ምልክት።

<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>

የሚገኙ ቅጦች

.navበመቀየሪያዎች እና መገልገያዎች የ s አካልን ዘይቤ ይለውጡ ። እንደ አስፈላጊነቱ ይደባለቁ እና ያዛምዱ ወይም የራስዎን ይገንቡ።

አግድም አሰላለፍ

የመርከብዎን አግድም አሰላለፍ በፍሌክስቦክስ መገልገያዎች ይለውጡ ። በነባሪ፣ ናቭስ በግራ የተሰለፉ ናቸው፣ ነገር ግን በቀላሉ ወደ መሃል ወይም ወደ ቀኝ የተሰለፉ ሊለውጧቸው ይችላሉ።

ያማከለ በ .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። በአንዳንድ የእይታ ቦታዎች ላይ መደርደር ይፈልጋሉ ነገር ግን ሌሎች አይደሉም? ምላሽ ሰጪ ስሪቶችን ተጠቀም (ለምሳሌ .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-tabsየታብድ በይነገጽ ለመፍጠር ክፍሉን ይጨምራል። በእኛ ትር ጃቫስክሪፕት ተሰኪ ሊታዩ የሚችሉ ክልሎችን ለመፍጠር ተጠቀምባቸው ።

<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ያስገድዱት። .nav-itemሁሉንም የሚገኘውን ቦታ በእርስዎ s ለመሙላት ፣ ተጠቀም .nav-fill። ሁሉም አግድም ቦታ እንደተያዘ አስተውል፣ ግን እያንዳንዱ የባህር ኃይል ንጥል ነገር አንድ አይነት ስፋት የለውም።

<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>

መሰረት ያደረገ አሰሳን ሲጠቀሙ ለቅጥ አካላት ብቻ እንደሚያስፈልግ <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ከላይ ካለው በተቃራኒ እያንዳንዱ የባህር ኃይል ንጥል ነገር ተመሳሳይ ስፋት ይኖረዋል።

<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 አሰሳ .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 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>

ተደራሽነትን በተመለከተ

የአሰሳ አሞሌን ለማቅረብ ናቪስ እየተጠቀሙ ከሆነ role="navigation"በጣም ምክንያታዊ በሆነው የወላጅ መያዣ ላይ መጨመርዎን ያረጋግጡ <ul>ወይም <nav>በአጠቃላይ አሰሳ ዙሪያ አንድ ኤለመንት ይጠቅልሉ። <ul>በረዳት ቴክኖሎጂዎች እንደ ትክክለኛ ዝርዝር እንዳይታወቅ ስለሚከለክለው ሚናውን በራሱ ላይ አይጨምሩ።

የአሰሳ አሞሌዎች፣ በምስላዊ መልኩ .nav-tabsከክፍል ጋር እንደ ትሮች ቢዘጋጁም፣ መሰጠት እንደሌለባቸው አስተውል ፣role="tablist" ወይም role="tab"ባህሪያት role="tabpanel"። እነዚህ በ ARIA የደራሲ ልምምዶች መመሪያ ትሮች ጥለት ላይ እንደተገለጸው ለተለዋዋጭ የታብ በይነገጾች ብቻ ተገቢ ናቸው ። ለምሳሌ በዚህ ክፍል ውስጥ ለተለዋዋጭ የታብ በይነገጾች የጃቫስክሪፕት ባህሪን ይመልከቱ ።

ተቆልቋይዎችን በመጠቀም

ተቆልቋይ ሜኑዎችን ከትንሽ ተጨማሪ ኤችቲኤምኤል እና ተቆልቋዮቹ ጃቫስክሪፕት ፕለጊን ያክሉ ።

ተቆልቋይ ያላቸው ትሮች

<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 የአጻጻፍ ልምምዶች መመሪያ ትሮች ንድፍ ላይ እንደተገለጸው፣ አወቃቀራቸውን ፣ ተግባራቸውን role="tablist"እና አሁን ያሉበትን ሁኔታ ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች (እንደ ስክሪን አንባቢዎች) ለማስተላለፍ ተጨማሪ ባህሪያትን ይፈልጋሉ። እንደ ምርጥ ልምምድ፣ ወደ አዲስ ገጽ ወይም አካባቢ የሚሄዱ አገናኞች ሳይሆን ተለዋዋጭ ለውጥ የሚያመጡ ቁጥጥሮች ስለሆኑ ለትሮች አባሎችን እንዲጠቀሙ እንመክራለን ።role="tab"role="tabpanel"aria-<button>

የትር ጃቫ ስክሪፕት ፕለጊን ተቆልቋይ ሜኑዎችን የያዙ የታብ በይነገጾችን እንደማይደግፍ ልብ ይበሉ፣ ምክንያቱም እነዚህ ሁለቱንም የመጠቀም እና የተደራሽነት ችግሮች ያስከትላሉ ። ከአጠቃቀም አንፃር፣ አሁን የሚታየው የትር ቀስቅሴ አካል ወዲያውኑ አለመታየቱ (በዝግ ተቆልቋይ ሜኑ ውስጥ እንዳለ) ግራ መጋባትን ይፈጥራል። ከተደራሽነት አንፃር፣ በአሁኑ ጊዜ እንደዚህ አይነት ግንባታ ወደ መደበኛው የWAI ARIA ንድፍ ለማውጣት ምንም አስተዋይ መንገድ የለም፣ ይህም ማለት ለረዳት ቴክኖሎጂዎች ተጠቃሚዎች በቀላሉ ለመረዳት የማይቻል ነው።

ለትር ፓነል የቦታ ያዥ ይዘት። ይህ ከቤት ትር ጋር ይዛመዳል። ኪሎ ሜትሮች ከፍ እንድትል፣ በጣም ከፍ እንድትል ይወስድሃል፣ ምክንያቱም እሷ አንድ አለምአቀፍ ፈገግታ ስላላት ነው። አልጋዬ ላይ የማላውቀው ሰው አለ፣ ጭንቅላቴ ውስጥ እየመታ ነው። በፍፁም. በሌላ ህይወት እንድትቆይ አደርግሃለሁ። ምክንያቱም እኔ ማንኛውንም ነገር ማድረግ እችላለሁ። ለዘውድ ፍልሚያዬ ተስማሚ። የወላጆችዎን መጠጥ ለመስረቅ እና ወደ ጣሪያው ለመውጣት ያገለግል ነበር። ቃና፣ ታን ተስማሚ እና ዝግጁ፣ አዙረው ከበድ ያለ ነው። ፍቅሯ እንደ መድኃኒት ነው። ምርጫ እንዳለኝ የረሳሁት ይመስለኛል።

ለትር ፓነል የቦታ ያዥ ይዘት። ይህ ከመገለጫ ትር ጋር ይዛመዳል። ምርጡን አርክቴክቸር አግኝተዋል። የፓስፖርት ማህተሞች፣ እሷ ኮስሞፖሊታንት ነች። ጥሩ፣ ትኩስ፣ ጨካኝ፣ በመቆለፊያ ላይ አግኝተናል። አንድ ቀን እንደማጣህ አስቤ አላውቅም። ልብህን ትበላለች። መሳምህ ጠፈር ነው፣ እያንዳንዱ እንቅስቃሴ አስማት ነው። እነዚያን ማለቴ እንደ እሷ ነች። ሰላም ወዳጆች እንሂድ። ልክ እንደ ጁላይ 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 ወይም በማንኛውም የዘፈቀደ “የራስዎን ያንከባልልልናል” ማርክ ይሰራል። እየተጠቀሙ ከሆነ በቀጥታ ወደ እሱ <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>

የታብ ፕለጊን እንዲሁ ከጡባዊዎች ጋር ይሰራል።

<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>

እና በአቀባዊ እንክብሎች።

ለትር ፓነል የቦታ ያዥ ይዘት። ይህ ከቤት ትር ጋር ይዛመዳል። ኣብ ማእከል ከተማ ብሉጽ ዝመርሕ ዘሎ ምኽንያት’ውን ኣይተኻእለን። የውሃ መውረጃውን ሲዞሩ ይመልከቱ። ለምን እንዳቆም አትፈቅዱልኝም? ከባድ ዘውዱን የሚለብስ ጭንቅላት ነው። አዎ መላእክትን እናስለቅሳለን, ከላይ በምድር ላይ ዝናብ ይዘንባል. ትዕይንቱን በፊልም 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>

ዘዴዎች

ያልተመሳሰሉ ዘዴዎች እና ሽግግሮች

ሁሉም የኤፒአይ ዘዴዎች ያልተመሳሰሉ ናቸው እና ሽግግር ይጀምራሉ ። ሽግግሩ እንደተጀመረ ግን ከማለቁ በፊት ወደ ደዋዩ ይመለሳሉ ። በተጨማሪም, በመሸጋገሪያ አካል ላይ የሚደረግ ዘዴ ጥሪ ችላ ይባላል .

ለበለጠ መረጃ የእኛን ጃቫስክሪፕት ሰነድ ይመልከቱ ።

$() ትር

የትር አባል እና የይዘት መያዣን ያነቃል። ትሩ 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>

.ታብ('አሳይ')

የተሰጠውን ትር ይመርጣል እና የተገናኘውን መቃን ያሳያል። ከዚህ ቀደም የተመረጠው ሌላ ማንኛውም ትር ያልተመረጠ ይሆናል እና ከእሱ ጋር የተያያዘው መቃን ይደበቃል። የትር መቃን በትክክል ከመታየቱ በፊት (ማለትም shown.bs.tabክስተቱ ከመፈጠሩ በፊት) ወደ ደዋይ ይመለሳል።

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

.ታብ('አስወግድ')

የአንድ ንጥረ ነገር ትርን ያጠፋል.

ክስተቶች

አዲስ ትር ሲያሳዩ ክስተቶቹ በሚከተለው ቅደም ተከተል ይቃጠላሉ፡

hide.bs.tab(በአሁኑ ንቁ ትር ላይ)
show.bs.tab(በሚታየው ትር ላይ)
hidden.bs.tab(በቀደመው ንቁ ትር ላይ፣ hide.bs.tabከዝግጅቱ ጋር አንድ አይነት)
shown.bs.tab(በአዲሱ የነቃ ትር ላይ፣ show.bs.tabከዝግጅቱ ጋር አንድ አይነት)

ምንም ትር አስቀድሞ ገባሪ ካልሆነ፣ ከዚያ ክስተቶቹ hide.bs.tabእና hidden.bs.tabክስተቶቹ አይባረሩም።

የክስተት አይነት	መግለጫ
አሳይ.bs.tab	ይህ ክስተት በትር ትዕይንት ላይ ይቃጠላል፣ ነገር ግን አዲሱ ትር ከመታየቱ በፊት። `event.target`ገባሪውን ትር እና `event.relatedTarget`የቀደመውን ገባሪ ትር (ካለ) በቅደም ተከተል ዒላማ ለማድረግ ይጠቀሙ ።
የሚታየው.bs.tab	ይህ ክስተት ትር ከታየ በኋላ በትብ ትዕይንት ላይ ይቀጣጠላል። `event.target`ገባሪውን ትር እና `event.relatedTarget`የቀደመውን ገባሪ ትር (ካለ) በቅደም ተከተል ዒላማ ለማድረግ ይጠቀሙ ።
ደብቅ.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
})