bootstrap自动适应pc、平板、手机的bootstrap栅格系统_javascript技巧

《bootstrap自动适应pc、平板、手机的bootstrap栅格系统_javascript技巧》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统栅格系统英文为“gridsystems”,也有人翻译为“网格系统”,运用固定的格子设计版而布局，其风格工整简洁，在二战后大受欢迎，已成为今H出版物设计的主流风格之一。1692年，新登基的法国国王路易十四感到法国的卬刷水平差强人意，因此命令成立一个管理印刷的皇家特别委员会。他们的首要任务是设计出科学的、合理的,重视功能性的新字体。委员会曲数学家尼古拉斯加宗(NicolasJaugeon)扌口任领导，他们以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本

2、方格单位，每个方格单位再分成36个小格，这样，一个印刷版而就有2304个小格组成，在这个严谨的儿何网格网络中设计字体的形状，版面的编排，试验传达功能的效能，这是世界上最早对字体和版面进行科学实验的活动，也是栅格系统最早的雏形。我给网页栅格系统卜•的定义为：以规则的网格阵列來指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平而栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。Bootstrap提供了一套响应式、移动设备优先的

3、流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。也就是说Bootstrap把一个元素的宽度划分成12份。我们则在这个被划分成12份的行安排元素。一、基本目标制作如下的两行，这两行因为设备的不同里面各个单元格的宽度会改变：AAAA在手机小屏幕上，上行A占2份B占10份，AB分享了这12份，下行A占1份B占1份C占10份，ABC分享了这12份。在平板的中等屏幕上，上行A占8份B占4份，AB分享了这12份，下行A占10份B占1份

4、C占1份，ABC分享了这12份。在PC的大屏幕上，上行A占4份B占8份，AB分享了这12份，下行A占1份B占10份C占1份，ABC分享了这12份。二、制作过程先在网页文件夹中配置好Bootstrap,在官网（点击打开链接）下载组件即可，用于生产环境的Bootstrap版本（点击打开链接）,Bootstrap3对2并不兼容,建议直接根据其开发文档使用Bootstrap3o将Bootstrap解压之后把得到的3个文件夹css,fonts,js拷贝到站点目录下面。如果是Eclipse的JSPWebProject的话就把它们放到WebRo

5、ot文件夹下面。之后代码如下，详情请看注释：网页编码，要使用的外部文件，自动适应屏幕一>

6、f-8〃/>〈linkhrcf=z，css/bootstrap.css"rcl二〃stylesheet"mcdia=/zscrccn">〈!一使用Bootstrap如果不使用而板的话，要把元素放进一个占满100%屏幕的容器里-->

7、ss二〃container-fluid〃>〈!一同一对的元素之和必须等于12,否则出现错误，如A的col-xs-2+B的col-xsTO是等于12的-->A