脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap标签切换

Bootstrap基本插件学习笔记之标签切换(17)

 更新时间：2016年12月08日 09:11:29   作者：kikay  
这篇文章主要为大家详细介绍了Bootstrap基本插件学习笔记之标签切换的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

Bootstrap可以很轻松就实现标签切换的效果。

0x01 样式1

基本样式：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>标签切换</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>标签切换</h1>
 </div>
 <div>
  <ul class="nav nav-tabs">
   <li class="active"><a href="#Home" data-toggle="tab">首 页</a></li>
   <li><a href="#New" data-toggle="tab">新 闻</a></li>
   <li><a href="#About" data-toggle="tab">关 于</a></li>
  </ul>
  <!--标签页内容-->
  <div class="tab-content">
   <div class="tab-pane active in fade" id="Home">
    <div class="page-header">
     <h1>首页</h1>
    </div>
    <p>我是首页我是首页我是首页我是首页我是首页我是首页</p>
   </div>
   <div class="tab-pane fade" id="New">
    <div class="page-header">
     <h1>新闻</h1>
    </div>
    <p>我是新闻我是新闻我是新闻我是新闻我是新闻我是新闻</p>
   </div>
   <div class="tab-pane fade" id="About">
    <div class="page-header">
     <h1>关于</h1>
    </div>
    <p>我是关于我是关于我是关于我是关于我是关于我是关于</p>
   </div>
  </div>
 </div>
</div>
</body>
</html>

效果如下：

添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。

0x02 样式2

下面是带有下拉菜单的标签切换样式：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>标签切换</title>
</head>
<body>
<div class="container">
 <div class="page-header">
  <h1>标签切换</h1>
 </div>
 <div>
  <ul class="nav nav-tabs">
   <li class="active"><a href="#Home" data-toggle="tab">首 页</a></li>
   <li class="dropdown" data-toggle="tab">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     新 闻
     <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
     <li><a href="#Tiyu" data-toggle="tab">体育新闻</a></li>
     <li><a href="#Yule" data-toggle="tab">娱乐新闻</a></li>
    </ul>
   </li>
   <li> <a href="#About" data-toggle="tab">关 于</a></li>
  </ul>
  <div class="tab-content">
   <div class="tab-pane fade in active" id="Home">
    <div class="page-header">
     <h3>网站首页</h3>
    </div>
    <p>网站首页网站首页网站首页网站首页网站首页网站首页网站首页网站首页</p>
   </div>
   <div class="tab-pane fade" id="About">
    <div class="page-header">
     <h3>关于</h3>
    </div>
    <p>关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于关于</p>
   </div>
   <div class="tab-pane fade" id="Tiyu">
    <div class="page-header">
     <h3>体育</h3>
    </div>
    <p>体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育体育</p>
   </div>
   <div class="tab-pane fade" id="Yule">
    <div class="page-header">
     <h3>娱乐</h3>
    </div>
    <p>娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐娱乐</p>
   </div>
  </div>
 </div>
</div>
</body>
</html>

效果如下：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 前端冒泡排序算法详解及实战案例

    前端冒泡排序算法详解及实战案例

    这篇文章主要介绍了前端冒泡排序算法的相关资料,冒泡排序是一种简单的排序算法,通过比较相邻元素并交换位置,实现元素排序,该算法的时间复杂度为O(n^2),空间复杂度为O(1),具有稳定性,适用于小规模数据集和对稳定性要求高的场景,需要的朋友可以参考下
    2024-10-10
  • JS模拟百度搜索框和选项卡的实现

    JS模拟百度搜索框和选项卡的实现

    本文主要介绍了JS模拟百度搜索框和选项卡的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • js获取当前日期前七天的方法

    js获取当前日期前七天的方法

    这篇文章主要介绍了js获取当前日期前七天的方法,涉及javascript中for语句及日期操作的技巧,需要的朋友可以参考下
    2015-02-02
  • TypeScript 运行时类型检查补充工具

    TypeScript 运行时类型检查补充工具

    这篇文章主要介绍了TypeScript 运行时类型检查补充工具，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • JavaScript es6中var、let以及const三者区别案例详解

    JavaScript es6中var、let以及const三者区别案例详解

    这篇文章主要介绍了JavaScript es6中var、let以及const三者区别案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • JavaScript中reduce方法的用法及使用场景

    JavaScript中reduce方法的用法及使用场景

    reduce()方法对数组中的每个元素按序执行一个提供的reducer函数,每一次运行 reducer会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值,今天我们就介绍一下reduce的几种简单使用场景,需要的朋友可以参考下
    2023-08-08
  • 如何通过js实现图片预览功能【附实例代码】

    如何通过js实现图片预览功能【附实例代码】

    如何通过js实现图片预览功能呢？下面小编就为大家带来一篇用js实现图片预览功能。给大家做个参考吧，一起跟随小编过来看看
    2016-03-03
  • Javascript判断对象是否相等实现代码

    Javascript判断对象是否相等实现代码

    想判断2个js对象，是不是所有完全相同在表单页面应用是很常见的，接下来分享一段判断代码，感兴趣的你可以参考下哈，希望可以帮助到你
    2013-03-03
  • JavaScript实现敏感信息脱敏的示例代码

    JavaScript实现敏感信息脱敏的示例代码

    这篇文章主要为大家详细介绍了如何使用JavaScript实现敏感信息脱敏,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-04-04
  • 微信小程序制作扭蛋机代码实例

    微信小程序制作扭蛋机代码实例

    这篇文章主要介绍了微信小程序制作扭蛋机代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09

最新评论