编程 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 相关文章推荐

使用jQuery.Validate进行客户端验证（初级篇）不使用微软验证控件的理由

Jun 28 Javascript

原生js编写设为首页兼容ie、火狐和谷歌

Jun 05 Javascript

js创建一个input数组并绑定click事件的方法

Jun 12 Javascript

让checkbox不选中即将选中的checkbox不选中

Jul 11 Javascript

JS回调函数的应用简单实例

Sep 17 Javascript

浅谈Javascript中匀速运动的停止条件

Dec 19 Javascript

Javascript模仿淘宝信用评价实例(附源码)

Nov 26 Javascript

js实现StringBuffer的简单实例

Sep 02 Javascript

JS实现title标题栏文字不间断滚动显示效果

Sep 07 Javascript

JS实现物体带缓冲的间歇运动效果示例

Dec 22 Javascript

Web前端框架bootstrap实战【第一次接触使用】

Dec 28 Javascript

vue组件中使用props传递数据的实例详解

Apr 08 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

CI(CodeIgniter)框架配置

2014/06/10 PHP

php支付宝手机网页支付类实例

2015/03/04 PHP

laravel admin实现分类树/模型树的示例代码

2020/06/10 PHP

动态为事件添加js代码示例

2009/02/15 Javascript

使用iframe window的scroll方法控制iframe页面滚动

2014/03/05 Javascript

jquery插件开发之实现google+圈子选择功能

2014/03/10 Javascript

jQuery的3种请求方式$.post,$.get,$.getJSON

2014/03/28 Javascript

JS 弹出层定位至屏幕居中示例

2014/05/21 Javascript

Javascript中innerHTML用法实例分析

2015/01/12 Javascript

JS模拟bootstrap下拉菜单效果实例

2016/06/17 Javascript

jquery判断对象是否为空并遍历对象的简单实例

2016/07/26 Javascript

AngularJS 中的数据源的循环输出

2017/10/12 Javascript

Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码

2017/11/15 Javascript

vue-cli3全面配置详解

2018/11/14 Javascript

浅谈KOA2 Restful方式路由初探

2019/03/14 Javascript

JS使用百度地图API自动获取地址和经纬度操作示例

2019/04/16 Javascript

D3.js 实现带伸缩时间轴拓扑图的示例代码

2020/01/20 Javascript

用js限制网页只在微信浏览器中打开(或者只能手机端访问)

2020/12/24 Javascript

vue中利用iscroll.js解决pc端滚动问题

2020/02/15 Javascript

JavaScript创建表格的方法

2020/04/13 Javascript

如何使用JS console.log()技巧提高工作效率

2020/10/14 Javascript

[13:39]2014 DOTA2华西杯精英邀请赛 5 25 NewBee VS DK第一场

2014/05/26 DOTA

[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么

2014/06/20 DOTA

Django入门使用示例

2017/12/12 Python

PyTorch上实现卷积神经网络CNN的方法

2018/04/28 Python

python实现Flappy Bird源码

2018/12/24 Python

python实现转圈打印矩阵

2019/03/02 Python

python实现微信防撤回神器

2019/04/29 Python

python 追踪except信息方式

2020/04/25 Python

html5中JavaScript removeChild 删除所有节点

2014/05/16 HTML / CSS

2014教师研修学习体会

2014/07/08 职场文书

2014年纪检部工作总结

2014/11/12 职场文书

个人催款函范文

2015/06/23 职场文书

2015年秋学期教研工作总结

2015/10/14 职场文书

pycharm无法导入lxml的解决办法

2021/03/31 Python

Oracle数据库中通用的函数实例详解

2022/03/25 Oracle