谈一谈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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
jquery修改属性值实例代码(设置属性值)
Jan 06 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
Aug 31 Javascript
layui实现动态和静态分页
Apr 28 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 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 SEO优化之URL优化方法
2011/04/21 PHP
php抽奖小程序的实现代码
2013/06/18 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP cURL获取微信公众号access_token的实例
2018/04/28 PHP
微信公众号实现扫码获取微信用户信息(网页授权)
2019/04/09 PHP
从新浪弄下来的全屏广告代码 与使用说明
2007/03/15 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
js实现抽奖功能
2020/11/24 Javascript
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
Python 可爱的大小写
2008/09/06 Python
python网络编程之数据传输UDP实例分析
2015/05/20 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
TensorFlow车牌识别完整版代码(含车牌数据集)
2019/08/05 Python
python如何保存文本文件
2020/06/07 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
美国著名珠宝品牌之一:Jared The Galleria Of Jewelry
2016/10/01 全球购物
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
Charles & Colvard官网:美国莫桑石品牌
2019/06/05 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
平面设计岗位职责
2013/12/14 职场文书
如何写求职信
2014/05/24 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
关于军训的感想
2015/08/07 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电