一、导航
1.基本
基础.nav组件采用Flexbox弹性布局构建，并为构建所有类型的导航组件提供了坚实的基础。
<div class="row">
<div class="col">
<ul class="nav"><!-- 基础类，变成弹性盒模型 -->
<li>
<a class="nav-link" href="#">入门</a>
<!-- 变成块元素，并加了一个padding -->
</li>
<li>
<a class="nav-link" href="#">布局</a>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col">
<nav class="nav">
<a class="nav-link" href="#">使用nav标签</a>
<a class="nav-link" href="#">布局</a>
</nav>
</div>
</div>
2.水平对齐
- justify-content-start
- justify-content-center
- justify-content-end
<div class="row mt-5">
<div class="col">
<ul class="nav justify-content-start">
<li>
<a class="nav-link" href="#">对齐</a>
</li>
<li>
<a class="nav-link" href="#">布局</a>
</li>
</ul>
</div>
</div>
3.垂直对齐
- flex-column
- flex-sm-column
<div class="row mt-5">
<div class="col">
<ul class="nav flex-sm-column">
<li>
<a class="nav-link" href="#">垂直排列</a>
</li>
<li>
<a class="nav-link" href="#">布局</a>
</li>
</ul>
</div>
</div>
4.Tabs标签
加入 .nav-tabs 以生成选项卡标签（滑动门，同时结合 tab JavaScript 插件来构建tabs滑动门。
<div class="row mt-5">
<div class="col">
<!-- 此时li就应该加上nav-item这个class了。它主要设置了mrgin-bottom。为了去掉当前项的底边框-->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">tabs标签</a><!-- 当前激活项 -->
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">组件</a><!-- 禁用，没有hover样式 -->
</li>
</ul>
</div>
</div>
5.胶囊式（eugk）标签
<div class="row mt-5">
<div class="col">
<ul class="nav nav-pills"> <!-- 通过nav-pills添加 -->
<li class="nav-item">
<a class="nav-link active" href="#">胶囊式标签</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">布局</a>
</li>
</ul>
</div>
</div>
6.内容定宽高
.nav内容有两种扩展class属性， 使用.nav-fill会将 .nav-item按照比例分配空间。注意：这会占用所有的水平空间，但不是每个导航项目的宽度相同。
<div class="row mt-5">
<div class="col">
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">宽度由内容而定</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">布局</a>
</li>
</ul>
</div>
</div>
<!-- nav标签也可以使用nav-fill，但是请注意a标签身上需要添加.nav-item -->
<div class="row">
<div class="col">
<nav class="nav nav-pills nav-fill">
<a class="nav-link nav-item active" href="#">宽度由内容而定</a>
<a class="nav-link nav-item" href="#">布局</a>
</nav>
</div>
</div>
7.等宽
等宽元素，请使用.nav-justified。所有水平空间将被导航链接占用，但与上述.nav-fill不同，每个导航项目将具有相同的宽度。
<div class="row mt-5">
<div class="col">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">宽度为等宽</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">布局</a>
</li>
</ul>
</div>
</div>
<!-- nav标签也可以使用justified，但是请注意a标签身上需要添加.nav-item -->
<div class="row">
<div class="col">
<nav class="nav nav-pills nav-justified">
<a class="nav-link nav-item active" href="#">宽度为等宽</a>
<a class="nav-link nav-item" href="#">布局</a>
</nav>
</div>
</div>
8.弹性布局
- flex-column，让子元素在任何尺寸下都变成垂直排列
- flex-sm-row，让子元素在>=中等屏幕下横着排列
<div class="row mt-5">
<div class="col">
<!-- 让所有尺寸下都是竖着排，当尺寸为小屏及以上的时候让它横着排-->
<nav class="nav nav-pills nav-justified flex-column flex-sm-row">
<a class="nav-item nav-link active" href="#">弹性布局</a>
<a class="nav-item nav-link" href="#">布局</a>
<a class="nav-item nav-link disabled" href="#">组件</a>
</nav>
</div>
</div>
9.结合下拉菜单
<div class="row mt-5">
<div class="col">
<ul class="nav nav-tabs"> <!-- 最后把这个class换成.nav-pills后，它是一个胶囊式的按钮 -->
<li class="nav-item">
<a class="nav-link active" href="#">下拉菜单</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">城市</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">北京</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">深圳</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">布局</a>
</li>
</ul>
</div>
</div>
10.选项卡
<div class="row mt-5">
<div class="col">
<!-- <ul class="nav nav-tabs">然后这个class可以换成是.nav-pills
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#contact">Contact</a>
</li>
</ul> -->
<!-- 也可以使用nav标签 -->
<nav class="nav nav-tabs">
<a class="nav-item nav-link active" data-toggle="tab" href="#home">Home</a>
<a class="nav-item nav-link" data-toggle="tab" href="#profile">Profile</a>
<a class="nav-item nav-link" data-toggle="tab" href="#contact">Contact</a>
</nav>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
Raw denim you probably haven't heard of them jean shorts Austin.
</div>
<div class="tab-pane fade" id="profile">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-
</div>
<div class="tab-pane fade" id="contact">
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out
</div>
</div>
</div>
</div>
11.垂直形式的选项卡
<div class="row mt-5">
<div class="col-3">
<nav class="nav nav-pills flex-column"> <!-- 这里换两个class -->
<a class="nav-item nav-link active" data-toggle="tab" href="#home1">Home</a> <!-- id要换 -->
<a class="nav-item nav-link" data-toggle="tab" href="#profile1">Profile</a>
<a class="nav-item nav-link" data-toggle="tab" href="#contact1">Contact</a>
</nav>
</div>
<div class="col-9">
<div class="tab-content">
<div class="tab-pane fade show active" id="home1">
Raw denim you probably haven't heard of them jean shorts Austin.
</div>
<div class="tab-pane fade" id="profile1">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-
</div>
<div class="tab-pane fade" id="contact1">
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out
</div>
</div>
</div>
</div>
12.方法与事件
<div class="row mt-5">
<div class="nav nav-pills " id="myTab">
<a class="nav-item nav-link active" href="#home2">Home</a>
<a class="nav-item nav-link" href="#profile2">Profile</a>
<a class="nav-item nav-link" href="#contact2">Contact</a>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="home2">
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa
</div>
<div class="tab-pane fade" id="profile2">
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur
</div>
<div class="tab-pane fade" id="contact2">
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo
</div>
</div>
</div>
<script>
//这里与列表组是一样的
//方法
$('#myTab a:last-child').tab('show'); //修改当前激活项
$('#myTab a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
//事件
$('#myTab a:nth-child(2)').on('show.bs.tab', function (e) {
console.log('该内容要显示了');
});
$('#myTab a:nth-child(2)').on('shown.bs.tab', function (e) {
console.log('该内容已经显示了');
});
$('#myTab a:nth-child(2)').on('hide.bs.tab', function (e) {
console.log('该内容要隐藏了');
});
$('#myTab a:nth-child(2)').on('hidden.bs.tab', function (e) {
console.log('该内容已经隐藏了');
})
</script>
3365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
