脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap响应式布局

谈一谈bootstrap响应式布局

 更新时间：2016年05月23日 17:27:48   作者：HiveDark  
这篇文章主要和大家谈一谈bootstrap响应式布局，本教程讲解如何在网页布局中应用响应式设计，感兴趣的小伙伴们可以参考一下

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

搭建开发环境

首先下载官网的boostrap源码包：http://www.bootcss.com/. 开发简单的项目不必加入源码中的所有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。测试文件内容如下：

<!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/。官网的下图所在位置：

这里写图片描述

使用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>

网页查看结果如下：

这里写图片描述

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>

网页显示结果如下：

这里写图片描述

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

总结

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

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

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

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

您可能感兴趣的文章:

相关文章

  • JavaScript async/await使用详解

    JavaScript async/await使用详解

    任意一个名称都是有意义的，先从字面意思来理解。async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成
    2022-12-12
  • javascript dom追加内容实现示例

    javascript dom追加内容实现示例

    javascript dom追加内容的使用还是比较广泛的，在本文将为大家介绍下具体的使用方法，感兴趣的朋友可以参考下
    2013-09-09
  • uniapp几行代码解决滚动穿透问题(项目实战)

    uniapp几行代码解决滚动穿透问题(项目实战)

    这篇文章主要介绍了uniapp几行代码解决滚动穿透问题,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-01-01
  • JavaScript动态设置div的样式的方法

    JavaScript动态设置div的样式的方法

    这篇文章主要介绍了JavaScript动态设置div的样式的方法的相关资料,需要的朋友可以参考下
    2015-12-12
  • JavaScript详细分析数据类型和运算符

    JavaScript详细分析数据类型和运算符

    这篇文章主要介绍了JavaScript数据类型和运算符案例,结合实例形式分析了JavaScript数据类型和运算符特性与相关操作技巧,需要的朋友可以参考下
    2022-07-07
  • JS如何获取未来n天的时间(返回日期:yyyy-mm-dd,并且判断是否是今天和星期)

    JS如何获取未来n天的时间(返回日期:yyyy-mm-dd,并且判断是否是今天和星期)

    开发中经常遇到获取时间的业务,将常用的方法做个笔记记录下,对JS如何获取未来n天的时间相关知识感兴趣的朋友一起看看吧
    2024-03-03
  • JS数组方法shift()、unshift()用法实例分析

    JS数组方法shift()、unshift()用法实例分析

    这篇文章主要介绍了JS数组方法shift()、unshift()用法,结合实例形式分析了JavaScript数组shift()与unshift()方法功能、用法及相关操作注意事项,需要的朋友可以参考下
    2020-01-01
  • JavaScript数组去重的六种方式

    JavaScript数组去重的六种方式

    在平时的前端开发中,常常会遇到数组去重的场景,比如表单校验重复的数据,有重复数据不让提交,或者对后端返回的数据进行去重展示等,同时它也是一道经典的前端JavaScript基础面试题,本期一起来带大家看看去重的各种花样方法,需要的朋友可以参考下
    2024-12-12
  • JavaScript与jQuery实现的闪烁输入效果

    JavaScript与jQuery实现的闪烁输入效果

    这篇文章主要介绍了JavaScript与jQuery实现的闪烁输入效果,结合实例形式分别分析了JavaScript与jQuery实现闪烁输入效果的方法与具体使用技巧,需要的朋友可以参考下
    2016-02-02
  • 详解JavaScript中的强制类型转换

    详解JavaScript中的强制类型转换

    这篇文章主要介绍了JavaScript中的强制类型转换，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04

最新评论