bootstrap-响应式导航条
1.运行效果如图所示
2.实现代码如下
<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>响应式导航条</title><!-- 最新版本的 Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"><!-- 可选的 Bootstrap 主题文件（一般不用引入） --><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body><!--代码--><div class="navbar navbar-default" role="navigation"><div class="navbar-header"><!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 --><button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"><span class="sr-only">Toggle Navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 --><a href="##" class="navbar-brand">xx网</a></div><!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 --><div class="collapse navbar-collapse navbar-responsive-collapse"><ul class="nav navbar-nav"><li class="active"><a href="##">网站首页</a></li><li><a href="##">系列教程</a></li><li><a href="##">名师介绍</a></li><li><a href="##">成功案例</a></li><li><a href="##">关于我们</a></li></ul></div></div><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
bootstrap-响应式导航条相关推荐
- Bootstrap 响应式导航条
响应式导航条能够根据浏览器窗口宽度,自动调整导航条的显示状态.一般会为响应式导航提供一个导航条和一个按钮. 当浏览器窗口足够宽时,正常显示导航条而不显示按钮.当浏览器窗口宽度缩小到一定程度时,自动隐藏 ...
- html5响应式导航条,10个响应式设计的导航菜单源码-附教程
10个响应式设计的导航菜单源码-附教程 Sponsor 在2013年里,响应式Web设计将会开始普及,我们应该学习这些新技术,尤其作为网页设计师和前端开发人员,学习CSS3样式表和HTML5是必不可少 ...
- 练习2:课工场响应式导航条_作业帮直播课APP下载最新版入口
作业帮直播课app由作业帮一课升级更名而来,作业帮直播课app课程设置科学合理,课程紧贴校内教学进度,老师根据学习要求进行同步教学.作业帮直播课app更有长期班课.专题课.小学兴趣班等,欢迎加入. 软 ...
- Bootstrap学习笔记——导航条、分页导航
1 导航条 导航条(navbar)比航(nav)复杂很多:导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 1.1 基础导 ...
- html5自适应性响应式banner幻灯片切换,html5 css3 bootstrap响应式幻灯片带进度条的图片切换效果代码...
特效描述:html5 css3 bootstrap 响应式幻灯片 带进度条 图片切换效果.jquery+css3带倒计时的全屏幻灯片插件Bootslider.js 代码结构 1. 引入CSS 2. 引 ...
- Java程序员的日常 —— 响应式导航Demo
这两天想要做响应式的页面,于是本着重复造轮子的想法,模仿Bootstrap官网,精简了一个响应式导航的Demo. 效果 代码 <!DOCTYPE html> <html> &l ...
- bootstrap响应式布局
目录 编辑 布局container 容器: 简单的响应式导航栏: bootstrap快速开发: bootstrap 栅格系统: 响应式开发里面首先需要一个布局容器:class = "con ...
- Bootstrap_响应式导航栏，汉堡按钮，遮盖
<!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>B ...
- Boostrap_响应式导航栏，点击汉堡按钮遮盖下方元素
Boostrap_响应式导航栏,点击汉堡按钮遮盖下方元素 官网那个是直接把其他元素挤到下面了 根据这个大哥的源码改了改:https://blog.csdn.net/mazhili1991/articl ...
最新文章
- 【深度学习】——物体检测细节处理（NMS、样本不均衡、遮挡物体）
- android keyguard,Android8.1 SystemUI Keyguard之指纹解锁流程
- Hive 之 导入导出数据
- 【嵌入式】Linux开发工具make及makefile设计
- Android加密算法之AES加密和解密实现
- MyEclipse安装包
- LINUX上安装openjdk
- 大数组，找某数字的左，右边界
- 第三届蓝桥杯省赛---马虎的算式
- 我的CSDN博客下载器，下载博客文章保存为mht文件
- FDD与TDD工作原理
- 到底程序员的工资有多高？你不了解的程序员！
- python基础练习题1(12题)
- 15幅非常有创意的影子摄影作品欣赏
- 企业邮箱支持通过手机号登录邮箱
- 解决google扩展程序已损坏的问题
- python unpacking_使用Python将数组的元素导出到变量中(unpacking)
- 这事妥了，百度云三步走战略全面支持IPv6
- uniapp代驾+顺风车+货运三合一源码分享
- Could not find a suitable set of interfaces for VIPs.