首先让我们来了解一下Bootstrap标签页(Tab)插件。
Bootstrap标签页插件可以将一组内容分割成可被轮流点击的视图块,并且只显示当前选择的视图块。这非常适合在比较繁琐的页面中展示多个内容模块。
使用步骤
步骤1. 引入Bootstrap插件和样式文件
在head标签中引入Bootstrap插件和样式文件。可以选择本地文件或使用cdn链接。
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<!-- 引入必需的Javascript文件 -->
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
步骤2. HTML结构
在HTML文件中,使用ul元素作为导航栏,每个li元素作为一个链接,链接到一个特定的文本块。为每个链接创建一个唯一的标识符,并将其与相应的文本块相关联。可以添加任何有效的HTML标记作为文本块内容。
<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">首页</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">简介</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">联系方式</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<p>这是首页的内容。</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<p>这是简介的内容。</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<p>这是联系方式的内容。</p>
</div>
</div>
步骤3. 添加JavaScript代码
在脚本标签中,使用JavaScript代码初始化标签页插件。
<script>
$(function () {
$('#myTab li:last-child a').tab('show')
})
</script>
示例
示例1
在这个示例中,我们将演示如何创建一个含有4个选项卡的标签页,并在选项卡中插入图片和文本。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 标签页插件示例1</title>
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<!-- 引入必需的Javascript文件 -->
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h2>选项卡页面</h2>
<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">首页</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">简介</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">联系方式</a>
</li>
<li class="nav-item">
<a class="nav-link" id="help-tab" data-toggle="tab" href="#help" role="tab" aria-controls="help" aria-selected="false">帮助</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<h3>首页内容</h3>
<img src="https://cdn.pixabay.com/photo/2015/09/20/02/08/mobile-phone-949251_960_720.jpg" alt="手机图片" class="img-fluid">
<p>这是首页的内容,这个选项卡将会默认打开。</p>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<h3>简介内容</h3>
<img src="https://cdn.pixabay.com/photo/2017/03/31/16/56/phone-2198776_960_720.jpg" alt="手机图片" class="img-fluid">
<p>这是简介的内容。</p>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<h3>联系方式</h3>
<img src="https://cdn.pixabay.com/photo/2015/08/27/08/54/mobile-phone-909857_960_720.jpg" alt="手机图片" class="img-fluid">
<p>这是联系方式的内容。</p>
</div>
<div class="tab-pane fade" id="help" role="tabpanel" aria-labelledby="help-tab">
<h3>帮助内容</h3>
<img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/smartphone-690622_960_720.jpg" alt="手机图片" class="img-fluid">
<p>这是帮助的内容。</p>
</div>
</div>
</div>
</body>
</html>
示例2
在这个示例中,我们将演示如何使用垂直选项卡结束创建一个包含3个选项卡的标签页。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 标签页插件示例2</title>
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<!-- 引入必需的Javascript文件 -->
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-5">
<h2>垂直选项卡页面</h2>
<div class="row">
<div class="col-md-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">首页</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">简介</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">联系方式</a>
</div>
</div>
<div class="col-md-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">
<h3>首页内容</h3>
<img src="https://cdn.pixabay.com/photo/2015/09/20/02/08/mobile-phone-949251_960_720.jpg" alt="手机图片" class="img-fluid">
<p>这是首页的内容,这个选项卡将会默认打开。</p>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<h3>简介内容</h3>
<img src="https://cdn.pixabay.com/photo/2017/03/31/16/56/phone-2198776_960_720.jpg" alt="手机图片" class="img-fluid">
<p>这是简介的内容。</p>
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<h3>联系方式</h3>
<img src="https://cdn.pixabay.com/photo/2015/08/27/08/54/mobile-phone-909857_960_720.jpg" alt="手机图片" class="img-fluid">
<p>这是联系方式的内容。</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
希望这份攻略对你有所帮助!
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Bootstrap标签页(Tab)插件使用方法 - Python技术站