Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >bootstrap 常用导航菜单样式

bootstrap 常用导航菜单样式

用户5760343

发布于 2019-07-05 02:41:11

发布于 2019-07-05 02:41:11

6.3K0

举报

文章被收录于专栏：sktjsktj

image.png

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 标签页与胶囊式标签页</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>

<div class="container"> <h2>动态标签</h2> <p><strong>提示:</strong> 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。</p> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">首页</a></li> <li><a data-toggle="tab" href="#menu1">菜单 1</a></li> <li><a data-toggle="tab" href="#menu2">菜单 2</a></li> <li><a data-toggle="tab" href="#menu3">菜单 3</a></li> </ul>

<div class="tab-content"> <div id="home" class="tab-pane fade in active"> <h3>首页</h3> <p>菜鸟教程 —— 学的不仅是技术，更是梦想！！！</p> </div> <div id="menu1" class="tab-pane fade"> <h3>菜单 1</h3> <p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p> </div> <div id="menu2" class="tab-pane fade"> <h3>菜单 2</h3> <p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p> </div> <div id="menu3" class="tab-pane fade"> <h3>菜单 3</h3> <p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p> </div> </div> </div>

</body> </html>

image.png

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 标签页与胶囊式标签页</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>

<div class="container"> <h2>动态标签</h2> <p><strong>提示:</strong> 与 .tab-pane 和 data-toggle="tab" (data-toggle="pill" ) 一同使用, 设置标签页对应的内容随标签的切换而更改。</p> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#home">首页</a></li> <li><a data-toggle="tab" href="#menu1">菜单 1</a></li> <li><a data-toggle="tab" href="#menu2">菜单 2</a></li> <li><a data-toggle="tab" href="#menu3">菜单 3</a></li> </ul>

<div class="tab-content"> <div id="home" class="tab-pane fade in active"> <h3>首页</h3> <p>菜鸟教程 —— 学的不仅是技术，更是梦想！！！</p> </div> <div id="menu1" class="tab-pane fade"> <h3>菜单 1</h3> <p>这是菜单 1 显示的内容。这是菜单 1 显示的内容。这是菜单 1 显示的内容。</p> </div> <div id="menu2" class="tab-pane fade"> <h3>菜单 2</h3> <p>这是菜单 2 显示的内容。这是菜单 2 显示的内容。这是菜单 2 显示的内容。</p> </div> <div id="menu3" class="tab-pane fade"> <h3>菜单 3</h3> <p>这是菜单 3 显示的内容。这是菜单 3 显示的内容。这是菜单 3 显示的内容。</p> </div> </div> </div>

</body> </html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019.05.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

万字详解高可用架构设计

Go 开发者必备：Protocol Buffers 入门指南

10分钟带你彻底搞懂分布式链路跟踪

多租户的 4 种常用方案

亿级月活的社交 APP，陌陌如何做到 3 分钟定位故障？

60页PPT全解：DeepSeek系列论文技术要点整理

bootstrap导航栏(bootstrap页面)

bootstrap https java 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/126954.html原文链接：https://javaforall.cn

全栈程序员站长

2022/08/01

3.7K0

bootstrap 导航栏淡入淡出常用样式

ios java 网站 apache

<ul id="myTab" class="nav nav-tabs"> <li class="active"> <a href="#home" data-toggle="tab"> 菜鸟教程 </a> </li> <li><a href="#ios" data-toggle="tab">iOS</a></li> <li class="dropdown"> <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Java <b class="caret"></b> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1"> <li><a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a></li> <li><a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a></li> </ul> </li> </ul> <div id="myTabContent" class="tab-content"> <div class="tab-pane fade in active" id="home"> <p>菜鸟教程是一个提供最新的web技术站点，本站免费提供了建站相关的技术文档，帮助广大web技术爱好者快速入门并建立自己的网站。菜鸟先飞早入行——学的不仅是技术，更是梦想。</p> </div> <div class="tab-pane fade" id="ios"> <p>iOS 是一个由苹果公司开发和发布的手机操作系统。最初是于 2007 年首次发布 iPhone、iPod Touch 和 Apple TV。iOS 派生自 OS X，它们共享 Darwin 基础。OS X 操作系统是用在苹果电脑上，iOS 是苹果的移动版本。</p> </div> <div class="tab-pane fade" id="jmeter"> <p>jMeter 是一款开源的测试软件。它是 100% 纯 Java 应用程序，用于负载和性能测试。</p> </div> <div class="tab-pane fade" id="ejb"> <p>Enterprise Java Beans（EJB）是一个创建高度可扩展性和强大企业级应用程序的开发架构，部署在兼容应用程序服务器（比如 JBOSS、Web Logic 等）的 J2EE 上。 </p> </div> </div>

用户5760343

2019/07/05

1.8K0

bootstrap menu 常用样式 2

https html c++网络安全 bootstrap

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 带有下拉菜单的标签页</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>

用户5760343

2022/01/10

5700

bootstrap menu 常用样式 2

前端|Bootstrap——导航组件

class data dropdown href toggle

