酒吧格英语作为一门系统“grid systems”，也有人翻译成“网络格系统”。使用固定格子设计布局，其风格整齐而简洁，在二战结束后人气，流风格之中的一个。

1692年，新登基的法国国王路易十四感到法国的印刷水平差强人意。因此命令成立一个管理印刷的皇家特别委员会。

他们的首要任务是设计出科学的、合理的。 重视功能性的新字体。委员会由数学家尼古拉斯加宗（Nicolas Jaugeon）担任领导。他们以罗马体为基础，採用方格为设计根据，每一个字体方格分为64个基本方格单位，每一个方格单位再分成36个小格，这样，一个印刷版面就有2304个小格组成，在这个严谨的几何网格网络中设计字体的形状，版面的编排，试验传达功能的效能。这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。

我给网页栅格系统下的定义为：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。

对于网页设计来说。栅格系统的使用。不仅能够让网页的信息呈现更加美观易读，更具可用性。并且。对于前端开发来说。网页将更加的灵活与规范。

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

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

一、基本目标

制作例如以下的两行。这两行由于设备的不同里面各个单元格的宽度会改变：

在手机小屏幕上，上行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>

【Bootstrap】自己主动去适应PC、平面、手机Bootstrap网格系统的更多相关文章

  1. 【ASP.NET】判断访问网站的客户端是PC还是手机

    原文:[ASP.NET]判断访问网站的客户端是PC还是手机 主要就是通过客户端传递的User-agent来判断访问网站的客户端是PC还是手机,.NET中就是Request.ServerVariable ...

  2. 【ASP.NET 进阶】判断访问网站的客户端是PC还是手机

    主要就是通过客户端传递的User-agent来判断访问网站的客户端是PC还是手机,.NET中就是Request.ServerVariables["HTTP_USER_AGENT"] ...

  3. Android 使用代码主动去调用控件的点击事件（模拟人手去触摸控件）

    使用代码主动去调用控件的点击事件(模拟人手去触摸控件) //View 可以是LinearLayout,Button,TextView View.performClick();

  4. 网页中插入外部视频的几种方法（PC与手机网页通用）

    网页中加入视频的几种方法(PC与手机网页通用) 方法一: <!doctype html> <html> <head> <meta charset=" ...

  5. Nginx配置网站适配PC和手机

    考虑到网站的在多种设备下的兼容性,有很多网站会有手机版和电脑版两个版本.访问同一个网站URL,当服务端识别出用户使用电脑访问,就打开电脑版的页面,用户如果使用手机访问,则会得到手机版的页面. 1.判断 ...

  6. 【转】Nginx区分PC或手机访问不同网站

    原文链接:http://www.nginx.cn/784.html 近几年来,随着手机和pad的普及,越来越多的用户选择使用移动客户端访问网站,而为了获取更好的用户体验,就需要针对不同的设备显示出最合 ...

  7. JS判断登陆端是PC还是手机

    前些天朋友问我怎么判断登陆端是PC还是手机...自己也是很困惑,然后自己查了资料,这些东西都藏在USER-AGENT里面,查了他的一些属性,写了一个简单的验证页面大家共同学习. 读取navigator ...

  8. 我想要个pc和手机共有的客户端，就像百度云（iBarn网盘好用）

    https://github.com/zhimengzhe/iBarn iBarn网盘是一个基于PHP开发的先进的云存储系统,提供文件的网络备份,同步和分享服务:支持断点续传,秒传等功能:可选择文件下 ...

  9. Nginx配置站点适配PC和手机

    考虑到站点的在多种设备下的兼容性,有非常多站点会有手机版和电脑版两个版本号.訪问同一个站点URL,当服务端识别出用户使用电脑訪问.就打开电脑版的页面,用户假设使用手机訪问,则会得到手机版的页面. 1. ...

随机推荐

  1. Wix学习整理（6）——安装快捷方式

    原文:Wix学习整理(6)--安装快捷方式 一 为HelloWorld案例添加安装快捷方式 通常我们安装一个应用软件的时候,都喜欢在桌面或开始菜单中添加快捷方式以便我们快速访问.现在我们就在上篇添加注 ...

  2. 【译】ASP.NET MVC 5 教程 - 1：入门

    原文:[译]ASP.NET MVC 5 教程 - 1:入门 本教程将教你使用Visual Studio 2013 预览版构建 ASP.NET MVC 5 Web 应用程序 的基础知识.本主题还附带了一 ...

  3. Django写的投票系统2（转）

    在上一篇中 django实例:创建你的第一个应用投票系统(一) 已经介绍基本的功能,并已经启动服务了.这一节介绍数据库相关的东东. 首页打开mysite/settings.py配置文件, 设置数据库打 ...

  4. POJ 1422 Air Raid（二分图匹配最小路径覆盖）

    POJ 1422 Air Raid 题目链接 题意:给定一个有向图,在这个图上的某些点上放伞兵,能够使伞兵能够走到图上全部的点.且每一个点仅仅被一个伞兵走一次.问至少放多少伞兵 思路:二分图的最小路径 ...

  5. Java的内存泄漏和垃圾回收机制

    JAVA会产生内存泄露吗?首先,答案是肯定的. Java尽管有垃圾回收器,但依旧存在泄漏. Java内存泄漏跟C/C++内存泄漏的概念不一样:C/C++的内存泄漏是指Malloc了一些资源.最后没有f ...

  6. Git管理工具对照（GitBash、EGit、SourceTree）

    Git管理工具对照(GitBash.EGit.SourceTree) GitBash是採用命令行的方式对版本号进行管理,功能最为灵活强大,可是由于须要手动输入希望改动的文件名称,所以相对繁琐. EGi ...

  7. Android平台调用Web Service：螺纹的引入

    连接文本 剩下的问题 MainActivity的onCreate方法中假设没有有这段代码: // 强制在UI线程中操作 StrictMode.setThreadPolicy(new StrictMod ...

  8. 此文本文件包含的数据无法放置在一个工作表中 gb2312

    excel导入csv,csv要从unicode转为gb2312, 否则提示:此文本文件包含的数据无法放置在一个工作表中

  9. WebKit介绍和总结（一）

    一 . WebKit 简单介绍 Webkit 是一个开放源码的浏览器引擎 (web browser engine) ,最初的代码来自 KDE 的 KHTML 和 KJS( 均开放源码 ) . 苹果公司 ...

  10. Intent有可能的使用（两）

    Intent作为联系各Activity之间的纽带,其作用并不只只限于简单的数据传递. 通过其自带的属性.事实上能够方便的完毕非常多较为复杂的操作. 比如直接调用拨号功能.直接自己主动调用合适的程序打开 ...