Bootstarp 4 入门之Bootstrap nav 导航条

导航 nav

基本.nav组件是使用flexbox构建的,为构建所有类型的导航组件提供了坚实的基础。它包括一些样式替代(用于处理列表),一些链接填充(用于较大的点击区域)以及基本的禁用样式。
描述
基础使用

<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

样式解刨

.nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;//自动换行
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.nav-link {
    display: block;
    padding: .5rem 1rem;
}

水平居中 .justify-content-center

<ul class="nav justify-content-center">
...
</ul>

右对齐justify-content-end

<ul class="nav justify-content-end">
...
</ul>

垂直对齐 .flex-column

<ul class="nav flex-column">
...
</ul>

卡片式 nav-tabs

描述

<ul class="nav nav-tabs">
...
</ul>
.nav-tabs {
    border-bottom: 1px solid #dee2e6;
}
.nav-tabs .nav-item {
    margin-bottom: -1px;
}
.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

这个卡片使用的巧妙就是margin-botom:-1px 然后再把选中的背景为白色,

胶囊.nav-pills

描述

<ul class="nav nav-pills">
...
</ul>
.nav-pills .nav-link {
    border-radius: .25rem;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #007bff;
}

扩展使用全部宽度 .nav-fill

.nav-fill .nav-item {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    text-align: center;
}

等宽nav-justified

<ul class="nav nav-justified">
...
</ul>
.nav-justified .nav-item {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    text-align: center;
}

使用下拉菜单

<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="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

javascript

tab切换 ,通过 data-toggle="tab" 指定,显示区域使用 href="#" 或是data-target="#"

描述

<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>
.tab-content>.active {
    display: block;
}

.tab-content>.tab-pane {
    display: none;
}
.fade:not(.show) {
    opacity: 0;
}
.fade {
    transition: opacity .15s linear;
}

通过JavaScript

$('#myTab a').on('click', function (e) {
  e.preventDefault()
  $(this).tab('show')
})

回调

事件类型 描述
show.bs.tab 此事件会在标签页显示时触发,但会在新标签页显示之前触发。使用event.targetevent.relatedTarget分别定位活动选项卡和上一个活动选项卡(如果有)。
shown.bs.tab 显示标签后,此事件会在标签显示上触发。使用event.targetevent.relatedTarget分别定位活动选项卡和上一个活动选项卡(如果有)。
hide.bs.tab 当要显示一个新选项卡时将触发此事件(因此将隐藏先前的活动选项卡)。使用event.targetevent.relatedTarget分别定位当前活动标签和新的即将活动标签。
hidden.bs.tab 此事件在显示新标签后触发(因此,先前的活动标签被隐藏)。使用event.targetevent.relatedTarget分别定位上一个活动选项卡和新活动选项卡。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。