项目实战--响应式导航[1]
一．响应式导航
.logo {
padding:0;
}
#myCarousel {
margin: 50px 0 0 0; //轮播图和导航不会重叠
}
#navbar-collapse ul {
margin-top:0;
}
.carousel-inner img {
margin: 0 auto; //让轮播器的图片自动居中
}
.carousel-control {
font-size: 100px;
}
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand logo"><img src="img/logo.png" alt="瓢城企训网"></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
//大屏时隐藏，缩小时显示
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse">
//响应式导航，缩小时消失
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span> 首页</a></li>
<li><a href="#"><span class="glyphicon glyphicon-list"></span> 资讯</a></li>
<li><a href="#"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>
<li><a href="#"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>
</ul>
</div>
</div>
</nav>
项目实战--响应式导航[1]相关推荐
- 【前端实例代码】如何使用 HTML 和 CSS 快速创建一个响应式导航栏
效果图: 大屏: 小屏: bilibili在线视频演示地址: [前端实例代码]如何使用 HTML 和 CSS 快速创建一个响应式导航栏nav_哔哩哔哩_bilibili完整代码在这里:https:// ...
- Bootstrap实战 - 响应式布局
一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...
- 15款帮助你实现响应式导航的 jQuery 插件
对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...
- html响应式导航栏制作,用Sass制作响应式导航栏(原创)
插件描述:用Sass制作响应式导航栏 更新时间:2017/12/29 下午8:33:04 更新说明:细节优化data-stop='true' : 在手机版上禁止跳转页面// 插入js代码 $(docu ...
- 一款纯css3实现的响应式导航
之前为大家介绍了好几款响应式导航.今天再给大家带来一款纯css3实现的响应式导航.这款导航还有个响应式的搜索框.废话少说,直接上图: 在线预览 源码下载 实现的代码. html代码: <di ...
- 【zblog模板】随然响应式导航网址目录主题
介绍: zblog模板随然响应式导航网址目录主题免费分享,某站卖149 主题特点: 自适应导航站,SEO各个页面全局.分类.标签.文章.页面可自由配置 文章编辑里配有填写站点的[图标+网址+主标题+副 ...
- Bootstrap 响应式导航条
响应式导航条能够根据浏览器窗口宽度,自动调整导航条的显示状态.一般会为响应式导航提供一个导航条和一个按钮. 当浏览器窗口足够宽时,正常显示导航条而不显示按钮.当浏览器窗口宽度缩小到一定程度时,自动隐藏 ...
- Java程序员的日常 —— 响应式导航Demo
这两天想要做响应式的页面,于是本着重复造轮子的想法,模仿Bootstrap官网,精简了一个响应式导航的Demo. 效果 代码 <!DOCTYPE html> <html> &l ...
- Vue 项目前端响应式布局及框架搭建
Vue 项目前端响应式布局及框架搭建 一.flexible 插件 1.引用 flexible 插件 2.修改 flexible 默认配置 3.展示效果 二.cssrem 插件 (px -> re ...
最新文章
- unity panel如何设置控件位置_Unity 关于GUI与UGUI坐标 的一点问题解惑
- mysql汉化版不同_Mysql各个版本区别及官网下载
- java file rename 失败_java重命名文件造成文件不可读写
- php 两个数组 交集_两个数组的交集
- 谁说IT男没有审美？怀揣5000元巨款，我们这样改变生活
- 吴恩达深度学习——2.3 logistic回归损失函数
- 贪心算法——数列极差
- 苹果的水果忍者未能连接到服务器是怎么回事,水果忍者无法连接服务器如何解决...
- coolfire文章之七
- 美通企业日报 | 药明康德上半年收入大增34%；资讯App今日头条第一微鲤进前八...
- IP地址聚合-路由汇聚_共同前缀(1.相似部分2.最后一组二进制比较,取相同,算位数3.转十进制，加位数)
- 【转载】UMTS和GSM的架构
- 【计算机基础】五笔字根分解图
- ubuntu系统清理垃圾
- 由浅入深了解机械键盘：各种轴的区别
- 【二 HLS】HLS接口的简单介绍
- mysql查询和更改时区
- 使用text-shadow 实现字体描边效果
- Maven 如何处理传递性依赖
- 贷款需要查询个人征信报告?-民兴商学院