编程 Javascript

谈一谈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带来的乐趣。

谈一谈bootstrap响应式布局

- Author -

HiveDark

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

得到文本框选中的文字，动态插入文字的js代码

Mar 07 Javascript

jQuery 第二课操作包装集元素代码

Mar 14 Javascript

ExtJS自定义主题（theme）样式详解

Nov 18 Javascript

基于jquery异步传输json数据格式实例代码

Nov 23 Javascript

Sublime Text 3常用插件及安装方法

Dec 16 Javascript

详解js中Json的语法与格式

Nov 22 Javascript

js获取html页面代码中图片地址的实现代码

Mar 05 Javascript

详解webpack自定义loader初探

Aug 29 Javascript

js事件on动态绑定数据,绑定多个事件的方法

Sep 15 Javascript

AngularJS 多指令Scope问题的解决

Oct 25 Javascript

vue element upload实现图片本地预览

Aug 20 Javascript

vue 获取元素额外生成的data-v-xxx操作

Sep 09 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编写和读取XML的几种方式

2013/01/12 PHP

php实现微信公众平台账号自定义菜单类

2014/12/02 PHP

浅谈使用PHP开发微信支付的流程

2015/10/04 PHP

PHP统计当前在线用户数实例讲解

2015/10/21 PHP

iOS+PHP注册登录系统 PHP部分（上）

2016/12/26 PHP

PHP实现的多维数组去重操作示例

2018/07/21 PHP

javascript的函数、创建对象、封装、属性和方法、继承

2011/03/10 Javascript

读jQuery之五（取DOM元素）

2011/06/20 Javascript

js禁止document element对象选中文本实现代码

2013/03/21 Javascript

js实现页面转发功能示例代码

2013/08/05 Javascript

javascript中如何处理引号编码&#034;

2013/08/15 Javascript

jquery操作复选框(checkbox)的12个小技巧总结

2014/02/04 Javascript

javascript限制用户只能输汉字中文的方法

2014/11/20 Javascript

Angular4实现动态添加删除表单输入框功能

2017/08/11 Javascript

Vue使用json-server进行后端数据模拟功能

2018/04/17 Javascript

在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法

2018/11/28 Javascript

react中使用css的7中方式(最全总结)

2019/02/11 Javascript

Vue最新防抖方案(必看篇)

2019/10/30 Javascript

vue中使用vue-print.js实现多页打印

2020/03/05 Javascript

基于vue.js仿淘宝收货地址并设置默认地址的案例分析

2020/08/20 Javascript

详解JavaScript的this指向和绑定

2020/09/08 Javascript

用实例分析Python中method的参数传递过程

2015/04/02 Python

Python制作钉钉加密/解密工具

2016/12/07 Python

python机器学习案例教程——K最近邻算法的实现

2017/12/28 Python

对numpy中向量式三目运算符详解

2018/10/31 Python

PyQt5实现QLineEdit添加clicked信号的方法

2019/06/25 Python

python中对数据进行各种排序的方法

2019/07/02 Python

Python实现手机号自动判断男女性别(实例解析)

2019/12/22 Python

澳大利亚最大的网上油画销售画廊：Direct Art Australia

2018/04/15 全球购物

个人充满哲理的自我评价

2014/02/20 职场文书

个人授权委托书

2014/04/03 职场文书

毕业生见习报告总结

2014/11/08 职场文书

2014年政协委员工作总结

2014/12/01 职场文书

检讨书范文大全

2015/05/07 职场文书

入党介绍人考察意见

2015/06/01 职场文书

教师节校长致辞

2015/07/31 职场文书