基于bootstrap实现收缩导航条
作者:sinat_35803474 发布时间:2024-04-28 09:53:16
标签:bootstrap,导航条
本文实例为大家分享了bootstrap实现收缩导航条的具体代码,供大家参考,具体内容如下
效果图
贴上我的代码
<!DocType html>
<html>
<head>
<meta charset="utf-8">
<!--设置浏览器优先使用什么模式来渲染页面-->
<!--告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=divice-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- width:viewport的宽度
width=divice-width:viewport的宽度
initial-scale:初始的缩放比例
maxmum-scale:允许用户缩放的最大比例
user-scalable:是否允许用户手动缩放
--->
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<ul class="navbar navbar-default navbar-fixed-top">
<!--navbar表示导航条
navbar-defaule默认导航条样式
navbar-fixed-top导航固定在顶部-->
<div class="container-fluid">
<!--导航头部-->
<div class="navbar-header">
<a href="index.html" rel="external nofollow" class="navbar-brand">
<span class="glyphicon glyphicon-home">
</span>
<!--导航折叠按钮-->
<button class="navbar-toggle" data-toggle="collspan" data-target="#divNav">
<!--- navbar-toggle:【触发】按钮,会有下拉导航 data-toggle:交替执行某动作,collapse:展开和收缩
data-target:目标对象(自己定义一个名字-->
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<!--按钮里的内容,三条横杠-->
</button>
<!--点击按钮将显示的导航栏目-->
<div id="divNav" class="collapse nav-collapse">
<!--这里的div的id要和上面的data-target值一致,nav-collapse就是折叠导航--->
<ul class="nav navbar-nav">
<li>首页</li>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
</div>
</div>
</div>
</ul>
</body>
</html>
这就完成了。


猜你喜欢
- 今天无意在坛子里看到这样一个求救帖(这里),看了一下,感觉问题比较好解决。但是问题背后的问题却引起了我的反思。把他的页面整理一下看看(为了便
- 看过一篇关于下载网页中图片的文章,它只能下载以http头的图片,我做了些改进,可以下载网页中的所有连接资源,并按照网页中的目录结构建立本地目
- 当你想快速共享一个目录的时候,这是特别有用的,只需要1行代码即可实现。FTP 服务器,在此之前我都是使用Linux的vsftpd软件包来搭建
- 表单介绍说到表单,在HTML中表单的创建时通过<form>标签实现的,在<form>标签内部,字段通过使用<i
- 本文实例为大家分享了python实现烟花小程序的具体代码,供大家参考,具体内容如下'''FIREWORKS SIMU
- python对Ref文档进行去重首先将txt文档提取到Excel表格中筛选出重复项,并且整理到txt中:需要去重的目标txt也准备好:接下来
- pyyaml模块在python中用于处理yaml格式数据,主要使用yaml.safe_dump()、yaml.safe_load()函数将p
- 数据库配置1.安装数据库:自行安装 我的SQL Server版本为2019 2.登录数
- 内容摘要:“ASP”(Active Server Pages)作为一种典型的服务器端网页设计技术,被广泛地应用在网上银行
- Pandas中Series和DataFrame的两种数据类型中都有nunique()和unique()方法。这两个方法作用很简单,都是求Se
- 一、前言CRITIC权重法是一种比熵权法和标准离差法更好的客观赋权法:它是基于评价指标的对比强度和指标之间的冲突性来综合衡量指标的客观权重。
- javascript动画效果 打开层/关闭层:运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD
- Python3的 元组(Tuple)Python 的元组与列表类似,不同之处在于元组的元素不能修改。元组使用小括号 ( ),列表使用方括号
- iterrows(),iteritems(),itertuples()区别Python函数之iterrows, iteritems, ite
- 工作中需要从一个数据库中的表GIS_WEICHAI_DATA_1S中的数据导入到另个一数据库的表GIS_WEICHAI_DATA_1S中,数
- 本文实例为大家分享了python3实现飞机大战的具体代码,供大家参考,具体内容如下以下是亲测Python飞机大战全部代码,在保证有pygam
- 用法:DataFrame.drop(labels=None,axis=0, index=None, columns=None, inplac
- <% Function XMLEncode(byVal sText) sText = Replace(sText, "&am
- 前言例如,当使用pandas读取csv文件时,如果元素为空,则将其视为缺失值NaN(非数字)。使用dropna()方法删除缺失值,使用fil
- 1.在python中excel的简单读写操作,推荐使用xlrd(特别是读操作) 2.到http://pypi.python.org/pypi