Bootstrap制作胶囊标签页

最新推荐文章于 2024-05-10 03:06:07 发布
最新推荐文章于 2024-05-10 03:06:07 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangaoyuan1999/article/details/111241960
版权

胶囊标签页：

1.使用一个完整的标签页可以分为页头选择卡和内容两部分
2.页头使用ul标签在ul标签中能够添加.nav和.nav-tabs类，将会应用Bootstrap标签页样式，
添加.nav和.nav-pills类会应用胶囊标签样式
3.需要几个标签项就添加几个li
4.在li标签中添加a标签，a标签的href的值直接跟标签页下面的内容div的id关联，十分重要
5.在a标签中添加data-toggle="tab"或data-toggle="pill"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible"content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>胶囊标签页</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body > 
  <ul class="nav nav-pills">
      <li class="active" role="presentation" ><a href="#home" role="tab" data-toggle="pill">Home</a></li>
      <li  role="presentation"><a href="#sport" role="tab" data-toggle="pill">sport</a></li>
      <li  role="presentation"><a href="#messages" role="tab" data-toggle="pill">Messages</a></li>
  </ul>
  <div class="tab-content">
      <div class="tab-pane active" id="home">主页</div>
      <div class="tab-pane" id="sport">运动</div>
      <div class="tab-pane" id="messages">信息</div>
  </div>
</body>
<script src="jquery/jquery-1.11.0.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</html>

在这里插入图片描述
将.nav和.nav-pills类换成.nav和.nav-tabs类将显示标签页样式
在这里插入图片描述

