Bootstrap4组件:导航/滑动门(nav)


发布时间:2020-03-20 16:23    作者: Uncle Hui   已过去:4 月,3 周   阅读总量:282 已被赞:0


导航/滑动门(nav)

基本导航样式

Bootstrap中提供的导航可共享通用标记和样式,从基础.nav样式类到活动与禁用状态。交换class选择符以在每种样式之间切换。

基础.nav组件采用Flexbox弹性布局构建,并为构建所有类型的导航组件提供了坚实的基础,包括一些风格覆盖(以及列表)、一些更大pading连接间隙和基本的禁用样式。

基础的 .nav组件不包含任何的 .active 状态,以下范例包括该类别,主要是为了说明这个class不会触发任何特殊的样式。

<ul class="nav">

<li class="nav-item">

<a href="#" class="nav-link active">选项一</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link">选项二</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link">选项三</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link disabled">选项四</a>

</li>

</ul>

.navclass 可以使用在很多地方,所以你的标记可以非常灵活,比如使用在 <ul>列表,或者自定义一个 <nav>组件,因为 .nav 基于 display: flex定义,导航链接的行为与导航项目相同,不需要额外的标记。

<nav class="nav">

<a href="#" class="nav-link active">选项一</a>

<a href="#" class="nav-link">选项二</a>

<a href="#" class="nav-link">选项三</a>

<a href="#" class="nav-link disabled">选项四</a>

</nav>

可用样式

水平对齐

使用flexbox 通用布局属性更改导航的水平对齐方式,默认情况下,导航按左对齐,但你可以 .justify-content-center/end居中/右对齐

垂直排列

使用.flex-column 通用样式更改Flexa弹性项目的方向来设计导航,如在特定的viewport屏幕下需要堆叠,可使用响应式定义(如 .flex-sm-column样式)。

Tabs标签

从上面了解的基本导航,并加入 .nav-tabs 以生成选项卡标签(滑动门,同时结合 tab JavaScript 插件来构建tabs滑动门。

胶囊式标签页

HTML标记相同,但使用 .nav-pills 替代

填充和对齐

.nav内容有两种扩展class属性, 使用.nav-fill会将 .nav-item按照比例分配空间。注意:这会占用所有的水平空间,但不是每个导航项目的宽度相同。

当使用<nav>基于导航时,请确保包含 .nav-item A<a>链接上。

对于等宽元素,请使用.nav-justified。所有水平空间将被导航链接占用,但与上述.nav-fill不同,每个导航项目将具有相同的宽度。

 .nav-fill的例子近似,使用基于 <nav>的导航,确保在链接上包含 .nav-item 子项定义。

使用Flex弹性布局

如果需要吊牌应式的导航变化,请使用一系列的 flexbox 弹性布局类别,这结通用类别能提供不同的弹性布局,下例中,我们的导及将会堆叠在最小的屏幕标准上,然后从小断点开始填充可用宽度的水平布局。

<nav class="nav nav-pills flex-column flex-sm-row">#pc 水平显示,手机垂直显示

<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>#大中瓶等分flex-sm-fill大中屏内容居中text-sm-center

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

使用下拉菜单

Tabs式和胶囊式都可用。

<ul class="nav nav-pills">#如果要边卡片式,将nav-pills 变成nav-tabs

<li class="nav-item">

<a href="#" class="nav-link active">选项一</a>

</li>

<li class="nav-item dropdown">

<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">下拉菜单</a>

<div class="dropdown-menu">

<a href="#" class="dropdown-item">aaa</a>

<a href="#" class="dropdown-item">bbb</a>

<a href="#" class="dropdown-item">ccc</a>

</div>

</li>

<li class="nav-item">

<a href="#" class="nav-link">选项三</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link disabled">选项四</a>

</li>

</ul>

滑动门

1.只要在远素上指定data-toggle="tab" data-toggle="pill" 即可启动选项卡或胶囊式导航,而无需编写任何JavaScrip,并可在 .nav-tabs  .nav-pills使用这些数据属性。

2.要使标签淡入淡出,请添加.fade 到每个. tab-pane,第一个选项卡窗格还必须定义.show 使默认初始内容可见。

<ul class="nav nav-tabs">

<li class="nav-item">

<a href="#tab1" class="nav-link active" data-toggle="tab">选项一</a>

</li>

<li class="nav-item">

<a href="#" class="nav-link" data-toggle="tab" data-target="#tab2">选项二</a>#这里注意:可以使用href="#tab1"指定,也可以data-target="#tab2"这样都行

</li>

<li class="nav-item">

<a href="#tab3" class="nav-link" data-toggle="tab">选项三</a>

</li>

<li class="nav-item">

<a href="#tab4" class="nav-link disabled" data-toggle="tab">选项四</a>

</li>

</ul>

<div class="tab-content">

<div class="tab-pane fade show active" id="tab1">111</div>#第一个默认显示show,必须和上面的li对应active的位置

<div class="tab-pane fade" id="tab2">222</div> #淡入淡出fade

<div class="tab-pane fade" id="tab3">333</div>

<div class="tab-pane fade" id="tab4">444</div>

</div>

还可以做成垂直形式:flex-column

<div class="row">

<div class="col-3">

<div class="nav nav-pills flex-column">

<a href="#tab1" class="nav-link active" data-toggle="tab">选项一</a>

<a href="#tab2" class="nav-link" data-toggle="tab">选项二</a>

<a href="#tab3" class="nav-link" data-toggle="tab">选项三</a>

<a href="#tab4" class="nav-link" data-toggle="tab">选项四</a>

</div>

</div>

<div class="col-9">

<div class="tab-content">

<div class="tab-pane fade show active" id="tab1">111</div>

<div class="tab-pane fade" id="tab2">222</div>

<div class="tab-pane fade" id="tab3">333</div>

<div class="tab-pane fade" id="tab4">444</div>

</div>

</div>

</div>

JavaScript 行为

事件

事件类型

描述

show.bs.tab

这个事件在一个标签选项卡内容显示上触发,但在选项卡显示之前,使用 event.target 和 event.relatedTarget 来分别定位选项卡和上一个选项卡标签(如果可用)。

shown.bs.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) {

    console.log(e.target)    // newly activated tab

    console.log(e.relatedTarget)     // previous active tab

})

点赞

0




登陆后方可评论