首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
javascript之bind使用介绍
Oct 09 Javascript
html+js实现动态显示本地时间
Sep 21 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
jQuery+PHP实现微信转盘抽奖功能的方法
May 25 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
js输出数据精确到小数点后n位代码
Jul 02 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
webpack 代码分离优化快速指北
May 18 Javascript
vue-property-decorator用法详解
Dec 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
Excel(4) 信息校验(1) 抽象类(1) 自动播放(1) 驱动模型(1) 接口(1) 乱码(3) 正则表达式(3) 静态压缩(1) 分区(2)
You might like
php静态文件生成类实例分析
2015/01/03 PHP
Laravel中如何增加自定义全局函数详解
2017/05/09 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
php命名空间设计思想、用法与缺点分析
2019/07/17 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
javascript中全局对象的isNaN()方法使用介绍
2013/12/19 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
JavaScript队列函数和异步执行详解
2017/06/19 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
Python尾递归优化实现代码及原理详解
2020/10/09 Python
德国足球商店：OUTFITTER
2019/05/06 全球购物
Optimalprint加拿大：在线打印服务
2020/04/03 全球购物
企划专员岗位职责
2013/12/09 职场文书
辞职信格式模板
2015/02/27 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
离职信范本
2015/06/23 职场文书
学前班教学反思
2016/02/24 职场文书
python之django路由和视图案例教程
2021/07/26 Python
springboot中的pom文件 project报错问题
2022/01/18 Java/Android