in English

Navs

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">Disabled</a>
  </li>
</ul>

Сабақтар толығымен пайдаланылады, сондықтан сіздің белгілеуіңіз өте икемді болуы мүмкін. <ul>Элементтердің реті маңызды болса, жоғарыдағыдай s пайдаланыңыз немесе элементпен <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 компонентінің стилін өзгертіңіз . Қажет болса, араластырыңыз және сәйкестендіріңіз немесе өзіңіз жасаңыз.

Көлденең туралау

Flexbox утилиталары арқылы навигатордың көлденең туралануын өзгертіңіз . Әдепкі бойынша, навигациялар солға тураланған, бірақ оларды ортаға немесе оңға туралауға оңай өзгертуге болады.

Ортасында .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>

Әдеттегідей, тік навигация sсыз да мүмкін <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>

Қойындылар

Негізгі шарлауды жоғарыдан алады және .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-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="#">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>

Flex утилиталарымен жұмыс істеу

Егер сізге жауап беретін шарлау нұсқалары қажет болса, flexbox утилиталарының қатарын пайдалануды қарастырыңыз . Неғұрлым егжей-тегжейлі болғанымен, бұл утилиталар жауап беретін тоқтау нүктелері бойынша көбірек теңшеуді ұсынады. Төмендегі мысалда біздің шарлау ең төменгі тоқтау нүктесінде жинақталады, содан кейін шағын тоқтау нүктесінен бастап қолжетімді енді толтыратын көлденең орналасуға бейімделеді.

<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", ең логикалық негізгі контейнерге a қосуды ұмытпаңыз <ul>немесе <nav>элементті бүкіл шарлаудың айналасына ораңыз. Рөлді өзіне қоспаңыз <ul>, себебі бұл көмекші технологиялар арқылы оның нақты тізім ретінде жариялануына жол бермейді.

Класспен қойындылар ретінде көрнекі стильде болса да , шарлау жолақтары немесе атрибуттар берілмеуі.nav-tabs керек екенін ескеріңіз . Бұл 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-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 әрекеті

bootstrap.jsЖергілікті мазмұнның қойынды тақталарын жасау үшін шарлау қойындылары мен таблеткаларымызды кеңейту үшін JavaScript қойындысының плагинін пайдаланыңыз (оны жеке немесе жинақталған файл арқылы қосыңыз).

Егер сіз JavaScript-ті дереккөзден құрастырсаңыз, олutil.js .

ARIA Authoring Practices Guide қойындылары үлгісінде сипатталған динамикалық қойынды интерфейстері олардың құрылымын, функционалдығын және ағымдағы күйін көмекші технологияларды пайдаланушыларға (мысалы, экраннан оқу құралдары) жеткізу үшін 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>

Tabs плагині таблеткалармен де жұмыс істейді.

Қойынды тақтасына арналған толтырғыш мазмұны. Бұл негізгі қойындыға қатысты. Сізді миль биіктікке апарады, соншалықты биік, өйткені оның халықаралық күлкісі бар. Менің төсегімде бейтаныс адам бар, басымды соғып жатыр. О жоқ. Басқа өмірде мен сені қалдырар едім. Өйткені мен бәріне қабілеттімін. Менің жекпе-жекке дайынмын. Ата-анаңыздың ішімдіктерін ұрлап, төбеге шығу үшін қолданылған. Тон, күйдірілген және дайын, оны бұраңыз, себебі ол ауыр болады. Оның махаббаты есірткі сияқты. Менің таңдауым бар екенін ұмытып кеткен шығармын.

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('dispose')

Элемент қойындысын жояды.

Оқиғалар

Жаңа қойындыны көрсеткенде оқиғалар келесі ретпен іске қосылады:

  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 Бұл оқиға қойындылар көрсетілімінде іске қосылады, бірақ жаңа қойынды көрсетілмей тұрып. Белсенді қойындыны және алдыңғы белсенді қойындыны (егер бар болса) тиісінше бағыттау үшін event.targetжәне пайдаланыңыз .event.relatedTarget
көрсетілген.б.қойындысы Бұл оқиға қойынды көрсетілгеннен кейін қойындылар көрсетілімінде іске қосылады. Белсенді қойындыны және алдыңғы белсенді қойындыны (егер бар болса) тиісінше бағыттау үшін event.targetжәне пайдаланыңыз .event.relatedTarget
жасыру.б.қойындысы Бұл оқиға жаңа қойынды көрсетілетін кезде іске қосылады (және осылайша алдыңғы белсенді қойынды жасырылады). Сәйкесінше ағымдағы белсенді қойындыны және жақында белсенді болатын жаңа қойындыны мақсатты ету үшін event.targetжәне пайдаланыңыз .event.relatedTarget
жасырын.б.қойындысы Бұл оқиға жаңа қойынды көрсетілгеннен кейін іске қосылады (және осылайша алдыңғы белсенді қойынды жасырылады). Алдыңғы белсенді қойындыға және жаңа белсенді қойындыға тиісінше мақсат қою үшін event.targetжәне түймелерін пайдаланыңыз .event.relatedTarget 
$('button[data-toggle="tab"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})