Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统


Posted in Javascript onMay 27, 2016

栅格系统英文为“grid systems”,也有人翻译为“网格系统”,运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一。

1692年,新登基的法国国王路易十四感到法国的印刷水平差强人意,因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的, 重视功能性的新字体。委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方格单位,每个方格单位再分成36个小格,这样,一个印刷版面就有2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是世界上最早对字体和版面进行科学实验的活动,也是栅格系统最早的雏形。

我给网页栅格系统下的定义为:以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说,栅格系统的使用,不仅可以让网页的信息呈现更加美观易读,更具可用性。而且,对于前端开发来说,网页将更加的灵活与规范。

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。

也就是说Bootstrap把一个元素的宽度划分成12份。我们则在这个被划分成12份的行安排元素。

一、基本目标

制作如下的两行,这两行因为设备的不同里面各个单元格的宽度会改变:

Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统

在手机小屏幕上,上行A占2份B占10份,AB分享了这12份,下行A占1份B占1份C占10份,ABC分享了这12份。

在平板的中等屏幕上,上行A占8份B占4份,AB分享了这12份,下行A占10份B占1份C占1份,ABC分享了这12份。

在PC的大屏幕上,上行A占4份B占8份,AB分享了这12份,下行A占1份B占10份C占1份,ABC分享了这12份。

二、制作过程

先在网页文件夹中配置好Bootstrap,在官网(点击打开链接)下载组件即可,用于生产环境的Bootstrap版本(点击打开链接),Bootstrap3对2并不兼容,建议直接根据其开发文档使用Bootstrap3。将Bootstrap解压之后把得到的3个文件夹css,fonts,js拷贝到站点目录下面。如果是Eclipse的JSP Web Project的话就把它们放到WebRoot文件夹下面。

之后代码如下,详情请看注释:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--网页编码,要使用的外部文件,自动适应屏幕-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<meta name="viewport"
content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>栅格系统</title>
</head>
<body>
<!--使用Bootstrap如果不使用面板的话,要把元素放进一个占满100%屏幕的容器里-->
<!--class="container"则自动居中-->
<div class="container-fluid">
<!--定义一行-->
<div class="row">
<!--xs代表手机小屏幕,md代表平板中屏幕,lg代表PC大屏幕-->
<!--同一对的元素之和必须等于12,否则出现错误,如A的col-xs-2+B的col-xs-10是等于12的-->
<!--bg-warning是定义浅黄色的背景色-->
<div class="col-xs-2 col-md-8 col-lg-4 bg-warning">
A
</div>
<div class="col-xs-10 col-md-4 col-lg-8 bg-primary">
B
</div>
</div>
<div class="row">
<!--这里的道理与上面的一样,A的col-xs-1+B的col-xs-1+C的col-xs-10是等于12的-->
<div class="col-xs-1 col-md-10 col-lg-1 bg-warning">
A
</div>
<div class="col-xs-1 col-md-1 col-lg-10 bg-primary">
B
</div>
<div class="col-xs-10 col-md-1 col-lg-1 bg-success">
C
</div>
</div>
</div>
</body>
</html>
Javascript 相关文章推荐
javascript控制swfObject应用介绍
Nov 29 Javascript
JavaScript中的字符串操作详解
Nov 12 Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 Javascript
js获取会话框prompt的返回值的方法
Jan 10 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
ECMAScript6快速入手攻略
Jul 18 Javascript
vue中如何实现后台管理系统的权限控制的方法示例
Sep 19 Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
Vue的Options用法说明
Aug 14 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
Sep 08 Javascript
Bootstrap3.0学习教程之JS折叠插件
May 27 #Javascript
全面解析多种Bootstrap图片轮播效果
May 27 #Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 #Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
May 27 #Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 #Javascript
非常酷炫的Bootstrap图片轮播动画
May 27 #Javascript
Bootstrap安装环境配置教程分享
May 27 #Javascript
You might like
PHP以及MYSQL日期比较方法
2012/11/29 PHP
浅谈discuz密码加密的方式
2014/05/22 PHP
ThinkPHP实现递归无级分类――代码少
2015/07/29 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
JS HTML5 音乐天气播放器(Ajax获取天气信息)
2013/05/26 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
js实现select跳转菜单新窗口效果代码分享(超简单)
2015/08/21 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
详解实现一个通用的“划词高亮”在线笔记功能
2019/04/23 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
Python原始字符串(raw strings)用法实例
2014/10/13 Python
Linux下Python获取IP地址的代码
2014/11/30 Python
Django中使用locals()函数的技巧
2015/07/16 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
在Keras中利用np.random.shuffle()打乱数据集实例
2020/06/15 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
使用CSS3实现字体颜色渐变的实现
2020/08/10 HTML / CSS
倩碧美国官网:Clinique美国
2016/07/20 全球购物
NARS化妆品官方商店:美国彩妆品牌
2017/08/26 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
教师自荐书
2013/10/08 职场文书
医学院护理专业应届生求职信
2013/11/12 职场文书
项目开发计划书
2014/01/09 职场文书
太空授课观后感
2015/06/17 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers