Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统
栅格系统英文为“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编写一个同时适用于PC、平板、手机的登陆页面的使用技巧和注意事项，需要的朋友参考一下 Bootstrap如同前台框架，它已经布置好不少的CSS，前端开发的使用需要则直接调用即可。其网站的网址就是http://www.bootcss.com。使用Bootstrap能减少前端开发时候在CSS样子的布置
-
本文向大家介绍Bootstrap栅格系统的使用详解，包括了Bootstrap栅格系统的使用详解的使用技巧和注意事项，需要的朋友参考一下 前 言 Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 而栅格系统是Bootstrap中的核心，正是因为栅格系统的存在，Bootstrap才能有着如此强大的响应式布局方案。 一、什么是栅格系统
-
本文向大家介绍响应式框架Bootstrap栅格系统的实例，包括了响应式框架Bootstrap栅格系统的实例的使用技巧和注意事项，需要的朋友参考一下 实例如下： 效果显示图： 以上这篇响应式框架Bootstrap栅格系统的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍bootstrap栅格系统示例代码分享，包括了bootstrap栅格系统示例代码分享的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了bootstrap栅格系统的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍Bootstrap每天必学之栅格系统（布局），包括了Bootstrap每天必学之栅格系统（布局）的使用技巧和注意事项，需要的朋友参考一下 1、栅格系统（布局） Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。 我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）
-
本文向大家介绍Bootstrap布局之栅格系统学习笔记，包括了Bootstrap布局之栅格系统学习笔记的使用技巧和注意事项，需要的朋友参考一下 1、简介 Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。 2、栅格选项 boot