响应式开发从原理到实战案例(八):使用bootstrap V3.3.7实现响应式页面
来源:互联网 发布:java 发送短信接口 编辑:程序博客网 时间:2024/05/22 01:44
与V2.3.2的变化
从V 3.x版本开始,丢弃了bootstrap-responsive.css文件,而是整合到bootstrap.css文件了。页面的布局和样式的名称也有些变化了
具体实现的步骤
1、引入相关的文件
引入一个css文件 bootstrap.css
使用meta设置移动设备自适应
进入相关的脚本文件
根据bootstrap框架的要求,对jquery的文件有版本要求
2、外层结构的变化
第一层的样式与v2.3.2是一样的,第二层 与v2.3.2不一样,直接进入到container容器,v2.3.2是 nav-inner。
3、菜单内容的变化
1.新增一个 <div class="navbar-header"> ,作为导航栏的头部
2. 导航按钮的样式为navbar-toggle
3.导航菜单的类名为navbar-collapse ,菜单默认为展开的 需要使用collapse in表示
4.导航菜单项的需要多加 navbar-nav类名
网站代码下载地址 : 本案例完整代码
~~~~~~~~~~~~~~~~~下一节《响应式改版完整案例-智学无忧首页制作》~~~~~~~~~~~~~~~~~
0 0
- 响应式开发从原理到实战案例(八):使用bootstrap V3.3.7实现响应式页面
- 响应式开发从原理到实战案例(七):使用bootstrap V2.3.2实现响应式页面
- 响应式开发从原理到实战案例(三):静态页面转响应式页面
- 响应式开发从原理到实战案例(五):使用媒体查询改进响应式页面
- 响应式开发从原理到实战案例(六):bootstrap框架介绍
- 响应式开发从原理到实战案例(九):响应式改版完整案例-静态页面制作
- 响应式开发从原理到实战案例(十三):响应式改版完整案例-页脚
- 响应式开发从原理到实战案例(十五):响应式改版完整案例-完结
- 响应式开发从原理到实战案例(二):制作没有响应式的静态页面
- 响应式开发从原理到实战案例(一):响应式基本概述
- 响应式开发从原理到实战案例(十):响应式改版完整案例-头部列表
- 响应式开发从原理到实战案例(十一):响应式改版完整案例-头部菜单
- 响应式开发从原理到实战案例(十二):响应式改版完整案例-文章列表
- 响应式开发从原理到实战案例(十四):响应式改版完整案例-图片处理
- 响应式开发从原理到实战案例(四):媒体查询语法介绍
- 使用BootStrap进行响应式布局案例
- bootstrap编写响应式页面
- 响应式页面实现
- android 中 Handler 的简单使用
- 优酷路由宝L1刷Breed和Padavan固件(校园锐捷网络路由器)
- Linux trick
- 【Netty源码学习】ChannelPipeline(一)
- 第三方皮肤使用
- 响应式开发从原理到实战案例(八):使用bootstrap V3.3.7实现响应式页面
- Codeforce数据结构目录
- linux下解决文件乱码问题及查看文件编码方法
- python爬虫之爬百度美女图片
- newton插值法c++版
- InetAddress类
- CoreData在Swift 3.0中的一点改变
- NULL,0和'\0'辨析
- 算法-归并排序