Bootstrap标签页(Tab)插件使用方法

首先让我们来了解一下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技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript创建对象的几种方式及关于this指向问题

    当我们使用 JavaScript 开发应用时, 经常要通过创建对象来实现某些功能。JavaScript 中有多种方式可以创建对象,下面是几种常见的方法。 1. 字面量方式 最常见的创建对象的方式就是使用字面量方式,我们使用对象字面量来创建一个对象,并将其赋值给一个变量或常量。 const obj = { name: ‘Tom’, age: 20 } 对象字面…

    JavaScript 2023年5月27日
    00
  • 前端组件化基础知识详细讲解

    前端组件化基础知识详细讲解 什么是前端组件化 前端组件化,是一种将页面拆分成多个可重用组件的开发方式。这种方式将页面抽象为一系列具有独立功能和样式的小组件,而这些组件可以在不同的页面中重复使用和组合,实现了代码的复用和模块化。 组件的基本要素 在前端组件化中,组件是构成页面的基本单位。组件有三个基本要素: HTML 结构:组件必须被封装在一个 HTML 元素…

    JavaScript 2023年6月11日
    00
  • 微信JSSDK调用微信扫一扫功能的方法

    针对您提供的话题,我来详细讲解一下微信JSSDK调用微信扫一扫功能的方法的完整攻略。 一、前置准备 要完成微信JSSDK调用微信扫一扫功能,需要提前完成以下几个步骤: 申请微信公众号。在微信公众平台上申请并审核通过公众号。 拥有有效的微信公众号开发者身份。在微信公众平台上注册并审核通过开发者账号,并进行开发者认证。 获得合法的微信JS-SDK权限。即在微信公…

    JavaScript 2023年6月10日
    00
  • layui use 定义js外部引用函数的方法

    以下是关于“layui use 定义js外部引用函数的方法”的完整攻略。 1. 背景介绍 “layui”是一款基于jQuery和CSS规范的前端UI框架,广泛应用于Web前端开发中。在Layui中,use()函数是一个非常常用的函数,它用来加载Layui所需的模块,是Layui的核心方法之一。但是在实际开发中,我们可能需要在导入Layui之外的js文件中使用…

    JavaScript 2023年6月11日
    00
  • 使用requestAnimationFrame实现js动画性能好

    使用requestAnimationFrame实现js动画的优点是可以避免过多使用setTimeout或setInterval造成的页面卡顿、CPU过度占用等问题,从而保证动画的流畅度和性能。以下是具体操作步骤: 准备工作 首先需要在代码中声明一个全局变量 requestId 用于记录动画的请求ID。然后编写动画函数,此函数需要接收一个时间参数。 let r…

    JavaScript 2023年6月10日
    00
  • JavaScript获取当前运行脚本文件所在目录的方法

    JavaScript获取当前运行脚本文件所在目录的方法可以通过以下两种方式来实现: 方法一:使用document.currentScript获取 可以使用 document.currentScript 获取当前运行脚本的元素,进而通过 src 属性获取运行脚本所在的路径。 示例代码如下: const scriptUrl = document.currentS…

    JavaScript 2023年5月27日
    00
  • jquery使用each方法遍历json格式数据实例

    下面我将详细讲解“jquery使用each方法遍历json格式数据实例”的完整攻略。 1. 前置知识 在讲解jquery使用each方法遍历json格式数据之前,需要先掌握以下基础知识: JSON格式的概念及其特点 jQuery库的引入方法 jQuery的选择器和DOM操作方法 2. 使用each方法遍历JSON格式数据的步骤 2.1 将JSON格式数据转化…

    JavaScript 2023年5月27日
    00
  • Javascript 数组排序详解

    Javascript 数组排序详解 数组排序是JS中常用的操作之一,它可以对一个数组中的元素按照一定规则进行排序。本文将详细介绍JS中数组排序的各种方法和注意事项。 基本语法 JS中有多种数组排序方法,这些方法在使用时,可以通过以下语法进行调用: array.sort(function(a, b){return a-b}); 数组会根据 callback 函…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部