Source

Навс

Bootstrap-д орсон навигацийн бүрэлдэхүүн хэсгүүдийг хэрхэн ашиглах тухай баримт бичиг, жишээнүүд.

Үндсэн навигаци

.navBootstrap-д ашиглах боломжтой навигаци нь үндсэн ангиас идэвхтэй болон идэвхгүй төлөв хүртэлх ерөнхий тэмдэглэгээ, хэв маягийг хуваалцдаг . Загвар бүрийн хооронд шилжихийн тулд өөрчлөгч ангиудыг солино уу.

Үндсэн .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" href="#">Disabled</a>
  </li>
</ul>

Ангиудыг бүхэлд нь ашигладаг тул таны тэмдэглэгээ маш уян хатан байж болно. <ul>Дээрх шиг s-г ашиглана уу эсвэл элемент гэж хэлэн өөрөө өнхрүүлээрэй <nav>. Хэрэглээний хувьд navigation холбоосууд .navнь display: flexnavigation-ийн элементүүдтэй адилхан ажилладаг боловч нэмэлт тэмдэглэгээгүйгээр ажилладаг.

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

Боломжтой загварууд

.navӨөрчлөгч болон хэрэгслүүдийн тусламжтайгаар s бүрэлдэхүүн хэсгийн хэв маягийг өөрчил . Шаардлагатай бол хольж, тааруулж эсвэл өөрөө бүтээ.

Хэвтээ зэрэгцүүлэх

