in English

Хәрби диңгез

Bootstrap'ның кертелгән навигация компонентларын ничек куллану өчен документлар һәм мисаллар.

Төп диңгез

Bootstrap'та булган навигация гомуми билгеләрне һәм стильләрне бүлешә, төп .navкласстан актив һәм инвалид хәлләргә кадәр. Eachәр стиль арасында күчү өчен модификатор классларын алыштырыгыз.

Төп .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>Itemsгарыдагы кебек кулланыгыз <ol>, әйберләрегезнең тәртибе мөһим булса, яисә үзегезне <nav>элемент белән әйләндерегез. Чөнки .navкуллану display: flex, nav сылтамалары nav әйберләре кебек эш итәләр, ләкин өстәмә билгеләрсез.

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

Мөмкин стильләр

S компонентының стилен .navүзгәртүчеләр һәм инженерлар белән үзгәртегез. Кирәк булганда кушылыгыз, яисә үзегезнекен төзегез.

Горизонталь тигезләү

Флексбокс ярдәмендә сезнең диңгезнең горизонталь тигезләнешен үзгәртегез . Килешү буенча, диңгезләр сул якка тигезләнгән, ләкин сез аларны җиңел генә үзәккә яки уңга тигезләргә үзгәртә аласыз.

Белән үзәкләштерелгән .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. Аларны кайбер күренешләргә урнаштырырга кирәк, ә башкалар түгел? Respаваплы версияләрне кулланыгыз (мәсәлән, .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>

Alwaysәрвакыттагыча, вертикаль навигация ләрсез дә мөмкин <ul>.

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

Таблицалар

Aboveгарыдан төп диңгезне ала һәм .nav-tabsөстәлләнгән интерфейс булдыру өчен класс өсти. Аларны JavaScript плагины белән таблицалар регионнары булдыру өчен кулланыгыз .

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

Таблеткалар

Шул ук 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">Disabled</a>
  </li>
</ul>

Тотыр һәм акла

Эчтәлекне .navике модификатор классның тулы киңлеген киңәйтергә мәҗбүр итегез. Барлык урыннарны пропорциональ тутыру .nav-itemөчен кулланыгыз .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-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>

Навигация .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 Авторлык Практикасы Белешмә таблицасында күрсәтелгәнчә . Мисал өчен бу бүлектә динамик таблицалы интерфейслар өчен JavaScript тәртибен карагыз .

Тамчы куллану

Бераз өстәмә 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-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>

JavaScript тәртибе

JavaScript плагинын кулланыгыз - аны индивидуаль яки тупланган bootstrap.jsфайл аша кертегез - безнең навигацион таблицаларны һәм таблеткаларны киңәйтү өчен, җирле эчтәлекнең таблицаларын булдыру өчен.

Әгәр дә сез безнең JavaScriptны чыганактан төзисез икән, бу кирәкutil.js .

Динамик таблицалы интерфейслар, ARIA Авторлык Практикасы Белешмәлеге таблицасында күрсәтелгәнчә, структурасын, функциональлеген һәм хәзерге торышын ярдәмче технологияләр кулланучыларына җиткерү өчен, өстәмә атрибутлар таләп итә (экран укучылары role="tablist"кебек ) . Иң яхшы практика буларак, без таблицалар өчен элементлар кулланырга киңәш итәбез, чөнки бу яңа биткә яки урынга күчү сылтамалары түгел, ә динамик үзгәрешләр кертә торган контроль.role="tab"role="tabpanel"aria-<button>

Игътибар итегез, JavaScript плагины тамчы менюларны үз эченә алган өстәл интерфейсларын хупламый, чөнки алар куллану мөмкинлеген дә, мөмкинлек проблемаларын да китерәләр . Куллану мөмкинлеге күзлегеннән караганда, хәзерге вакытта күрсәтелгән кыстыргыч элементының шунда ук күренмәве (ябык тамчы меню эчендә) буталчык тудырырга мөмкин. Уңайлык күзлегеннән караганда, хәзерге вакытта мондый конструкцияне стандарт 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>, югарыда күрсәтелгәнчә, яисә теләсә нинди "үзегезне әйләндерү" билгесе белән эшли. Игътибар итегез, куллансагыз <nav>, аңа role="tablist"турыдан-туры өстәргә ярамый, чөнки бу элементның туган ролен навигация билгесе итеп кире кагар. Киресенчә, альтернатив элементка күчегез (астагы мисалда, гади <div>) һәм <nav>аны әйләндереп алыгыз.

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

Таблицалар плагины таблеткалар белән дә эшли.

Таблицалар панели өчен урын иясе. Бу өй салынмасына кагыла. Сезне биеклектә, шулкадәр биеклектә алып бара, чөнки ул шул халыкара елмаюга ия. Минем караватта чит кеше бар, башымда тибү бар. Әй, юк. Башка тормышта мин сезне калырга этәрер идем. «Чөнки мин, теләсә нәрсәгә сәләтле. Минем таҗ сугышына әзерләнү. Ата-анагызның эчемлеген урлап, түбәгә менү өчен кулланылган. Тон, танылган һәм әзер, аны эшләтеп җибәрү аның авыр булуына китерә. Аның мәхәббәте наркомания кебек. Минем сайлау мөмкинлеген оныттым дип уйлыйм.

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.

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-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"яки бернинди JavaScript язмыйча, таблицаны яки таблетка навигациясен активлаштыра аласыз . 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>

JavaScript аша

JavaScript аша таблицалар өстәлмәләрен эшләгез (һәрбер кыстыргычны аерым активлаштырырга кирәк):

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

Методлар

Асинхрон ысуллар һәм күчү

Барлык API ысуллары да асинхрон һәм күчү башлый . Күчерелеш башлангач, ләкин ул беткәнче шалтыратучыга кире кайталар . Моннан тыш, күчү компонентына методик чакыру игътибарсыз калачак .

Күбрәк мәгълүмат алу өчен безнең JavaScript документларын карагыз .

$ ()

Таблица элементын һәм эчтәлек контейнерын активлаштыра. Таблицада яисә data-targetсылтама кулланылса, hrefDOM контейнер төймәсенә юнәлтелгән атрибут булырга тиеш.

<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 ('утильләштерү')

Элемент салынмасын җимерә.

Вакыйгалар

Яңа кыстыргычны күрсәткәндә вакыйгалар түбәндәге тәртиптә янып тора:

  1. hide.bs.tab(хәзерге актив кыстыргычта)
  2. show.bs.tab(күрсәтеләчәк кыстыргычта)
  3. hidden.bs.tabhide.bs.tab(алдагы актив кыстыргычта, вакыйга белән бер үк )
  4. shown.bs.tabshow.bs.tab(яңа-актив гына күрсәтелгән кыстыргычта, вакыйга белән бер үк )

Әгәр дә бернинди кыстыргыч актив булмаган булса, вакыйгалар hide.bs.tabһәм hidden.bs.tabвакыйгалар атылмаячак.

Вакыйга төре Тасвирлау
show.bs.tab Бу вакыйга таблицада күрсәтелә, ләкин яңа кыстыргыч күрсәтелгәнче. event.targetАктив кыстыргычны һәм event.relatedTargetалдагы актив кыстыргычны кулланыгыз .
күрсәтелгән.bs.tab Бу вакыйга таблицаны күрсәткәннән соң таблицада күрсәтелә. event.targetАктив кыстыргычны һәм event.relatedTargetалдагы актив кыстыргычны кулланыгыз .
hide.bs.tab Бу вакыйга яңа кыстыргыч күрсәтелергә тиеш (һәм шулай итеп алдагы актив кыстыргыч яшерелергә тиеш). event.targetХәзерге актив кыстыргычны һәм event.relatedTargetяңа тиздән актив булачак кыстыргычны кулланыгыз .
hidden.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
})