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中检测数据类型的四种方法

    当我们在进行 JavaScript 的开发时,必须经常检测数据类型以确保代码的正确性。本文将介绍 JavaScript 中检测数据类型的四种方法。 方法一:typeof 操作符 typeof 操作符用于检测变量的数据类型,返回一个字符串,表明该变量的数据类型。 console.log(typeof ‘Hello World’); // string cons…

    JavaScript 2023年6月10日
    00
  • JS(JQuery)操作Array的相关方法介绍

    JS(JQuery)操作Array的相关方法介绍 在JS中,数组是一种常见的数据结构。本文将介绍一些常见的JS(JQuery)操作Array的方法,以及其使用说明和示例。 push()和pop()方法 决定数组长度的属性是length。使用push()方法可以将一个或多个元素添加到数组的末尾,例如: let fruits = [‘apple’, ‘banan…

    JavaScript 2023年5月27日
    00
  • JavaScript数组对象赋值用法实例

    JavaScript数组对象是一种常用的数据类型,用于存储一组数据。数组对象可以通过赋值来进行初始化和修改。本文将详细讲解JavaScript数组对象赋值用法实例。 数组对象初始化赋值 数组对象可以通过以下两种方式进行初始化赋值: 方式一:使用字面量形式初始化数组对象 字面量形式是一种直接赋值的方式,比较简单方便,如下所示: var arr = [1, 2,…

    JavaScript 2023年5月27日
    00
  • js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结

    为了实现找出5个数中最大的一个数和倒数第二大的数,可以采用以下三种方法: 1.使用排序函数 代码示例: let arr = [1,2,3,4,5]; arr.sort(function(a, b){return b-a}); console.log(arr[0]); console.log(arr[1]); 说明:该方法通过 JavaScript 的 sor…

    JavaScript 2023年5月28日
    00
  • 正则表达式详述 三

    正则表达式详述 三 – 完整攻略 正则表达式的元素 正则表达式(Regular Expression)是由原子和运算符组成的表达式,它可以用来描述字符串的规律和特征。在正则表达式中,原子是最基本的单位,它可以是任何单个字符、一组字符或者特殊的字符。 下面介绍几种常用的正则表达式元素: 字符 在正则表达式中,字符指的是每一个单一的字符,包括字母、数字、标点符号…

    JavaScript 2023年6月10日
    00
  • 简单聊一聊原生Ajax与JQuery Ajax

    一、原生Ajax 什么是原生Ajax? Ajax是Asynchronous JavaScript and XML的缩写,即异步的JavaScript和XML。AJAX 允许网页在不重新加载的情况下更新部分内容。原生Ajax是指使用JavaScript的XMLHttpRequest对象操作Web服务器执行异步数据交换(通常与JSON和XML数据格式一起使用)的…

    JavaScript 2023年5月19日
    00
  • Android中Okhttp3实现上传多张图片同时传递参数

    完整攻略: 导入Okhttp3库 首先需要在项目中导入Okhttp3库。在build.gradle文件中添加以下依赖: implementation ‘com.squareup.okhttp3:okhttp:4.9.1’ 实现上传多张图片 使用Okhttp3上传多张图片可以借助MultipartBody方式,具体实现过程如下: //创建OkHttpClien…

    JavaScript 2023年6月10日
    00
  • JS算法教程之字符串去重与字符串反转

    想要讲解“JS算法教程之字符串去重与字符串反转”的完整攻略,需要先来介绍一下这篇文章所要解决的问题,以及需要使用到的一些关键点。 问题描述 这篇文章主要解决两个问题: 字符串去重:给定一个字符串,如何将其中重复的字符去掉,只保留一个。 字符串反转:给定一个字符串,如何将其中的字符反转。 解决思路 为了解决这两个问题,我们需要使用到以下几个步骤: 字符串去重:…

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