Flexbox хэрэгслүүдийн тусламжтайгаар Nav-ынхаа хэвтээ байрлалыг өөрчил . Анхдагчаар, 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. Тэдгээрийг зарим үзвэрийн талбарт овоолох хэрэгтэй, гэхдээ бусад нь биш үү? Хариуцлагатай хувилбаруудыг ашиглана уу (жишээ нь, .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-tabsтаб-тай интерфэйс үүсгэхийн тулд анги нэмдэг. Тэдгээрийг ашиглан манай таб JavaScript залгаасыг ашиглан tabable бүсүүдийг үүсгэ .

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

Эм

Үүнтэй ижил HTML-г аваарай, гэхдээ .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агуулгыг хүчлээрэй. Боломжтой бүх зайг өөрийн .nav-items-ээр пропорциональ байдлаар дүүргэхийн тулд -г ашиглана уу .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="#">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>

Үүн дээр суурилсан навигацийг ашиглахдаа <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-fillдээрхээс ялгаатай нь навигацийн зүйл бүр ижил өргөнтэй байх болно.

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

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

Флекс хэрэгслүүдтэй ажиллах

Хэрэв танд мэдрэгчтэй навигаци хэрэгтэй бол хэд хэдэн flexbox хэрэгслийг ашиглах талаар бодож үзээрэй . Илүү дэлгэрэнгүй мэдээлэлтэй хэдий ч эдгээр хэрэгслүүд нь хариу үйлдэл үзүүлэх цэгүүдэд илүү их тохиргоог санал болгодог. Доорх жишээнд манай 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"-ын хамгийн логик эх контейнерт a нэмэх <ul>эсвэл <nav>бүхэл бүтэн навигацын эргэн тойронд элемент оруулахаа мартуузай. <ul>Туслах технологиор үүнийг бодит жагсаалт болгон зарлахаас сэргийлж, дүрийг өөртөө нэмж болохгүй .

.nav-tabsАнгиудын хамт таб хэлбэрээр харагдахуйц загвартай байсан ч навигацийн мөрүүд эсвэл шинж чанаруудыг өгөх ёсгүй гэдгийг анхаарна уу . Эдгээр нь зөвхөн WAI ARIA Зохиогчийн Практикт тайлбарласны дагуу динамик таб бүхий интерфейсүүдэд тохиромжтой . Энэ хэсгийн динамик таб бүхий интерфэйсүүдийн JavaScript-н үйлдлийг жишээ болгон үзнэ үү .role="tablist"role="tab"role="tabpanel"

Унтраах цэсийг ашиглах

Нэмэлт HTML болон унадаг JavaScript залгаас бүхий унадаг цэсүүдийг нэмнэ үү .

Унтраах цонхтой табууд

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

JavaScript-ийн үйлдэл

Таб JavaScript залгаасыг ашиглан дангаар нь эсвэл эмхэтгэсэн bootstrap.jsфайлаар оруулаарай - унадаг цэсээр ч гэсэн локал контентын tabable самбар үүсгэхийн тулд навигацийн таб болон эмүүдийг өргөтгөх.

Хэрэв та манай JavaScript-г эх сурвалжаас бүтээж байгаа бол энэ ньutil.js .

WAI ARIA Зохиогчийн Практикт тайлбарласны дагуу динамик чихтэй интерфэйсүүд нь туслах технологи (дэлгэц уншигч гэх мэт) хэрэглэгчдэд бүтэц, үйл ажиллагаа, одоогийн төлөв байдлыг дамжуулахын тулд role="tablist", role="tab", role="tabpanel", болон нэмэлт шинж чанаруудыг шаарддаг .aria-

Динамик таб бүхий интерфэйсүүд нь унадаг цэсийг агуулж болохгүй , учир нь энэ нь ашиглалт болон хүртээмжтэй холбоотой асуудал үүсгэдэг. Хэрэглэх боломжийн үүднээс авч үзвэл, одоо гарч байгаа табын гох элемент шууд харагдахгүй байгаа нь (хаалттай унадаг цэс дотор байгаа тул) төөрөгдөл үүсгэж болзошгүй. Хүртээмжтэй байдлын үүднээс авч үзвэл энэ төрлийн бүтцийг стандарт WAI ARIA загварт буулгах оновчтой арга одоогоор байхгүй байгаа бөгөөд энэ нь туслах технологийн хэрэглэгчдэд амархан ойлгомжтой болгох боломжгүй гэсэн үг юм.

Түүхий жинсэн өмд Та магадгүй тэдний талаар сонсоогүй жинсэн шорт Остин. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Сахал клише tempor, Williamsburg carles vegan helvetica. Reprehenderit яргачин чимэг keffiyeh dreamcatcher synth. Косби цамц, qui irure Терри Ричардсон экс далайн амьтан. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, махчин nisi qui voluptate.

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>дээр дурдсанчлан дээр суурилсан тэмдэглэгээ эсвэл дурын "өөрийн" тэмдэглэгээтэй ажилладаг. Хэрэв та ашиглаж байгаа бол үүн дээр шууд <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>

Таб залгаас нь эмтэй ажилладаг.

Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minimum anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation 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>

Мөн босоо шахмалуудтай.

Cillum ad ut irure tempor velit nostrud occaecat ullamco aliqua anim Lorem sint. Вениам энэ нь ямар ч байсан ямар ч хамаагүй юм. Id id reprehenderit sit est eu aliqua occaecat quis and elit excepteur laborum mollit dolore eiusmod. Ipsum dolor in occaecat commodo and voluptate in minimum reprehenderit molit pariatur. Deserunt non laborum enim et cillum eu deserunt excepteur 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 Lorem id cupidatat excepteur reprehenderit consectetur elit id dolor proident in cupidatat officia. Voluptate excepteur commodo labore nisi cillum duis aliqua do. Aliqua amet qui mollit consectetur nulla mollit velit aliqua veniam nisi id do Lorem deserunt amet. Culpa ullamco sit adipisicing labore officia magna elit nisi in aute tempor commodo eiusmod.

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

Өгөгдлийн шинж чанаруудыг ашиглах

Та ямар нэгэн JavaScript бичихгүйгээр зүгээр л нэг элемент дээр зааж өгснөөр таб 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>

JavaScript-ээр дамжуулан

JavaScript-ээр чихтэй табуудыг идэвхжүүлэх (tab бүрийг тус тусад нь идэвхжүүлэх шаардлагатай):

$('#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>

Арга зүй

Асинхрон аргууд ба шилжилтүүд

Бүх API аргууд асинхрон бөгөөд шилжилтийг эхлүүлнэ . Шилжилт эхэлмэгц дуусаагүй байхад тэд залгагч руу буцаж ирдэг . Нэмж хэлэхэд, шилжилтийн бүрэлдэхүүн хэсэг дэх аргын дуудлагыг үл тоомсорлох болно.

Дэлгэрэнгүй мэдээллийг манай JavaScript баримтаас үзнэ үү.

$().tab

Таб элемент болон агуулгын савыг идэвхжүүлдэг. Цонх нь DOM доторх чингэлэг зангилаа руу чиглэсэн data-targetэсвэл a байх ёстой .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.tabболон hidden.bs.tabүйл явдлууд идэвхгүй болно.

Үйл явдлын төрөл Тодорхойлолт
show.bs.tab Энэ үйл явдал tab шоу дээр гарч ирдэг боловч шинэ таб харагдахаас өмнө. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд event.targetболон ашиглана уу.event.relatedTarget
харуулсан.bs.tab Энэ үйл явдал нь табыг харуулсны дараа tab шоунд идэвхждэг. Идэвхтэй таб болон өмнөх идэвхтэй табыг (боломжтой бол) тус тус чиглүүлэхийн тулд event.targetболон ашиглана уу.event.relatedTarget
hide.bs.tab Энэ үйл явдал шинэ цонхыг харуулах үед идэвхждэг (ингэснээр өмнөх идэвхтэй табыг нуух шаардлагатай). Одоогийн идэвхтэй таб болон удахгүй идэвхтэй болох шинэ табыг тус тус чиглүүлэхийн тулд event.targetболон ашиглана уу.event.relatedTarget
hidden.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
})