bootstrap --- > 标签页切换

最新推荐文章于 2024-07-20 15:49:14 发布
最新推荐文章于 2024-07-20 15:49:14 发布
阅读量1.3w 收藏 16
点赞数 3
分类专栏： bootstrap 文章标签： 方便引用 教程

很多时候,我们希望写一个简单的标签页.以下使用bootstrap来实现…

首先导入bootstrap的依赖:jquery的依赖、bootstrap的依赖
注意: jquery的依赖要在bootstrap依赖的前面导入,原因是:bootstrap的某些功能是在jquery的基础上实现的

在 https://www.bootcdn.cn/jquery/ 导入jquery的CDN

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

在 https://v3.bootcss.com/getting-started/ 导入bootstrap的依赖

https://v3.bootcss.com/getting-started/

依赖导入完成后,还需要了解几个bootsrap中封装好的概念:
nav nav-tabs: 这个是bootstrap中封装好的导航栏类,用于切换
data-toggle=“tab”: 指明是tab类
在这里插入图片描述

<ul class="nav nav-tabs">
	   <li class="active"><a href="#home" data-toggle="tab">首页</a></li>
	   <li><a href="#profile" data-toggle="tab">最新</a></li>
	   <li><a href="#message" data-toggle="tab">热门</a></li>
	   <li><a href="#settings" data-toggle="tab">排行</a></li>
 </ul>

导航栏的头部做好了,下面做显示部分.注意href中#对应的是id
在这里插入图片描述

<div class="tab-content">
	<div class="tab-pane active" id="home">
		<p> 我是首页</p>
	</div>
	<div class="tab-pane" id="profile">
		<p> 我是最新 </p>
	</div>
	<div class="tab-pane" id="message">
		<p>我是热门</p>
	</div>
	<div class="tab-pane" id="settings">
		<p>我是排行</p>
	</div>
</div>

附上完整的代码:

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body style="padding:5px;">

    <ul class="nav nav-tabs">
	   <li class="active"><a href="#home" data-toggle="tab">首页</a></li>
	   <li><a href="#profile" data-toggle="tab">最新</a></li>
	   <li><a href="#message" data-toggle="tab">热门</a></li>
	   <li><a href="#settings" data-toggle="tab">排行</a></li>
    </ul>
	
	<div class="tab-content">
		<div class="tab-pane active" id="home">
			<p> 我是首页</p>
		</div>
		<div class="tab-pane" id="profile">
			<p> 我是最新 </p>
		</div>
		<div class="tab-pane" id="message">
			<p>我是热门</p>
		</div>
		<div class="tab-pane" id="settings">
			<p>我是排行</p>
		</div>
	</div>
	
			
</body>
</html>

参考《CSS高效开发实战》 P182

