微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

谈一谈bootstrap响应式布局

随着移动端的用户越来越多,传统的web系统架构无法兼容很多移动终端的正常使用。在工作中也会发现,现在很多的客户都有在手机、平板等移动终端上使用管理系统的需求。如果单独为每一个终端开发相应的响应网页,这必定增加项目的成本和开发人员的压力。这时候了解响应式布局就很有必要,响应式布局就是为解决多终端问题而生的。本次介绍的是轻量级、开源的、免费的bootstrap。

搭建开发环境

首先下载官网的boostrap源码包:. 开发简单的项目不必加入源码中的所有css、js和字体等。根据自己的项目需求可以裁剪出自己需要的环境。 必须的文件有以下几个:jquery.min.js 、bootstrap.min.js、bootstrap.css。如果需要使用到其中的一些字体样式等,还需要加入字体相关的文件,如下图所示:

这里写图片描述

【注】加载js时,必须先加载jquery.min.js,这是因为在bootstrap.min.js会使用到jQuery相关的方法即boostrap.min.js依赖于jquery.min.js。

测试bootsrap环境

写一个测试文件index.html。测试文件内容如下:

测试boostrap环境

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