Bootstrap是一个用于快速开发Web 应用程序和网站的前端框架，它提供了一个带有网格系统、链接样式、背景的基本结构。Bootstrap提供了许多的组件，其中就包括导航组件。这在很大程度上简化了操作。通常都是利用列表实现来导航的，常用的是无序列表（<ul>）和有序列表（<ol>）。自定义列表（<dl>）一般不会用来实现导航。

算法与编程之美

2020/03/25

6.7K0

bootstrap 表单 3 按钮

https html c++网络安全 bootstrap

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

用户5760343

2022/01/10

1.4K0

bootstrap 表单 3 按钮

Jump Start Bootstrap 第4章

JavaScript是网页上事实上的脚本语言。流行的网页功能，例如：漂亮的图片幻灯片、下拉菜单、弹出框等，都可以结合JavaScript和CSS实现。在这章，我们将讨论一些Bootstrap 3 提供的随时可用的JavaScript插件，很容易创建一些高级的网页功能。

Remember_Ray

2018/12/20

28.8K0

Jump Start Bootstrap 第4章

BootStrap应用开发学习入门1

bootstrap css 编程算法 api jquery

什么是字体图标？答:字体图标是在 Web 项目中使用的图标字体,可以通过基于项目的 Bootstrap 来免费使用这些图标。

全栈工程师修炼指南

2020/10/23

45.1K0

BootStrap应用开发学习入门1

【Java 进阶篇】深入了解 Bootstrap 插件

java bootstrap class 表单验证插件

Bootstrap 是一个流行的前端框架，提供了各种强大的插件，用于增强网页和应用程序的功能和交互性。本篇博客将深入介绍 Bootstrap 插件，适用于那些刚刚开始学习前端开发的小白。

繁依Fanyi

2023/10/23

3870

【Java 进阶篇】深入了解 Bootstrap 插件

python测试开发django-153.bootstrap导航-标签页切换(nav-tabs)

java javascript bootstrap

Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。标签页.nav-tabs 类依赖 .nav 基类。

上海-悠悠

2021/10/20

1.2K0

bootstrap menu常用样式 1

https 网络安全 c++html javascript

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 默认的导航栏</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>

用户5760343

2022/01/10

6840

bootstrap menu常用样式 1

05_Bootstrap插件02

bootstrap button class data 插件

给链接、导航等元素嵌套 .badge 元素，可以很醒目的展示新的或未读的信息条目。

用户9184480

2024/12/13

470

Bootstrap3-导航条[通俗易懂]

c++java https 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/129314.html原文链接：https://javaforall.cn

全栈程序员站长

2022/07/29

2.6K0

【Java 进阶篇】深入了解 Bootstrap 表格和菜单

java bootstrap 表格设计数据

表格和菜单是网页设计中的重要组成部分，它们用于展示数据、导航和用户交互。Bootstrap 是一个强大的前端框架，提供了丰富的表格样式和菜单组件，使开发者能够轻松创建功能丰富的网页。在本文中，我们将深入探讨 Bootstrap 中表格和菜单的使用，适合初学者，帮助他们更好地理解和应用这些元素。

繁依Fanyi

2023/10/22

3960

【Java 进阶篇】深入了解 Bootstrap 表格和菜单

Bootstrap实用功能总结

1、定义折叠按钮时除了折叠的属性之外，还必须加上样式： .navbar-toggler

菲宇

2020/08/02

2.5K0

python测试开发django-188.Bootstrap折叠（Collapse）插件

css javascript bootstrap

前言折叠（Collapse）插件可以很容易地让页面区域折叠起来。如果您想要单独引用该插件的功能，那么您需要引用 collapse.js， bootstrap已经包含了这个插件。可以直接引用 bootstrap.js 或压缩版的 bootstrap.min.js 折叠（Collapse）以使用带有属性的链接href或带有属性的按钮data-target。在这两种情况下，data-toggle=”collapse”都是必需的。单击下面的按钮以通过类更改显示和隐藏另一个元素： .collapse隐藏内容

上海-悠悠

2022/03/10

3K0

Bootstrap响应式前端框架笔记十九——标签页的使用

Bootstrap中通过为导航标签增加data-toggle="tab"，配合类或id来进行标签页的关联，示例如下：

珲少

2018/08/15

8670

Bootstrap响应式前端框架笔记十九——标签页的使用

bootstrap 滚动监听

ios java apache svn html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 滚动监听（Scrollspy）插件</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>

用户5760343

2019/07/05

1.4K0

BootStrap基础

bootstrap css api jquery https

简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。 Bootstrap是基于HTML,CSS,Javascript的。

不愿意做鱼的小鲸鱼

2022/08/24

9860

Bootstrap实战 - 注册和登录

bootstrap 图片标签

标签页的使用与导航栏类似，同时都依赖于基础样式 nav，不同的是附加样式变成了 nav-tabs 和 nav-pills（胶囊式），也不用在外面加上一层样式为 navbar navbar-* 的 <div> 元素。

除除

2022/01/13

1.1K0

Bootstrap实战 - 注册和登录

bootstrap 文字颜色

https html 网络安全 c++

<p class="text-muted">该段落使用了样式 "text-muted"。</p>

用户5760343

2022/01/10

3.3K0

相关推荐

bootstrap导航栏(bootstrap页面)

更多 >