空谷丶幽兰
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap16---导航（标签页，胶囊，导航条）
历程
05-27 3288
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。 导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。 viewport 相关 @grid-float-breakpoint      修改视口的阈值，从而
Bootstrap 胶囊式标签页nav-pills和iframe的组合运用（一）
weixin_55945754的博客
01-24 1770
在Bootstrap的组件中，有个胶囊式标签页。在这里记录一下。怎么将这个胶囊是标签页和我们H5的<iframe>结合起来。 查看Boostrap帮助文档 组件 在Bootstrap帮助文档的组件中，可以找到导航 -> 胶囊式标签页，在这里可以看到这部分的代码。 但是，这里只有如图所示的三个标签页的按钮，只能按，没有任何实际的效果。怎么办捏。于是我找啊找，就到了下面这个步骤了。 JavaScript插件 于是，找到了帮助文档 -> JavaScript插件 -> 标签页，在其
简单实现Bootstrap标签页
08-31
主要教大家简单实现Bootstrap标签页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap 胶囊式标签页nav-pills和iframe的组合运用（二）
weixin_55945754的博客
01-24 865
上期回顾：Bootstrap 胶囊式标签页nav-pills和iframe的组合运用（一） 所以，我们只需要在tap-content``tap-pane中用上iframe就可以了。 上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-
Bootstrap 5-圆角胶囊
最新发布
m0_73839298的博客
05-10 194
【代码】Bootstrap 5-圆角胶囊。
antd Tabs 实现 胶囊样式标签页
赵乘风_i
04-13 3381
现在的项目是基于antd了，但又要和之前的UI保持一致，设计师希望还用之前的tabs 标签页的样式，所以就需要在antd Tabs的基础上进行一些样式的修改。如下： 在 antd Tabs type='card'的基础上进行样式修改 <div className='c-tab-capsule'> <Tab type='card'> {children} </Tab> </div> .c-tab-capsule { .ant-tabs-
python测试开发django-153.bootstrap导航-标签页切换(nav-tabs)
qq_27371025的博客
10-13 2110
前言 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 5-导航-选项卡下拉菜单/胶囊下拉菜单
m0_73839298的博客
09-23 1064
4.给其中一个导航菜单项nav-item设置名为dropdown的类，来表示导航菜单项具有下拉列表的功能，来表示导航菜单项是一个下拉列表，在超链接a中设置名为dropdown-toggle来表示下拉菜单样式，属于js属性，下拉列表是需要点击触发事件的，就设置data-bs-toggle，data-bs-toggle的意思就是表示当点击时触发什么事件？1.导航菜单用ul>li表示实现，首先创建一个导航菜单容器nav，并把导航菜单容器显示为导航菜单胶囊，使用nav-pills。什么是导航菜单选项卡下拉列表？
bootstrap胶囊导航
zhengzhongz的博客
02-27 676
<template> <div> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#one-pill">胶囊1</a> </li> ...
Bootstrap --表格菜单和胶囊式菜单
_修铁路的、的博客
11-08 4783
Bootstrap –表格菜单和胶囊式菜单 1.新建一个html / jsp ； 2.在新建的 html /jsp 中导入 bootstrap.css<link rel="stylesheet" href="../css/bootstrap.css">1).创建表格菜单 引用class： nav nav-tabsli 中的 class =”active” 表示默认选中该菜单选项<div cl
bootstrap标签页
杨哥的博客
05-16 1164
标签页 XXX a:focus { outline: none; /*在火狐中获取焦点时有虚框，需要去掉*/ } html5 bootstrop jquery extjs -->
Bootstrap每天必学之标签页（Tab）插件
09-02
Bootstrap每天必学之标签页（Tab）插件，通过这个插件您可以把内容放置在标签页或者是胶囊式标签页甚至是下拉菜单标签页中，感兴趣的小伙伴们可以参考一下
基于Bootstrap的多标签页设计源码
04-12
本Bootstrap多标签页设计源码包含102个文件，主要使用CSS、HTML和JavaScript编写。它允许用户增加、关闭和折叠标签页，提供了智能、快速搭建和多种样式选择。适用于各种Web应用程序，易于集成和定制。
Bootstrap实现的标签页内容切换显示效果示例
08-30
主要介绍了Bootstrap实现的标签页内容切换显示效果,结合完整实例形式分析了基于Bootstrap实现的标签页内容切换显示功能相关操作技巧,非常简单实用,需要的朋友可以参考下
[html5技术]基于bootstrap制作的多标签页(tabs)
10-24
参考文档:https://blog.csdn.net/hj7jay/article/details/83345246
bootstrap多标签页mutitab
01-03
利用bootatrap和jquery整合的多标签后台管理框架，用到了国外流行的后台管理框架adminlte
ElementUI中Tabs标签页样式修改------胶囊Tab切换栏
m0_70782896的博客
01-18 907
【代码】ElementUI中Tabs标签页样式修改------胶囊Tab切换栏。
bootstrap tab标签
ddem89353的博客
06-07 248
标签页用法 标签页组件分为两部分，导航区与面板区。导航区用于绑定点击事件，切换对应的面板。 导航区为一个<ul>列表，要求<ul>带"navnav-tabs"或"navnav-pills"这两种类名。<li>下的标签要求有data-toggle="tab"属 性，你可以通过data-target或href指定对应的...
关于Bootstrap中的分页实现
伱糸淂忄
05-19 1478
Bootstrap 框架实现分页功能有两种方式：静态分页 和 动态分页； 所谓静态分页，是通过Bootstrap实例来实现的、框架默认的分页实现方式； 所谓动态分页，是通过基于Bootstrap通过jquery_pagination插件来实现分页的； 静态分页： <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认的分页</title> <link href="h.
请帮我写一段代码，使用原生CSS完成类似BOOSTSTRAP一样的胶囊式标签页，要求：标签有四个，使用垂直方向堆叠排列
05-21
以下是 HTML 和 CSS 的代码实现： ``` <!DOCTYPE html> <html> <head> <title>Vertical Tabs</title> <style> .tab { border: 1px solid #ccc; background-color: #f1f1f1; overflow: hidden; width: 200px; } .tab button { background-color: inherit; color: #666; display: block; padding: 10px 16px; width: 100%; border: none; outline: none; text-align: left; cursor: pointer; transition: 0.3s; font-size: 16px; } .tab button.active, .tab button:hover { background-color: #ddd; color: black; } .tabcontent { padding: 12px 20px; border: 1px solid #ccc; border-top: none; } </style> </head> <body> <div class="tab"> <button class="active">Tab 1</button> <div class="tabcontent"> <h3>Content for Tab 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac vehicula orci. Ut cursus ipsum vitae elit laoreet lobortis. Mauris quis ex a risus lobortis lacinia. Morbi feugiat aliquam lectus, non porttitor velit viverra a. Ut aliquet, nunc et blandit commodo, felis leo aliquam sapien, id tincidunt risus orci et nulla. Nulla facilisi. Sed et egestas massa. Aenean vel mi vel nisl fermentum hendrerit.</p> </div> <button>Tab 2</button> <div class="tabcontent"> <h3>Content for Tab 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac vehicula orci. Ut cursus ipsum vitae elit laoreet lobortis. Mauris quis ex a risus lobortis lacinia. Morbi feugiat aliquam lectus, non porttitor velit viverra a. Ut aliquet, nunc et blandit commodo, felis leo aliquam sapien, id tincidunt risus orci et nulla. Nulla facilisi. Sed et egestas massa. Aenean vel mi vel nisl fermentum hendrerit.</p> </div> <button>Tab 3</button> <div class="tabcontent"> <h3>Content for Tab 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac vehicula orci. Ut cursus ipsum vitae elit laoreet lobortis. Mauris quis ex a risus lobortis lacinia. Morbi feugiat aliquam lectus, non porttitor velit viverra a. Ut aliquet, nunc et blandit commodo, felis leo aliquam sapien, id tincidunt risus orci et nulla. Nulla facilisi. Sed et egestas massa. Aenean vel mi vel nisl fermentum hendrerit.</p> </div> <button>Tab 4</button> <div class="tabcontent"> <h3>Content for Tab 4</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac vehicula orci. Ut cursus ipsum vitae elit laoreet lobortis. Mauris quis ex a risus lobortis lacinia. Morbi feugiat aliquam lectus, non porttitor velit viverra a. Ut aliquet, nunc et blandit commodo, felis leo aliquam sapien, id tincidunt risus orci et nulla. Nulla facilisi. Sed et egestas massa. Aenean vel mi vel nisl fermentum hendrerit.</p> </div> </div> <script> var buttons = document.querySelectorAll(".tab button"); var tabcontents = document.querySelectorAll(".tabcontent"); buttons.forEach(function(button, index) { button.addEventListener("click", function() { buttons.forEach(function(button) { button.classList.remove("active"); }); tabcontents.forEach(function(tabcontent) { tabcontent.style.display = "none"; }); button.classList.add("active"); tabcontents[index].style.display = "block"; }); }); </script> </body> </html> ``` 在这个代码中，我们创建了一个类名为 `tab` 的 `div` 元素，其中包含了四个 `button` 元素和四个 `div` 元素。 `button` 元素是标签的标题，而 `div` 元素是标签的内容。我们使用 CSS 中的 `display: none` 属性来隐藏所有的标签内容，当用户点击某个标签时，我们将对应的标签内容显示出来。 在 CSS 中，我们使用了 `border` 属性来设置标签的边框，`background-color` 属性来设置标签的背景色，`padding` 属性来设置标签的内边距，`width` 属性来设置标签的宽度，`text-align` 属性来设置标签的文本对齐方式，以及其他的一些样式属性。 在 JavaScript 中，我们使用了 `querySelectorAll` 函数来获取所有的 `button` 元素和 `div` 元素，然后使用 `forEach` 函数来遍历它们。当用户点击某个标签时，我们将遍历所有的标签并将它们的样式重置，然后再将当前被点击的标签设置为 `active` 标签并将它对应的内容显示出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值