Bootstrap实现响应式导航栏效果
作者：林炳文Evankaka 发布时间：2023-08-13 15:32:13
标签：Bootstrap,导航
为了给导航栏添加响应式特性，您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。
效果图：
下面的实例演示了这点：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 响应式的导航栏</title>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery-2.1.4.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">12345</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">fgghh</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">vgghhr</a></li>
<li><a href="#">dg</a></li>
<li><a href="#">sfg</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
0
投稿猜你喜欢
- 测试环境Python 3.6.2Win 10 内存 8G，CPU I5 1.6 GHz背景描述这个作品来源于一个日志解析工具的开发，这个开发
- 下面请看本文详细介绍.Perl字符串处理函数1. index语法:position=index(string,substring,posit
- #!/usr/bin/env python # coding=utf-8 #--------------------------------
- 将数据存储在不同的数据结构中时，搜索是非常基本的必需条件。最简单的方法是遍历数据结构中的每个元素，并将其与您正在搜索的值进行匹配。这就是所谓
- Python 中导入csv数据的三种方法，具体内容如下所示：1、通过标准的Python库导入CSV文件：Python提供了一个标准的类库CS
- 问题描述今天在使用Numpy中的矩阵做相减操作时,出现了一些本应为负值的位置自动转换为了正值,观察发现转换后的正值为原本的负值加上256得到
- 介绍：细处着手，巧处用功。高手和菜鸟之间的差别就是：高手什么都知道，菜鸟知道一些。电脑小技巧收集最新奇招高招，让你轻松踏上高手之路。摘要：
本文实例讲述了Python实现的用户登录系统功能。分享给大家供大家参考，具体如下：有N,E,Q三个选择，若选择Q或者中断，则系统退出。若其他- 今天在工作时遇见了某些代码需要延时操作的情况。具体情况为前台grid在执行完增删改操作后需要在增加或者修改弹框点击确定导致弹框消失后，gri
- 本文实例讲述了Python基于lxml模块解析html获取页面内所有叶子节点xpath路径功能。分享给大家供大家参考，具体如下：因为需要使用
- Redisredis是一个key-value存储系统。和Memcached类似，它支持存储的value类型相对更多，包括string(字符串
- 框架介绍在之前的.NET中，微软还没有提供过像样的日志框架，目前能用的一些框架比如Log4Net、NLog、CommonLogging使用起
- 1. 采用工作区设置默认解释器的方式（推荐）下载完vscode，并安装python支持之后。使用vscode打开一个空文件夹。点击左侧的运行
- 在日常工作中，除了需要从 JSON 转化为 Go 的数据结构。但往往相反的情况是：我们需要将数据以 JSON 字符串的形式发送到 Web 服
- 摘要什么是python对象的标识python对象相等的判断自定义python对象相等的条件python对象的标识python对象标识就是py
- python中，遍历dict的方法有四种。但这四种遍历的性能如何呢？我做了如下的测试l = [(x,x) for x in xrange(1
- 今天我们会讲到一个[装饰器]注记：链接“装饰器”指Python3教程中的装饰器教程。可以在这里快速了解什么是装饰器。@functools.l
- 本文实例讲述了thinkPHP实现MemCache分布式缓存功能。分享给大家供大家参考，具体如下：两天在研究MemCache分布式缓存的问题
- 触发器的概念：“在数据库中为响应一个特殊表格中的某些事件而自动执行的程序代码。”(Wikipedia)说得简单一些，它是在一个特殊的数据库事
- 新手小白，一直在为cmd窗口的暗白色文字感到苦恼，在网上找了许多方法（也就那两种吐舌头），现在稍微整理了一下，便于使用。效果图：import
