响应式开发从原理到实战案例(七):使用bootstrap V2.3.2实现响应式页面
来源:互联网 发布:归并排序java实现 编辑:程序博客网 时间:2024/05/21 19:31
实现的主要步骤:
1、去掉之前的样式文件,应用bootstrap的样式文件。
index.css样式文件可以不用了,全部采用bootstrap框架的样式
2、在body结束前,先后引入jquery和bootstrap.js
- 在body之前引入js文件,防止页面内容呈现缓慢
- 先引入jquery文件,bootstrap框架以来jquery
3、定义导航栏
<div class="navbar navbar-inverse navbar-fixed-top"></div>
navbar:导航栏
navbar-inverse:黑色背景,白色文字
navbar-fixed-top:使用定位固定在页面上面
4、根据框架的规范,定义三个div嵌套关系
navbar:控制与外面的布局关系
navbar-inner:控制导航栏内部的布局关系
container:在bootstrap框架下,所有呈现的内容都是在container容器下定义
5、导航菜单
nav-collapse:导航菜单的折叠与伸缩
nav:导航菜单内容
active:激活的菜单项
6、导航按钮
btn:对按钮的修饰
btn-navbar:导航按钮样式
data-target:目标关联,可以通过类样式或id样式关联
data-toggle:目标的行为,collapse表示折叠和展开的行为
注意:导航按钮不是input标签而是H5新标签button
完整案例下载地址 bootstrap V2.3.2实现响应式页面
~~~~~~~~~~~~~~~~~下一节《使用bootstrap V3.3.7实现响应式页面》~~~~~~~~~~~~~~~~~
0 0
- 响应式开发从原理到实战案例(七):使用bootstrap V2.3.2实现响应式页面
- 响应式开发从原理到实战案例(八):使用bootstrap V3.3.7实现响应式页面
- 响应式开发从原理到实战案例(三):静态页面转响应式页面
- 响应式开发从原理到实战案例(五):使用媒体查询改进响应式页面
- 响应式开发从原理到实战案例(六):bootstrap框架介绍
- 响应式开发从原理到实战案例(九):响应式改版完整案例-静态页面制作
- 响应式开发从原理到实战案例(十三):响应式改版完整案例-页脚
- 响应式开发从原理到实战案例(十五):响应式改版完整案例-完结
- 响应式开发从原理到实战案例(二):制作没有响应式的静态页面
- 响应式开发从原理到实战案例(一):响应式基本概述
- 响应式开发从原理到实战案例(十):响应式改版完整案例-头部列表
- 响应式开发从原理到实战案例(十一):响应式改版完整案例-头部菜单
- 响应式开发从原理到实战案例(十二):响应式改版完整案例-文章列表
- 响应式开发从原理到实战案例(十四):响应式改版完整案例-图片处理
- 响应式开发从原理到实战案例(四):媒体查询语法介绍
- 使用BootStrap进行响应式布局案例
- bootstrap编写响应式页面
- 响应式页面实现
- Shader的数学知识
- Java设计模式13——迭代器模式
- CF - 219D 线段树 + dfs序
- 欢迎使用CSDN-markdown编辑器
- 数据库Realm的使用
- 响应式开发从原理到实战案例(七):使用bootstrap V2.3.2实现响应式页面
- ADO.NET操作数据库(四)
- hdu2844 Coins
- webbench源码分析
- TensorFlow学习(二):变量常量类型
- 高中OJ3783. 【NOIP2014模拟8.19】签到题
- 自定义view,继承ViewGroup实现可换行的布局容器
- linux cifs共享 修改user的uid
- Linux服务器下重启svn服务