谈一谈bootstrap响应式布局


Posted in Javascript onMay 23, 2016

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

搭建开发环境

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

谈一谈bootstrap响应式布局

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

测试bootsrap环境

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

<!DOCTYPE html>
<html>
<head>
 <title>测试boostrap环境</title>
 <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
 <script type="text/javascript" src="./js/jquery.min.js"></script>
 <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
</body>
</html>

以上就搭建好了bootsrap开发环境。很简单吧!
使用boostrap必须要了解的就是boostrap的栅格系统。正是由于这栅格系统才使得更好的兼容不同分辨率的终端设备。
具体的栅格系统官网有清晰的介绍:http://v3.bootcss.com/css/。官网的下图所在位置:

谈一谈bootstrap响应式布局

使用boostrap时,我们主要是使用里面已定义好的一些样式。这对一个没有美工能力的程序而言,快速搭建一个还不错的页面是很有帮助的。

在实际使用bootstrap的时候,我们经常查看官网的一些帮助文档:http://v3.bootcss.com/css/#tables 。
个人建议直接在官网的示例中copy相关的代码到自己的网页中,再在此基础之上做出相关的修改,这样的开发速度会更快并且准确率会更高。

演示一些boostrap样式---table样式。

<!DOCTYPE html>
<html>
<head>
 <title>测试boostrap环境</title>
 <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
 <script type="text/javascript" src="./js/jquery.min.js"></script>
 <script type="text/javascript" src="./js/bootstrap.min.js"></script>
</head>
<body>
 <table class="table table-hover table-bordered table-striped">
 <tr>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
 </tr>
 <tr>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
 </tr>
 <tr>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
 </tr>
 <tr>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
 </tr>
 <tr>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
  <td>测试表格</td>
 </tr>
 </table>
</body>
</html>

网页查看结果如下:

谈一谈bootstrap响应式布局

class 里属性介绍:

1)table 加上这个就已经有bootsrap的表格样式
2)table-hover 表示表格鼠标停留的行背景高亮
3)table-bordered 表格出现边框
4)table-striped 表格条纹
【注】多个属性相加时,各个属性之间有空格

2. button

<!--Button-->
 <a class="btn btn-default" href="#" role="button">Link</a>
 <button class="btn btn-default" type="submit">Button</button>
 <input class="btn btn-default" type="button" value="Input">
 <input class="btn btn-default" type="submit" value="Submit">

 <!-- Standard button -->
 <button type="button" class="btn btn-default">(默认样式)Default</button>

 <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
 <button type="button" class="btn btn-primary">(首选项)Primary</button>

 <!-- Indicates a successful or positive action -->
 <button type="button" class="btn btn-success">(成功)Success</button>

 <!-- Contextual button for informational alert messages -->
 <button type="button" class="btn btn-info">(一般信息)Info</button>

 <!-- Indicates caution should be taken with this action -->
 <button type="button" class="btn btn-warning">(警告)Warning</button>

 <!-- Indicates a dangerous or potentially negative action -->
 <button type="button" class="btn btn-danger">(危险)Danger</button>

 <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
 <button type="button" class="btn btn-link">(链接)Link</button>

网页显示结果如下:

谈一谈bootstrap响应式布局

很多其他的一些样式和组件,还是建议参考官方的帮助文档。

总结

本文算是一个引导吧,简单介绍了boostrap是干什么的和怎么去使用。并没有详细列出所有的组件和样式,但是……往下看!

这是一篇非常神奇的文章,一定要点进去看一看:值得分享和收藏的Bootstrap学习教程

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

希望对Bootstrap感兴趣的能够自己手动地去测试每一种样式的效果和各个组件怎么使用,真正感受Bootstrap带来的乐趣。

Javascript 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
关于js获取radio和select的属性并控制的代码
May 12 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
Mar 30 Javascript
ES6新特性六:promise对象实例详解
Apr 21 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
Nov 22 Javascript
深入理解移动前端开发之viewport
Oct 19 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
May 23 #Javascript
JavaScript的Vue.js库入门学习教程
May 23 #Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 #Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 #Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 #Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 #Javascript
jQuery插件formValidator实现表单验证
May 23 #Javascript
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
2013/06/24 PHP
php中Snoopy类用法实例
2015/06/19 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
Js 去掉字符串中的空格(实现代码)
2013/11/19 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
JavaScript中string对象
2015/06/12 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
2019/02/13 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
JavaScript常用工具函数大全
2020/05/06 Javascript
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
Django 请求Request的具体使用方法
2019/11/11 Python
python能自学吗
2020/06/18 Python
python调用摄像头的示例代码
2020/09/28 Python
Python实现区域填充的示例代码
2021/02/03 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
英国儿童鞋和靴子:Start-Rite
2019/05/06 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
英国领先的隐形眼镜在线供应商:Lenstore.co.uk
2019/11/24 全球购物
正科级干部考察材料
2014/05/29 职场文书
学习型党组织心得体会
2014/09/12 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
银行招聘自荐信
2015/03/06 职场文书
八年级作文之友情
2019/11/25 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android