栗子好好吃
关注
  • 3
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Bootstrap实现的标签页内容切换显示效果示例
01-19
本文实例讲述了Bootstrap实现的标签页内容切换显示效果。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head> <meta http-equiv=Content-Type content=text/html; charset=utf-8> <title>Bootstrap 实例 - 标签页（Tab）插件</title> <link href=http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css rel=external nofollow rel=style
BootStrap之标签页切换
席木木的博客
02-14 5435
标签页切换标签页切换标签页插件第一个官方例子调用tab("show")显示tab-pane中的内容第一个例子的HTML+CSS代码fade in效果函数介绍前提条件：data-target/href数据指向设置tab("show")函数-显示内容查看事件响应的新旧对象 标签页切换     标签页切换，就是通过点击菜单/选项卡中的文字标签，使其达到局部内容更换的效果。以下给出标签页切换的最简化代码实现。 <!DOCTYPE html> <html&gt
万字长文解析Bootstrap权威教程：从入门到精通逐步掌握前端开发框架
最新发布
科技改变人类，技术成就未来
07-20 981
Bootstrap 是世界上最受欢迎的前端框架之一，由 Twitter 团队开发和开源。它使得开发响应式、移动优先的网站变得简单和快速。本文将为初学者提供一个全面的 Bootstrap 入门指南，覆盖从基本概念到高级功能，以及如何在实际项目中应用 Bootstrap。
Bootstrap切换tab事件
我的博客
05-27 1415
如果没有标签页已经激活，那么隐藏。初始化时不会执行上面的事件。
python测试开发django-153.bootstrap导航-标签页切换(nav-tabs)
qq_27371025的博客
10-13 2218
前言 Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。标签页.nav-tabs 类依赖 .nav 基类。 tab标签页 在标签 ul 添加 nav 和 nav-tabs 属性,将应用Bootstrap标签样式。 在li 里面 a 标签上简单的指定 data-toggle=“tab” 或 data-toggle=“pill”，就可以完成一个标签导航页 <ul id="tabs" class="nav nav-tabs"> <li><a h
bootstrap的tab切换的效果更改
qq_51615662的博客
01-26 660
bootstrap的tab标签有自带的样式，有些它自定义的class的一些属性比较的多，当我们用自定义样式去覆盖时往往会产生一些问题。要覆盖掉原有的样式，首先要确保优先级高于它自带的属性，然后自定义js要放在导入所有js最后执行。
【2】案例：Bootstrap 开发 - navs 左侧菜单，使用iframe 嵌入*.html实现动态切换页面
YYDataV的博客
12-23 1万+
一、效果展示 1、div实现效果 2、iframe实现效果 二、左侧菜单栏样式 菜鸟左侧菜单栏中有5个示例，基本满足了大部分场景需求。 参考文档：Bootstrap5 侧边栏导航(Offcanvas) | 菜鸟教程 我这里采用的是第4个样式，这个样式只展示了左侧菜单栏。 接下来我将实现左侧菜单栏和右侧主界面的联动跳转。 三、菜单栏和右侧主界面的联动跳转 有2中比较常用的实现方式： 1、使用div实现主界面切换 实现思路 动态监听 a 的 click事件；..
bootstrap-datetimepicker.zip
05-21
使用Bootstrap DateTimePicker时，你需要在HTML中添加对应的元素（通常是`<input>`标签），并使用JavaScript进行初始化配置。例如： ```html <input type="text" id="datetimepicker" /> ``` ```javascript $...
bootstrap多标签页mutitab
01-03
在Bootstrap的基础上， Mutitab功能通常会结合jQuery库来实现，因为jQuery简化了DOM操作，使得动态创建和切换标签页更加便捷。AdminLTE是一款基于Bootstrap的开源后台管理框架，它提供了一系列高级组件和定制选项，...
基于Bootstrap的标签页组件及bootstrap-tab使用说明
08-29
在使用 bootstrap-tab 时，需要创建一个容器元素，例如 `<div id="tabContainer"></div>`, 然后使用 jQuery 将其转换为标签页组件。可以通过传递参数对象来配置标签页组件的行为，例如设置标签页的数据来源、默认...
bootstrap-table
07-11
- 创建表格结构：使用HTML的`<table>`标签构建基本的表格结构，添加必要的属性如`data-toggle="table"`。 - 初始化表格：通过JavaScript调用`$('#table').bootstrapTable(options)`方法初始化表格，`options`是...
Bootstrap入门练手小项目，创建一个有侧边栏三级标题可页面跳转的导航
m0_58704747的博客
10-19 2364
在已学习HTML和CSS，以及了解一些JS的基础上接触Bootstrap，编写一个具有侧边栏、三级标题以及可实现页面跳转的小项目给目前不了解这些内容的小伙伴提供学习链接~效果展示如下，目前只完善了其中一部分，但是基本操作已经可以实现~代码可参考。
bootstrap导航栏
sunyanchun的专栏
09-07 3200
bootstrap导航栏，包括顶部和左侧导航栏。点击导航菜单，实现页面跳转。 1、顶部导航栏 源码： $(function() { //顶部导航栏点击添加active样式 $('ul.nav > li').click(function (e) { e.preventDefault(); $('ul.nav > li').removeClass('active'
bootStrap实现tab页切换
热门推荐
Room
09-28 7万+
bootStrap可以简单方便的实现tab页面的切换 用法 通过data属性 可以无需写任何JavaScript来激活标签式或圆角式的导航, 只需在元素上简单的指定 data-toggle=”tab” 或 data-toggle=”pill”. 在标签 ul 添加 nav 和 nav-tabs 属性, 将应用Bootstrap标签样式. <ul class="nav nav-tabs">
使用Bootstrap+Vue实现导航栏切换
jiahui513的博客
10-31 1761
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue_实例</title> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *.
Bootstrap 5-导航-可切换导航选项卡/可切换导航胶囊
m0_73839298的博客
09-23 1456
3.创建一个用于与导航菜单联系的面板容器tab-content，每个面板给id值用于与导航菜单的href相关联，每个面板设置一个固定容器container来表示每个面板属于一个容器内的内容，tab-pane来表示面板，还可以给面板设置是活动的，显示的，还是隐藏，活动是active，是默认是显示，隐藏是fade。1.使用ul>li>a，ul首先创建一个导航菜单容器nav，并把导航菜单设置为导航菜单选项卡nav-tabs，使用role="tablist"来表示这是一个导航栏。可切换的动态胶囊导航。
boostrap布局( 二）—后台布局实例（左侧菜单激活、右边页面切换）
鲸鱼姐的专栏
06-18 7204
实际项目效果如下： 选中左侧菜单，右边自动变换页面。默认选中Page1页面产品信息。 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 布局实例</title> <link ...
BootStrap笔记——可切换导航栏
senmu_的博客
11-28 946
可切换导航栏 ul标签与nav标签（及其相关标签）结合使用 <ul id="myTab" class="nav nav-tabs"> <li class="active"><a href="#1-1" data-toggle="tab">导航栏名称1-1</a></li> <li><a href="#1-2" data-toggle="tab">导航栏名称1-2</a></li>
bootstrap-closable-tab
08-12
bootstrap-closable-tab是Bootstrap框架中的一个组件，用于创建可关闭的选项卡。 在Web开发中，选项卡是一种常见的用于切换内容或导航不同页面的界面元素。而bootstrap-closable-tab组件为这些选项卡添加了关闭按钮的功能，使用户可以方便地关闭不再需要的选项卡。 通过使用bootstrap-closable-tab，开发者可以轻松地创建可关闭的选项卡，并在用户关闭选项卡时执行相应的操作。这个组件在实现上使用了Bootstrap的一些CSS和JavaScript特性，使得界面效果和用户体验都得到了良好的保证。 使用bootstrap-closable-tab的步骤通常如下： 1. 首先，在HTML文件中引入Bootstrap框架的相关CSS和JavaScript文件。 2. 创建一个带有ID的元素，作为选项卡的容器。 3. 使用Bootstrap提供的样式和类名，为选项卡容器添加选项卡的标签和内容。可以根据需求自定义选项卡的样式和布局。 4. 在每个选项卡的标签中添加一个关闭按钮的图标，并为按钮绑定相关的事件处理函数。 5. 在JavaScript文件中编写相应的事件处理函数，以实现选项卡关闭时的功能。例如，可以在函数中删除选项卡对应的内容，并更新界面。 总的来说，bootstrap-closable-tab是Bootstrap框架提供的一个实用组件，可以方便地创建可关闭的选项卡，在Web开发中具有广泛的应用价值。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值